feat(PBI-79/ST-1341+ST-1342): SprintEditDialog metadata-edit + multi-OPEN sprints
ST-1341 (T-946): - actions/sprints.ts: nieuwe updateSprintAction(sprintId, fields) — JSON input, accepteert optionele goal/startAt/endAt; auth + product-access check, prisma.sprint.update, revalidatePath. Type-safe return. - components/backlog/sprint-edit-dialog.tsx: Entity-Dialog-pattern voor metadata-edit van een sprint. Velden: sprint_goal, start_date, end_date. Link 'Sprint afronden… →' naar bestaande /products/[id]/sprint/[sprintId] zodat de completion-flow (per-story DONE/OPEN beslissing + PBI-promotie) niet wordt geduplicereerd. useDirtyCloseGuard. ST-1342 (T-947): - actions/sprints.ts: OPEN-uniqueness check in createSprintAction verwijderd. Een product mag nu meerdere OPEN sprints tegelijk hebben; cross-sprint-conflicts per story worden afgevangen door partitionByEligibility in de membership-commit-flow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
117616f28b
commit
b91d92a02d
2 changed files with 280 additions and 4 deletions
217
components/backlog/sprint-edit-dialog.tsx
Normal file
217
components/backlog/sprint-edit-dialog.tsx
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
'use client'
|
||||
|
||||
import { useRef, useState, useTransition } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
|
||||
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 { updateSprintAction } from '@/actions/sprints'
|
||||
import { debugProps } from '@/lib/debug'
|
||||
|
||||
interface SprintEditDialogProps {
|
||||
open: boolean
|
||||
productId: string
|
||||
sprint: {
|
||||
id: string
|
||||
code: string
|
||||
sprint_goal: string
|
||||
start_date?: string | null
|
||||
end_date?: string | null
|
||||
}
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
function toDateInput(value: string | null | undefined): string {
|
||||
if (!value) return ''
|
||||
// Accept ISO datetime or YYYY-MM-DD; output YYYY-MM-DD.
|
||||
const d = new Date(value)
|
||||
if (Number.isNaN(d.getTime())) return ''
|
||||
return d.toLocaleDateString('en-CA')
|
||||
}
|
||||
|
||||
export function SprintEditDialog({
|
||||
open,
|
||||
productId,
|
||||
sprint,
|
||||
onOpenChange,
|
||||
}: SprintEditDialogProps) {
|
||||
const [goal, setGoal] = useState(sprint.sprint_goal)
|
||||
const [startDate, setStartDate] = useState(toDateInput(sprint.start_date))
|
||||
const [endDate, setEndDate] = useState(toDateInput(sprint.end_date))
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [dirty, setDirty] = useState(false)
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const formRef = useRef<HTMLFormElement>(null)
|
||||
const router = useRouter()
|
||||
|
||||
function reset() {
|
||||
setGoal(sprint.sprint_goal)
|
||||
setStartDate(toDateInput(sprint.start_date))
|
||||
setEndDate(toDateInput(sprint.end_date))
|
||||
setError(null)
|
||||
setDirty(false)
|
||||
}
|
||||
|
||||
const closeGuard = useDirtyCloseGuard(dirty, () => {
|
||||
onOpenChange(false)
|
||||
reset()
|
||||
})
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
const trimmed = goal.trim()
|
||||
if (!trimmed) return
|
||||
setError(null)
|
||||
startTransition(async () => {
|
||||
const result = await updateSprintAction({
|
||||
sprintId: sprint.id,
|
||||
fields: {
|
||||
goal: trimmed,
|
||||
startAt: startDate || null,
|
||||
endAt: endDate || null,
|
||||
},
|
||||
})
|
||||
if ('error' in result) {
|
||||
setError(result.error)
|
||||
toast.error(result.error)
|
||||
return
|
||||
}
|
||||
toast.success('Sprint bijgewerkt')
|
||||
onOpenChange(false)
|
||||
router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
const handleKeyDown = useDialogSubmitShortcut(() =>
|
||||
formRef.current?.requestSubmit(),
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(o) => {
|
||||
if (!o) closeGuard.attemptClose()
|
||||
else onOpenChange(o)
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
onKeyDown={handleKeyDown}
|
||||
className={entityDialogContentClasses}
|
||||
{...debugProps(
|
||||
'sprint-edit-dialog',
|
||||
'SprintEditDialog',
|
||||
'components/backlog/sprint-edit-dialog.tsx',
|
||||
)}
|
||||
>
|
||||
<div className={entityDialogHeaderClasses}>
|
||||
<DialogTitle className="text-xl font-semibold">
|
||||
Sprint {sprint.code} bewerken
|
||||
</DialogTitle>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Wijzig sprint-doel en datums. Voor afronding (per-story DONE/OPEN
|
||||
beslissing) ga naar de sprint-pagina.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
ref={formRef}
|
||||
id="sprint-edit-form"
|
||||
onSubmit={handleSubmit}
|
||||
onChange={() => setDirty(true)}
|
||||
className="flex-1 overflow-y-auto px-6 py-6 space-y-6"
|
||||
>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Sprint Goal <span className="text-error">*</span>
|
||||
</label>
|
||||
<Textarea
|
||||
value={goal}
|
||||
onChange={(e) => setGoal(e.target.value)}
|
||||
required
|
||||
rows={3}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Startdatum
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
className="w-full rounded-md border border-border bg-surface-container px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Einddatum
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
className="w-full rounded-md border border-border bg-surface-container px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-border">
|
||||
<Link
|
||||
href={`/products/${productId}/sprint/${sprint.id}`}
|
||||
className="text-sm text-primary hover:underline"
|
||||
>
|
||||
Sprint afronden… →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-error-container text-error-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-error">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
<div className={entityDialogFooterClasses}>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={closeGuard.attemptClose}
|
||||
disabled={isPending}
|
||||
>
|
||||
Annuleren
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
form="sprint-edit-form"
|
||||
disabled={isPending || !goal.trim()}
|
||||
data-debug-id="sprint-edit-dialog__submit"
|
||||
>
|
||||
{isPending ? 'Opslaan…' : 'Opslaan'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<DirtyCloseGuardDialog guard={closeGuard} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue