feat: apply priority-color card style to sprint story rows
This commit is contained in:
parent
7887c2c24f
commit
b1483a02b5
1 changed files with 128 additions and 120 deletions
|
|
@ -15,6 +15,7 @@ import {
|
|||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { UserAvatar } from '@/components/shared/user-avatar'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
|
||||
import { useSprintStore } from '@/stores/sprint-store'
|
||||
import { claimStoryAction, unclaimStoryAction, reassignStoryAction, claimAllUnassignedInActiveSprintAction } from '@/actions/stories'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
|
@ -26,14 +27,6 @@ const STATUS_COLORS: Record<string, string> = {
|
|||
}
|
||||
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
|
||||
|
|
@ -124,86 +117,89 @@ function SortableSprintRow({
|
|||
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'
|
||||
)}
|
||||
className="group px-2 py-1 cursor-pointer"
|
||||
>
|
||||
{!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>
|
||||
<div className={cn(
|
||||
'flex items-start gap-2 rounded border border-border px-3 py-2 transition-colors',
|
||||
PRIORITY_BORDER[story.priority],
|
||||
isSelected
|
||||
? 'bg-primary-container border-primary text-primary-container-foreground'
|
||||
: 'bg-surface-container hover:bg-surface-container-high'
|
||||
)}>
|
||||
{!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"
|
||||
<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()}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
⠿
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm leading-snug line-clamp-2 flex-1">{story.title}</p>
|
||||
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 mt-1.5">
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border shrink-0', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground shrink-0">{story.doneCount}/{story.taskCount} klaar</span>
|
||||
{story.assignee_id ? (
|
||||
<div className="flex items-center gap-1 min-w-0">
|
||||
<UserAvatar userId={story.assignee_id} username={story.assignee_username ?? '?'} size="xs" />
|
||||
<span className="text-xs text-muted-foreground truncate">{story.assignee_username}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic">Niet geclaimd</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -326,35 +322,43 @@ function DraggablePbiStoryRow({
|
|||
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',
|
||||
'px-2 py-1',
|
||||
!isDemo && 'cursor-pointer',
|
||||
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 className={cn(
|
||||
'flex items-center gap-2 rounded border border-border px-3 py-2 transition-colors bg-surface-container',
|
||||
PRIORITY_BORDER[story.priority],
|
||||
!isDemo && 'hover:bg-surface-container-high'
|
||||
)}>
|
||||
{!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 leading-snug line-clamp-2 flex-1">{story.title}</p>
|
||||
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
||||
</div>
|
||||
<div className="mt-1.5">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
{!isDemo && (
|
||||
<span className="text-xs text-muted-foreground shrink-0">+ toevoegen</span>
|
||||
)}
|
||||
</div>
|
||||
{!isDemo && (
|
||||
<span className="text-xs text-muted-foreground shrink-0">+ toevoegen</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -404,21 +408,25 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
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 key={story.id} className="px-2 py-1 opacity-40">
|
||||
<div className={cn(
|
||||
'flex items-center gap-2 rounded border border-border px-3 py-2 bg-surface-container',
|
||||
PRIORITY_BORDER[story.priority]
|
||||
)}>
|
||||
<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 leading-snug line-clamp-2 flex-1">{story.title}</p>
|
||||
{story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
|
||||
</div>
|
||||
<div className="mt-1.5">
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground shrink-0">In Sprint</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground shrink-0">In Sprint</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue