Merge pull request #79 from madhura68/feat/sprint-backlog-filter-popover
feat(sprint): filter popover + edit-iconen op PBI/story/taak
This commit is contained in:
Janpeter Visser
GitHub
commit
4a2e94e208
4 changed files with 271 additions and 32 deletions
|
|
@ -3,6 +3,7 @@ import { notFound, redirect } from 'next/navigation'
|
|||
import { getSession } from '@/lib/auth'
|
||||
import { getAccessibleProduct } from '@/lib/product-access'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { pbiStatusToApi } from '@/lib/task-status'
|
||||
import { SprintBoardClient } from '@/components/sprint/sprint-board-client'
|
||||
import { SprintHeader } from '@/components/sprint/sprint-header'
|
||||
import type { SprintStory, PbiWithStories, ProductMember } from '@/components/sprint/sprint-backlog'
|
||||
|
|
@ -69,6 +70,10 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
|
|||
id: s.id,
|
||||
code: s.code,
|
||||
title: s.title,
|
||||
description: s.description,
|
||||
acceptance_criteria: s.acceptance_criteria,
|
||||
pbi_id: s.pbi_id,
|
||||
created_at: s.created_at,
|
||||
priority: s.priority,
|
||||
status: s.status,
|
||||
taskCount: s.tasks.length,
|
||||
|
|
@ -108,10 +113,17 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
|
|||
id: pbi.id,
|
||||
code: pbi.code,
|
||||
title: pbi.title,
|
||||
priority: pbi.priority,
|
||||
status: pbiStatusToApi(pbi.status),
|
||||
description: pbi.description,
|
||||
stories: pbi.stories.map(s => ({
|
||||
id: s.id,
|
||||
code: s.code,
|
||||
title: s.title,
|
||||
description: s.description,
|
||||
acceptance_criteria: s.acceptance_criteria,
|
||||
pbi_id: s.pbi_id,
|
||||
created_at: s.created_at,
|
||||
priority: s.priority,
|
||||
status: s.status,
|
||||
taskCount: 0,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter } from 'lucide-react'
|
||||
import { useState, useTransition, useEffect } from 'react'
|
||||
import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter, Pencil } 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 { Button } from '@/components/ui/button'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { CodeBadge } from '@/components/shared/code-badge'
|
||||
import {
|
||||
DropdownMenu, DropdownMenuContent, DropdownMenuItem,
|
||||
|
|
@ -17,8 +19,12 @@ import { UserAvatar } from '@/components/shared/user-avatar'
|
|||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
|
||||
import { PRIORITY_COLORS } from '@/components/shared/priority-select'
|
||||
import { useSprintStore } from '@/stores/sprint-store'
|
||||
import { claimStoryAction, unclaimStoryAction, reassignStoryAction, claimAllUnassignedInActiveSprintAction } from '@/actions/stories'
|
||||
import { PbiDialog, type PbiDialogState } from '@/components/backlog/pbi-dialog'
|
||||
import { StoryDialog, type StoryDialogState } from '@/components/backlog/story-dialog'
|
||||
import type { PbiStatusApi } from '@/lib/task-status'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
|
|
@ -32,6 +38,10 @@ export interface SprintStory {
|
|||
id: string
|
||||
code: string | null
|
||||
title: string
|
||||
description: string | null
|
||||
acceptance_criteria: string | null
|
||||
pbi_id: string
|
||||
created_at: Date
|
||||
priority: number
|
||||
status: string
|
||||
taskCount: number
|
||||
|
|
@ -49,19 +59,23 @@ export interface PbiWithStories {
|
|||
id: string
|
||||
code: string | null
|
||||
title: string
|
||||
priority: number
|
||||
status: PbiStatusApi
|
||||
description: string | null
|
||||
stories: SprintStory[]
|
||||
}
|
||||
|
||||
// --- Left panel: Sprint Backlog ---
|
||||
|
||||
function SortableSprintRow({
|
||||
story, isDemo, onRemove, onSelect, isSelected,
|
||||
story, isDemo, onRemove, onSelect, onEdit, isSelected,
|
||||
currentUserId, productId, members, onAssigneeChange,
|
||||
}: {
|
||||
story: SprintStory
|
||||
isDemo: boolean
|
||||
onRemove: () => void
|
||||
onSelect: () => void
|
||||
onEdit: () => void
|
||||
isSelected: boolean
|
||||
currentUserId: string
|
||||
productId: string
|
||||
|
|
@ -189,6 +203,16 @@ function SortableSprintRow({
|
|||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</DemoTooltip>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); if (!isDemo) onEdit() }}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
aria-label="Bewerk story"
|
||||
disabled={isDemo}
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
</DemoTooltip>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); if (!isDemo) onRemove() }}
|
||||
|
|
@ -227,6 +251,7 @@ export function SprintBacklogLeft({
|
|||
const { sprintStoryOrder } = useSprintStore()
|
||||
const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' })
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const [storyDialogState, setStoryDialogState] = useState<StoryDialogState | null>(null)
|
||||
|
||||
const unassignedCount = stories.filter(s => s.assignee_id === null).length
|
||||
const currentUserUsername = members.find(m => m.userId === currentUserId)?.username ?? null
|
||||
|
|
@ -288,6 +313,7 @@ export function SprintBacklogLeft({
|
|||
isDemo={isDemo}
|
||||
onRemove={() => onRemove(story.id)}
|
||||
onSelect={() => onSelect(story.id)}
|
||||
onEdit={() => setStoryDialogState({ mode: 'edit', story, productId })}
|
||||
isSelected={selectedStoryId === story.id}
|
||||
currentUserId={currentUserId}
|
||||
productId={productId}
|
||||
|
|
@ -298,12 +324,76 @@ export function SprintBacklogLeft({
|
|||
</SortableContext>
|
||||
)}
|
||||
</div>
|
||||
<StoryDialog
|
||||
state={storyDialogState}
|
||||
onClose={() => setStoryDialogState(null)}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Right panel: Product Backlog grouped by PBI ---
|
||||
|
||||
const PRIORITY_LABELS_SPRINT: Record<number, string> = {
|
||||
1: 'Kritiek',
|
||||
2: 'Hoog',
|
||||
3: 'Gemiddeld',
|
||||
4: 'Laag',
|
||||
}
|
||||
|
||||
const PRIORITY_OPTIONS_SPRINT: Array<{ value: number | 'all'; label: string }> = [
|
||||
{ value: 'all', label: 'Alle' },
|
||||
{ value: 1, label: 'Kritiek' },
|
||||
{ value: 2, label: 'Hoog' },
|
||||
{ value: 3, label: 'Gemiddeld' },
|
||||
{ value: 4, label: 'Laag' },
|
||||
]
|
||||
|
||||
type StoryStatusFilter = 'OPEN' | 'IN_SPRINT' | 'DONE' | 'all'
|
||||
|
||||
const STATUS_OPTIONS_SPRINT: Array<{ value: StoryStatusFilter; label: string }> = [
|
||||
{ value: 'all', label: 'Alle' },
|
||||
{ value: 'OPEN', label: 'Open' },
|
||||
{ value: 'IN_SPRINT', label: 'In Sprint' },
|
||||
{ value: 'DONE', label: 'Klaar' },
|
||||
]
|
||||
|
||||
function FilterPills<T extends string | number>({
|
||||
label,
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
label: string
|
||||
options: Array<{ value: T; label: string }>
|
||||
value: T
|
||||
onChange: (v: T) => void
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-xs font-medium text-muted-foreground">{label}</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{options.map((opt) => (
|
||||
<button
|
||||
key={String(opt.value)}
|
||||
type="button"
|
||||
onClick={() => onChange(opt.value)}
|
||||
className={cn(
|
||||
'text-xs px-2.5 py-1 rounded-full border transition-colors',
|
||||
value === opt.value
|
||||
? 'bg-primary text-primary-foreground border-primary'
|
||||
: 'bg-transparent border-border hover:bg-surface-container'
|
||||
)}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DraggablePbiStoryRow({
|
||||
story,
|
||||
isDemo,
|
||||
|
|
@ -371,10 +461,11 @@ interface SprintBacklogRightProps {
|
|||
pbisWithStories: PbiWithStories[]
|
||||
sprintStoryIds: Set<string>
|
||||
isDemo: boolean
|
||||
productId: string
|
||||
onAdd: (storyId: string) => void
|
||||
}
|
||||
|
||||
export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, onAdd }: SprintBacklogRightProps) {
|
||||
export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, productId, onAdd }: SprintBacklogRightProps) {
|
||||
const [collapsed, setCollapsed] = useState<Set<string>>(() => {
|
||||
const auto = new Set<string>()
|
||||
for (const pbi of pbisWithStories) {
|
||||
|
|
@ -384,8 +475,47 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
}
|
||||
return auto
|
||||
})
|
||||
const [filterPriority, setFilterPriority] = useState<number | 'all'>('all')
|
||||
const [filterStatus, setFilterStatus] = useState<StoryStatusFilter>('all')
|
||||
const [prefsLoaded, setPrefsLoaded] = useState(false)
|
||||
const [pbiDialogState, setPbiDialogState] = useState<PbiDialogState | null>(null)
|
||||
const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
|
||||
|
||||
// Hydrate filter prefs from localStorage post-mount (avoids SSR mismatch).
|
||||
// setState calls here are intentional: hydrating from localStorage on first paint.
|
||||
useEffect(() => {
|
||||
const savedPriority = localStorage.getItem('scrum4me:sprint_pb_filter_priority')
|
||||
if (savedPriority && savedPriority !== 'all') {
|
||||
const n = parseInt(savedPriority, 10)
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
if (Number.isInteger(n) && n >= 1 && n <= 4) setFilterPriority(n)
|
||||
}
|
||||
const savedStatus = localStorage.getItem('scrum4me:sprint_pb_filter_status')
|
||||
if (savedStatus === 'OPEN' || savedStatus === 'IN_SPRINT' || savedStatus === 'DONE') {
|
||||
|
||||
setFilterStatus(savedStatus)
|
||||
}
|
||||
|
||||
setPrefsLoaded(true)
|
||||
}, [])
|
||||
|
||||
useEffect(() => { if (prefsLoaded) localStorage.setItem('scrum4me:sprint_pb_filter_priority', String(filterPriority)) }, [filterPriority, prefsLoaded])
|
||||
useEffect(() => { if (prefsLoaded) localStorage.setItem('scrum4me:sprint_pb_filter_status', filterStatus) }, [filterStatus, prefsLoaded])
|
||||
|
||||
const filteredPbis = pbisWithStories
|
||||
.map(pbi => ({
|
||||
...pbi,
|
||||
stories: pbi.stories.filter(s =>
|
||||
(filterPriority === 'all' || s.priority === filterPriority) &&
|
||||
(filterStatus === 'all' || s.status === filterStatus)
|
||||
),
|
||||
}))
|
||||
.filter(pbi => pbi.stories.length > 0)
|
||||
|
||||
const activeFilterCount =
|
||||
(filterPriority !== 'all' ? 1 : 0) +
|
||||
(filterStatus !== 'all' ? 1 : 0)
|
||||
|
||||
function toggle(pbiId: string) {
|
||||
setCollapsed(prev => {
|
||||
const next = new Set(prev)
|
||||
|
|
@ -395,7 +525,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
}
|
||||
|
||||
function collapseAll() {
|
||||
setCollapsed(new Set(pbisWithStories.map(p => p.id)))
|
||||
setCollapsed(new Set(filteredPbis.map(p => p.id)))
|
||||
}
|
||||
|
||||
function expandAll() {
|
||||
|
|
@ -404,7 +534,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
|
||||
function onlyNotDone() {
|
||||
const auto = new Set<string>()
|
||||
for (const pbi of pbisWithStories) {
|
||||
for (const pbi of filteredPbis) {
|
||||
if (pbi.stories.length > 0 && pbi.stories.every(s => s.status === 'DONE')) {
|
||||
auto.add(pbi.id)
|
||||
}
|
||||
|
|
@ -412,7 +542,70 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
setCollapsed(auto)
|
||||
}
|
||||
|
||||
const collapseActions = (
|
||||
const headerActions = (
|
||||
<>
|
||||
{filterPriority !== 'all' && (
|
||||
<button
|
||||
onClick={() => setFilterPriority('all')}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:underline"
|
||||
aria-label="Wis prioriteitsfilter"
|
||||
>
|
||||
<Badge className={cn('text-xs', PRIORITY_COLORS[filterPriority])}>
|
||||
{PRIORITY_LABELS_SPRINT[filterPriority]}
|
||||
</Badge>
|
||||
<span>×</span>
|
||||
</button>
|
||||
)}
|
||||
{filterStatus !== 'all' && (
|
||||
<button
|
||||
onClick={() => setFilterStatus('all')}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:underline"
|
||||
aria-label="Wis statusfilter"
|
||||
>
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[filterStatus])}>
|
||||
{STATUS_LABELS[filterStatus]}
|
||||
</Badge>
|
||||
<span>×</span>
|
||||
</button>
|
||||
)}
|
||||
<Popover>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs">
|
||||
{`Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}`}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<PopoverContent align="end" className="w-72 space-y-4">
|
||||
<FilterPills
|
||||
label="Prioriteit"
|
||||
options={PRIORITY_OPTIONS_SPRINT}
|
||||
value={filterPriority}
|
||||
onChange={setFilterPriority}
|
||||
/>
|
||||
<FilterPills
|
||||
label="Status"
|
||||
options={STATUS_OPTIONS_SPRINT}
|
||||
value={filterStatus}
|
||||
onChange={setFilterStatus}
|
||||
/>
|
||||
<div className="flex justify-end pt-1 border-t border-border">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
disabled={activeFilterCount === 0}
|
||||
onClick={() => {
|
||||
setFilterPriority('all')
|
||||
setFilterStatus('all')
|
||||
}}
|
||||
>
|
||||
Wis filters
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger onClick={collapseAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles inklappen">
|
||||
|
|
@ -433,11 +626,12 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
<TooltipContent>Alleen niet klaar</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar title="Product Backlog" actions={collapseActions} />
|
||||
<PanelNavBar title="Product Backlog" actions={headerActions} />
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={cn(
|
||||
|
|
@ -445,11 +639,14 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
isOver && 'bg-error/5 ring-2 ring-inset ring-error/20 rounded'
|
||||
)}
|
||||
>
|
||||
{pbisWithStories.map(pbi => (
|
||||
{filteredPbis.map(pbi => (
|
||||
<div key={pbi.id}>
|
||||
<button
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
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 select-none"
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(pbi.id) } }}
|
||||
className="group w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left select-none cursor-pointer"
|
||||
>
|
||||
<span className="text-xs">{collapsed.has(pbi.id) ? '▶' : '▼'}</span>
|
||||
<span className="text-sm font-medium truncate flex-1">{pbi.title}</span>
|
||||
|
|
@ -457,7 +654,20 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
<span className="text-xs text-muted-foreground">
|
||||
{pbi.stories.filter(s => s.status === 'DONE').length}/{pbi.stories.length} klaar
|
||||
</span>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
if (!isDemo) setPbiDialogState({ mode: 'edit', productId, pbi: { id: pbi.id, title: pbi.title, code: pbi.code, priority: pbi.priority, status: pbi.status, description: pbi.description } })
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
aria-label="Bewerk PBI"
|
||||
disabled={isDemo}
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
</DemoTooltip>
|
||||
</div>
|
||||
|
||||
{!collapsed.has(pbi.id) && pbi.stories.map(story => {
|
||||
const inSprint = sprintStoryIds.has(story.id)
|
||||
|
|
@ -490,6 +700,11 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
<PbiDialog
|
||||
state={pbiDialogState}
|
||||
onClose={() => setPbiDialogState(null)}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -210,6 +210,7 @@ export function SprintBoardClient({
|
|||
pbisWithStories={pbisWithStories}
|
||||
sprintStoryIds={sprintStoryIds}
|
||||
isDemo={isDemo}
|
||||
productId={productId}
|
||||
onAdd={handleAdd}
|
||||
/>,
|
||||
<SprintBacklogLeft
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
sortableKeyboardCoordinates,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { Pencil } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
|
@ -120,6 +121,16 @@ function SortableTaskRow({
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); if (!isDemo) onEdit() }}
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded shrink-0 mt-0.5 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
aria-label="Bewerk taak"
|
||||
disabled={isDemo}
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
</DemoTooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue