feat(M14): 3-pane backlog — generic SplitPane, BacklogStore, SSE realtime, card-grid TaskPanel (#22)
* feat(split-pane): refactor to generic n-pane SplitPane with cookie persistence New API: panes[], defaultSplit[], cookieKey, tabLabels. Supports arbitrary number of panes with n-1 draggable dividers and JSON cookie persistence. Replaces TriplePane; mobile renders tabs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(split-pane): migrate callers to new panes[] API Backlog page and sprint board now use generic SplitPane. TriplePane removed; sprint board uses 3-pane with defaultSplit=[28,35,37]. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(split-pane): add unit tests for 2/3-pane, cookie-restore, mobile tabs Added jsdom + @testing-library/react devDeps for component testing. 7 cases: render, divider count, cookie restore, invalid cookie fallback, mobile tab render/switch, and no-dividers-on-mobile. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): add BacklogStore Zustand store with applyChange reducer State: pbis, storiesByPbi, tasksByStory. setInitialData for server hydration; applyChange(entity, op, data) handles I/U/D for SSE events. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): server-fetch tasks + hydrate BacklogStore on page load Page now fetches tasks parallel to stories and groups by story_id. BacklogHydrationWrapper calls setInitialData on mount so the store is ready for downstream SSE consumers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): add EmptyPanel shared component, replace inline empty states EmptyPanel takes title?, message, and optional action with DemoTooltip. Replaces duplicate inline empty-state markup in pbi-list and story-panel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): add TaskPanel with sortable rows and TaskDialog wiring Reads selectedStoryId + tasksByStory from stores. DnD reorder via reorderTasksAction. Row click → ?editTask, + button → ?newTask&storyId. DemoTooltip on drag handles and + button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): wire TaskPanel + TaskDialog into backlog page 3-pane SplitPane [20,45,35]. searchParams for newTask/editTask. TaskDialog and EditTaskLoader render on ?newTask and ?editTask. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(backlog): add TaskPanel tests for render states and click handlers 7 cases: no-story empty, no-tasks empty+action, tasks render, + button router.push, row click router.push, demo disabled button, demo disabled handles. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): migrate PbiList to store-driven via useBacklogStore Removes pbis prop; reads from useBacklogStore(s => s.pbis) so SSE updates reflect in real-time without prop drilling. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): migrate StoryPanel to store-driven + selectStory on click Removes storiesByPbi prop; reads from useBacklogStore. Card click now dispatches selectStory(id) + shows isSelected highlight. Edit moved to inline pencil button. page.tsx drops pbis/storiesByPbi props. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(backlog): add 3-pane integration tests for click-cascade flow Covers: empty states, PBI→stories, story→tasks, cascade-reset, isSelected highlight. localStorage mocked for sort-mode persistence. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1115): SSE backlog realtime — endpoint, hook, hydration mount, tests Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1116): mobile auto-switch tabs + back button in BacklogSplitPane Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(ST-1116): update functional-spec (3-pane backlog + mobile) and architecture (backlog SSE + backlog-store) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1117): TaskPanel card-grid — BacklogCard + rectSortingStrategy, tests updated Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(tests): correct PbiStatusApi type and remove duplicate mock keys Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
GitHub
parent
6cd98129f2
commit
8877ea469d
22 changed files with 2474 additions and 305 deletions
30
components/backlog/backlog-hydration-wrapper.tsx
Normal file
30
components/backlog/backlog-hydration-wrapper.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useBacklogStore, type BacklogPbi, type BacklogStory, type BacklogTask } from '@/stores/backlog-store'
|
||||
import { useBacklogRealtime } from '@/lib/realtime/use-backlog-realtime'
|
||||
|
||||
interface InitialData {
|
||||
pbis: BacklogPbi[]
|
||||
storiesByPbi: Record<string, BacklogStory[]>
|
||||
tasksByStory: Record<string, BacklogTask[]>
|
||||
}
|
||||
|
||||
interface BacklogHydrationWrapperProps {
|
||||
initialData: InitialData
|
||||
productId: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function BacklogHydrationWrapper({ initialData, productId, children }: BacklogHydrationWrapperProps) {
|
||||
const setInitialData = useBacklogStore((s) => s.setInitialData)
|
||||
|
||||
useEffect(() => {
|
||||
setInitialData(initialData)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
useBacklogRealtime(productId)
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
34
components/backlog/backlog-split-pane.tsx
Normal file
34
components/backlog/backlog-split-pane.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { SplitPane, type SplitPaneProps } from '@/components/split-pane/split-pane'
|
||||
|
||||
type Props = Omit<SplitPaneProps, 'activeTab' | 'onActiveTabChange'>
|
||||
|
||||
export function BacklogSplitPane(props: Props) {
|
||||
const { selectedPbiId, selectedStoryId } = useSelectionStore()
|
||||
const [activeTab, setActiveTab] = useState(0)
|
||||
|
||||
// React-recommended "derived state from props" pattern: update state during render
|
||||
// instead of useEffect to avoid cascading renders.
|
||||
const [prevPbiId, setPrevPbiId] = useState(selectedPbiId)
|
||||
const [prevStoryId, setPrevStoryId] = useState(selectedStoryId)
|
||||
|
||||
if (selectedStoryId !== prevStoryId) {
|
||||
setPrevStoryId(selectedStoryId)
|
||||
if (selectedStoryId) setActiveTab(2)
|
||||
}
|
||||
if (selectedPbiId !== prevPbiId) {
|
||||
setPrevPbiId(selectedPbiId)
|
||||
if (selectedPbiId && !selectedStoryId) setActiveTab(1)
|
||||
}
|
||||
|
||||
return (
|
||||
<SplitPane
|
||||
{...props}
|
||||
activeTab={activeTab}
|
||||
onActiveTabChange={setActiveTab}
|
||||
/>
|
||||
)
|
||||
}
|
||||
35
components/backlog/empty-panel.tsx
Normal file
35
components/backlog/empty-panel.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
'use client'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
|
||||
interface EmptyPanelProps {
|
||||
title?: string
|
||||
message: string
|
||||
action?: {
|
||||
label: string
|
||||
onClick: () => void
|
||||
disabled?: boolean
|
||||
}
|
||||
}
|
||||
|
||||
export function EmptyPanel({ title, message, action }: EmptyPanelProps) {
|
||||
return (
|
||||
<div className="p-8 text-center text-muted-foreground space-y-3">
|
||||
{title && <p className="text-sm font-medium text-foreground">{title}</p>}
|
||||
<p className="text-sm">{message}</p>
|
||||
{action && (
|
||||
<DemoTooltip show={action.disabled ?? false}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={action.disabled}
|
||||
onClick={action.disabled ? undefined : action.onClick}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -27,11 +27,13 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
|
|||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { usePlannerStore } from '@/stores/planner-store'
|
||||
import { useBacklogStore } from '@/stores/backlog-store'
|
||||
import { deletePbiAction } from '@/actions/pbis'
|
||||
import { reorderPbisAction, updatePbiPriorityAction } from '@/actions/stories'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { PbiDialog, type PbiDialogState } from './pbi-dialog'
|
||||
import { BacklogCard } from './backlog-card'
|
||||
import { EmptyPanel } from './empty-panel'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { PRIORITY_COLORS } from '@/components/shared/priority-select'
|
||||
import { PBI_STATUS_LABELS, PBI_STATUS_COLORS } from '@/components/shared/pbi-status-select'
|
||||
|
|
@ -115,7 +117,6 @@ interface Pbi {
|
|||
|
||||
interface PbiListProps {
|
||||
productId: string
|
||||
pbis: Pbi[]
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
|
|
@ -194,7 +195,8 @@ function SortablePbiRow({
|
|||
}
|
||||
|
||||
// --- Main component ---
|
||||
export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
||||
export function PbiList({ productId, isDemo }: PbiListProps) {
|
||||
const pbis = useBacklogStore((s) => s.pbis)
|
||||
const { selectedPbiId, selectPbi } = useSelectionStore()
|
||||
const { pbiOrder, pbiPriority, initPbis, reorderPbis, rollbackPbis, updatePbiPriority } = usePlannerStore()
|
||||
// Defaults match SSR; persisted values applied post-mount in the loader effect below.
|
||||
|
|
@ -417,14 +419,10 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{pbis.length === 0 ? (
|
||||
<div className="p-8 text-center text-muted-foreground text-sm space-y-3">
|
||||
<p>Nog geen PBI's aangemaakt.</p>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button size="sm" variant="outline" disabled={isDemo} onClick={() => !isDemo && setDialogState({ mode: 'create', productId, defaultPriority: 2 })}>
|
||||
Maak je eerste PBI aan
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
</div>
|
||||
<EmptyPanel
|
||||
message="Nog geen PBI's aangemaakt."
|
||||
action={{ label: 'Maak je eerste PBI aan', onClick: () => setDialogState({ mode: 'create', productId, defaultPriority: 2 }), disabled: isDemo }}
|
||||
/>
|
||||
) : (
|
||||
<DndContext
|
||||
id="pbi-list"
|
||||
|
|
|
|||
|
|
@ -27,9 +27,11 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
|
|||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { usePlannerStore } from '@/stores/planner-store'
|
||||
import { useBacklogStore } from '@/stores/backlog-store'
|
||||
import { reorderStoriesAction } from '@/actions/stories'
|
||||
import { StoryDialog, type StoryDialogState } from './story-dialog'
|
||||
import { BacklogCard } from './backlog-card'
|
||||
import { EmptyPanel } from './empty-panel'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
|
|
@ -59,17 +61,20 @@ export interface Story {
|
|||
|
||||
interface StoryPanelProps {
|
||||
productId: string
|
||||
storiesByPbi: Record<string, Story[]>
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
// --- Sortable story block ---
|
||||
function SortableStoryBlock({
|
||||
story,
|
||||
onClick,
|
||||
isSelected,
|
||||
onSelect,
|
||||
onEdit,
|
||||
}: {
|
||||
story: Story
|
||||
onClick: () => void
|
||||
isSelected: boolean
|
||||
onSelect: () => void
|
||||
onEdit: () => void
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: story.id,
|
||||
|
|
@ -91,19 +96,33 @@ function SortableStoryBlock({
|
|||
code={story.code}
|
||||
priority={story.priority}
|
||||
isDragging={isDragging}
|
||||
onClick={onClick}
|
||||
isSelected={isSelected}
|
||||
onClick={onSelect}
|
||||
badge={
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status] ?? story.status}
|
||||
</Badge>
|
||||
}
|
||||
actions={
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onEdit() }}
|
||||
className="text-muted-foreground hover:text-foreground p-0.5 rounded transition-colors"
|
||||
aria-label="Story bewerken"
|
||||
>
|
||||
<svg className="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Main component ---
|
||||
export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps) {
|
||||
const { selectedPbiId } = useSelectionStore()
|
||||
export function StoryPanel({ productId, isDemo }: StoryPanelProps) {
|
||||
const { selectedPbiId, selectedStoryId, selectStory } = useSelectionStore()
|
||||
const storiesByPbi = useBacklogStore((s) => s.storiesByPbi)
|
||||
const { storyOrder, initStories, reorderStories, rollbackStories } = usePlannerStore()
|
||||
const [filterStatus, setFilterStatus] = useState<string | null>(null)
|
||||
const [filterPriority, setFilterPriority] = useState<number | null>(null)
|
||||
|
|
@ -242,20 +261,12 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{selectedPbiId === null ? (
|
||||
<p className="text-sm text-muted-foreground text-center mt-8">
|
||||
Selecteer een PBI om de stories te bekijken.
|
||||
</p>
|
||||
<EmptyPanel message="Selecteer een PBI om de stories te bekijken." />
|
||||
) : rawStories.length === 0 ? (
|
||||
<div className="text-center mt-8 space-y-3">
|
||||
<p className="text-sm text-muted-foreground">Nog geen stories voor dit PBI.</p>
|
||||
{selectedPbiId && (
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button size="sm" variant="outline" disabled={isDemo} onClick={() => !isDemo && setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}>
|
||||
Maak je eerste story aan
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
)}
|
||||
</div>
|
||||
<EmptyPanel
|
||||
message="Nog geen stories voor dit PBI."
|
||||
action={{ label: 'Maak je eerste story aan', onClick: () => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 }), disabled: isDemo }}
|
||||
/>
|
||||
) : (
|
||||
<DndContext
|
||||
id="story-panel"
|
||||
|
|
@ -270,7 +281,9 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
<SortableStoryBlock
|
||||
key={story.id}
|
||||
story={story}
|
||||
onClick={() => setStoryDialogState({ mode: 'edit', story, productId })}
|
||||
isSelected={selectedStoryId === story.id}
|
||||
onSelect={() => selectStory(story.id)}
|
||||
onEdit={() => setStoryDialogState({ mode: 'edit', story, productId })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
225
components/backlog/task-panel.tsx
Normal file
225
components/backlog/task-panel.tsx
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
DndContext,
|
||||
DragEndEvent,
|
||||
DragOverlay,
|
||||
DragStartEvent,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
closestCenter,
|
||||
} from '@dnd-kit/core'
|
||||
import {
|
||||
SortableContext,
|
||||
useSortable,
|
||||
rectSortingStrategy,
|
||||
arrayMove,
|
||||
sortableKeyboardCoordinates,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { toast } from 'sonner'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { useBacklogStore, type BacklogTask } from '@/stores/backlog-store'
|
||||
import { reorderTasksAction } from '@/actions/tasks'
|
||||
import { BacklogCard } from './backlog-card'
|
||||
import { EmptyPanel } from './empty-panel'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
TO_DO: 'bg-status-todo/15 text-status-todo border-status-todo/30',
|
||||
IN_PROGRESS: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30',
|
||||
REVIEW: 'bg-status-review/15 text-status-review border-status-review/30',
|
||||
DONE: 'bg-status-done/15 text-status-done border-status-done/30',
|
||||
}
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
TO_DO: 'To Do',
|
||||
IN_PROGRESS: 'Bezig',
|
||||
REVIEW: 'Review',
|
||||
DONE: 'Klaar',
|
||||
}
|
||||
|
||||
function SortableTaskCard({
|
||||
task,
|
||||
isDemo,
|
||||
onClick,
|
||||
}: {
|
||||
task: BacklogTask
|
||||
isDemo: boolean
|
||||
onClick: () => void
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
|
||||
useSortable({ id: task.id })
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
}
|
||||
|
||||
return (
|
||||
<BacklogCard
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...(isDemo ? {} : listeners)}
|
||||
title={task.title}
|
||||
priority={task.priority}
|
||||
isDragging={isDragging}
|
||||
onClick={onClick}
|
||||
badge={
|
||||
<Badge
|
||||
className={cn(
|
||||
'text-[10px] px-1.5 py-0 border',
|
||||
STATUS_COLORS[task.status] ?? STATUS_COLORS.TO_DO,
|
||||
)}
|
||||
>
|
||||
{STATUS_LABELS[task.status] ?? task.status}
|
||||
</Badge>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
interface TaskPanelProps {
|
||||
productId: string
|
||||
isDemo: boolean
|
||||
closePath: string
|
||||
}
|
||||
|
||||
export function TaskPanel({ isDemo, closePath }: TaskPanelProps) {
|
||||
const router = useRouter()
|
||||
const [, startTransition] = useTransition()
|
||||
const selectedStoryId = useSelectionStore((s) => s.selectedStoryId)
|
||||
const tasksByStory = useBacklogStore((s) => s.tasksByStory)
|
||||
const [activeDragId, setActiveDragId] = useState<string | null>(null)
|
||||
const [localOrder, setLocalOrder] = useState<string[] | null>(null)
|
||||
|
||||
const rawTasks = selectedStoryId ? (tasksByStory[selectedStoryId] ?? []) : null
|
||||
|
||||
// Merge local order with rawTasks for optimistic reorder
|
||||
const tasks: BacklogTask[] | null = rawTasks === null
|
||||
? null
|
||||
: localOrder
|
||||
? localOrder.map((id) => rawTasks.find((t) => t.id === id)).filter(Boolean) as BacklogTask[]
|
||||
: rawTasks
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
||||
)
|
||||
|
||||
function handleDragStart(event: DragStartEvent) {
|
||||
setActiveDragId(event.active.id as string)
|
||||
}
|
||||
|
||||
function handleDragEnd(event: DragEndEvent) {
|
||||
setActiveDragId(null)
|
||||
if (!selectedStoryId || !tasks) return
|
||||
const { active, over } = event
|
||||
if (!over || active.id === over.id) return
|
||||
|
||||
const ids = tasks.map((t) => t.id)
|
||||
const oldIndex = ids.indexOf(active.id as string)
|
||||
const newIndex = ids.indexOf(over.id as string)
|
||||
if (oldIndex === -1 || newIndex === -1) return
|
||||
|
||||
const newOrder = arrayMove(ids, oldIndex, newIndex)
|
||||
setLocalOrder(newOrder)
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await reorderTasksAction(selectedStoryId, newOrder)
|
||||
if (result?.error) {
|
||||
setLocalOrder(null)
|
||||
toast.error(result.error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const navActions = (
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
disabled={isDemo || !selectedStoryId}
|
||||
onClick={() => {
|
||||
if (!selectedStoryId) return
|
||||
router.push(`${closePath}?newTask=1&storyId=${selectedStoryId}`)
|
||||
}}
|
||||
>
|
||||
+ Nieuwe taak
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
)
|
||||
|
||||
if (tasks === null) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar title="Taken" actions={navActions} />
|
||||
<EmptyPanel message="Selecteer een story om de taken te bekijken." />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (tasks.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar title="Taken" actions={navActions} />
|
||||
<EmptyPanel
|
||||
message="Nog geen taken voor deze story."
|
||||
action={{
|
||||
label: 'Nieuwe taak',
|
||||
onClick: () => router.push(`${closePath}?newTask=1&storyId=${selectedStoryId}`),
|
||||
disabled: isDemo,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const activeTask = activeDragId ? tasks.find((t) => t.id === activeDragId) : null
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar title="Taken" actions={navActions} />
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
<DndContext
|
||||
id="task-panel"
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={tasks.map((t) => t.id)} strategy={rectSortingStrategy}>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{tasks.map((task) => (
|
||||
<SortableTaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
isDemo={isDemo}
|
||||
onClick={() => router.push(`${closePath}?editTask=${task.id}`)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
|
||||
<DragOverlay>
|
||||
{activeTask && (
|
||||
<BacklogCard
|
||||
title={activeTask.title}
|
||||
priority={activeTask.priority}
|
||||
className="border-primary shadow-xl opacity-90"
|
||||
/>
|
||||
)}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,70 +1,117 @@
|
|||
'use client'
|
||||
|
||||
import { useRef, useState, useEffect, useCallback } from 'react'
|
||||
import { Fragment, useRef, useState, useEffect, useCallback } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const COOKIE_PREFIX = 'split-pane:'
|
||||
const COOKIE_PREFIX = 'sp:'
|
||||
const COOKIE_MAX_AGE = 60 * 60 * 24 * 365
|
||||
|
||||
function readSplitCookie(key: string): number | null {
|
||||
function readSplits(cookieKey: string, n: number): number[] | null {
|
||||
if (typeof document === 'undefined') return null
|
||||
const match = document.cookie.match(new RegExp(`(?:^|; )${COOKIE_PREFIX}${key}=([^;]+)`))
|
||||
const match = document.cookie.match(
|
||||
new RegExp(`(?:^|; )${COOKIE_PREFIX}${cookieKey}=([^;]+)`)
|
||||
)
|
||||
if (!match) return null
|
||||
const val = parseFloat(decodeURIComponent(match[1]))
|
||||
return !isNaN(val) && val > 0 && val < 100 ? val : null
|
||||
try {
|
||||
const parsed: unknown = JSON.parse(decodeURIComponent(match[1]))
|
||||
if (
|
||||
!Array.isArray(parsed) ||
|
||||
parsed.length !== n ||
|
||||
parsed.some((v) => typeof v !== 'number') ||
|
||||
Math.abs((parsed as number[]).reduce((a, b) => a + b, 0) - 100) > 1
|
||||
) return null
|
||||
return parsed as number[]
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function writeSplitCookie(key: string, value: number) {
|
||||
document.cookie = `${COOKIE_PREFIX}${key}=${value}; max-age=${COOKIE_MAX_AGE}; path=/; samesite=lax`
|
||||
function writeSplits(cookieKey: string, splits: number[]) {
|
||||
document.cookie = `${COOKIE_PREFIX}${cookieKey}=${encodeURIComponent(
|
||||
JSON.stringify(splits)
|
||||
)}; max-age=${COOKIE_MAX_AGE}; path=/; samesite=lax`
|
||||
}
|
||||
|
||||
interface SplitPaneProps {
|
||||
left: React.ReactNode
|
||||
right: React.ReactNode
|
||||
storageKey: string
|
||||
defaultSplit?: number // percentage for left pane
|
||||
minSize?: number // minimum px per pane, default 200
|
||||
export interface SplitPaneProps {
|
||||
panes: React.ReactNode[]
|
||||
defaultSplit: number[] // length n, values sum to 100
|
||||
cookieKey: string
|
||||
tabLabels?: string[] // mobile tab labels, defaults to "Pane N"
|
||||
minSize?: number // minimum px per pane, default 200
|
||||
mobileBreakpoint?: number // default 1024
|
||||
activeTab?: number // controlled: parent manages which tab is active
|
||||
onActiveTabChange?: (index: number) => void
|
||||
}
|
||||
|
||||
export function SplitPane({
|
||||
left,
|
||||
right,
|
||||
storageKey,
|
||||
defaultSplit = 20,
|
||||
panes,
|
||||
defaultSplit,
|
||||
cookieKey,
|
||||
tabLabels,
|
||||
minSize = 200,
|
||||
mobileBreakpoint = 1024,
|
||||
activeTab: activeTabProp,
|
||||
onActiveTabChange,
|
||||
}: SplitPaneProps) {
|
||||
const isControlled = activeTabProp !== undefined
|
||||
const n = panes.length
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const [split, setSplit] = useState<number>(() => {
|
||||
return readSplitCookie(storageKey) ?? defaultSplit
|
||||
})
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'left' | 'right'>('left')
|
||||
const splitsRef = useRef<number[]>(defaultSplit)
|
||||
|
||||
const [splits, setSplits] = useState<number[]>(() => {
|
||||
return readSplits(cookieKey, n) ?? defaultSplit
|
||||
})
|
||||
const [dragging, setDragging] = useState<number | null>(null) // divider index (0..n-2)
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [internalTab, setInternalTab] = useState(0)
|
||||
const activeTab = isControlled ? activeTabProp : internalTab
|
||||
|
||||
const handleTabChange = (i: number) => {
|
||||
if (!isControlled) setInternalTab(i)
|
||||
onActiveTabChange?.(i)
|
||||
}
|
||||
|
||||
useEffect(() => { splitsRef.current = splits }, [splits])
|
||||
|
||||
// Detect mobile
|
||||
useEffect(() => {
|
||||
const check = () => setIsMobile(window.innerWidth < 1024)
|
||||
const check = () => setIsMobile(window.innerWidth < mobileBreakpoint)
|
||||
check()
|
||||
window.addEventListener('resize', check)
|
||||
return () => window.removeEventListener('resize', check)
|
||||
}, [])
|
||||
}, [mobileBreakpoint])
|
||||
|
||||
const onMouseMove = useCallback((e: MouseEvent) => {
|
||||
if (!isDragging || !containerRef.current) return
|
||||
if (dragging === null || !containerRef.current) return
|
||||
const rect = containerRef.current.getBoundingClientRect()
|
||||
const containerWidth = rect.width
|
||||
const offsetX = e.clientX - rect.left
|
||||
const minPct = (minSize / containerWidth) * 100
|
||||
const maxPct = 100 - minPct
|
||||
const newSplit = Math.min(maxPct, Math.max(minPct, (offsetX / containerWidth) * 100))
|
||||
setSplit(newSplit)
|
||||
writeSplitCookie(storageKey, newSplit)
|
||||
}, [isDragging, minSize, storageKey])
|
||||
|
||||
const onMouseUp = useCallback(() => setIsDragging(false), [])
|
||||
const cursorPct = ((e.clientX - rect.left) / containerWidth) * 100
|
||||
const current = splitsRef.current
|
||||
// Left edge of pane[dragging] in percentage
|
||||
const leftEdge = current.slice(0, dragging).reduce((a, b) => a + b, 0)
|
||||
const combinedWidth = current[dragging] + current[dragging + 1]
|
||||
|
||||
const newLeft = Math.min(Math.max(cursorPct - leftEdge, minPct), combinedWidth - minPct)
|
||||
const newRight = combinedWidth - newLeft
|
||||
|
||||
setSplits((prev) => {
|
||||
const next = [...prev]
|
||||
next[dragging] = newLeft
|
||||
next[dragging + 1] = newRight
|
||||
return next
|
||||
})
|
||||
}, [dragging, minSize])
|
||||
|
||||
const onMouseUp = useCallback(() => {
|
||||
if (dragging !== null) {
|
||||
writeSplits(cookieKey, splitsRef.current)
|
||||
setDragging(null)
|
||||
}
|
||||
}, [dragging, cookieKey])
|
||||
|
||||
useEffect(() => {
|
||||
if (isDragging) {
|
||||
if (dragging !== null) {
|
||||
window.addEventListener('mousemove', onMouseMove)
|
||||
window.addEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
|
|
@ -72,37 +119,38 @@ export function SplitPane({
|
|||
window.removeEventListener('mousemove', onMouseMove)
|
||||
window.removeEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
}, [isDragging, onMouseMove, onMouseUp])
|
||||
}, [dragging, onMouseMove, onMouseUp])
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex border-b border-border shrink-0">
|
||||
<button
|
||||
onClick={() => setActiveTab('left')}
|
||||
className={cn(
|
||||
'flex-1 py-2 text-sm font-medium transition-colors',
|
||||
activeTab === 'left'
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
Backlog
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('right')}
|
||||
className={cn(
|
||||
'flex-1 py-2 text-sm font-medium transition-colors',
|
||||
activeTab === 'right'
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
Stories
|
||||
</button>
|
||||
<div className="flex items-center border-b border-border shrink-0">
|
||||
{activeTab > 0 && (
|
||||
<button
|
||||
onClick={() => handleTabChange(activeTab - 1)}
|
||||
className="px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors shrink-0"
|
||||
aria-label="Terug"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
)}
|
||||
{panes.map((_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => handleTabChange(i)}
|
||||
className={cn(
|
||||
'flex-1 py-2 text-sm font-medium transition-colors',
|
||||
activeTab === i
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{tabLabels?.[i] ?? `Pane ${i + 1}`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
{activeTab === 'left' ? left : right}
|
||||
{panes[activeTab]}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -110,24 +158,25 @@ export function SplitPane({
|
|||
|
||||
return (
|
||||
<div ref={containerRef} className="flex h-full overflow-hidden select-none">
|
||||
{/* Left pane */}
|
||||
<div className="flex flex-col overflow-hidden" style={{ width: `${split}%` }}>
|
||||
{left}
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div
|
||||
onMouseDown={() => setIsDragging(true)}
|
||||
className={cn(
|
||||
'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
|
||||
isDragging && 'bg-primary'
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Right pane */}
|
||||
<div className="flex flex-col overflow-hidden flex-1">
|
||||
{right}
|
||||
</div>
|
||||
{panes.map((pane, i) => (
|
||||
<Fragment key={i}>
|
||||
{i > 0 && (
|
||||
<div
|
||||
onMouseDown={() => setDragging(i - 1)}
|
||||
className={cn(
|
||||
'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
|
||||
dragging === i - 1 && 'bg-primary'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className="flex flex-col overflow-hidden"
|
||||
style={i === n - 1 ? { flex: 1 } : { width: `${splits[i]}%` }}
|
||||
>
|
||||
{pane}
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,137 +0,0 @@
|
|||
'use client'
|
||||
|
||||
import { useRef, useState, useEffect, useCallback } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface TriplePaneProps {
|
||||
left: React.ReactNode
|
||||
middle: React.ReactNode
|
||||
right: React.ReactNode
|
||||
storageKey: string
|
||||
defaultLeft?: number // % width for left pane
|
||||
defaultMiddle?: number // % width for middle pane, right gets the rest
|
||||
minSize?: number // minimum px per pane
|
||||
}
|
||||
|
||||
export function TriplePane({
|
||||
left, middle, right, storageKey,
|
||||
defaultLeft = 28, defaultMiddle = 35, minSize = 180,
|
||||
}: TriplePaneProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const load = (key: string, def: number) => {
|
||||
if (typeof window === 'undefined') return def
|
||||
const stored = localStorage.getItem(`triple-pane:${storageKey}:${key}`)
|
||||
if (stored) {
|
||||
const val = parseFloat(stored)
|
||||
if (!isNaN(val) && val > 0 && val < 100) return val
|
||||
}
|
||||
return def
|
||||
}
|
||||
|
||||
const [leftPct, setLeftPct] = useState(() => load('left', defaultLeft))
|
||||
const [midPct, setMidPct] = useState(() => load('mid', defaultMiddle))
|
||||
const [dragging, setDragging] = useState<'left' | 'right' | null>(null)
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'left' | 'middle' | 'right'>('left')
|
||||
|
||||
useEffect(() => {
|
||||
const check = () => setIsMobile(window.innerWidth < 1024)
|
||||
check()
|
||||
window.addEventListener('resize', check)
|
||||
return () => window.removeEventListener('resize', check)
|
||||
}, [])
|
||||
|
||||
const onMouseMove = useCallback((e: MouseEvent) => {
|
||||
if (!dragging || !containerRef.current) return
|
||||
const rect = containerRef.current.getBoundingClientRect()
|
||||
const width = rect.width
|
||||
const minPct = (minSize / width) * 100
|
||||
const offsetPct = ((e.clientX - rect.left) / width) * 100
|
||||
|
||||
if (dragging === 'left') {
|
||||
const clamped = Math.min(Math.max(offsetPct, minPct), 100 - midPct - minPct)
|
||||
setLeftPct(clamped)
|
||||
localStorage.setItem(`triple-pane:${storageKey}:left`, String(clamped))
|
||||
} else {
|
||||
const clamped = Math.min(Math.max(offsetPct - leftPct, minPct), 100 - leftPct - minPct)
|
||||
setMidPct(clamped)
|
||||
localStorage.setItem(`triple-pane:${storageKey}:mid`, String(clamped))
|
||||
}
|
||||
}, [dragging, leftPct, midPct, minSize, storageKey])
|
||||
|
||||
const onMouseUp = useCallback(() => setDragging(null), [])
|
||||
|
||||
useEffect(() => {
|
||||
if (dragging) {
|
||||
window.addEventListener('mousemove', onMouseMove)
|
||||
window.addEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', onMouseMove)
|
||||
window.removeEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
}, [dragging, onMouseMove, onMouseUp])
|
||||
|
||||
if (isMobile) {
|
||||
const tabs = ['left', 'middle', 'right'] as const
|
||||
const labels = ['Backlog', 'Sprint', 'Taken']
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex border-b border-border shrink-0">
|
||||
{tabs.map((tab, i) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={cn(
|
||||
'flex-1 py-2 text-xs font-medium transition-colors',
|
||||
activeTab === tab
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{labels[i]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
{activeTab === 'left' ? left : activeTab === 'middle' ? middle : right}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const rightPct = 100 - leftPct - midPct
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="flex h-full overflow-hidden select-none">
|
||||
<div className="flex flex-col overflow-hidden" style={{ width: `${leftPct}%` }}>
|
||||
{left}
|
||||
</div>
|
||||
|
||||
<div
|
||||
onMouseDown={() => setDragging('left')}
|
||||
className={cn(
|
||||
'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
|
||||
dragging === 'left' && 'bg-primary'
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col overflow-hidden" style={{ width: `${midPct}%` }}>
|
||||
{middle}
|
||||
</div>
|
||||
|
||||
<div
|
||||
onMouseDown={() => setDragging('right')}
|
||||
className={cn(
|
||||
'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
|
||||
dragging === 'right' && 'bg-primary'
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col overflow-hidden" style={{ width: `${rightPct}%` }}>
|
||||
{right}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import {
|
|||
} from '@dnd-kit/core'
|
||||
import { sortableKeyboardCoordinates, arrayMove } from '@dnd-kit/sortable'
|
||||
import { toast } from 'sonner'
|
||||
import { TriplePane } from '@/components/split-pane/triple-pane'
|
||||
import { SplitPane } from '@/components/split-pane/split-pane'
|
||||
import { SprintBacklogLeft, SprintBacklogRight } from './sprint-backlog'
|
||||
import type { SprintStory, PbiWithStories, ProductMember } from './sprint-backlog'
|
||||
import { TaskList } from './task-list'
|
||||
|
|
@ -200,18 +200,20 @@ export function SprintBoardClient({
|
|||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<TriplePane
|
||||
storageKey={`sprint-${productId}`}
|
||||
left={
|
||||
<SplitPane
|
||||
cookieKey={`sprint-${productId}`}
|
||||
defaultSplit={[28, 35, 37]}
|
||||
tabLabels={['Backlog', 'Sprint', 'Taken']}
|
||||
panes={[
|
||||
<SprintBacklogRight
|
||||
key="backlog"
|
||||
pbisWithStories={pbisWithStories}
|
||||
sprintStoryIds={sprintStoryIds}
|
||||
isDemo={isDemo}
|
||||
onAdd={handleAdd}
|
||||
/>
|
||||
}
|
||||
middle={
|
||||
/>,
|
||||
<SprintBacklogLeft
|
||||
key="sprint"
|
||||
sprintId={sprintId}
|
||||
stories={sprintStories}
|
||||
isDemo={isDemo}
|
||||
|
|
@ -222,11 +224,10 @@ export function SprintBoardClient({
|
|||
productId={productId}
|
||||
members={members}
|
||||
onAssigneeChange={handleAssigneeChange}
|
||||
/>
|
||||
}
|
||||
right={
|
||||
/>,
|
||||
selectedStoryId ? (
|
||||
<TaskList
|
||||
key="tasks"
|
||||
storyId={selectedStoryId}
|
||||
storyCode={stories.find(s => s.id === selectedStoryId)?.code ?? null}
|
||||
sprintId={sprintId}
|
||||
|
|
@ -235,11 +236,11 @@ export function SprintBoardClient({
|
|||
isDemo={isDemo}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div key="tasks-empty" className="flex items-center justify-center h-full">
|
||||
<p className="text-sm text-muted-foreground">Selecteer een story om de taken te bekijken.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
),
|
||||
]}
|
||||
/>
|
||||
<DragOverlay>
|
||||
{activeDragStory && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue