M14: TaskDialog (create/edit) + story auto-promotion (#21)
* chore(ST-1112): add deps for task dialog Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): add shared zod schema for task dialog Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): add missing MD3 tokens for task dialog outline-variant, on-error-container, status-review (light + dark) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): add saveTask and deleteTask server actions for TaskDialog Unified create/edit action (saveTask) replaces separate formData-based actions for the new TaskDialog. Uses shared zod schema, structured SaveTaskResult union type, and context-aware revalidatePath for both sprint and backlog routes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): add TaskDialog component (create & edit mode) Builds the full TaskDialog on top of the existing @base-ui/react Dialog primitive. Covers create mode, edit mode (status field + created_at metadata + delete), dirty-check AlertDialog, delete confirm AlertDialog, Cmd+Enter submit, and per-field char counters. Uses react-hook-form + zodResolver against the shared taskSchema. Priority and status are extracted to PrioritySegmented and StatusSelect sub-components using MD3 tokens throughout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): refactor task-list to open TaskDialog via URL params Replaces inline create/edit forms with router.push navigation: - Clicking a task row → ?editTask=<id> - "+ Taak" button → ?newTask=1&storyId=<storyId> Removes CreateTaskForm, EditSubmitButton, updateTaskAction, and createTaskAction from the component. Status toggle and DnD remain unchanged. Rows now have cursor-pointer and keyboard a11y. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): wire TaskDialog into sprint page via searchParams Sprint page now reads ?newTask, ?storyId, and ?editTask query params. For edit mode: fetches the task server-side with productAccessFilter scope (invalid/foreign IDs redirect to closePath). Renders TaskDialog when either param is present. closePath is the sprint route without query params. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): add Suspense skeleton for edit-mode task loading Extracts task fetch into EditTaskLoader (async server component) so the sprint board renders immediately while the task loads. TaskDialogSkeleton shows 3 grey bars during the fetch. Invalid or out-of-scope task IDs redirect to closePath. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): render description as markdown in task-detail-dialog Solo task detail now renders description via react-markdown + remark-gfm with prose styling. Sanitizes script/iframe elements. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(ST-1112): add saveTask/deleteTask server action tests Covers all three demo-policy layers and cross-tenant scope: demo blocked (403), unauthenticated blocked, validation 422, edit cross-tenant forbidden, create cross-tenant forbidden, and happy-path for both edit and create. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): add updateTaskStatusWithStoryPromotion helper Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1112): wire story-promotion into saveTask and PATCH /api/tasks/:id Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(ST-1112): add task-dialog doc and architecture note Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore: extend allowed tools in settings.local.json Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1113): add 200ms animation-delay to TaskDialogSkeleton to prevent flicker Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1114): add DirtyCloseGuard reusable component for dirty-form close confirmation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1114): add shared Markdown wrapper, apply to task-detail and story-dialog Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore: allow grep -E pattern in settings.local.json 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
64e3f610a6
commit
6cd98129f2
27 changed files with 3665 additions and 130 deletions
424
app/_components/tasks/task-dialog.tsx
Normal file
424
app/_components/tasks/task-dialog.tsx
Normal file
|
|
@ -0,0 +1,424 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useForm, Controller } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import TextareaAutosize from 'react-textarea-autosize'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
import type { TaskStatus } from '@prisma/client'
|
||||
import { taskSchema, type TaskInput } from '@/lib/schemas/task'
|
||||
import { saveTask, deleteTask } from '@/actions/tasks'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { PrioritySegmented } from './priority-segmented'
|
||||
import { StatusSelect } from './status-select'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export interface TaskDialogTask {
|
||||
id: string
|
||||
title: string
|
||||
description: string | null
|
||||
implementation_plan: string | null
|
||||
priority: number
|
||||
status: TaskStatus
|
||||
created_at: Date
|
||||
}
|
||||
|
||||
interface TaskDialogProps {
|
||||
task?: TaskDialogTask
|
||||
storyId?: string
|
||||
productId: string
|
||||
closePath: string
|
||||
isDemo?: boolean
|
||||
}
|
||||
|
||||
function CharCount({ value, max }: { value: string; max: number }) {
|
||||
const len = (value ?? '').length
|
||||
if (len < Math.floor(max * 0.75)) return null
|
||||
return (
|
||||
<span className="text-xs text-muted-foreground text-right block mt-1">
|
||||
{len} / {max}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const textareaClass = cn(
|
||||
'flex w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm',
|
||||
'transition-colors outline-none placeholder:text-muted-foreground resize-none',
|
||||
'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
|
||||
'overflow-y-auto',
|
||||
)
|
||||
|
||||
export function TaskDialog({ task, storyId, productId, closePath, isDemo = false }: TaskDialogProps) {
|
||||
const router = useRouter()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const [confirmClose, setConfirmClose] = useState(false)
|
||||
const [confirmDelete, setConfirmDelete] = useState(false)
|
||||
const isEdit = !!task
|
||||
|
||||
const form = useForm<TaskInput>({
|
||||
resolver: zodResolver(taskSchema),
|
||||
mode: 'onTouched',
|
||||
defaultValues: {
|
||||
title: task?.title ?? '',
|
||||
description: task?.description ?? '',
|
||||
implementation_plan: task?.implementation_plan ?? '',
|
||||
priority: task?.priority ?? 3,
|
||||
status: task?.status,
|
||||
},
|
||||
})
|
||||
|
||||
function handleClose() {
|
||||
router.push(closePath)
|
||||
}
|
||||
|
||||
function handleAttemptClose() {
|
||||
if (form.formState.isDirty) {
|
||||
setConfirmClose(true)
|
||||
} else {
|
||||
handleClose()
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
form.handleSubmit(onSubmit)()
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit(data: TaskInput) {
|
||||
startTransition(async () => {
|
||||
const result = await saveTask(data, {
|
||||
taskId: task?.id,
|
||||
storyId,
|
||||
productId,
|
||||
})
|
||||
|
||||
if (result.ok) {
|
||||
toast.success(isEdit ? 'Taak opgeslagen' : 'Taak aangemaakt')
|
||||
router.push(closePath)
|
||||
return
|
||||
}
|
||||
|
||||
if (result.code === 422 && result.error === 'validation') {
|
||||
for (const [field, errors] of Object.entries(result.fieldErrors)) {
|
||||
form.setError(field as keyof TaskInput, { message: errors[0] })
|
||||
}
|
||||
const firstError = Object.keys(result.fieldErrors)[0] as keyof TaskInput
|
||||
form.setFocus(firstError)
|
||||
return
|
||||
}
|
||||
|
||||
if (result.code === 403) {
|
||||
toast.error(
|
||||
result.error === 'demo_readonly'
|
||||
? 'Demo-modus: opslaan uitgeschakeld'
|
||||
: 'Geen toegang',
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
toast.error('Er ging iets mis. Probeer het opnieuw.', {
|
||||
action: { label: 'Opnieuw', onClick: () => form.handleSubmit(onSubmit)() },
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
if (!task) return
|
||||
setConfirmDelete(false)
|
||||
startTransition(async () => {
|
||||
const result = await deleteTask(task.id, { productId })
|
||||
if (result.ok) {
|
||||
toast.success('Taak verwijderd')
|
||||
router.push(closePath)
|
||||
return
|
||||
}
|
||||
if (result.code === 403) {
|
||||
toast.error(
|
||||
result.error === 'demo_readonly'
|
||||
? 'Demo-modus: verwijderen uitgeschakeld'
|
||||
: 'Geen toegang',
|
||||
)
|
||||
return
|
||||
}
|
||||
toast.error('Verwijderen mislukt')
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open onOpenChange={(open) => { if (!open) handleAttemptClose() }}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
onKeyDown={handleKeyDown}
|
||||
className={cn(
|
||||
'flex flex-col p-0 gap-0',
|
||||
'max-h-[90vh] w-full max-w-[calc(100%-2rem)]',
|
||||
'sm:max-w-[90vw] sm:max-h-[85vh]',
|
||||
'lg:max-w-[50vw] lg:min-w-[480px]',
|
||||
)}
|
||||
>
|
||||
{/* Sticky header */}
|
||||
<div className="flex items-center justify-between px-6 pt-5 pb-4 border-b border-outline-variant shrink-0">
|
||||
<DialogTitle className="text-xl font-semibold">
|
||||
{isEdit ? 'Taak bewerken' : 'Nieuwe taak'}
|
||||
</DialogTitle>
|
||||
{isEdit && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Aangemaakt:{' '}
|
||||
{new Intl.DateTimeFormat('nl-NL', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
}).format(new Date(task.created_at))}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Scrollable form body */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-6 space-y-6">
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-2 block">
|
||||
Titel <span className="text-destructive">*</span>
|
||||
</label>
|
||||
<Input
|
||||
{...form.register('title')}
|
||||
aria-invalid={!!form.formState.errors.title}
|
||||
autoFocus
|
||||
placeholder="Taaknaam..."
|
||||
className="h-14"
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') e.preventDefault() }}
|
||||
/>
|
||||
{form.formState.errors.title && (
|
||||
<p className="text-xs text-destructive mt-1">
|
||||
{form.formState.errors.title.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-2 block">Omschrijving</label>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<>
|
||||
<TextareaAutosize
|
||||
{...field}
|
||||
value={field.value ?? ''}
|
||||
aria-invalid={!!form.formState.errors.description}
|
||||
minRows={3}
|
||||
maxRows={6}
|
||||
placeholder="Optionele omschrijving..."
|
||||
className={cn(
|
||||
textareaClass,
|
||||
form.formState.errors.description &&
|
||||
'border-destructive ring-3 ring-destructive/20',
|
||||
)}
|
||||
/>
|
||||
<CharCount value={field.value ?? ''} max={2000} />
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Markdown ondersteund (lijstjes, **vet**, `code`)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{form.formState.errors.description && (
|
||||
<p className="text-xs text-destructive mt-1">
|
||||
{form.formState.errors.description.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Implementation plan */}
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-2 block">Implementatieplan</label>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="implementation_plan"
|
||||
render={({ field }) => (
|
||||
<>
|
||||
<TextareaAutosize
|
||||
{...field}
|
||||
value={field.value ?? ''}
|
||||
aria-invalid={!!form.formState.errors.implementation_plan}
|
||||
minRows={5}
|
||||
maxRows={12}
|
||||
placeholder="Optioneel implementatieplan..."
|
||||
className={cn(
|
||||
textareaClass,
|
||||
form.formState.errors.implementation_plan &&
|
||||
'border-destructive ring-3 ring-destructive/20',
|
||||
)}
|
||||
/>
|
||||
<CharCount value={field.value ?? ''} max={10000} />
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Markdown ondersteund (lijstjes, **vet**, `code`)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{form.formState.errors.implementation_plan && (
|
||||
<p className="text-xs text-destructive mt-1">
|
||||
{form.formState.errors.implementation_plan.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Priority */}
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-2 block">Prioriteit</label>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="priority"
|
||||
render={({ field }) => (
|
||||
<PrioritySegmented
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
disabled={isPending}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status — edit only */}
|
||||
{isEdit && (
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-2 block">Status</label>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="status"
|
||||
render={({ field }) => (
|
||||
<StatusSelect
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
disabled={isPending}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sticky footer */}
|
||||
<div className="border-t border-outline-variant px-6 py-4 shrink-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{isEdit ? (
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
disabled={isPending || isDemo}
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
>
|
||||
Verwijderen
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={handleAttemptClose}
|
||||
disabled={isPending}
|
||||
>
|
||||
Annuleren
|
||||
</Button>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={isPending || isDemo}
|
||||
onClick={form.handleSubmit(onSubmit)}
|
||||
>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
{isEdit ? 'Opslaan...' : 'Aanmaken...'}
|
||||
</>
|
||||
) : isEdit ? (
|
||||
'Opslaan'
|
||||
) : (
|
||||
'Aanmaken'
|
||||
)}
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Dirty-check confirm */}
|
||||
<AlertDialog open={confirmClose} onOpenChange={setConfirmClose}>
|
||||
<AlertDialogContent size="sm">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Wijzigingen niet opgeslagen</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Wil je de wijzigingen weggooien?
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setConfirmClose(false)}>
|
||||
Terug
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
variant="destructive"
|
||||
onClick={() => { setConfirmClose(false); handleClose() }}
|
||||
>
|
||||
Weggooien
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* Delete confirm */}
|
||||
<AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
|
||||
<AlertDialogContent size="sm">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Taak verwijderen</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Weet je zeker dat je deze taak wilt verwijderen? Dit kan niet ongedaan worden gemaakt.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setConfirmDelete(false)}>
|
||||
Annuleren
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
variant="destructive"
|
||||
disabled={isPending}
|
||||
onClick={handleDelete}
|
||||
>
|
||||
{isPending ? <Loader2 className="size-4 animate-spin" /> : 'Verwijderen'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue