diff --git a/actions/stories.ts b/actions/stories.ts index cb18a3d..d744b98 100644 --- a/actions/stories.ts +++ b/actions/stories.ts @@ -3,18 +3,20 @@ import { revalidatePath } from 'next/cache' import { cookies } from 'next/headers' import { getIronSession } from 'iron-session' -import { z } from 'zod' import { prisma } from '@/lib/prisma' import { SessionData, sessionOptions } from '@/lib/session' import { getAccessibleProduct, productAccessFilter } from '@/lib/product-access' import { requireProductWriter } from '@/lib/auth' -import { isValidCode, MAX_CODE_LENGTH, normalizeCode } from '@/lib/code' +import { isValidCode, normalizeCode } from '@/lib/code' import { createWithCodeRetry, generateNextStoryCode } from '@/lib/code-server' +import { createStorySchema, updateStorySchema } from '@/lib/schemas/story' async function getSession() { return getIronSession(await cookies(), sessionOptions) } +type StoryFieldErrors = Record + async function verifyStoryAccess(storyId: string, userId: string) { return prisma.story.findFirst({ where: { id: storyId, product: productAccessFilter(userId) }, @@ -26,31 +28,10 @@ function hasDuplicateIds(ids: string[]) { return new Set(ids).size !== ids.length } -const codeField = z.string().max(MAX_CODE_LENGTH).optional() - -const createStorySchema = z.object({ - pbiId: z.string(), - productId: z.string(), - code: codeField, - title: z.string().min(1, 'Titel is verplicht').max(200), - description: z.string().max(2000).optional(), - acceptance_criteria: z.string().max(2000).optional(), - priority: z.coerce.number().int().min(1).max(4), -}) - -const updateStorySchema = z.object({ - id: z.string(), - code: codeField, - title: z.string().min(1, 'Titel is verplicht').max(200), - description: z.string().max(2000).optional(), - acceptance_criteria: z.string().max(2000).optional(), - priority: z.coerce.number().int().min(1).max(4), -}) - export async function createStoryAction(_prevState: unknown, formData: FormData) { const session = await getSession() - if (!session.userId) return { error: 'Niet ingelogd' } - if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' } + if (!session.userId) return { error: 'Niet ingelogd', code: 403 } + if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus', code: 403 } const parsed = createStorySchema.safeParse({ pbiId: formData.get('pbiId'), @@ -61,20 +42,36 @@ export async function createStoryAction(_prevState: unknown, formData: FormData) acceptance_criteria: formData.get('acceptance_criteria') || undefined, priority: formData.get('priority') ?? 2, }) - if (!parsed.success) return { error: parsed.error.flatten().fieldErrors } + if (!parsed.success) { + return { + error: 'Validatie mislukt', + code: 422, + fieldErrors: parsed.error.flatten().fieldErrors as StoryFieldErrors, + } + } const pbi = await prisma.pbi.findFirst({ where: { id: parsed.data.pbiId, product: productAccessFilter(session.userId) }, }) - if (!pbi) return { error: 'PBI niet gevonden' } + if (!pbi) return { error: 'PBI niet gevonden', code: 403 } const manualCode = normalizeCode(parsed.data.code) if (manualCode !== null && !isValidCode(manualCode)) { - return { error: { code: ['Code mag alleen letters, cijfers, punten, koppeltekens of underscores bevatten'] } } + return { + error: 'Validatie mislukt', + code: 422, + fieldErrors: { code: ['Alleen letters, cijfers, punten, koppeltekens of underscores'] } as StoryFieldErrors, + } } if (manualCode) { const dup = await prisma.story.findFirst({ where: { product_id: pbi.product_id, code: manualCode } }) - if (dup) return { error: { code: ['Deze code is al in gebruik binnen dit product'] } } + if (dup) { + return { + error: 'Validatie mislukt', + code: 422, + fieldErrors: { code: ['Deze code is al in gebruik binnen dit product'] } as StoryFieldErrors, + } + } } const last = await prisma.story.findFirst({ @@ -107,7 +104,11 @@ export async function createStoryAction(_prevState: unknown, formData: FormData) (code) => insert(code), ) } catch { - return { error: { code: ['Kon geen unieke code genereren — probeer opnieuw'] } } + return { + error: 'Validatie mislukt', + code: 422, + fieldErrors: { code: ['Kon geen unieke code genereren — probeer opnieuw'] } as StoryFieldErrors, + } } revalidatePath(`/products/${pbi.product_id}`) @@ -116,8 +117,8 @@ export async function createStoryAction(_prevState: unknown, formData: FormData) export async function updateStoryAction(_prevState: unknown, formData: FormData) { const session = await getSession() - if (!session.userId) return { error: 'Niet ingelogd' } - if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' } + if (!session.userId) return { error: 'Niet ingelogd', code: 403 } + if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus', code: 403 } const parsed = updateStorySchema.safeParse({ id: formData.get('id'), @@ -127,20 +128,36 @@ export async function updateStoryAction(_prevState: unknown, formData: FormData) acceptance_criteria: formData.get('acceptance_criteria') || undefined, priority: formData.get('priority'), }) - if (!parsed.success) return { error: parsed.error.flatten().fieldErrors } + if (!parsed.success) { + return { + error: 'Validatie mislukt', + code: 422, + fieldErrors: parsed.error.flatten().fieldErrors as StoryFieldErrors, + } + } const story = await verifyStoryAccess(parsed.data.id, session.userId) - if (!story) return { error: 'Story niet gevonden' } + if (!story) return { error: 'Story niet gevonden', code: 403 } const code = normalizeCode(parsed.data.code) if (code !== null && !isValidCode(code)) { - return { error: { code: ['Code mag alleen letters, cijfers, punten, koppeltekens of underscores bevatten'] } } + return { + error: 'Validatie mislukt', + code: 422, + fieldErrors: { code: ['Alleen letters, cijfers, punten, koppeltekens of underscores'] } as StoryFieldErrors, + } } if (code) { const dup = await prisma.story.findFirst({ where: { product_id: story.product_id, code, NOT: { id: parsed.data.id } }, }) - if (dup) return { error: { code: ['Deze code is al in gebruik binnen dit product'] } } + if (dup) { + return { + error: 'Validatie mislukt', + code: 422, + fieldErrors: { code: ['Deze code is al in gebruik binnen dit product'] } as StoryFieldErrors, + } + } } await prisma.story.update({ diff --git a/components/backlog/story-dialog.tsx b/components/backlog/story-dialog.tsx index 724f430..df76970 100644 --- a/components/backlog/story-dialog.tsx +++ b/components/backlog/story-dialog.tsx @@ -1,17 +1,24 @@ 'use client' import { useEffect, useRef, useState, useTransition } from 'react' -import { Markdown } from '@/components/markdown' import { useActionState } from 'react' -import { useFormStatus } from 'react-dom' +import { Markdown } from '@/components/markdown' import { toast } from 'sonner' import { Dialog, DialogContent, - DialogHeader, DialogTitle, - DialogClose, } from '@/components/ui/dialog' +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from '@/components/ui/alert-dialog' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Textarea } from '@/components/ui/textarea' @@ -19,6 +26,16 @@ import { Badge } from '@/components/ui/badge' import { PrioritySelect, PRIORITY_LABELS, PRIORITY_COLORS } from '@/components/shared/priority-select' import { StoryLog } from '@/components/shared/story-log' import { DemoTooltip } from '@/components/shared/demo-tooltip' +import { + useDirtyCloseGuard, + DirtyCloseGuardDialog, +} from '@/components/shared/use-dirty-close-guard' +import { useDialogSubmitShortcut } from '@/components/shared/use-dialog-submit-shortcut' +import { + entityDialogContentClasses, + entityDialogFooterClasses, + entityDialogHeaderClasses, +} from '@/components/shared/entity-dialog-layout' import { createStoryAction, updateStoryAction, deleteStoryAction, getStoryLogsAction } from '@/actions/stories' import { cn } from '@/lib/utils' import type { Story } from './story-panel' @@ -33,6 +50,14 @@ interface StoryDialogProps { isDemo?: boolean } +interface ActionResult { + success?: boolean + error?: string + code?: number + fieldErrors?: Record + story?: unknown +} + const STATUS_COLORS: Record = { 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', @@ -44,15 +69,6 @@ const STATUS_LABELS: Record = { DONE: 'Klaar', } -function SubmitButton({ label, disabled }: { label: string; disabled?: boolean }) { - const { pending } = useFormStatus() - return ( - - ) -} - export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps) { const isEdit = state?.mode === 'edit' const story = isEdit ? (state as Extract).story : null @@ -62,52 +78,50 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps const [confirmDelete, setConfirmDelete] = useState(false) const [isDeleting, startDeleteTransition] = useTransition() const [logs, setLogs] = useState> | null>(null) + const [dirty, setDirty] = useState(false) + const formRef = useRef(null) useEffect(() => { if (!state) return // eslint-disable-next-line react-hooks/set-state-in-effect setConfirmDelete(false) + setDirty(false) if (state.mode === 'edit') { - setPriority(state.story.priority) - setLogs(null) getStoryLogsAction(state.story.id).then(setLogs) } else { - setPriority(state.defaultPriority ?? 2) } }, [state]) - const [createResult, createAction] = useActionState( - async (_prev: unknown, fd: FormData) => { - const result = await createStoryAction(_prev, fd) + const [createResult, createAction, createPending] = useActionState( + async (_prev, fd) => { + const result = await createStoryAction(_prev, fd) as ActionResult if (result?.success) { toast.success('Story aangemaakt'); onClose() } - else if (typeof result?.error === 'string') toast.error(result.error) + else if (result?.code !== 422 && result?.error) toast.error(result.error) return result }, - undefined + undefined, ) - const [updateResult, updateAction] = useActionState( - async (_prev: unknown, fd: FormData) => { - const result = await updateStoryAction(_prev, fd) + const [updateResult, updateAction, updatePending] = useActionState( + async (_prev, fd) => { + const result = await updateStoryAction(_prev, fd) as ActionResult if (result?.success) { toast.success('Story opgeslagen'); onClose() } - else if (typeof result?.error === 'string') toast.error(result.error) + else if (result?.code !== 422 && result?.error) toast.error(result.error) return result }, - undefined + undefined, ) - const fieldError = (field: string) => { - const result = isEdit ? updateResult : createResult - const err = result?.error - if (!err || typeof err === 'string') return undefined - return (err as Record)[field]?.[0] - } + const pending = isEdit ? updatePending : createPending + const activeResult = isEdit ? updateResult : createResult + const fieldError = (field: string) => activeResult?.fieldErrors?.[field]?.[0] function handleDelete() { if (!story) return + setConfirmDelete(false) startDeleteTransition(async () => { const result = await deleteStoryAction(story.id) if (result && 'error' in result) toast.error(result.error ?? 'Verwijderen mislukt') @@ -121,49 +135,61 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps if (state) setTimeout(() => titleRef.current?.focus(), 50) }, [state]) + const closeGuard = useDirtyCloseGuard(dirty, onClose) + const handleKeyDown = useDialogSubmitShortcut(() => formRef.current?.requestSubmit()) + const showForm = !isDemo || !isEdit return ( - { if (!open) onClose() }}> - - -
- {isEdit ? story!.title : 'Nieuwe story'} - {isEdit && story!.code && ( - - {story!.code} - + <> + { if (!open) closeGuard.attemptClose() }}> + +
+
+ + {isEdit ? story!.title : 'Nieuwe story'} + + {isEdit && story!.code && ( + + {story!.code} + + )} +
+ {isEdit && ( +
+ + {PRIORITY_LABELS[priority]} + + + {STATUS_LABELS[story!.status]} + +
)}
- {isEdit && ( -
- - {PRIORITY_LABELS[priority]} - - - {STATUS_LABELS[story!.status]} - -
- )} - -
- {isEdit && } - {!isEdit && ( - <> - - - - )} - + setDirty(true)} + className="flex-1 overflow-y-auto" + > + {isEdit && } + {!isEdit && ( + <> + + + + )} + -
{showForm ? ( -
+
@@ -172,18 +198,24 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps defaultValue={story?.code ?? ''} placeholder={isEdit ? '' : 'auto'} maxLength={30} + disabled={isDemo} + aria-invalid={!!fieldError('code')} className={cn('font-mono text-sm', fieldError('code') ? 'border-error' : '')} /> {fieldError('code') &&

{fieldError('code')}

}
- + {fieldError('title') &&

{fieldError('title')}

} @@ -192,7 +224,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
- + { setPriority(v); setDirty(true) }} />
@@ -204,6 +236,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps rows={3} defaultValue={story?.description ?? ''} placeholder="Als… wil ik… zodat…" + disabled={isDemo} className="resize-none" />
@@ -217,18 +250,13 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps rows={3} defaultValue={story?.acceptance_criteria ?? ''} placeholder="- Gegeven… Als… Dan…" + disabled={isDemo} className="resize-none" />
- - {typeof (isEdit ? updateResult?.error : createResult?.error) === 'string' && ( -

- {String(isEdit ? updateResult?.error : createResult?.error)} -

- )}
) : ( -
+
{story?.description && (

Omschrijving

@@ -245,7 +273,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps )} {isEdit && ( -
+

Activiteitenlog

{logs && 'logs' in logs && logs.logs ? ( )} -
+ - {isEdit && ( -
- {!isDemo && confirmDelete ? ( -
- - Weet je het zeker? Taken worden ook verwijderd. - - - -
- ) : ( +
+
+ {isEdit ? ( + ) : ( +
)} +
+ + + + +
- )} - -
- }> - Annuleren - - - -
- - -
+ +
+ + + + + + + Story verwijderen + + Weet je het zeker? Bijbehorende taken worden ook verwijderd. Dit kan niet ongedaan worden. + + + + setConfirmDelete(false)}> + Annuleren + + + {isDeleting ? 'Bezig…' : 'Verwijderen'} + + + + + ) } diff --git a/docs/INDEX.md b/docs/INDEX.md index 21070ad..2728257 100644 --- a/docs/INDEX.md +++ b/docs/INDEX.md @@ -25,7 +25,7 @@ Auto-generated on 2026-05-04 from front-matter and headings. |---|---|---| | [PbiDialog Profiel](./specs/dialogs/pbi.md) | active | 2026-05-04 | | [ProductDialog Profiel](./specs/dialogs/product.md) | active | 2026-05-04 | -| [StoryDialog Profiel](./specs/dialogs/story.md) | active | 2026-05-03 | +| [StoryDialog Profiel](./specs/dialogs/story.md) | active | 2026-05-04 | | [TaskDialog Profiel](./specs/dialogs/task.md) | active | 2026-05-03 | | [Scrum4Me — Functionele Specificatie](./specs/functional.md) | active | 2026-05-03 | | [DevPlanner — User Personas](./specs/personas.md) | active | 2026-05-03 | diff --git a/docs/specs/dialogs/story.md b/docs/specs/dialogs/story.md index 137f935..10f2fca 100644 --- a/docs/specs/dialogs/story.md +++ b/docs/specs/dialogs/story.md @@ -3,7 +3,7 @@ title: "StoryDialog Profiel" status: active audience: [ai-agent, contributor] language: nl -last_updated: 2026-05-03 +last_updated: 2026-05-04 --- # StoryDialog Profiel @@ -104,19 +104,17 @@ In edit-mode wordt onder het form een ``-paneel getoond met de chronol Dit is een **read-only side-panel** en valt binnen de uitzondering die de generieke spec § 13 maakt voor ``-style activity-rendering. -### Delete-flow (afwijking van generieke spec) +### Delete-flow -Generieke spec § 10.4 vereist een **`AlertDialog`** voor delete-confirmatie. StoryDialog gebruikt in plaats daarvan een **inline-confirm** in dezelfde footer-rij: - -``` -[ Weet je het zeker? Taken worden ook verwijderd. [Verwijderen] [Annuleren] ] -``` - -Een `AlertDialog` zou een tweede modale laag toevoegen die in deze context onhandig voelt (de dialog zelf is al een interruptive overlay). De inline-confirm is een **bewuste afwijking** van de generieke spec. +Volgt generieke spec § 10.4: klik op "Verwijderen" opent een `AlertDialog` ("Story verwijderen — bijbehorende taken worden ook verwijderd"). Bevestigen roept `deleteStoryAction` aan. ### Form-state via `useActionState` -Net als PbiDialog gebruikt StoryDialog `useActionState` + `useFormStatus`, niet `react-hook-form`. Dit is een toegestaan alternatief volgens de generieke spec § 2. +Net als PbiDialog gebruikt StoryDialog `useActionState`, niet `react-hook-form`. Pending-state komt uit de derde return-waarde (`useActionState[2]`). Dit is een toegestaan alternatief volgens de generieke spec § 2. + +### Dirty-tracking handmatig + +Geen `react-hook-form`, dus `dirty` wordt op `true` gezet bij de eerste `onChange` op het form en bij wijzigingen van de hidden-state (`priority`). De `useDirtyCloseGuard` hook gebruikt deze boolean om Esc/Cancel/backdrop te beschermen. ### `key`-prop op `
` @@ -132,16 +130,10 @@ Het `` heeft `key={isEdit ? story!.id : 'create'}` — reset native form-s --- -## Bekende gaps t.o.v. generieke spec +## Bewuste afwijkingen van generieke spec -> Deze items wijken af van `docs/patterns/dialog.md` en horen in een vervolg-PR rechtgezet (niet onderdeel van de huidige docs-introductie). - -- ❌ **Geen dirty-close-guard** — Esc / backdrop / Cancel sluiten direct, ook met onopgeslagen wijzigingen. Generieke spec § 8.1 vereist een AlertDialog bij `isDirty`. -- ❌ **Geen Cmd/Ctrl+Enter shortcut** — alleen klik op submit-knop. -- ❌ **Geen char-counter / markdown-hint** op description / acceptance_criteria — bewust weggelaten, maar verdient expliciete bevestiging als design-keuze. -- ⚠️ **Inline-delete-confirm** in plaats van AlertDialog (zie § Speciale gedragingen). Bewuste afwijking; de generieke spec mag deze variant expliciet toestaan, of dit profile moet als precedent gelden voor toekomstige dialogen. -- ⚠️ **Header-layout** met meerdere badges wijkt af van de sobere header in § 4. Bewuste afwijking — context-zwaar bij story-wisselen. -- ⚠️ **Layout wijkt af** van de generieke responsive-tabel: `sm:max-w-lg` met eigen `max-h-[90vh]` + `flex flex-col` i.p.v. de exacte `max-w-[50vw]` / `90vw` / full-screen-progressie uit § 4. +- ⚠️ **Header-layout** met meerdere badges wijkt af van de sobere header in § 4. Bewuste keuze — story-context (priority + status) wil je direct zichtbaar bij record-wisselen. +- ❌ **Geen char-counter / markdown-hint** op description / acceptance_criteria — bewust weggelaten omdat stories meestal één zin lang zijn. --- diff --git a/lib/schemas/story.ts b/lib/schemas/story.ts new file mode 100644 index 0000000..65802af --- /dev/null +++ b/lib/schemas/story.ts @@ -0,0 +1,26 @@ +import { z } from 'zod' +import { MAX_CODE_LENGTH } from '@/lib/code' + +const codeField = z.string().max(MAX_CODE_LENGTH).optional() + +export const createStorySchema = z.object({ + pbiId: z.string(), + productId: z.string(), + code: codeField, + title: z.string().min(1, 'Titel is verplicht').max(200), + description: z.string().max(2000).optional(), + acceptance_criteria: z.string().max(2000).optional(), + priority: z.coerce.number().int().min(1).max(4), +}) + +export const updateStorySchema = z.object({ + id: z.string(), + code: codeField, + title: z.string().min(1, 'Titel is verplicht').max(200), + description: z.string().max(2000).optional(), + acceptance_criteria: z.string().max(2000).optional(), + priority: z.coerce.number().int().min(1).max(4), +}) + +export type CreateStoryInput = z.infer +export type UpdateStoryInput = z.infer