feat: ST-201-ST-210 M2 stories, drag-and-drop en Zustand stores
- usePlannerStore met pbiOrder/storyOrder init/reorder/rollback (ST-201) - useSelectionStore uitgebreid met selectedStoryId en clearSelection (ST-202) - PBI drag-and-drop binnen prioriteitsgroep via dnd-kit (ST-203) - PBI slepen over prioriteitsgrens wijzigt priority (ST-204) - Stories als blokken met prioriteit- en statusbadge (ST-205/ST-206) - Story drag-and-drop horizontaal binnen en tussen groepen (ST-207) - Story detail slide-over met bewerkformulier (ST-208) - Story verwijderen met bevestigingsstap (ST-209) - Filter op status en prioriteit in rechterpaneel (ST-210) - Fix: infinite loop in useEffect door stabiele string dependency Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
ffda65490f
commit
4dd62c199c
25 changed files with 1794 additions and 100 deletions
|
|
@ -1,15 +1,35 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useState, useTransition, useEffect } from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import {
|
||||
DndContext,
|
||||
DragEndEvent,
|
||||
DragOverlay,
|
||||
DragStartEvent,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
closestCenter,
|
||||
} from '@dnd-kit/core'
|
||||
import {
|
||||
SortableContext,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
arrayMove,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
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> = {
|
||||
|
|
@ -38,7 +58,74 @@ interface PbiListProps {
|
|||
isDemo: boolean
|
||||
}
|
||||
|
||||
function CreatePbiForm({ productId, priority, onDone }: { productId: string; priority: number; onDone: () => void }) {
|
||||
// --- 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}
|
||||
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)
|
||||
|
|
@ -53,16 +140,10 @@ function CreatePbiForm({ productId, priority, onDone }: { productId: string; pri
|
|||
<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
|
||||
/>
|
||||
<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}>
|
||||
Annuleren
|
||||
×
|
||||
</Button>
|
||||
{typeof error === 'string' && (
|
||||
<p className="text-xs text-error self-center">{error}</p>
|
||||
|
|
@ -80,13 +161,33 @@ function CreateSubmitButton() {
|
|||
)
|
||||
}
|
||||
|
||||
// --- 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()
|
||||
|
||||
const filtered = filterPriority ? pbis.filter(p => p.priority === filterPriority) : pbis
|
||||
// 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)
|
||||
|
|
@ -97,6 +198,49 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
p => grouped[p].length > 0 || creatingForPriority === p
|
||||
)
|
||||
|
||||
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
|
||||
|
||||
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)
|
||||
|
|
@ -104,6 +248,8 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
})
|
||||
}
|
||||
|
||||
const activePbi = activeDragId ? pbiMap[activeDragId] : null
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar
|
||||
|
|
@ -160,76 +306,81 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-2">
|
||||
{visiblePriorities.map(priority => (
|
||||
<div key={priority}>
|
||||
{/* Priority group header */}
|
||||
<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>
|
||||
|
||||
{/* PBI items */}
|
||||
{grouped[priority].map(pbi => (
|
||||
<div
|
||||
key={pbi.id}
|
||||
onClick={() => selectPbi(pbi.id)}
|
||||
className={cn(
|
||||
'group flex items-center justify-between px-4 py-2 cursor-pointer transition-colors hover:bg-surface-container',
|
||||
selectedPbiId === pbi.id && 'bg-primary-container text-primary-container-foreground'
|
||||
)}
|
||||
>
|
||||
<span className="text-sm truncate flex-1">{pbi.title}</span>
|
||||
<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={(e) => { e.stopPropagation(); handleDelete(pbi.id) }}
|
||||
className="opacity-0 group-hover:opacity-100 ml-2 text-muted-foreground hover:text-error text-xs shrink-0"
|
||||
aria-label="Verwijder PBI"
|
||||
onClick={() => setCreatingForPriority(priority)}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
×
|
||||
+
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Inline create form for this priority */}
|
||||
{creatingForPriority === priority && (
|
||||
<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={priority}
|
||||
priority={creatingForPriority}
|
||||
onDone={() => setCreatingForPriority(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* If creating for a priority that has no items yet and isn't in visiblePriorities */}
|
||||
{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>
|
||||
)}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,516 @@
|
|||
'use client'
|
||||
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { useState, useTransition, useEffect, useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import {
|
||||
DndContext,
|
||||
DragEndEvent,
|
||||
DragOverlay,
|
||||
DragStartEvent,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
closestCenter,
|
||||
} from '@dnd-kit/core'
|
||||
import {
|
||||
SortableContext,
|
||||
useSortable,
|
||||
horizontalListSortingStrategy,
|
||||
arrayMove,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { usePlannerStore } from '@/stores/planner-store'
|
||||
import { createStoryAction, updateStoryAction, deleteStoryAction, reorderStoriesAction } from '@/actions/stories'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Story {
|
||||
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',
|
||||
}
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
OPEN: 'bg-status-todo/15 text-status-todo border-status-todo/30',
|
||||
IN_SPRINT: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30',
|
||||
DONE: 'bg-status-done/15 text-status-done border-status-done/30',
|
||||
}
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
OPEN: 'Open',
|
||||
IN_SPRINT: 'In Sprint',
|
||||
DONE: 'Klaar',
|
||||
}
|
||||
|
||||
export interface Story {
|
||||
id: string
|
||||
title: string
|
||||
description: string | null
|
||||
acceptance_criteria: string | null
|
||||
priority: number
|
||||
status: string
|
||||
pbi_id: string
|
||||
}
|
||||
|
||||
interface StoryPanelProps {
|
||||
productId: string
|
||||
storiesByPbi: Record<string, Story[]>
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
export function StoryPanel({ storiesByPbi, isDemo }: StoryPanelProps) {
|
||||
const { selectedPbiId } = useSelectionStore()
|
||||
// --- Sortable story block ---
|
||||
function SortableStoryBlock({
|
||||
story,
|
||||
onClick,
|
||||
}: {
|
||||
story: Story
|
||||
onClick: () => void
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: story.id,
|
||||
})
|
||||
|
||||
const stories = selectedPbiId ? (storiesByPbi[selectedPbiId] ?? []) : null
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.4 : 1,
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
onClick={onClick}
|
||||
title={story.title}
|
||||
className="w-28 shrink-0 bg-surface-container-low border border-border rounded-lg p-2 cursor-pointer hover:border-primary transition-colors space-y-1.5 select-none"
|
||||
>
|
||||
<p className="text-xs font-medium text-foreground line-clamp-3 min-h-[3rem]">
|
||||
{story.title}
|
||||
</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
|
||||
{PRIORITY_LABELS[story.priority]}
|
||||
</Badge>
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status] ?? story.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Story detail slide-over ---
|
||||
function StoryDetailSheet({
|
||||
story,
|
||||
productId,
|
||||
pbiId,
|
||||
onClose,
|
||||
isDemo,
|
||||
}: {
|
||||
story: Story
|
||||
productId: string
|
||||
pbiId: string
|
||||
onClose: () => void
|
||||
isDemo: boolean
|
||||
}) {
|
||||
const [confirmDelete, setConfirmDelete] = useState(false)
|
||||
const [isDeleting, startDeleteTransition] = useTransition()
|
||||
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await updateStoryAction(_prev, fd)
|
||||
if (result?.success) onClose()
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
function handleDelete() {
|
||||
startDeleteTransition(async () => {
|
||||
await deleteStoryAction(story.id)
|
||||
onClose()
|
||||
})
|
||||
}
|
||||
|
||||
const fieldError = (field: string) => {
|
||||
const err = state?.error
|
||||
if (!err || typeof err === 'string') return undefined
|
||||
return (err as Record<string, string[]>)[field]?.[0]
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet open onOpenChange={(open) => { if (!open) onClose() }}>
|
||||
<SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
|
||||
<SheetHeader className="px-5 pt-5 pb-4 border-b border-border">
|
||||
<SheetTitle>{story.title}</SheetTitle>
|
||||
<div className="flex gap-2 mt-1">
|
||||
<Badge className={cn('text-xs border', PRIORITY_COLORS[story.priority])}>
|
||||
{PRIORITY_LABELS[story.priority]}
|
||||
</Badge>
|
||||
<Badge className={cn('text-xs border', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{!isDemo ? (
|
||||
<form action={formAction} className="p-5 space-y-4">
|
||||
<input type="hidden" name="id" value={story.id} />
|
||||
<input type="hidden" name="priority" value={story.priority} />
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Titel</label>
|
||||
<Input name="title" defaultValue={story.title} required className={fieldError('title') ? 'border-error' : ''} />
|
||||
{fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Omschrijving</label>
|
||||
<Textarea name="description" rows={4} defaultValue={story.description ?? ''} placeholder="Als… wil ik… zodat…" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Acceptatiecriteria</label>
|
||||
<Textarea name="acceptance_criteria" rows={4} defaultValue={story.acceptance_criteria ?? ''} placeholder="- Gegeven… Als… Dan…" />
|
||||
</div>
|
||||
|
||||
{typeof state?.error === 'string' && (
|
||||
<p className="text-xs text-error">{state.error}</p>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<SaveButton />
|
||||
<Button type="button" variant="ghost" onClick={onClose}>Annuleren</Button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<div className="p-5 space-y-4">
|
||||
{story.description && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
|
||||
<p className="text-sm">{story.description}</p>
|
||||
</div>
|
||||
)}
|
||||
{story.acceptance_criteria && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Acceptatiecriteria</p>
|
||||
<p className="text-sm whitespace-pre-line">{story.acceptance_criteria}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isDemo && (
|
||||
<div className="border-t border-border p-4">
|
||||
{confirmDelete ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground flex-1">Weet je het zeker? Taken worden ook verwijderd.</span>
|
||||
<Button variant="destructive" size="sm" disabled={isDeleting} onClick={handleDelete}>
|
||||
{isDeleting ? 'Bezig…' : 'Verwijderen'}
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => setConfirmDelete(false)}>Annuleren</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-error hover:bg-error/10"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
>
|
||||
Story verwijderen
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
function SaveButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? 'Opslaan…' : 'Opslaan'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Inline create form ---
|
||||
function CreateStoryForm({
|
||||
productId,
|
||||
pbiId,
|
||||
priority,
|
||||
onDone,
|
||||
}: {
|
||||
productId: string
|
||||
pbiId: string
|
||||
priority: number
|
||||
onDone: () => void
|
||||
}) {
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createStoryAction(_prev, fd)
|
||||
if (result?.success) onDone()
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
return (
|
||||
<form action={formAction} className="flex gap-2 items-center mt-2">
|
||||
<input type="hidden" name="pbiId" value={pbiId} />
|
||||
<input type="hidden" name="productId" value={productId} />
|
||||
<input type="hidden" name="priority" value={priority} />
|
||||
<Input name="title" autoFocus placeholder="Story titel…" className="h-7 text-sm flex-1" required />
|
||||
<CreateStorySubmitButton />
|
||||
<Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>×</Button>
|
||||
{typeof state?.error === 'string' && <p className="text-xs text-error">{state.error}</p>}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateStorySubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" size="sm" className="h-7" disabled={pending}>
|
||||
{pending ? '…' : 'Toevoegen'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Main component ---
|
||||
export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps) {
|
||||
const { selectedPbiId } = useSelectionStore()
|
||||
const { storyOrder, initStories, reorderStories, rollbackStories } = usePlannerStore()
|
||||
const [filterStatus, setFilterStatus] = useState<string | null>(null)
|
||||
const [filterPriority, setFilterPriority] = useState<number | null>(null)
|
||||
const [creatingPriority, setCreatingPriority] = useState<number | null>(null)
|
||||
const [openStory, setOpenStory] = useState<Story | null>(null)
|
||||
const [activeDragId, setActiveDragId] = useState<string | null>(null)
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
const rawStories = selectedPbiId ? (storiesByPbi[selectedPbiId] ?? []) : []
|
||||
|
||||
// Sync into store — use stable string dep to avoid infinite loop
|
||||
const storyIdKey = rawStories.map(s => s.id).join(',')
|
||||
useEffect(() => {
|
||||
if (selectedPbiId) {
|
||||
initStories(selectedPbiId, storyIdKey ? storyIdKey.split(',') : [])
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedPbiId, storyIdKey])
|
||||
|
||||
const storyMap = Object.fromEntries(rawStories.map(s => [s.id, s]))
|
||||
const order = (selectedPbiId ? storyOrder[selectedPbiId] : null) ?? rawStories.map(s => s.id)
|
||||
const orderedStories = order.map(id => storyMap[id]).filter(Boolean)
|
||||
|
||||
const filtered = orderedStories
|
||||
.filter(s => !filterStatus || s.status === filterStatus)
|
||||
.filter(s => !filterPriority || s.priority === filterPriority)
|
||||
|
||||
const grouped = [1, 2, 3, 4].reduce<Record<number, Story[]>>((acc, p) => {
|
||||
acc[p] = filtered.filter(s => s.priority === p)
|
||||
return acc
|
||||
}, {} as Record<number, Story[]>)
|
||||
|
||||
const visiblePriorities = [1, 2, 3, 4].filter(
|
||||
p => grouped[p].length > 0 || creatingPriority === p
|
||||
)
|
||||
|
||||
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
|
||||
|
||||
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 || !selectedPbiId) return
|
||||
|
||||
const activeStory = storyMap[active.id as string]
|
||||
const overStory = storyMap[over.id as string]
|
||||
if (!activeStory || !overStory) 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)
|
||||
|
||||
reorderStories(selectedPbiId, newOrder)
|
||||
|
||||
const priorityChanged = activeStory.priority !== overStory.priority
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await reorderStoriesAction(
|
||||
selectedPbiId,
|
||||
productId,
|
||||
newOrder,
|
||||
priorityChanged ? overStory.priority : undefined
|
||||
)
|
||||
if (!result.success) {
|
||||
rollbackStories(selectedPbiId, prevOrder)
|
||||
toast.error('Volgorde opslaan mislukt')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const hasActiveFilters = filterStatus !== null || filterPriority !== null
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar
|
||||
title="Stories"
|
||||
actions={
|
||||
selectedPbiId && !isDemo ? (
|
||||
<button className="text-xs text-primary hover:underline">+ Story</button>
|
||||
) : undefined
|
||||
<>
|
||||
{hasActiveFilters && (
|
||||
<button onClick={() => { setFilterStatus(null); setFilterPriority(null) }} className="text-xs text-primary hover:underline">
|
||||
Filter wissen ×
|
||||
</button>
|
||||
)}
|
||||
<Select
|
||||
value={filterStatus ?? 'all'}
|
||||
onValueChange={(v) => setFilterStatus(!v || v === 'all' ? null : v)}
|
||||
>
|
||||
<SelectTrigger className="h-7 w-24 text-xs">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Alle</SelectItem>
|
||||
<SelectItem value="OPEN">Open</SelectItem>
|
||||
<SelectItem value="IN_SPRINT">In Sprint</SelectItem>
|
||||
<SelectItem value="DONE">Klaar</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{selectedPbiId && !isDemo && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setCreatingPriority(creatingPriority ? null : 2)}
|
||||
>
|
||||
+ Story
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{stories === null ? (
|
||||
{selectedPbiId === null ? (
|
||||
<p className="text-sm text-muted-foreground text-center mt-8">
|
||||
Selecteer een PBI om de stories te bekijken.
|
||||
</p>
|
||||
) : stories.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center mt-8">
|
||||
Nog geen stories voor dit PBI.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{stories.map(story => (
|
||||
<div
|
||||
key={story.id}
|
||||
className="bg-surface-container-low border border-border rounded-lg p-3 text-sm"
|
||||
>
|
||||
{story.title}
|
||||
</div>
|
||||
))}
|
||||
) : rawStories.length === 0 && creatingPriority === null ? (
|
||||
<div className="text-center mt-8 space-y-3">
|
||||
<p className="text-sm text-muted-foreground">Nog geen stories voor dit PBI.</p>
|
||||
{!isDemo && (
|
||||
<Button size="sm" variant="outline" onClick={() => setCreatingPriority(2)}>
|
||||
Maak je eerste story aan
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{visiblePriorities.map(priority => (
|
||||
<div key={priority}>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<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={() => setCreatingPriority(priority)}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SortableContext
|
||||
items={grouped[priority].map(s => s.id)}
|
||||
strategy={horizontalListSortingStrategy}
|
||||
>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{grouped[priority].map(story => (
|
||||
<SortableStoryBlock
|
||||
key={story.id}
|
||||
story={story}
|
||||
onClick={() => setOpenStory(story)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
|
||||
{creatingPriority === priority && selectedPbiId && (
|
||||
<CreateStoryForm
|
||||
productId={productId}
|
||||
pbiId={selectedPbiId}
|
||||
priority={priority}
|
||||
onDone={() => setCreatingPriority(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{creatingPriority !== null && !visiblePriorities.includes(creatingPriority) && selectedPbiId && (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[creatingPriority])}>
|
||||
{PRIORITY_LABELS[creatingPriority]}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
</div>
|
||||
<CreateStoryForm
|
||||
productId={productId}
|
||||
pbiId={selectedPbiId}
|
||||
priority={creatingPriority}
|
||||
onDone={() => setCreatingPriority(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DragOverlay>
|
||||
{activeDragId && storyMap[activeDragId] && (
|
||||
<div className="w-28 bg-surface-container-low border border-primary rounded-lg p-2 shadow-lg opacity-90">
|
||||
<p className="text-xs font-medium line-clamp-3">{storyMap[activeDragId].title}</p>
|
||||
</div>
|
||||
)}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{openStory && selectedPbiId && (
|
||||
<StoryDetailSheet
|
||||
story={openStory}
|
||||
productId={productId}
|
||||
pbiId={selectedPbiId}
|
||||
isDemo={isDemo}
|
||||
onClose={() => setOpenStory(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue