feat: ST-301-ST-312 M3 Sprint Backlog en Sprint Planning
- useSprintStore met sprintStoryOrder/taskOrder (ST-301) - Sprint aanmaken modal met Sprint Goal validatie (ST-302) - Sprint Backlog pagina SplitPane layout met Sprint Goal header (ST-303) - Stories toevoegen aan Sprint via knop in rechterpaneel (ST-304) - Sprint Backlog volgorde aanpassen via dnd-kit (ST-305) - Story uit Sprint verwijderen met status terug naar OPEN (ST-306) - Sprint Planning pagina SplitPane met story selectie (ST-307) - Taken aanmaken inline in rechterpaneel (ST-308) - Taak drag-and-drop verticaal met optimistische update (ST-309) - Taakstatus toggle TO_DO/IN_PROGRESS/DONE met voortgangsindicator (ST-310) - Taak inline bewerken en verwijderen (ST-311) - Sprint afronden dialoog met per-story Done/Terug keuze (ST-312) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
4dd62c199c
commit
d92e548f88
12 changed files with 1480 additions and 6 deletions
57
components/sprint/planning-left.tsx
Normal file
57
components/sprint/planning-left.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
'use client'
|
||||
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { SprintStory } from './sprint-backlog'
|
||||
|
||||
const PRIORITY_COLORS: Record<number, string> = {
|
||||
1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
|
||||
2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
|
||||
3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
|
||||
4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
|
||||
}
|
||||
const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
|
||||
|
||||
interface PlanningLeftProps {
|
||||
stories: SprintStory[]
|
||||
}
|
||||
|
||||
export function PlanningLeft({ stories }: PlanningLeftProps) {
|
||||
const { selectedStoryId, selectStory } = useSelectionStore()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar title="Sprint Backlog" />
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{stories.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center mt-8 px-4">
|
||||
Geen stories in de Sprint.
|
||||
</p>
|
||||
) : (
|
||||
stories.map(story => (
|
||||
<div
|
||||
key={story.id}
|
||||
onClick={() => selectStory(story.id)}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-4 py-2.5 border-b border-border cursor-pointer transition-colors hover:bg-surface-container',
|
||||
selectedStoryId === story.id && 'bg-primary-container text-primary-container-foreground'
|
||||
)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm truncate">{story.title}</p>
|
||||
<div className="flex items-center gap-1.5 mt-0.5">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
|
||||
{PRIORITY_LABELS[story.priority]}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">{story.doneCount}/{story.taskCount} klaar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
39
components/sprint/planning-right-client.tsx
Normal file
39
components/sprint/planning-right-client.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
'use client'
|
||||
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { TaskList } from './task-list'
|
||||
import type { Task } from './task-list'
|
||||
import type { SprintStory } from './sprint-backlog'
|
||||
|
||||
interface PlanningRightClientProps {
|
||||
sprintId: string
|
||||
productId: string
|
||||
stories: SprintStory[]
|
||||
tasksByStory: Record<string, Task[]>
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
export function PlanningRightClient({ sprintId, productId, stories, tasksByStory, isDemo }: PlanningRightClientProps) {
|
||||
const { selectedStoryId } = useSelectionStore()
|
||||
|
||||
const story = stories.find(s => s.id === selectedStoryId)
|
||||
const tasks = selectedStoryId ? (tasksByStory[selectedStoryId] ?? []) : []
|
||||
|
||||
if (!selectedStoryId || !story) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<p className="text-sm text-muted-foreground">Selecteer een story om de taken te bekijken.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<TaskList
|
||||
storyId={selectedStoryId}
|
||||
sprintId={sprintId}
|
||||
productId={productId}
|
||||
tasks={tasks}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
)
|
||||
}
|
||||
246
components/sprint/sprint-backlog.tsx
Normal file
246
components/sprint/sprint-backlog.tsx
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
DndContext, DragEndEvent, DragOverEvent, DragStartEvent, DragOverlay,
|
||||
PointerSensor, useSensor, useSensors, closestCenter,
|
||||
} from '@dnd-kit/core'
|
||||
import {
|
||||
SortableContext, useSortable, verticalListSortingStrategy, arrayMove,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSprintStore } from '@/stores/sprint-store'
|
||||
import {
|
||||
addStoryToSprintAction,
|
||||
removeStoryFromSprintAction,
|
||||
reorderSprintStoriesAction,
|
||||
} from '@/actions/sprints'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
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',
|
||||
DONE: 'bg-status-done/15 text-status-done border-status-done/30',
|
||||
}
|
||||
const STATUS_LABELS: Record<string, string> = { OPEN: 'Open', IN_SPRINT: 'In Sprint', DONE: 'Klaar' }
|
||||
|
||||
const PRIORITY_COLORS: Record<number, string> = {
|
||||
1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
|
||||
2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
|
||||
3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
|
||||
4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
|
||||
}
|
||||
const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
|
||||
|
||||
export interface SprintStory {
|
||||
id: string
|
||||
title: string
|
||||
priority: number
|
||||
status: string
|
||||
taskCount: number
|
||||
doneCount: number
|
||||
}
|
||||
|
||||
export interface PbiWithStories {
|
||||
id: string
|
||||
title: string
|
||||
stories: SprintStory[]
|
||||
}
|
||||
|
||||
// --- Left panel: Sprint Backlog ---
|
||||
function SortableSprintRow({
|
||||
story, isDemo, onRemove, onClick,
|
||||
}: { story: SprintStory; isDemo: boolean; onRemove: () => void; onClick: () => void }) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: story.id })
|
||||
const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
onClick={onClick}
|
||||
className="group flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container transition-colors cursor-pointer"
|
||||
>
|
||||
{!isDemo && (
|
||||
<span {...attributes} {...listeners} onClick={e => e.stopPropagation()}
|
||||
className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm">
|
||||
⠿
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm truncate">{story.title}</p>
|
||||
<div className="flex items-center gap-1.5 mt-0.5">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
|
||||
{PRIORITY_LABELS[story.priority]}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">{story.doneCount}/{story.taskCount} klaar</span>
|
||||
</div>
|
||||
</div>
|
||||
{!isDemo && (
|
||||
<button onClick={e => { e.stopPropagation(); onRemove() }}
|
||||
className="opacity-0 group-hover:opacity-100 text-xs text-muted-foreground hover:text-error shrink-0">
|
||||
Verwijderen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface SprintBacklogLeftProps {
|
||||
sprintId: string
|
||||
stories: SprintStory[]
|
||||
isDemo: boolean
|
||||
onSelectStory: (id: string) => void
|
||||
selectedStoryId: string | null
|
||||
}
|
||||
|
||||
export function SprintBacklogLeft({ sprintId, stories, isDemo, onSelectStory, selectedStoryId }: SprintBacklogLeftProps) {
|
||||
const { sprintStoryOrder, initSprint, reorderSprintStories, rollbackSprint, removeStoryFromSprint } = useSprintStore()
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
const idKey = stories.map(s => s.id).join(',')
|
||||
useEffect(() => {
|
||||
initSprint(sprintId, idKey ? idKey.split(',') : [])
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [sprintId, idKey])
|
||||
|
||||
const storyMap = Object.fromEntries(stories.map(s => [s.id, s]))
|
||||
const order = sprintStoryOrder[sprintId] ?? stories.map(s => s.id)
|
||||
const orderedStories = order.map(id => storyMap[id]).filter(Boolean)
|
||||
|
||||
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
|
||||
|
||||
function handleDragEnd(event: DragEndEvent) {
|
||||
const { active, over } = event
|
||||
if (!over || active.id === over.id) return
|
||||
const prevOrder = [...order]
|
||||
const newOrder = arrayMove([...order], order.indexOf(active.id as string), order.indexOf(over.id as string))
|
||||
reorderSprintStories(sprintId, newOrder)
|
||||
startTransition(async () => {
|
||||
const result = await reorderSprintStoriesAction(sprintId, newOrder)
|
||||
if (!result.success) { rollbackSprint(sprintId, prevOrder); toast.error('Volgorde opslaan mislukt') }
|
||||
})
|
||||
}
|
||||
|
||||
function handleRemove(storyId: string) {
|
||||
removeStoryFromSprint(sprintId, storyId)
|
||||
startTransition(async () => {
|
||||
const result = await removeStoryFromSprintAction(storyId)
|
||||
if (!result.success) toast.error('Verwijderen mislukt')
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar title="Sprint Backlog" />
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{orderedStories.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center mt-8 px-4">
|
||||
Geen stories in de Sprint. Sleep stories vanuit het rechterpaneel.
|
||||
</p>
|
||||
) : (
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext items={orderedStories.map(s => s.id)} strategy={verticalListSortingStrategy}>
|
||||
{orderedStories.map(story => (
|
||||
<SortableSprintRow
|
||||
key={story.id}
|
||||
story={story}
|
||||
isDemo={isDemo}
|
||||
onRemove={() => handleRemove(story.id)}
|
||||
onClick={() => onSelectStory(story.id)}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Right panel: Product Backlog stories grouped by PBI (droppable source) ---
|
||||
interface SprintBacklogRightProps {
|
||||
sprintId: string
|
||||
pbisWithStories: PbiWithStories[]
|
||||
sprintStoryIds: Set<string>
|
||||
isDemo: boolean
|
||||
onStoryAdded: (storyId: string) => void
|
||||
}
|
||||
|
||||
export function SprintBacklogRight({ sprintId, pbisWithStories, sprintStoryIds, isDemo, onStoryAdded }: SprintBacklogRightProps) {
|
||||
const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
|
||||
const [, startTransition] = useTransition()
|
||||
const { addStoryToSprint } = useSprintStore()
|
||||
const router = useRouter()
|
||||
|
||||
function toggle(pbiId: string) {
|
||||
setCollapsed(prev => {
|
||||
const next = new Set(prev)
|
||||
next.has(pbiId) ? next.delete(pbiId) : next.add(pbiId)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
function handleAdd(storyId: string) {
|
||||
addStoryToSprint(sprintId, storyId)
|
||||
onStoryAdded(storyId)
|
||||
startTransition(async () => {
|
||||
const result = await addStoryToSprintAction(sprintId, storyId)
|
||||
if (!result.success) {
|
||||
toast.error(result.error ?? 'Toevoegen mislukt')
|
||||
router.refresh()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar title="Product Backlog" />
|
||||
<div className="flex-1 overflow-y-auto py-2">
|
||||
{pbisWithStories.map(pbi => (
|
||||
<div key={pbi.id}>
|
||||
<button
|
||||
onClick={() => toggle(pbi.id)}
|
||||
className="w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left"
|
||||
>
|
||||
<span className="text-xs">{collapsed.has(pbi.id) ? '▶' : '▼'}</span>
|
||||
<span className="text-sm font-medium truncate flex-1">{pbi.title}</span>
|
||||
<span className="text-xs text-muted-foreground">{pbi.stories.length}</span>
|
||||
</button>
|
||||
|
||||
{!collapsed.has(pbi.id) && pbi.stories.map(story => {
|
||||
const inSprint = sprintStoryIds.has(story.id)
|
||||
return (
|
||||
<div
|
||||
key={story.id}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-6 py-2 border-b border-border/50 transition-colors',
|
||||
inSprint ? 'opacity-50' : 'hover:bg-surface-container'
|
||||
)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm truncate">{story.title}</p>
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
{!inSprint && !isDemo && (
|
||||
<Button size="sm" variant="outline" className="h-6 text-xs shrink-0" onClick={() => handleAdd(story.id)}>
|
||||
+ Sprint
|
||||
</Button>
|
||||
)}
|
||||
{inSprint && <span className="text-xs text-muted-foreground shrink-0">In Sprint</span>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
144
components/sprint/sprint-header.tsx
Normal file
144
components/sprint/sprint-header.tsx
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition, useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { updateSprintGoalAction, completeSprintAction } from '@/actions/sprints'
|
||||
import type { SprintStory } from './sprint-backlog'
|
||||
|
||||
interface Sprint {
|
||||
id: string
|
||||
sprint_goal: string
|
||||
status: string
|
||||
}
|
||||
|
||||
interface SprintHeaderProps {
|
||||
productId: string
|
||||
productName: string
|
||||
sprint: Sprint
|
||||
isDemo: boolean
|
||||
sprintStories: SprintStory[]
|
||||
}
|
||||
|
||||
function SaveGoalButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return <Button type="submit" size="sm" disabled={pending}>{pending ? 'Opslaan…' : 'Opslaan'}</Button>
|
||||
}
|
||||
|
||||
export function SprintHeader({ productId, productName, sprint, isDemo, sprintStories }: SprintHeaderProps) {
|
||||
const [editingGoal, setEditingGoal] = useState(false)
|
||||
const [completeOpen, setCompleteOpen] = useState(false)
|
||||
const [decisions, setDecisions] = useState<Record<string, 'DONE' | 'OPEN'>>({})
|
||||
const [isCompleting, startCompleting] = useTransition()
|
||||
|
||||
const [, goalFormAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await updateSprintGoalAction(_prev, fd)
|
||||
if (result?.success) setEditingGoal(false)
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
function setDecision(storyId: string, value: 'DONE' | 'OPEN') {
|
||||
setDecisions(prev => ({ ...prev, [storyId]: value }))
|
||||
}
|
||||
|
||||
function handleComplete() {
|
||||
// Default: stories without explicit decision → OPEN
|
||||
const finalDecisions: Record<string, 'DONE' | 'OPEN'> = {}
|
||||
sprintStories.forEach(s => {
|
||||
finalDecisions[s.id] = decisions[s.id] ?? 'OPEN'
|
||||
})
|
||||
|
||||
startCompleting(async () => {
|
||||
await completeSprintAction(sprint.id, finalDecisions)
|
||||
setCompleteOpen(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">{productName}</span>
|
||||
<span className="text-muted-foreground">›</span>
|
||||
<span className="text-xs font-medium text-primary">Sprint actief</span>
|
||||
</div>
|
||||
|
||||
{editingGoal ? (
|
||||
<form action={goalFormAction} className="flex gap-2 mt-1">
|
||||
<input type="hidden" name="id" value={sprint.id} />
|
||||
<Textarea name="sprint_goal" defaultValue={sprint.sprint_goal} rows={2} className="text-sm flex-1" autoFocus />
|
||||
<div className="flex flex-col gap-1">
|
||||
<SaveGoalButton />
|
||||
<Button type="button" size="sm" variant="ghost" onClick={() => setEditingGoal(false)}>×</Button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<button onClick={() => !isDemo && setEditingGoal(true)} className="text-left mt-0.5 group">
|
||||
<p className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
|
||||
{sprint.sprint_goal}
|
||||
</p>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isDemo && (
|
||||
<Button size="sm" variant="outline" className="shrink-0 border-warning/40 text-warning hover:bg-warning/10" onClick={() => setCompleteOpen(true)}>
|
||||
Sprint afronden
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Complete sprint dialog */}
|
||||
<Dialog open={completeOpen} onOpenChange={setCompleteOpen}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Sprint afronden</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 p-1">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Geef per story aan wat er mee moet gebeuren:
|
||||
</p>
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{sprintStories.map(story => (
|
||||
<div key={story.id} className="flex items-center justify-between gap-3 p-2 bg-surface-container-low rounded-lg">
|
||||
<span className="text-sm truncate flex-1">{story.title}</span>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<button
|
||||
onClick={() => setDecision(story.id, 'DONE')}
|
||||
className={`text-xs px-2 py-1 rounded transition-colors ${(decisions[story.id] ?? 'OPEN') === 'DONE' ? 'bg-status-done/20 text-status-done font-medium' : 'text-muted-foreground hover:bg-surface-container'}`}
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDecision(story.id, 'OPEN')}
|
||||
className={`text-xs px-2 py-1 rounded transition-colors ${(decisions[story.id] ?? 'OPEN') === 'OPEN' ? 'bg-status-todo/20 text-status-todo font-medium' : 'text-muted-foreground hover:bg-surface-container'}`}
|
||||
>
|
||||
Terug
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button variant="ghost" onClick={() => setCompleteOpen(false)}>Annuleren</Button>
|
||||
<Button disabled={isCompleting} onClick={handleComplete}>
|
||||
{isCompleting ? 'Bezig…' : 'Sprint afronden'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
96
components/sprint/start-sprint-button.tsx
Normal file
96
components/sprint/start-sprint-button.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { createSprintAction } from '@/actions/sprints'
|
||||
|
||||
interface StartSprintButtonProps {
|
||||
productId: string
|
||||
}
|
||||
|
||||
function SubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? 'Aanmaken…' : 'Sprint starten'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function StartSprintButton({ productId }: StartSprintButtonProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createSprintAction(_prev, fd)
|
||||
if (result.success) {
|
||||
setOpen(false)
|
||||
router.push(`/products/${productId}/sprint`)
|
||||
}
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
const globalError = typeof state?.error === 'string' ? state.error : undefined
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button size="sm" onClick={() => setOpen(true)}>
|
||||
Sprint starten
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Nieuwe Sprint starten</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form action={formAction} className="space-y-4 p-1">
|
||||
<input type="hidden" name="productId" value={productId} />
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Sprint Goal <span className="text-error">*</span>
|
||||
</label>
|
||||
<Textarea
|
||||
name="sprint_goal"
|
||||
required
|
||||
rows={3}
|
||||
placeholder="Wat wil je aan het einde van deze Sprint bereikt hebben?"
|
||||
autoFocus
|
||||
/>
|
||||
{typeof state?.error === 'object' && (state.error as Record<string, string[]>).sprint_goal && (
|
||||
<p className="text-xs text-error">{(state.error as Record<string, string[]>).sprint_goal[0]}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{globalError && (
|
||||
<div className="bg-error-container text-error-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-error">
|
||||
{globalError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button type="button" variant="ghost" onClick={() => setOpen(false)}>
|
||||
Annuleren
|
||||
</Button>
|
||||
<SubmitButton />
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
245
components/sprint/task-list.tsx
Normal file
245
components/sprint/task-list.tsx
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition, useEffect, useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import {
|
||||
DndContext, DragEndEvent, DragOverlay, DragStartEvent,
|
||||
PointerSensor, useSensor, useSensors, closestCenter,
|
||||
} from '@dnd-kit/core'
|
||||
import {
|
||||
SortableContext, useSortable, verticalListSortingStrategy, arrayMove,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSprintStore } from '@/stores/sprint-store'
|
||||
import {
|
||||
createTaskAction, updateTaskStatusAction, updateTaskAction,
|
||||
deleteTaskAction, reorderTasksAction,
|
||||
} from '@/actions/tasks'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const STATUS_CYCLE: Record<string, 'TO_DO' | 'IN_PROGRESS' | 'DONE'> = {
|
||||
TO_DO: 'IN_PROGRESS',
|
||||
IN_PROGRESS: 'DONE',
|
||||
DONE: 'TO_DO',
|
||||
}
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
TO_DO: 'bg-status-todo/15 text-status-todo border-status-todo/30',
|
||||
IN_PROGRESS: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30',
|
||||
DONE: 'bg-status-done/15 text-status-done border-status-done/30',
|
||||
}
|
||||
const STATUS_LABELS: Record<string, string> = { TO_DO: 'To Do', IN_PROGRESS: 'Bezig', DONE: 'Klaar' }
|
||||
|
||||
const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
|
||||
|
||||
export interface Task {
|
||||
id: string
|
||||
title: string
|
||||
description: string | null
|
||||
priority: number
|
||||
status: string
|
||||
story_id: string
|
||||
sprint_id: string | null
|
||||
}
|
||||
|
||||
interface TaskListProps {
|
||||
storyId: string
|
||||
sprintId: string
|
||||
productId: string
|
||||
tasks: Task[]
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
function SortableTaskRow({
|
||||
task, isDemo, onStatusToggle, onDelete,
|
||||
}: { task: Task; isDemo: boolean; onStatusToggle: () => void; onDelete: () => void }) {
|
||||
const [editing, setEditing] = useState(false)
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id })
|
||||
const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }
|
||||
|
||||
const [, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await updateTaskAction(_prev, fd)
|
||||
if (result?.success) setEditing(false)
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} className="px-4 py-2 border-b border-border bg-surface-container">
|
||||
<form action={formAction} className="space-y-2">
|
||||
<input type="hidden" name="id" value={task.id} />
|
||||
<input type="hidden" name="priority" value={task.priority} />
|
||||
<Input name="title" defaultValue={task.title} className="h-7 text-sm" required autoFocus />
|
||||
<div className="flex gap-2">
|
||||
<EditSubmitButton />
|
||||
<Button type="button" variant="ghost" size="sm" className="h-7" onClick={() => setEditing(false)}>Annuleren</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} className="group flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container/50 transition-colors">
|
||||
{!isDemo && (
|
||||
<span {...attributes} {...listeners} className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 text-sm select-none">⠿</span>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={cn('text-sm truncate', task.status === 'DONE' && 'line-through text-muted-foreground')}>
|
||||
{task.title}
|
||||
</p>
|
||||
<span className="text-xs text-muted-foreground">{PRIORITY_LABELS[task.priority]}</span>
|
||||
</div>
|
||||
<button onClick={onStatusToggle} disabled={isDemo}>
|
||||
<Badge className={cn('text-xs border cursor-pointer hover:opacity-80 transition-opacity', STATUS_COLORS[task.status])}>
|
||||
{STATUS_LABELS[task.status]}
|
||||
</Badge>
|
||||
</button>
|
||||
{!isDemo && (
|
||||
<div className="opacity-0 group-hover:opacity-100 flex gap-1">
|
||||
<button onClick={() => setEditing(true)} className="text-xs text-muted-foreground hover:text-foreground">Bewerk</button>
|
||||
<button onClick={onDelete} className="text-xs text-muted-foreground hover:text-error">×</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EditSubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return <Button type="submit" size="sm" className="h-7" disabled={pending}>{pending ? '…' : 'Opslaan'}</Button>
|
||||
}
|
||||
|
||||
function CreateTaskForm({ storyId, sprintId, onDone }: { storyId: string; sprintId: string; onDone: () => void }) {
|
||||
const [, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createTaskAction(_prev, fd)
|
||||
if (result?.success) onDone()
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
return (
|
||||
<form action={formAction} className="flex gap-2 px-4 py-2 border-b border-border">
|
||||
<input type="hidden" name="storyId" value={storyId} />
|
||||
<input type="hidden" name="sprintId" value={sprintId} />
|
||||
<input type="hidden" name="priority" value="2" />
|
||||
<Input name="title" autoFocus placeholder="Taaknaam…" className="h-7 text-sm flex-1" required />
|
||||
<CreateSubmitButton />
|
||||
<Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>×</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateSubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return <Button type="submit" size="sm" className="h-7" disabled={pending}>{pending ? '…' : 'Toevoegen'}</Button>
|
||||
}
|
||||
|
||||
export function TaskList({ storyId, sprintId, productId, tasks, isDemo }: TaskListProps) {
|
||||
const { taskOrder, initTasks, reorderTasks, rollbackTasks } = useSprintStore()
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [activeDragId, setActiveDragId] = useState<string | null>(null)
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
const idKey = tasks.map(t => t.id).join(',')
|
||||
useEffect(() => {
|
||||
initTasks(storyId, idKey ? idKey.split(',') : [])
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [storyId, idKey])
|
||||
|
||||
const taskMap = Object.fromEntries(tasks.map(t => [t.id, t]))
|
||||
const order = taskOrder[storyId] ?? tasks.map(t => t.id)
|
||||
const orderedTasks = order.map(id => taskMap[id]).filter(Boolean)
|
||||
|
||||
const doneCount = orderedTasks.filter(t => t.status === 'DONE').length
|
||||
|
||||
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
|
||||
|
||||
function handleDragEnd(event: DragEndEvent) {
|
||||
const { active, over } = event
|
||||
if (!over || active.id === over.id) return
|
||||
const prevOrder = [...order]
|
||||
const newOrder = arrayMove([...order], order.indexOf(active.id as string), order.indexOf(over.id as string))
|
||||
reorderTasks(storyId, newOrder)
|
||||
setActiveDragId(null)
|
||||
startTransition(async () => {
|
||||
const result = await reorderTasksAction(storyId, newOrder)
|
||||
if (!result.success) { rollbackTasks(storyId, prevOrder); toast.error('Volgorde opslaan mislukt') }
|
||||
})
|
||||
}
|
||||
|
||||
function handleStatusToggle(task: Task) {
|
||||
startTransition(async () => {
|
||||
await updateTaskStatusAction(task.id, STATUS_CYCLE[task.status] ?? 'TO_DO')
|
||||
})
|
||||
}
|
||||
|
||||
function handleDelete(id: string) {
|
||||
startTransition(async () => {
|
||||
await deleteTaskAction(id)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar
|
||||
title="Taken"
|
||||
actions={
|
||||
<>
|
||||
<span className="text-xs text-muted-foreground">{doneCount}/{orderedTasks.length} klaar</span>
|
||||
{!isDemo && (
|
||||
<Button size="sm" className="h-7 text-xs" onClick={() => setCreating(true)}>+ Taak</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{creating && (
|
||||
<CreateTaskForm storyId={storyId} sprintId={sprintId} onDone={() => setCreating(false)} />
|
||||
)}
|
||||
|
||||
{orderedTasks.length === 0 && !creating ? (
|
||||
<div className="text-center mt-8 space-y-3">
|
||||
<p className="text-sm text-muted-foreground">Geen taken voor deze story.</p>
|
||||
{!isDemo && <Button size="sm" variant="outline" onClick={() => setCreating(true)}>Maak eerste taak aan</Button>}
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={e => setActiveDragId(e.active.id as string)}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={orderedTasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
|
||||
{orderedTasks.map(task => (
|
||||
<SortableTaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
isDemo={isDemo}
|
||||
onStatusToggle={() => handleStatusToggle(task)}
|
||||
onDelete={() => handleDelete(task.id)}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
<DragOverlay>
|
||||
{activeDragId && taskMap[activeDragId] && (
|
||||
<div className="bg-surface-container-low border border-primary rounded px-4 py-2 text-sm shadow-lg opacity-90">
|
||||
{taskMap[activeDragId].title}
|
||||
</div>
|
||||
)}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue