diff --git a/components/sprint/sprint-backlog-client.tsx b/components/sprint/sprint-backlog-client.tsx index c88066c..3a3fbce 100644 --- a/components/sprint/sprint-backlog-client.tsx +++ b/components/sprint/sprint-backlog-client.tsx @@ -1,8 +1,21 @@ 'use client' +import { useState, useEffect, useTransition } from 'react' +import { + DndContext, DragEndEvent, + KeyboardSensor, PointerSensor, useSensor, useSensors, closestCenter, +} from '@dnd-kit/core' +import { sortableKeyboardCoordinates, arrayMove } from '@dnd-kit/sortable' +import { toast } from 'sonner' import { SplitPane } from '@/components/split-pane/split-pane' import { SprintBacklogLeft, SprintBacklogRight } from './sprint-backlog' import type { SprintStory, PbiWithStories } from './sprint-backlog' +import { useSprintStore } from '@/stores/sprint-store' +import { + addStoryToSprintAction, + removeStoryFromSprintAction, + reorderSprintStoriesAction, +} from '@/actions/sprints' interface SprintBacklogClientProps { productId: string @@ -21,29 +34,134 @@ export function SprintBacklogClient({ sprintStoryIdList, isDemo, }: SprintBacklogClientProps) { - const sprintStoryIds = new Set(sprintStoryIdList) + const [sprintStories, setSprintStories] = useState(stories) + const [sprintStoryIds, setSprintStoryIds] = useState>(() => new Set(sprintStoryIdList)) + const { + sprintStoryOrder, + initSprint, + addStoryToSprint, + removeStoryFromSprint, + reorderSprintStories, + rollbackSprint, + } = useSprintStore() + const [, startTransition] = useTransition() + + useEffect(() => { + initSprint(sprintId, stories.map(s => s.id)) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [sprintId]) + + const sensors = useSensors( + useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), + useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }) + ) + + function handleDragEnd(event: DragEndEvent) { + const { active, over } = event + if (!over) return + + const activeId = active.id.toString() + const overId = over.id.toString() + const order = sprintStoryOrder[sprintId] ?? sprintStories.map(s => s.id) + + // Dragged from right panel (pb: prefix) → add to sprint + if (activeId.startsWith('pb:')) { + const storyId = activeId.slice(3) + const droppingOnSprint = + overId === 'sprint-zone' || + (!overId.startsWith('pb:') && overId !== 'backlog-zone') + if (droppingOnSprint && !sprintStoryIds.has(storyId)) { + const storyData = pbisWithStories.flatMap(p => p.stories).find(s => s.id === storyId) + if (!storyData) return + setSprintStoryIds(prev => new Set([...prev, storyId])) + setSprintStories(prev => [...prev, storyData]) + addStoryToSprint(sprintId, storyId) + startTransition(async () => { + const result = await addStoryToSprintAction(sprintId, storyId) + if (!result.success) { + setSprintStoryIds(prev => { const n = new Set(prev); n.delete(storyId); return n }) + setSprintStories(prev => prev.filter(s => s.id !== storyId)) + removeStoryFromSprint(sprintId, storyId) + toast.error(result.error ?? 'Toevoegen mislukt') + } + }) + } + return + } + + // Dragged from left panel to right panel → remove from sprint + if (overId === 'backlog-zone') { + const storyData = sprintStories.find(s => s.id === activeId) + setSprintStoryIds(prev => { const n = new Set(prev); n.delete(activeId); return n }) + setSprintStories(prev => prev.filter(s => s.id !== activeId)) + removeStoryFromSprint(sprintId, activeId) + startTransition(async () => { + const result = await removeStoryFromSprintAction(activeId) + if (!result.success) { + if (storyData) { + setSprintStoryIds(prev => new Set([...prev, activeId])) + setSprintStories(prev => [...prev, storyData]) + } + addStoryToSprint(sprintId, activeId) + toast.error('Verwijderen mislukt') + } + }) + return + } + + // Reorder within sprint + if (activeId !== overId && order.includes(overId)) { + const prevOrder = [...order] + const newOrder = arrayMove([...order], order.indexOf(activeId), order.indexOf(overId)) + 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) { + const storyData = sprintStories.find(s => s.id === storyId) + setSprintStoryIds(prev => { const n = new Set(prev); n.delete(storyId); return n }) + setSprintStories(prev => prev.filter(s => s.id !== storyId)) + removeStoryFromSprint(sprintId, storyId) + startTransition(async () => { + const result = await removeStoryFromSprintAction(storyId) + if (!result.success) { + if (storyData) { + setSprintStoryIds(prev => new Set([...prev, storyId])) + setSprintStories(prev => [...prev, storyData]) + } + addStoryToSprint(sprintId, storyId) + toast.error('Verwijderen mislukt') + } + }) + } return ( - {}} - /> - } - right={ - {}} - /> - } - /> + + + } + right={ + + } + /> + ) } diff --git a/components/sprint/sprint-backlog.tsx b/components/sprint/sprint-backlog.tsx index a74aab0..65d92c6 100644 --- a/components/sprint/sprint-backlog.tsx +++ b/components/sprint/sprint-backlog.tsx @@ -1,26 +1,12 @@ 'use client' -import { useState, useTransition, useEffect } from 'react' -import { useRouter } from 'next/navigation' -import { - DndContext, DragEndEvent, - KeyboardSensor, PointerSensor, useSensor, useSensors, closestCenter, -} from '@dnd-kit/core' -import { - SortableContext, useSortable, verticalListSortingStrategy, arrayMove, - sortableKeyboardCoordinates, -} from '@dnd-kit/sortable' +import { useState } from 'react' +import { useDroppable, useDraggable } from '@dnd-kit/core' +import { SortableContext, useSortable, verticalListSortingStrategy } 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 = { @@ -54,9 +40,10 @@ export interface PbiWithStories { } // --- Left panel: Sprint Backlog --- + function SortableSprintRow({ - story, isDemo, onRemove, onClick, -}: { story: SprintStory; isDemo: boolean; onRemove: () => void; onClick: () => void }) { + story, isDemo, onRemove, +}: { story: SprintStory; isDemo: boolean; onRemove: () => 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 } @@ -64,13 +51,15 @@ function SortableSprintRow({
{!isDemo && ( - e.stopPropagation()} - aria-label="Versleep om te sorteren" - className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"> + ⠿ )} @@ -84,8 +73,10 @@ function SortableSprintRow({
{!isDemo && ( - )} @@ -97,91 +88,97 @@ interface SprintBacklogLeftProps { sprintId: string stories: SprintStory[] isDemo: boolean - onSelectStory: (id: string) => void - selectedStoryId: string | null + onRemove: (storyId: string) => void } -export function SprintBacklogLeft({ sprintId, stories, isDemo, onSelectStory }: 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]) +export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: SprintBacklogLeftProps) { + const { sprintStoryOrder } = useSprintStore() + const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' }) 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 } }), - useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }) - ) - - 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 (
-
+
{orderedStories.length === 0 ? ( -

- Geen stories in de Sprint. Sleep stories vanuit het rechterpaneel. +

+ {isOver ? 'Loslaten om toe te voegen aan Sprint' : 'Geen stories in de Sprint. Sleep stories vanuit het rechterpaneel.'}

) : ( - - s.id)} strategy={verticalListSortingStrategy}> - {orderedStories.map(story => ( - handleRemove(story.id)} - onClick={() => onSelectStory(story.id)} - /> - ))} - - + s.id)} strategy={verticalListSortingStrategy}> + {orderedStories.map(story => ( + onRemove(story.id)} + /> + ))} + )}
) } -// --- Right panel: Product Backlog stories grouped by PBI (droppable source) --- +// --- Right panel: Product Backlog grouped by PBI --- + +function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: boolean }) { + const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: `pb:${story.id}` }) + const style = transform + ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, zIndex: 50, position: 'relative' as const } + : undefined + + return ( +
+ {!isDemo && ( + + ⠿ + + )} +
+

{story.title}

+ + {STATUS_LABELS[story.status]} + +
+
+ ) +} + interface SprintBacklogRightProps { - sprintId: string pbisWithStories: PbiWithStories[] sprintStoryIds: Set isDemo: boolean - onStoryAdded: (storyId: string) => void } -export function SprintBacklogRight({ sprintId, pbisWithStories, sprintStoryIds, isDemo, onStoryAdded }: SprintBacklogRightProps) { +export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo }: SprintBacklogRightProps) { const [collapsed, setCollapsed] = useState>(new Set()) - const [, startTransition] = useTransition() - const { addStoryToSprint } = useSprintStore() - const router = useRouter() + const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' }) function toggle(pbiId: string) { setCollapsed(prev => { @@ -191,22 +188,16 @@ export function SprintBacklogRight({ sprintId, pbisWithStories, sprintStoryIds, }) } - 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 (
-
+
{pbisWithStories.map(pbi => (
- )} - {inSprint && In Sprint} -
- ) + ) + } + return })}
))}