432 lines
16 KiB
TypeScript
432 lines
16 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useTransition } from 'react'
|
|
import { Trash2, MoreHorizontal } from 'lucide-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 { Badge } from '@/components/ui/badge'
|
|
import { CodeBadge } from '@/components/shared/code-badge'
|
|
import {
|
|
DropdownMenu, DropdownMenuContent, DropdownMenuItem,
|
|
DropdownMenuTrigger, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
|
import { UserAvatar } from '@/components/shared/user-avatar'
|
|
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
|
import { useSprintStore } from '@/stores/sprint-store'
|
|
import { claimStoryAction, unclaimStoryAction, reassignStoryAction, claimAllUnassignedInActiveSprintAction } from '@/actions/stories'
|
|
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
|
|
code: string | null
|
|
title: string
|
|
priority: number
|
|
status: string
|
|
taskCount: number
|
|
doneCount: number
|
|
assignee_id: string | null
|
|
assignee_username: string | null
|
|
}
|
|
|
|
export interface ProductMember {
|
|
userId: string
|
|
username: string
|
|
}
|
|
|
|
export interface PbiWithStories {
|
|
id: string
|
|
code: string | null
|
|
title: string
|
|
stories: SprintStory[]
|
|
}
|
|
|
|
// --- Left panel: Sprint Backlog ---
|
|
|
|
function SortableSprintRow({
|
|
story, isDemo, onRemove, onSelect, isSelected,
|
|
currentUserId, productId, members, onAssigneeChange,
|
|
}: {
|
|
story: SprintStory
|
|
isDemo: boolean
|
|
onRemove: () => void
|
|
onSelect: () => void
|
|
isSelected: boolean
|
|
currentUserId: string
|
|
productId: string
|
|
members: ProductMember[]
|
|
onAssigneeChange: (storyId: string, id: string | null, username: string | null) => 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 }
|
|
const [, startTransition] = useTransition()
|
|
|
|
function handleClaim(e: React.MouseEvent) {
|
|
e.stopPropagation()
|
|
const me = members.find(m => m.userId === currentUserId)
|
|
onAssigneeChange(story.id, currentUserId, me?.username ?? null)
|
|
startTransition(async () => {
|
|
const result = await claimStoryAction(story.id, productId)
|
|
if (!result.success) {
|
|
onAssigneeChange(story.id, story.assignee_id, story.assignee_username)
|
|
toast.error(result.error ?? 'Claimen mislukt')
|
|
} else {
|
|
toast.success('Story geclaimd')
|
|
}
|
|
})
|
|
}
|
|
|
|
function handleUnclaim(e: React.MouseEvent) {
|
|
e.stopPropagation()
|
|
onAssigneeChange(story.id, null, null)
|
|
startTransition(async () => {
|
|
const result = await unclaimStoryAction(story.id, productId)
|
|
if (!result.success) {
|
|
onAssigneeChange(story.id, story.assignee_id, story.assignee_username)
|
|
toast.error(result.error ?? 'Teruggeven mislukt')
|
|
}
|
|
})
|
|
}
|
|
|
|
function handleReassign(e: React.MouseEvent, targetUserId: string, targetUsername: string) {
|
|
e.stopPropagation()
|
|
onAssigneeChange(story.id, targetUserId, targetUsername)
|
|
startTransition(async () => {
|
|
const result = await reassignStoryAction(story.id, productId, targetUserId)
|
|
if (!result.success) {
|
|
onAssigneeChange(story.id, story.assignee_id, story.assignee_username)
|
|
toast.error(result.error ?? 'Toewijzen mislukt')
|
|
} else {
|
|
toast.success(`Toegewezen aan ${targetUsername}`)
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
onClick={onSelect}
|
|
className={cn(
|
|
'group flex items-start 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
|
|
{...attributes}
|
|
{...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 mt-0.5"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
⠿
|
|
</span>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="text-sm truncate flex-1">{story.title}</p>
|
|
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
|
</div>
|
|
<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 className="flex items-center gap-1.5 mt-1">
|
|
{story.assignee_id ? (
|
|
<>
|
|
<UserAvatar userId={story.assignee_id} username={story.assignee_username ?? '?'} size="xs" />
|
|
<span className="text-xs text-muted-foreground truncate">{story.assignee_username}</span>
|
|
</>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground italic">Niet geclaimd</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 shrink-0 mt-0.5" onClick={e => e.stopPropagation()}>
|
|
<DemoTooltip show={isDemo}>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
disabled={isDemo}
|
|
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded bg-transparent border-0 cursor-pointer"
|
|
aria-label="Story opties"
|
|
>
|
|
<MoreHorizontal size={14} />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" onClick={e => e.stopPropagation()}>
|
|
{story.assignee_id !== currentUserId && (
|
|
<DropdownMenuItem onClick={handleClaim}>Pak op</DropdownMenuItem>
|
|
)}
|
|
{story.assignee_id && (
|
|
<DropdownMenuItem onClick={handleUnclaim}>Geef terug aan team</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>Wijs toe aan</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent>
|
|
{members.map(m => (
|
|
<DropdownMenuItem key={m.userId} onClick={e => handleReassign(e, m.userId, m.username)}>
|
|
<UserAvatar userId={m.userId} username={m.username} size="xs" />
|
|
<span>{m.username}</span>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</DemoTooltip>
|
|
{!isDemo && (
|
|
<button
|
|
onClick={e => { e.stopPropagation(); onRemove() }}
|
|
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error"
|
|
aria-label="Verwijder uit sprint"
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface SprintBacklogLeftProps {
|
|
sprintId: string
|
|
stories: SprintStory[]
|
|
isDemo: boolean
|
|
onRemove: (storyId: string) => void
|
|
onSelect: (storyId: string) => void
|
|
selectedStoryId: string | null
|
|
currentUserId: string
|
|
productId: string
|
|
members: ProductMember[]
|
|
onAssigneeChange: (storyId: string, id: string | null, username: string | null) => void
|
|
}
|
|
|
|
export function SprintBacklogLeft({
|
|
sprintId, stories, isDemo, onRemove, onSelect, selectedStoryId,
|
|
currentUserId, productId, members, onAssigneeChange,
|
|
}: SprintBacklogLeftProps) {
|
|
const { sprintStoryOrder } = useSprintStore()
|
|
const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' })
|
|
const [isPending, startTransition] = useTransition()
|
|
|
|
const unassignedCount = stories.filter(s => s.assignee_id === null).length
|
|
const currentUserUsername = members.find(m => m.userId === currentUserId)?.username ?? null
|
|
|
|
function handleClaimAll() {
|
|
const unassigned = stories.filter(s => s.assignee_id === null)
|
|
unassigned.forEach(s => onAssigneeChange(s.id, currentUserId, currentUserUsername))
|
|
startTransition(async () => {
|
|
const result = await claimAllUnassignedInActiveSprintAction(productId)
|
|
if (!result.success) {
|
|
unassigned.forEach(s => onAssigneeChange(s.id, null, null))
|
|
toast.error(result.error ?? 'Claimen mislukt')
|
|
} else {
|
|
toast.success(`${result.count} ${result.count === 1 ? 'story' : 'stories'} geclaimd`)
|
|
}
|
|
})
|
|
}
|
|
|
|
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)
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<PanelNavBar
|
|
title="Sprint Backlog"
|
|
actions={
|
|
<DemoTooltip show={isDemo}>
|
|
<button
|
|
onClick={handleClaimAll}
|
|
disabled={isDemo || unassignedCount === 0 || isPending}
|
|
className="text-xs text-primary hover:text-primary/80 disabled:opacity-40 disabled:cursor-not-allowed whitespace-nowrap"
|
|
>
|
|
{isPending ? 'Claimen…' : `Claim ongeclaimd (${unassignedCount})`}
|
|
</button>
|
|
</DemoTooltip>
|
|
}
|
|
/>
|
|
<div
|
|
ref={setNodeRef}
|
|
className={cn(
|
|
'flex-1 overflow-y-auto transition-colors',
|
|
isOver && 'bg-primary/5 ring-2 ring-inset ring-primary/20 rounded'
|
|
)}
|
|
>
|
|
{orderedStories.length === 0 ? (
|
|
<p className={cn(
|
|
'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 linkerpaneel.'}
|
|
</p>
|
|
) : (
|
|
<SortableContext items={orderedStories.map(s => s.id)} strategy={verticalListSortingStrategy}>
|
|
{orderedStories.map(story => (
|
|
<SortableSprintRow
|
|
key={story.id}
|
|
story={story}
|
|
isDemo={isDemo}
|
|
onRemove={() => onRemove(story.id)}
|
|
onSelect={() => onSelect(story.id)}
|
|
isSelected={selectedStoryId === story.id}
|
|
currentUserId={currentUserId}
|
|
productId={productId}
|
|
members={members}
|
|
onAssigneeChange={onAssigneeChange}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// --- Right panel: Product Backlog grouped by PBI ---
|
|
|
|
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 }
|
|
: undefined
|
|
|
|
return (
|
|
<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 transition-colors',
|
|
!isDemo && 'cursor-pointer hover:bg-primary/5',
|
|
isDemo && 'opacity-60',
|
|
isDragging && 'opacity-40'
|
|
)}
|
|
>
|
|
{!isDemo && (
|
|
<span
|
|
{...attributes}
|
|
{...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>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="text-sm truncate flex-1">{story.title}</p>
|
|
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
|
</div>
|
|
<Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
|
|
{STATUS_LABELS[story.status]}
|
|
</Badge>
|
|
</div>
|
|
{!isDemo && (
|
|
<span className="text-xs text-muted-foreground shrink-0">+ toevoegen</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface SprintBacklogRightProps {
|
|
pbisWithStories: PbiWithStories[]
|
|
sprintStoryIds: Set<string>
|
|
isDemo: boolean
|
|
onAdd: (storyId: string) => void
|
|
}
|
|
|
|
export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, onAdd }: SprintBacklogRightProps) {
|
|
const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
|
|
const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
|
|
|
|
function toggle(pbiId: string) {
|
|
setCollapsed(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(pbiId)) { next.delete(pbiId) } else { next.add(pbiId) }
|
|
return next
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<PanelNavBar title="Product Backlog" />
|
|
<div
|
|
ref={setNodeRef}
|
|
className={cn(
|
|
'flex-1 overflow-y-auto py-2 transition-colors',
|
|
isOver && 'bg-error/5 ring-2 ring-inset ring-error/20 rounded'
|
|
)}
|
|
>
|
|
{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>
|
|
{pbi.code && <CodeBadge code={pbi.code} />}
|
|
<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)
|
|
if (inSprint) {
|
|
return (
|
|
<div
|
|
key={story.id}
|
|
className="flex items-center gap-3 px-6 py-2 border-b border-border/50 opacity-40"
|
|
>
|
|
<div className="w-[14px] shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="text-sm truncate flex-1">{story.title}</p>
|
|
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
|
</div>
|
|
<Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
|
|
{STATUS_LABELS[story.status]}
|
|
</Badge>
|
|
</div>
|
|
<span className="text-xs text-muted-foreground shrink-0">In Sprint</span>
|
|
</div>
|
|
)
|
|
}
|
|
return <DraggablePbiStoryRow key={story.id} story={story} isDemo={isDemo} onAdd={() => onAdd(story.id)} />
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|