janpeter visser
d11b114fc1
- ST-601/602: loading skeletons en error boundary - ST-603: Sonner toasts op alle CRUD-operaties - ST-604: DemoTooltip op uitgeschakelde knoppen - ST-605: KeyboardSensor dnd-kit, Escape sluit modals - ST-606: min-width banner < 1024px - ST-607: WCAG AA aria-labels en skip link - ST-608: rate limiting login (10/min) en registratie (5/uur) - ST-609: security integratietests cross-user toegang (7 tests) - ST-610: GitHub Actions CI/CD workflow - ST-611: README met quickstart, deployment en API-docs - ST-612: Lars-flow acceptatiechecklist - fix: settings toont gebruikersnaam i.p.v. interne id - fix: seed idempotent, testdata altijd gekoppeld aan demo-gebruiker Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
395 lines
13 KiB
TypeScript
395 lines
13 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useTransition, useEffect } from 'react'
|
||
import { useActionState } from 'react'
|
||
import { useFormStatus } from 'react-dom'
|
||
import {
|
||
DndContext,
|
||
DragEndEvent,
|
||
DragOverlay,
|
||
DragStartEvent,
|
||
KeyboardSensor,
|
||
PointerSensor,
|
||
useSensor,
|
||
useSensors,
|
||
closestCenter,
|
||
} from '@dnd-kit/core'
|
||
import {
|
||
SortableContext,
|
||
useSortable,
|
||
verticalListSortingStrategy,
|
||
arrayMove,
|
||
sortableKeyboardCoordinates,
|
||
} from '@dnd-kit/sortable'
|
||
import { CSS } from '@dnd-kit/utilities'
|
||
import { toast } from 'sonner'
|
||
import { Button } from '@/components/ui/button'
|
||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||
import { useSelectionStore } from '@/stores/selection-store'
|
||
import { usePlannerStore } from '@/stores/planner-store'
|
||
import { createPbiAction, deletePbiAction } from '@/actions/pbis'
|
||
import { reorderPbisAction, updatePbiPriorityAction } from '@/actions/stories'
|
||
import { cn } from '@/lib/utils'
|
||
|
||
const PRIORITY_LABELS: Record<number, string> = {
|
||
1: 'Kritiek',
|
||
2: 'Hoog',
|
||
3: 'Gemiddeld',
|
||
4: 'Laag',
|
||
}
|
||
|
||
const PRIORITY_COLORS: Record<number, string> = {
|
||
1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
|
||
2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
|
||
3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
|
||
4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
|
||
}
|
||
|
||
interface Pbi {
|
||
id: string
|
||
title: string
|
||
priority: number
|
||
}
|
||
|
||
interface PbiListProps {
|
||
productId: string
|
||
pbis: Pbi[]
|
||
isDemo: boolean
|
||
}
|
||
|
||
// --- Sortable PBI row ---
|
||
function SortablePbiRow({
|
||
pbi,
|
||
isSelected,
|
||
isDemo,
|
||
onSelect,
|
||
onDelete,
|
||
}: {
|
||
pbi: Pbi
|
||
isSelected: boolean
|
||
isDemo: boolean
|
||
onSelect: () => void
|
||
onDelete: () => void
|
||
}) {
|
||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||
id: pbi.id,
|
||
})
|
||
|
||
const style = {
|
||
transform: CSS.Transform.toString(transform),
|
||
transition,
|
||
opacity: isDragging ? 0.4 : 1,
|
||
}
|
||
|
||
return (
|
||
<div
|
||
ref={setNodeRef}
|
||
style={style}
|
||
onClick={onSelect}
|
||
className={cn(
|
||
'group flex items-center justify-between px-4 py-2 cursor-pointer transition-colors hover:bg-surface-container',
|
||
isSelected && 'bg-primary-container text-primary-container-foreground'
|
||
)}
|
||
>
|
||
{!isDemo && (
|
||
<span
|
||
{...attributes}
|
||
{...listeners}
|
||
aria-label="Versleep om te sorteren"
|
||
className="mr-2 text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
⠿
|
||
</span>
|
||
)}
|
||
<span className="text-sm truncate flex-1">{pbi.title}</span>
|
||
{!isDemo && (
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); onDelete() }}
|
||
className="opacity-0 group-hover:opacity-100 ml-2 text-muted-foreground hover:text-error text-xs shrink-0"
|
||
aria-label="Verwijder PBI"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// --- Inline create form ---
|
||
function CreatePbiForm({
|
||
productId,
|
||
priority,
|
||
onDone,
|
||
}: {
|
||
productId: string
|
||
priority: number
|
||
onDone: () => void
|
||
}) {
|
||
const [state, formAction] = useActionState(
|
||
async (_prev: unknown, fd: FormData) => {
|
||
const result = await createPbiAction(_prev, fd)
|
||
if (result?.success) { toast.success('PBI aangemaakt'); onDone() }
|
||
return result
|
||
},
|
||
undefined
|
||
)
|
||
const error = state?.error
|
||
|
||
return (
|
||
<form action={formAction} className="flex gap-2 p-2">
|
||
<input type="hidden" name="productId" value={productId} />
|
||
<input type="hidden" name="priority" value={priority} />
|
||
<Input name="title" autoFocus placeholder="PBI-titel…" className="h-7 text-sm" required />
|
||
<CreateSubmitButton />
|
||
<Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>
|
||
×
|
||
</Button>
|
||
{typeof error === 'string' && (
|
||
<p className="text-xs text-error self-center">{error}</p>
|
||
)}
|
||
</form>
|
||
)
|
||
}
|
||
|
||
function CreateSubmitButton() {
|
||
const { pending } = useFormStatus()
|
||
return (
|
||
<Button type="submit" size="sm" className="h-7" disabled={pending}>
|
||
{pending ? '…' : 'Toevoegen'}
|
||
</Button>
|
||
)
|
||
}
|
||
|
||
// --- Main component ---
|
||
export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
||
const { selectedPbiId, selectPbi } = useSelectionStore()
|
||
const { pbiOrder, pbiPriority, initPbis, reorderPbis, rollbackPbis, updatePbiPriority } = usePlannerStore()
|
||
const [filterPriority, setFilterPriority] = useState<number | null>(null)
|
||
const [creatingForPriority, setCreatingForPriority] = useState<number | null>(null)
|
||
const [activeDragId, setActiveDragId] = useState<string | null>(null)
|
||
const [, startTransition] = useTransition()
|
||
|
||
// Sync server data into store — use stable string dep to avoid infinite loop
|
||
const pbiIdKey = pbis.map(p => p.id).join(',')
|
||
useEffect(() => {
|
||
initPbis(productId, pbiIdKey ? pbiIdKey.split(',') : [])
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [productId, pbiIdKey])
|
||
|
||
// Build ordered PBI list from store (or fall back to server order)
|
||
const order = pbiOrder[productId] ?? pbis.map(p => p.id)
|
||
const pbiMap = Object.fromEntries(pbis.map(p => [p.id, p]))
|
||
|
||
// Apply priority overrides from store
|
||
const orderedPbis = order
|
||
.map(id => pbiMap[id])
|
||
.filter(Boolean)
|
||
.map(p => ({ ...p, priority: pbiPriority[p.id] ?? p.priority }))
|
||
|
||
const filtered = filterPriority ? orderedPbis.filter(p => p.priority === filterPriority) : orderedPbis
|
||
|
||
const grouped = [1, 2, 3, 4].reduce<Record<number, Pbi[]>>((acc, p) => {
|
||
acc[p] = filtered.filter(pbi => pbi.priority === p)
|
||
return acc
|
||
}, {} as Record<number, Pbi[]>)
|
||
|
||
const visiblePriorities = [1, 2, 3, 4].filter(
|
||
p => grouped[p].length > 0 || creatingForPriority === p
|
||
)
|
||
|
||
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)
|
||
const { active, over } = event
|
||
if (!over || active.id === over.id) return
|
||
|
||
const activePbi = pbiMap[active.id as string]
|
||
const overPbi = pbiMap[over.id as string]
|
||
if (!activePbi || !overPbi) return
|
||
|
||
const prevOrder = [...order]
|
||
const oldIndex = order.indexOf(active.id as string)
|
||
const newIndex = order.indexOf(over.id as string)
|
||
const newOrder = arrayMove([...order], oldIndex, newIndex)
|
||
|
||
// Optimistic update
|
||
reorderPbis(productId, newOrder)
|
||
|
||
const priorityChanged = activePbi.priority !== overPbi.priority
|
||
|
||
startTransition(async () => {
|
||
if (priorityChanged) {
|
||
updatePbiPriority(active.id as string, overPbi.priority)
|
||
const result = await updatePbiPriorityAction(active.id as string, overPbi.priority, productId)
|
||
if (!result.success) {
|
||
rollbackPbis(productId, prevOrder)
|
||
toast.error('Prioriteit opslaan mislukt')
|
||
}
|
||
} else {
|
||
const result = await reorderPbisAction(productId, newOrder)
|
||
if (!result.success) {
|
||
rollbackPbis(productId, prevOrder)
|
||
toast.error('Volgorde opslaan mislukt')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function handleDelete(id: string) {
|
||
startTransition(async () => {
|
||
await deletePbiAction(id)
|
||
if (selectedPbiId === id) selectPbi(null)
|
||
})
|
||
}
|
||
|
||
const activePbi = activeDragId ? pbiMap[activeDragId] : null
|
||
|
||
return (
|
||
<div className="flex flex-col h-full">
|
||
<PanelNavBar
|
||
title="Product Backlog"
|
||
actions={
|
||
<>
|
||
{filterPriority !== null && (
|
||
<button
|
||
onClick={() => setFilterPriority(null)}
|
||
className="flex items-center gap-1 text-xs text-primary hover:underline"
|
||
>
|
||
<Badge className={cn('text-xs', PRIORITY_COLORS[filterPriority])}>
|
||
{PRIORITY_LABELS[filterPriority]}
|
||
</Badge>
|
||
<span>×</span>
|
||
</button>
|
||
)}
|
||
<Select
|
||
value={filterPriority?.toString() ?? 'all'}
|
||
onValueChange={(v) => setFilterPriority(!v || v === 'all' ? null : parseInt(v))}
|
||
>
|
||
<SelectTrigger className="h-7 w-28 text-xs">
|
||
<SelectValue placeholder="Filter" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">Alle</SelectItem>
|
||
<SelectItem value="1">Kritiek</SelectItem>
|
||
<SelectItem value="2">Hoog</SelectItem>
|
||
<SelectItem value="3">Gemiddeld</SelectItem>
|
||
<SelectItem value="4">Laag</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
{!isDemo && (
|
||
<Button
|
||
size="sm"
|
||
className="h-7 text-xs"
|
||
onClick={() => setCreatingForPriority(creatingForPriority ? null : 2)}
|
||
>
|
||
+ PBI
|
||
</Button>
|
||
)}
|
||
</>
|
||
}
|
||
/>
|
||
|
||
<div className="flex-1 overflow-y-auto">
|
||
{pbis.length === 0 && creatingForPriority === null ? (
|
||
<div className="p-8 text-center text-muted-foreground text-sm space-y-3">
|
||
<p>Nog geen PBI's aangemaakt.</p>
|
||
{!isDemo && (
|
||
<Button size="sm" variant="outline" onClick={() => setCreatingForPriority(2)}>
|
||
Maak je eerste PBI aan
|
||
</Button>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<DndContext
|
||
sensors={sensors}
|
||
collisionDetection={closestCenter}
|
||
onDragStart={handleDragStart}
|
||
onDragEnd={handleDragEnd}
|
||
>
|
||
<div className="py-2">
|
||
{visiblePriorities.map(priority => (
|
||
<div key={priority}>
|
||
<div className="flex items-center gap-2 px-4 py-1.5">
|
||
<span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[priority])}>
|
||
{PRIORITY_LABELS[priority]}
|
||
</span>
|
||
<div className="flex-1 h-px bg-border" />
|
||
{!isDemo && (
|
||
<button
|
||
onClick={() => setCreatingForPriority(priority)}
|
||
className="text-xs text-muted-foreground hover:text-foreground"
|
||
>
|
||
+
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
<SortableContext
|
||
items={grouped[priority].map(p => p.id)}
|
||
strategy={verticalListSortingStrategy}
|
||
>
|
||
{grouped[priority].map(pbi => (
|
||
<SortablePbiRow
|
||
key={pbi.id}
|
||
pbi={pbi}
|
||
isSelected={selectedPbiId === pbi.id}
|
||
isDemo={isDemo}
|
||
onSelect={() => selectPbi(pbi.id)}
|
||
onDelete={() => handleDelete(pbi.id)}
|
||
/>
|
||
))}
|
||
</SortableContext>
|
||
|
||
{creatingForPriority === priority && (
|
||
<CreatePbiForm
|
||
productId={productId}
|
||
priority={priority}
|
||
onDone={() => setCreatingForPriority(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
))}
|
||
|
||
{creatingForPriority !== null && !visiblePriorities.includes(creatingForPriority) && (
|
||
<div>
|
||
<div className="flex items-center gap-2 px-4 py-1.5">
|
||
<span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[creatingForPriority])}>
|
||
{PRIORITY_LABELS[creatingForPriority]}
|
||
</span>
|
||
<div className="flex-1 h-px bg-border" />
|
||
</div>
|
||
<CreatePbiForm
|
||
productId={productId}
|
||
priority={creatingForPriority}
|
||
onDone={() => setCreatingForPriority(null)}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<DragOverlay>
|
||
{activePbi && (
|
||
<div className="bg-surface-container-low border border-primary rounded px-4 py-2 text-sm shadow-lg opacity-90">
|
||
{activePbi.title}
|
||
</div>
|
||
)}
|
||
</DragOverlay>
|
||
</DndContext>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|