feat(ST-108/ST-208): replace inline forms with PBI and story dialogs
- PbiDialog: create/edit with priority select and optional description - StoryDialog: create/edit with priority, description, acceptance criteria, activity log, and delete - PrioritySelect: reusable controlled select component - Edit icons always visible on PBI rows and story blocks - Dialog backdrop uses 40% opacity blur Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
ce6ba59540
commit
4df83dcdbb
7 changed files with 538 additions and 343 deletions
|
|
@ -1,8 +1,6 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition, useEffect } from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import {
|
||||
DndContext,
|
||||
DragEndEvent,
|
||||
|
|
@ -24,15 +22,15 @@ import {
|
|||
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 { deletePbiAction } from '@/actions/pbis'
|
||||
import { reorderPbisAction, updatePbiPriorityAction } from '@/actions/stories'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { PbiDialog, type PbiDialogState } from './pbi-dialog'
|
||||
|
||||
const PRIORITY_LABELS: Record<number, string> = {
|
||||
1: 'Kritiek',
|
||||
|
|
@ -52,6 +50,7 @@ interface Pbi {
|
|||
id: string
|
||||
title: string
|
||||
priority: number
|
||||
description?: string | null
|
||||
}
|
||||
|
||||
interface PbiListProps {
|
||||
|
|
@ -66,12 +65,14 @@ function SortablePbiRow({
|
|||
isSelected,
|
||||
isDemo,
|
||||
onSelect,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: {
|
||||
pbi: Pbi
|
||||
isSelected: boolean
|
||||
isDemo: boolean
|
||||
onSelect: () => void
|
||||
onEdit: () => void
|
||||
onDelete: () => void
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
|
|
@ -107,69 +108,33 @@ function SortablePbiRow({
|
|||
)}
|
||||
<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 className="flex items-center gap-1 ml-2 shrink-0">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onEdit() }}
|
||||
className="border border-border rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors"
|
||||
aria-label="Bewerk PBI"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onDelete() }}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error text-xs"
|
||||
aria-label="Verwijder PBI"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</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 [dialogState, setDialogState] = useState<PbiDialogState | null>(null)
|
||||
const [activeDragId, setActiveDragId] = useState<string | null>(null)
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
|
|
@ -197,9 +162,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
return acc
|
||||
}, {} as Record<number, Pbi[]>)
|
||||
|
||||
const visiblePriorities = [1, 2, 3, 4].filter(
|
||||
p => grouped[p].length > 0 || creatingForPriority === p
|
||||
)
|
||||
const visiblePriorities = [1, 2, 3, 4].filter(p => grouped[p].length > 0)
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
|
|
@ -292,7 +255,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
<Button
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setCreatingForPriority(creatingForPriority ? null : 2)}
|
||||
onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}
|
||||
>
|
||||
+ PBI
|
||||
</Button>
|
||||
|
|
@ -302,17 +265,18 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{pbis.length === 0 && creatingForPriority === null ? (
|
||||
{pbis.length === 0 ? (
|
||||
<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)}>
|
||||
<Button size="sm" variant="outline" onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}>
|
||||
Maak je eerste PBI aan
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
id="pbi-list"
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
|
|
@ -328,7 +292,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
<div className="flex-1 h-px bg-border" />
|
||||
{!isDemo && (
|
||||
<button
|
||||
onClick={() => setCreatingForPriority(priority)}
|
||||
onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: priority })}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
+
|
||||
|
|
@ -347,36 +311,14 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
isSelected={selectedPbiId === pbi.id}
|
||||
isDemo={isDemo}
|
||||
onSelect={() => selectPbi(pbi.id)}
|
||||
onEdit={() => setDialogState({ mode: 'edit', productId, pbi })}
|
||||
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>
|
||||
|
|
@ -389,6 +331,11 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PbiDialog
|
||||
state={dialogState}
|
||||
onClose={() => setDialogState(null)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue