feat(ST-313): merge sprint board into single three-panel view
- TriplePane component with two resizable dividers, localStorage persistence, mobile tabs - SprintBoardClient replaces SprintBacklogClient + PlanningRightClient - Left panel: Product Backlog (PBIs with stories to add to sprint) - Middle panel: Sprint Backlog (stories in sprint, click to select, sortable) - Right panel: TaskList for selected story - /sprint/planning redirects to /sprint - Remove PlanningLeft, PlanningRightClient, SprintBacklogClient Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
4df83dcdbb
commit
0a27be4886
8 changed files with 320 additions and 273 deletions
|
|
@ -1,57 +0,0 @@
|
|||
'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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
'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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Trash2 } from 'lucide-react'
|
||||
import { useDroppable, useDraggable } from '@dnd-kit/core'
|
||||
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
|
|
@ -42,8 +43,14 @@ export interface PbiWithStories {
|
|||
// --- Left panel: Sprint Backlog ---
|
||||
|
||||
function SortableSprintRow({
|
||||
story, isDemo, onRemove,
|
||||
}: { story: SprintStory; isDemo: boolean; onRemove: () => void }) {
|
||||
story, isDemo, onRemove, onSelect, isSelected,
|
||||
}: {
|
||||
story: SprintStory
|
||||
isDemo: boolean
|
||||
onRemove: () => void
|
||||
onSelect: () => void
|
||||
isSelected: boolean
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: story.id })
|
||||
const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }
|
||||
|
||||
|
|
@ -51,7 +58,13 @@ function SortableSprintRow({
|
|||
<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 transition-colors"
|
||||
onClick={onSelect}
|
||||
className={cn(
|
||||
'group flex items-center gap-3 px-4 py-2.5 border-b border-border cursor-pointer transition-colors',
|
||||
isSelected
|
||||
? 'bg-primary-container text-primary-container-foreground'
|
||||
: 'hover:bg-surface-container'
|
||||
)}
|
||||
>
|
||||
{!isDemo && (
|
||||
<span
|
||||
|
|
@ -59,6 +72,7 @@ function SortableSprintRow({
|
|||
{...listeners}
|
||||
aria-label="Versleep om te sorteren of naar Product Backlog"
|
||||
className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
⠿
|
||||
</span>
|
||||
|
|
@ -75,9 +89,10 @@ function SortableSprintRow({
|
|||
{!isDemo && (
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); onRemove() }}
|
||||
className="opacity-0 group-hover:opacity-100 text-xs text-muted-foreground hover:text-error shrink-0"
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error shrink-0"
|
||||
aria-label="Verwijder uit sprint"
|
||||
>
|
||||
Verwijderen
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -89,9 +104,11 @@ interface SprintBacklogLeftProps {
|
|||
stories: SprintStory[]
|
||||
isDemo: boolean
|
||||
onRemove: (storyId: string) => void
|
||||
onSelect: (storyId: string) => void
|
||||
selectedStoryId: string | null
|
||||
}
|
||||
|
||||
export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: SprintBacklogLeftProps) {
|
||||
export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove, onSelect, selectedStoryId }: SprintBacklogLeftProps) {
|
||||
const { sprintStoryOrder } = useSprintStore()
|
||||
const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' })
|
||||
|
||||
|
|
@ -114,7 +131,7 @@ export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: Sprin
|
|||
'text-sm text-muted-foreground text-center mt-8 px-4',
|
||||
isOver && 'text-primary'
|
||||
)}>
|
||||
{isOver ? 'Loslaten om toe te voegen aan Sprint' : '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 linkerpaneel.'}
|
||||
</p>
|
||||
) : (
|
||||
<SortableContext items={orderedStories.map(s => s.id)} strategy={verticalListSortingStrategy}>
|
||||
|
|
@ -124,6 +141,8 @@ export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: Sprin
|
|||
story={story}
|
||||
isDemo={isDemo}
|
||||
onRemove={() => onRemove(story.id)}
|
||||
onSelect={() => onSelect(story.id)}
|
||||
isSelected={selectedStoryId === story.id}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
|
|
@ -135,7 +154,15 @@ export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: Sprin
|
|||
|
||||
// --- Right panel: Product Backlog grouped by PBI ---
|
||||
|
||||
function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: boolean }) {
|
||||
function DraggablePbiStoryRow({
|
||||
story,
|
||||
isDemo,
|
||||
onAdd,
|
||||
}: {
|
||||
story: SprintStory
|
||||
isDemo: boolean
|
||||
onAdd: () => void
|
||||
}) {
|
||||
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 }
|
||||
|
|
@ -145,8 +172,11 @@ function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: b
|
|||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
onClick={!isDemo ? onAdd : undefined}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-6 py-2 border-b border-border/50 hover:bg-surface-container transition-colors',
|
||||
'flex items-center gap-3 px-6 py-2 border-b border-border/50 transition-colors',
|
||||
!isDemo && 'cursor-pointer hover:bg-primary/5',
|
||||
isDemo && 'opacity-60',
|
||||
isDragging && 'opacity-40'
|
||||
)}
|
||||
>
|
||||
|
|
@ -156,6 +186,7 @@ function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: b
|
|||
{...listeners}
|
||||
aria-label="Sleep naar Sprint Backlog"
|
||||
className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
⠿
|
||||
</span>
|
||||
|
|
@ -166,6 +197,9 @@ function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: b
|
|||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
{!isDemo && (
|
||||
<span className="text-xs text-muted-foreground shrink-0">+ toevoegen</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -174,9 +208,10 @@ interface SprintBacklogRightProps {
|
|||
pbisWithStories: PbiWithStories[]
|
||||
sprintStoryIds: Set<string>
|
||||
isDemo: boolean
|
||||
onAdd: (storyId: string) => void
|
||||
}
|
||||
|
||||
export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo }: SprintBacklogRightProps) {
|
||||
export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, onAdd }: SprintBacklogRightProps) {
|
||||
const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
|
||||
const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
|
||||
|
||||
|
|
@ -228,7 +263,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo }:
|
|||
</div>
|
||||
)
|
||||
}
|
||||
return <DraggablePbiStoryRow key={story.id} story={story} isDemo={isDemo} />
|
||||
return <DraggablePbiStoryRow key={story.id} story={story} isDemo={isDemo} onAdd={() => onAdd(story.id)} />
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,16 @@
|
|||
|
||||
import { useState, useEffect, useTransition } from 'react'
|
||||
import {
|
||||
DndContext, DragEndEvent,
|
||||
DndContext, DragEndEvent, DragStartEvent, DragOverlay,
|
||||
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 { TriplePane } from '@/components/split-pane/triple-pane'
|
||||
import { SprintBacklogLeft, SprintBacklogRight } from './sprint-backlog'
|
||||
import type { SprintStory, PbiWithStories } from './sprint-backlog'
|
||||
import { TaskList } from './task-list'
|
||||
import type { Task } from './task-list'
|
||||
import { useSprintStore } from '@/stores/sprint-store'
|
||||
import {
|
||||
addStoryToSprintAction,
|
||||
|
|
@ -17,25 +19,28 @@ import {
|
|||
reorderSprintStoriesAction,
|
||||
} from '@/actions/sprints'
|
||||
|
||||
interface SprintBacklogClientProps {
|
||||
interface SprintBoardClientProps {
|
||||
productId: string
|
||||
sprintId: string
|
||||
stories: SprintStory[]
|
||||
pbisWithStories: PbiWithStories[]
|
||||
sprintStoryIdList: string[]
|
||||
tasksByStory: Record<string, Task[]>
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
export function SprintBacklogClient({
|
||||
export function SprintBoardClient({
|
||||
productId,
|
||||
sprintId,
|
||||
stories,
|
||||
pbisWithStories,
|
||||
sprintStoryIdList,
|
||||
tasksByStory,
|
||||
isDemo,
|
||||
}: SprintBacklogClientProps) {
|
||||
}: SprintBoardClientProps) {
|
||||
const [sprintStories, setSprintStories] = useState<SprintStory[]>(stories)
|
||||
const [sprintStoryIds, setSprintStoryIds] = useState<Set<string>>(() => new Set(sprintStoryIdList))
|
||||
const [selectedStoryId, setSelectedStoryId] = useState<string | null>(null)
|
||||
const {
|
||||
sprintStoryOrder,
|
||||
initSprint,
|
||||
|
|
@ -44,6 +49,7 @@ export function SprintBacklogClient({
|
|||
reorderSprintStories,
|
||||
rollbackSprint,
|
||||
} = useSprintStore()
|
||||
const [activeDragStory, setActiveDragStory] = useState<SprintStory | null>(null)
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -56,7 +62,16 @@ export function SprintBacklogClient({
|
|||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
|
||||
)
|
||||
|
||||
function handleDragStart(event: DragStartEvent) {
|
||||
const id = event.active.id.toString()
|
||||
if (id.startsWith('pb:')) {
|
||||
const story = pbisWithStories.flatMap(p => p.stories).find(s => s.id === id.slice(3))
|
||||
setActiveDragStory(story ?? null)
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragEnd(event: DragEndEvent) {
|
||||
setActiveDragStory(null)
|
||||
const { active, over } = event
|
||||
if (!over) return
|
||||
|
||||
|
|
@ -64,7 +79,7 @@ export function SprintBacklogClient({
|
|||
const overId = over.id.toString()
|
||||
const order = sprintStoryOrder[sprintId] ?? sprintStories.map(s => s.id)
|
||||
|
||||
// Dragged from right panel (pb: prefix) → add to sprint
|
||||
// Drag from left (product backlog) → add to sprint (middle)
|
||||
if (activeId.startsWith('pb:')) {
|
||||
const storyId = activeId.slice(3)
|
||||
const droppingOnSprint =
|
||||
|
|
@ -89,12 +104,13 @@ export function SprintBacklogClient({
|
|||
return
|
||||
}
|
||||
|
||||
// Dragged from left panel to right panel → remove from sprint
|
||||
// Drag from middle (sprint backlog) → left (product backlog) → remove
|
||||
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)
|
||||
if (selectedStoryId === activeId) setSelectedStoryId(null)
|
||||
startTransition(async () => {
|
||||
const result = await removeStoryFromSprintAction(activeId)
|
||||
if (!result.success) {
|
||||
|
|
@ -109,10 +125,13 @@ export function SprintBacklogClient({
|
|||
return
|
||||
}
|
||||
|
||||
// Reorder within sprint
|
||||
if (activeId !== overId && order.includes(overId)) {
|
||||
// Reorder within sprint (middle panel)
|
||||
if (activeId !== overId && !activeId.startsWith('pb:')) {
|
||||
const prevOrder = [...order]
|
||||
const newOrder = arrayMove([...order], order.indexOf(activeId), order.indexOf(overId))
|
||||
const newOrder = order.includes(overId)
|
||||
? arrayMove([...order], order.indexOf(activeId), order.indexOf(overId))
|
||||
: [...order.filter(id => id !== activeId), activeId]
|
||||
|
||||
reorderSprintStories(sprintId, newOrder)
|
||||
startTransition(async () => {
|
||||
const result = await reorderSprintStoriesAction(sprintId, newOrder)
|
||||
|
|
@ -124,11 +143,30 @@ export function SprintBacklogClient({
|
|||
}
|
||||
}
|
||||
|
||||
function handleAdd(storyId: string) {
|
||||
if (sprintStoryIds.has(storyId)) return
|
||||
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')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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)
|
||||
if (selectedStoryId === storyId) setSelectedStoryId(null)
|
||||
startTransition(async () => {
|
||||
const result = await removeStoryFromSprintAction(storyId)
|
||||
if (!result.success) {
|
||||
|
|
@ -142,26 +180,60 @@ export function SprintBacklogClient({
|
|||
})
|
||||
}
|
||||
|
||||
const selectedTasks = selectedStoryId ? (tasksByStory[selectedStoryId] ?? []) : []
|
||||
|
||||
return (
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SplitPane
|
||||
<DndContext
|
||||
id="sprint-board"
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<TriplePane
|
||||
storageKey={`sprint-${productId}`}
|
||||
left={
|
||||
<SprintBacklogRight
|
||||
pbisWithStories={pbisWithStories}
|
||||
sprintStoryIds={sprintStoryIds}
|
||||
isDemo={isDemo}
|
||||
onAdd={handleAdd}
|
||||
/>
|
||||
}
|
||||
middle={
|
||||
<SprintBacklogLeft
|
||||
sprintId={sprintId}
|
||||
stories={sprintStories}
|
||||
isDemo={isDemo}
|
||||
onRemove={handleRemove}
|
||||
onSelect={setSelectedStoryId}
|
||||
selectedStoryId={selectedStoryId}
|
||||
/>
|
||||
}
|
||||
right={
|
||||
<SprintBacklogRight
|
||||
pbisWithStories={pbisWithStories}
|
||||
sprintStoryIds={sprintStoryIds}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
selectedStoryId ? (
|
||||
<TaskList
|
||||
storyId={selectedStoryId}
|
||||
sprintId={sprintId}
|
||||
productId={productId}
|
||||
tasks={selectedTasks}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<DragOverlay>
|
||||
{activeDragStory && (
|
||||
<div className="flex items-center gap-3 px-6 py-2 bg-popover border border-primary rounded shadow-lg text-sm opacity-95 w-72">
|
||||
<span className="text-muted-foreground select-none">⠿</span>
|
||||
<span className="truncate flex-1">{activeDragStory.title}</span>
|
||||
</div>
|
||||
)}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
)
|
||||
}
|
||||
|
|
@ -119,22 +119,28 @@ function EditSubmitButton() {
|
|||
}
|
||||
|
||||
function CreateTaskForm({ storyId, sprintId, onDone }: { storyId: string; sprintId: string; onDone: () => void }) {
|
||||
const [, formAction] = useActionState(
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createTaskAction(_prev, fd)
|
||||
if (result?.success) onDone()
|
||||
if (result?.success) { onDone(); return result }
|
||||
if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Aanmaken mislukt')
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
return (
|
||||
<form action={formAction} className="flex gap-2 px-4 py-2 border-b border-border">
|
||||
<form action={formAction} className="flex flex-col gap-1.5 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>
|
||||
<div className="flex gap-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>
|
||||
</div>
|
||||
{state && 'error' in state && typeof state.error === 'string' && (
|
||||
<p className="text-xs text-destructive">{state.error}</p>
|
||||
)}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
|
@ -219,6 +225,7 @@ export function TaskList({ storyId, sprintId, productId: _productId, tasks, isDe
|
|||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
id="task-list"
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={e => setActiveDragId(e.active.id as string)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue