223 lines
8.4 KiB
TypeScript
223 lines
8.4 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { useActionState } from 'react'
|
|
import { toast } from 'sonner'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { PrioritySelect } from '@/components/shared/priority-select'
|
|
import { PbiStatusSelect } from '@/components/shared/pbi-status-select'
|
|
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 {
|
|
entityDialogBodyClasses,
|
|
entityDialogContentClasses,
|
|
entityDialogFooterClasses,
|
|
entityDialogHeaderClasses,
|
|
} from '@/components/shared/entity-dialog-layout'
|
|
import { createPbiAction, updatePbiAction } from '@/actions/pbis'
|
|
import type { PbiStatusApi } from '@/lib/task-status'
|
|
import { debugProps } from '@/lib/debug'
|
|
|
|
export interface PbiDialogPbi {
|
|
id: string
|
|
title: string
|
|
priority: number
|
|
description?: string | null
|
|
code?: string | null
|
|
status?: PbiStatusApi
|
|
}
|
|
|
|
type CreateState = { mode: 'create'; productId: string; defaultPriority?: number }
|
|
type EditState = { mode: 'edit'; pbi: PbiDialogPbi; productId: string }
|
|
export type PbiDialogState = CreateState | EditState
|
|
|
|
interface PbiDialogProps {
|
|
state: PbiDialogState | null
|
|
onClose: () => void
|
|
isDemo?: boolean
|
|
}
|
|
|
|
interface ActionResult {
|
|
success?: boolean
|
|
error?: string
|
|
code?: number
|
|
fieldErrors?: Record<string, string[]>
|
|
pbi?: unknown
|
|
}
|
|
|
|
export function PbiDialog({ state, onClose, isDemo = false }: PbiDialogProps) {
|
|
const isEdit = state?.mode === 'edit'
|
|
const pbi = isEdit ? state.pbi : null
|
|
|
|
const initialPriority = isEdit ? pbi!.priority : (state?.defaultPriority ?? 2)
|
|
const [priority, setPriority] = useState<number>(initialPriority)
|
|
|
|
const initialStatus: PbiStatusApi = isEdit ? (pbi!.status ?? 'ready') : 'ready'
|
|
const [status, setStatus] = useState<PbiStatusApi>(initialStatus)
|
|
|
|
const [dirty, setDirty] = useState(false)
|
|
const formRef = useRef<HTMLFormElement>(null)
|
|
|
|
// Sync priority + status + reset dirty when dialog opens for a different PBI or switches mode
|
|
useEffect(() => {
|
|
if (state) {
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
setPriority(isEdit ? (state as EditState).pbi.priority : ((state as CreateState).defaultPriority ?? 2))
|
|
setStatus(isEdit ? ((state as EditState).pbi.status ?? 'ready') : 'ready')
|
|
setDirty(false)
|
|
}
|
|
}, [state, isEdit])
|
|
|
|
const [createState, createAction, createPending] = useActionState<ActionResult | undefined, FormData>(
|
|
async (_prev, fd) => {
|
|
const result = await createPbiAction(_prev, fd) as ActionResult
|
|
if (result?.success) { toast.success('PBI aangemaakt'); onClose() }
|
|
else if (result?.code !== 422 && result?.error) toast.error(result.error)
|
|
return result
|
|
},
|
|
undefined,
|
|
)
|
|
|
|
const [updateState, updateAction, updatePending] = useActionState<ActionResult | undefined, FormData>(
|
|
async (_prev, fd) => {
|
|
const result = await updatePbiAction(_prev, fd) as ActionResult
|
|
if (result?.success) { toast.success('PBI opgeslagen'); onClose() }
|
|
else if (result?.code !== 422 && result?.error) toast.error(result.error)
|
|
return result
|
|
},
|
|
undefined,
|
|
)
|
|
|
|
const pending = isEdit ? updatePending : createPending
|
|
|
|
const activeState = isEdit ? updateState : createState
|
|
const fieldError = (field: string) => activeState?.fieldErrors?.[field]?.[0]
|
|
|
|
const titleRef = useRef<HTMLInputElement>(null)
|
|
useEffect(() => {
|
|
if (state) {
|
|
setTimeout(() => titleRef.current?.focus(), 50)
|
|
}
|
|
}, [state])
|
|
|
|
const closeGuard = useDirtyCloseGuard(dirty, onClose)
|
|
const handleKeyDown = useDialogSubmitShortcut(() => formRef.current?.requestSubmit())
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={!!state} onOpenChange={(open) => { if (!open) closeGuard.attemptClose() }}>
|
|
<DialogContent
|
|
showCloseButton={false}
|
|
onKeyDown={handleKeyDown}
|
|
className={entityDialogContentClasses}
|
|
{...debugProps('pbi-dialog', 'PbiDialog', 'components/backlog/pbi-dialog.tsx')}
|
|
>
|
|
<div className={entityDialogHeaderClasses}>
|
|
<DialogTitle className="text-xl font-semibold">
|
|
{isEdit ? 'PBI bewerken' : 'Nieuw PBI'}
|
|
</DialogTitle>
|
|
</div>
|
|
|
|
<form
|
|
ref={formRef}
|
|
id="pbi-form"
|
|
key={isEdit ? pbi!.id : 'create'}
|
|
action={isEdit ? updateAction : createAction}
|
|
onChange={() => setDirty(true)}
|
|
className={entityDialogBodyClasses}
|
|
>
|
|
{isEdit && <input type="hidden" name="id" value={pbi!.id} />}
|
|
{!isEdit && <input type="hidden" name="productId" value={(state as CreateState | null)?.productId ?? ''} />}
|
|
<input type="hidden" name="priority" value={priority} />
|
|
<input type="hidden" name="status" value={status} />
|
|
|
|
<div className="grid grid-cols-[6rem_1fr] gap-3">
|
|
<div className="grid gap-1.5">
|
|
<label htmlFor="pbi-code" className="text-sm font-medium">Code</label>
|
|
<Input
|
|
id="pbi-code"
|
|
name="code"
|
|
defaultValue={pbi?.code ?? ''}
|
|
placeholder={isEdit ? '' : 'auto'}
|
|
maxLength={30}
|
|
disabled={isDemo}
|
|
aria-invalid={!!fieldError('code')}
|
|
className={fieldError('code') ? 'font-mono text-sm border-error' : 'font-mono text-sm'}
|
|
/>
|
|
{fieldError('code') && <p className="text-xs text-error">{fieldError('code')}</p>}
|
|
</div>
|
|
<div className="grid gap-1.5">
|
|
<label htmlFor="pbi-title" className="text-sm font-medium">Titel <span className="text-error">*</span></label>
|
|
<Input
|
|
id="pbi-title"
|
|
ref={titleRef}
|
|
name="title"
|
|
defaultValue={pbi?.title ?? ''}
|
|
placeholder="PBI-titel…"
|
|
required
|
|
maxLength={200}
|
|
disabled={isDemo}
|
|
aria-invalid={!!fieldError('title')}
|
|
className={fieldError('title') ? 'border-error' : ''}
|
|
/>
|
|
{fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-1.5">
|
|
<label className="text-sm font-medium">Prioriteit</label>
|
|
<PrioritySelect value={priority} onChange={(v) => { setPriority(v); setDirty(true) }} />
|
|
</div>
|
|
<div className="grid gap-1.5">
|
|
<label className="text-sm font-medium">Status</label>
|
|
<PbiStatusSelect value={status} onChange={(v) => { setStatus(v); setDirty(true) }} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-1.5">
|
|
<label htmlFor="pbi-description" className="text-sm font-medium">
|
|
Beschrijving <span className="text-muted-foreground font-normal">(optioneel)</span>
|
|
</label>
|
|
<Textarea
|
|
id="pbi-description"
|
|
name="description"
|
|
defaultValue={pbi?.description ?? ''}
|
|
placeholder="Korte omschrijving van het PBI…"
|
|
rows={3}
|
|
maxLength={2000}
|
|
disabled={isDemo}
|
|
className="resize-none"
|
|
/>
|
|
</div>
|
|
</form>
|
|
|
|
<div className={entityDialogFooterClasses}>
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button type="button" variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
|
|
Annuleren
|
|
</Button>
|
|
<DemoTooltip show={isDemo}>
|
|
<Button type="submit" form="pbi-form" disabled={pending || isDemo}>
|
|
{pending ? '…' : isEdit ? 'Opslaan' : 'Aanmaken'}
|
|
</Button>
|
|
</DemoTooltip>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<DirtyCloseGuardDialog guard={closeGuard} />
|
|
</>
|
|
)
|
|
}
|