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,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>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue