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>
This commit is contained in:
parent
f60396684f
commit
59e214fc12
3 changed files with 535 additions and 0 deletions
56
app/_components/tasks/priority-segmented.tsx
Normal file
56
app/_components/tasks/priority-segmented.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
'use client'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const PRIORITIES = [
|
||||
{
|
||||
value: 1,
|
||||
label: 'P1 Critical',
|
||||
selected: 'bg-error-container text-on-error-container border-transparent',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'P2 High',
|
||||
selected: 'bg-priority-high/15 text-priority-high border-priority-high/30',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: 'P3 Medium',
|
||||
selected: 'bg-primary text-primary-foreground border-transparent',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'P4 Low',
|
||||
selected: 'bg-muted text-foreground border-border',
|
||||
},
|
||||
]
|
||||
|
||||
interface PrioritySegmentedProps {
|
||||
value: number
|
||||
onChange: (value: number) => void
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export function PrioritySegmented({ value, onChange, disabled }: PrioritySegmentedProps) {
|
||||
return (
|
||||
<div className="flex gap-1 flex-wrap" role="group" aria-label="Prioriteit">
|
||||
{PRIORITIES.map(p => (
|
||||
<button
|
||||
key={p.value}
|
||||
type="button"
|
||||
onClick={() => !disabled && onChange(p.value)}
|
||||
aria-pressed={value === p.value}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
'rounded-lg border px-3 py-1.5 text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
value === p.value
|
||||
? cn('font-medium', p.selected)
|
||||
: 'border-border text-muted-foreground hover:bg-muted hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
55
app/_components/tasks/status-select.tsx
Normal file
55
app/_components/tasks/status-select.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
'use client'
|
||||
|
||||
import type { TaskStatus } from '@prisma/client'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
} from '@/components/ui/select'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const STATUS_CONFIG: Record<TaskStatus, { label: string; dot: string }> = {
|
||||
TO_DO: { label: 'To Do', dot: 'bg-muted-foreground' },
|
||||
IN_PROGRESS: { label: 'Bezig', dot: 'bg-status-in-progress' },
|
||||
REVIEW: { label: 'Review', dot: 'bg-status-review' },
|
||||
DONE: { label: 'Klaar', dot: 'bg-status-done' },
|
||||
}
|
||||
|
||||
const STATUS_ORDER: TaskStatus[] = ['TO_DO', 'IN_PROGRESS', 'REVIEW', 'DONE']
|
||||
|
||||
function StatusIndicator({ status }: { status: TaskStatus }) {
|
||||
return (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className={cn('size-2.5 rounded-full shrink-0', STATUS_CONFIG[status].dot)} />
|
||||
{STATUS_CONFIG[status].label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
interface StatusSelectProps {
|
||||
value?: TaskStatus
|
||||
onChange: (value: TaskStatus) => void
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export function StatusSelect({ value = 'TO_DO', onChange, disabled }: StatusSelectProps) {
|
||||
return (
|
||||
<Select
|
||||
value={value}
|
||||
onValueChange={(v) => onChange(v as TaskStatus)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger className="w-48">
|
||||
<StatusIndicator status={value} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{STATUS_ORDER.map(status => (
|
||||
<SelectItem key={status} value={status}>
|
||||
<StatusIndicator status={status} />
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
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