refactor(dnd): remove drag-and-drop reorder for stories and tasks
- Remove reorderStoriesAction, reorderTasksAction, reorderSprintStoriesAction - Delete REST route app/api/stories/[id]/tasks/reorder/route.ts - Remove DnD from backlog story-panel and task-panel (flat list) - Remove reorder-within-sprint branch from sprint-board-client handleDragEnd - Switch SortableSprintRow to plain SprintRow using useDraggable (membership drag kept) - Remove all DnD from task-list (status toggle + edit kept) - Remove story-order/task-order/sprint-story-order/sprint-task-order mutation types and store handlers - Remove related tests for deleted reorder route; fix sprint store tests
This commit is contained in:
parent
b816cbe710
commit
f68d985c2c
16 changed files with 52 additions and 816 deletions
|
|
@ -1,18 +1,8 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useTransition } from 'react'
|
||||
import { useRouter, usePathname } from 'next/navigation'
|
||||
import {
|
||||
DndContext, DragEndEvent, DragOverlay,
|
||||
KeyboardSensor, PointerSensor, useSensor, useSensors, closestCenter,
|
||||
} from '@dnd-kit/core'
|
||||
import {
|
||||
SortableContext, useSortable, verticalListSortingStrategy, arrayMove,
|
||||
sortableKeyboardCoordinates,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { Pencil } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { useShallow } from 'zustand/react/shallow'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
|
@ -25,7 +15,7 @@ import type {
|
|||
SprintWorkspaceTask,
|
||||
SprintWorkspaceTaskDetail,
|
||||
} from '@/stores/sprint-workspace/types'
|
||||
import { updateTaskStatusAction, reorderTasksAction } from '@/actions/tasks'
|
||||
import { updateTaskStatusAction } from '@/actions/tasks'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { debugProps } from '@/lib/debug'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
|
@ -53,7 +43,6 @@ const STATUS_LABELS: Record<string, string> = {
|
|||
EXCLUDED: 'Uitgesloten',
|
||||
}
|
||||
|
||||
|
||||
// Behouden voor type-compat met SprintBoardClient props (verdwijnt zodra
|
||||
// SprintBoardClient ook geen tasks-prop meer doorgeeft — T-883).
|
||||
export interface Task {
|
||||
|
|
@ -75,7 +64,7 @@ interface TaskListProps {
|
|||
isDemo: boolean
|
||||
}
|
||||
|
||||
function SortableTaskRow({
|
||||
function TaskRow({
|
||||
task, code, isDemo, onStatusToggle, onEdit,
|
||||
}: {
|
||||
task: WorkspaceTask
|
||||
|
|
@ -84,11 +73,8 @@ function SortableTaskRow({
|
|||
onStatusToggle: () => void
|
||||
onEdit: () => void
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id })
|
||||
const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} className="group px-2 py-1">
|
||||
<div className="group px-2 py-1">
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-start gap-2 rounded border border-border px-3 py-2 transition-colors bg-surface-container hover:bg-surface-container-high cursor-pointer',
|
||||
|
|
@ -105,17 +91,6 @@ function SortableTaskRow({
|
|||
}
|
||||
}}
|
||||
>
|
||||
{!isDemo && (
|
||||
<span
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 text-sm select-none mt-0.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
⠿
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className={cn(
|
||||
|
|
@ -162,55 +137,12 @@ export function TaskList({ sprintId: _sprintId, productId: _productId, isDemo }:
|
|||
const orderedTasks = useSprintWorkspaceStore(
|
||||
useShallow(selectTasksForActiveStory),
|
||||
)
|
||||
const [activeDragId, setActiveDragId] = useState<string | null>(null)
|
||||
const [, startTransition] = useTransition()
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
|
||||
const taskMap: Record<string, WorkspaceTask> = {}
|
||||
for (const t of orderedTasks) taskMap[t.id] = t
|
||||
|
||||
const doneCount = orderedTasks.filter(t => t.status === 'DONE').length
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
||||
)
|
||||
|
||||
function handleDragEnd(event: DragEndEvent) {
|
||||
const { active, over } = event
|
||||
if (!storyId) return
|
||||
if (!over || active.id === over.id) return
|
||||
const store = useSprintWorkspaceStore.getState()
|
||||
const prevOrder = [...(store.relations.taskIdsByStory[storyId] ?? [])]
|
||||
const newOrder = arrayMove(
|
||||
[...prevOrder],
|
||||
prevOrder.indexOf(active.id as string),
|
||||
prevOrder.indexOf(over.id as string),
|
||||
)
|
||||
|
||||
const mutationId = store.applyOptimisticMutation({
|
||||
kind: 'sprint-task-order',
|
||||
storyId,
|
||||
prevTaskIds: prevOrder,
|
||||
})
|
||||
useSprintWorkspaceStore.setState((s) => {
|
||||
s.relations.taskIdsByStory[storyId] = newOrder
|
||||
})
|
||||
setActiveDragId(null)
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await reorderTasksAction(storyId, newOrder)
|
||||
const st = useSprintWorkspaceStore.getState()
|
||||
if (result.success) {
|
||||
st.settleMutation(mutationId)
|
||||
} else {
|
||||
st.rollbackMutation(mutationId)
|
||||
toast.error('Volgorde opslaan mislukt')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleStatusToggle(task: WorkspaceTask) {
|
||||
startTransition(async () => {
|
||||
await updateTaskStatusAction(task.id, STATUS_CYCLE[task.status] ?? 'TO_DO')
|
||||
|
|
@ -263,36 +195,18 @@ export function TaskList({ sprintId: _sprintId, productId: _productId, isDemo }:
|
|||
</DemoTooltip>
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
id="task-list"
|
||||
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}
|
||||
code={task.code}
|
||||
isDemo={isDemo}
|
||||
onStatusToggle={() => handleStatusToggle(task)}
|
||||
onEdit={() => openEditDialog(task.id)}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
<DragOverlay>
|
||||
{activeDragId && taskMap[activeDragId] && (
|
||||
<div className={cn(
|
||||
'rounded border border-primary px-3 py-2 bg-surface-container shadow-lg opacity-90 text-sm',
|
||||
PRIORITY_BORDER[taskMap[activeDragId].priority],
|
||||
)}>
|
||||
{taskMap[activeDragId].title}
|
||||
</div>
|
||||
)}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
<>
|
||||
{orderedTasks.map((task) => (
|
||||
<TaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
code={task.code}
|
||||
isDemo={isDemo}
|
||||
onStatusToggle={() => handleStatusToggle(task)}
|
||||
onEdit={() => openEditDialog(task.id)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue