janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(PBI-61): multi-select op kind- en status-filter (#159)

Browse source 
- Filter-pills zijn nu toggle-knoppen; meerdere waardes per dimensie selecteerbaar
- "Alle"-pill wist de selectie binnen die dimensie
- Eén active-badge per geselecteerde waarde, klikbaar om losse selectie te wissen
- localStorage formaat is nu CSV met whitelist-validatie (oude 'all'-waarde valt vanzelf weg → leeg = geen filter)
- Filtercount in trigger toont som van actieve selecties

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-07 22:21:09 +02:00 • committed by GitHub
parent e8371b9f95
commit 10bf25dadd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 119 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

189
components/jobs/jobs-column.tsx
View file

@ -1,6 +1,6 @@
'use client'
import { useEffect, useState } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { Button } from '@/components/ui/button'
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'
import JobCard from './job-card'
@ -10,9 +10,6 @@ import { cn } from '@/lib/utils'
import type { JobWithRelations } from '@/actions/jobs-page'
import type { ClaudeJobKind } from '@prisma/client'
type KindFilter = ClaudeJobKind | 'all'
type StatusFilter = ClaudeJobStatusApi | 'all'
const KIND_LABELS: Record<ClaudeJobKind, string> = {
TASK_IMPLEMENTATION: 'TAAK',
SPRINT_IMPLEMENTATION: 'SPRINT',
@ -21,8 +18,7 @@ const KIND_LABELS: Record<ClaudeJobKind, string> = {
PLAN_CHAT: 'CHAT',
}
const KIND_OPTIONS: Array<{ value: KindFilter; label: string }> = [
{ value: 'all', label: 'Alle' },
const KIND_OPTIONS: Array<{ value: ClaudeJobKind; label: string }> = [
{ value: 'TASK_IMPLEMENTATION', label: 'TAAK' },
{ value: 'SPRINT_IMPLEMENTATION', label: 'SPRINT' },
{ value: 'IDEA_GRILL', label: 'GRILL' },
@ -30,56 +26,82 @@ const KIND_OPTIONS: Array<{ value: KindFilter; label: string }> = [
{ value: 'PLAN_CHAT', label: 'CHAT' },
]
const KIND_VALUES = new Set<ClaudeJobKind>([
'TASK_IMPLEMENTATION',
'SPRINT_IMPLEMENTATION',
'IDEA_GRILL',
'IDEA_MAKE_PLAN',
'PLAN_CHAT',
])
const KIND_VALUES = new Set<ClaudeJobKind>(KIND_OPTIONS.map((o) => o.value))
function FilterPills<T extends string>({
function MultiFilterPills<T extends string>({
label,
options,
value,
onChange,
selected,
onToggle,
onClear,
}: {
label: string
options: Array<{ value: T; label: string }>
value: T
onChange: (v: T) => void
selected: Set<T>
onToggle: (v: T) => void
onClear: () => void
}) {
const allActive = selected.size === 0
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={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>
))}
<button
type="button"
onClick={onClear}
className={cn(
'text-xs px-2.5 py-1 rounded-full border transition-colors',
allActive
? 'bg-primary text-primary-foreground border-primary'
: 'bg-transparent border-border hover:bg-surface-container'
)}
>
Alle
</button>
{options.map((opt) => {
const active = selected.has(opt.value)
return (
<button
key={opt.value}
type="button"
onClick={() => onToggle(opt.value)}
className={cn(
'text-xs px-2.5 py-1 rounded-full border transition-colors',
active
? 'bg-primary text-primary-foreground border-primary'
: 'bg-transparent border-border hover:bg-surface-container'
)}
>
{opt.label}
</button>
)
})}
</div>
</div>
)
}
function parseCsv<T extends string>(raw: string | null, allowed: Set<T>): Set<T> {
if (!raw) return new Set()
const out = new Set<T>()
for (const part of raw.split(',')) {
const v = part.trim()
if (v && allowed.has(v as T)) out.add(v as T)
}
return out
}
function setToCsv<T extends string>(s: Set<T>): string {
return Array.from(s).join(',')
}
interface JobsColumnProps {
title: string
jobs: JobWithRelations[]
selectedJobId: string | null
onSelect: (id: string) => void
storageKeyPrefix: string
statusOptions: Array<{ value: StatusFilter; label: string }>
statusOptions: Array<{ value: ClaudeJobStatusApi; label: string }>
emptyText: string
}
@ -92,69 +114,90 @@ export default function JobsColumn({
statusOptions,
emptyText,
}: JobsColumnProps) {
const [filterKind, setFilterKind] = useState<KindFilter>('all')
const [filterStatus, setFilterStatus] = useState<StatusFilter>('all')
const [filterKinds, setFilterKinds] = useState<Set<ClaudeJobKind>>(() => new Set())
const [filterStatuses, setFilterStatuses] = useState<Set<ClaudeJobStatusApi>>(() => new Set())
const [prefsLoaded, setPrefsLoaded] = useState(false)
const kindKey = `${storageKeyPrefix}_filter_kind`
const statusKey = `${storageKeyPrefix}_filter_status`
const statusValues = useMemo(
() => new Set<ClaudeJobStatusApi>(statusOptions.map((o) => o.value)),
[statusOptions]
)
useEffect(() => {
const savedKind = localStorage.getItem(kindKey)
if (savedKind && (savedKind === 'all' || KIND_VALUES.has(savedKind as ClaudeJobKind))) {
// eslint-disable-next-line react-hooks/set-state-in-effect
setFilterKind(savedKind as KindFilter)
}
const savedStatus = localStorage.getItem(statusKey)
if (savedStatus && statusOptions.some((o) => o.value === savedStatus)) {
setFilterStatus(savedStatus as StatusFilter)
}
// Hydratie van localStorage post-mount: zetters intentioneel, voorkomt SSR-mismatch.
/* eslint-disable react-hooks/set-state-in-effect */
setFilterKinds(parseCsv<ClaudeJobKind>(localStorage.getItem(kindKey), KIND_VALUES))
setFilterStatuses(parseCsv<ClaudeJobStatusApi>(localStorage.getItem(statusKey), statusValues))
setPrefsLoaded(true)
}, [kindKey, statusKey, statusOptions])
/* eslint-enable react-hooks/set-state-in-effect */
}, [kindKey, statusKey, statusValues])
useEffect(() => {
if (prefsLoaded) localStorage.setItem(kindKey, filterKind)
}, [filterKind, prefsLoaded, kindKey])
if (prefsLoaded) localStorage.setItem(kindKey, setToCsv(filterKinds))
}, [filterKinds, prefsLoaded, kindKey])
useEffect(() => {
if (prefsLoaded) localStorage.setItem(statusKey, filterStatus)
}, [filterStatus, prefsLoaded, statusKey])
if (prefsLoaded) localStorage.setItem(statusKey, setToCsv(filterStatuses))
}, [filterStatuses, prefsLoaded, statusKey])
function toggleKind(v: ClaudeJobKind) {
setFilterKinds((prev) => {
const next = new Set(prev)
if (next.has(v)) next.delete(v)
else next.add(v)
return next
})
}
function toggleStatus(v: ClaudeJobStatusApi) {
setFilterStatuses((prev) => {
const next = new Set(prev)
if (next.has(v)) next.delete(v)
else next.add(v)
return next
})
}
const filtered = jobs.filter((j) => {
if (filterKind !== 'all' && j.kind !== filterKind) return false
if (filterStatus !== 'all' && jobStatusToApi(j.status) !== filterStatus) return false
if (filterKinds.size > 0 && !filterKinds.has(j.kind)) return false
if (filterStatuses.size > 0 && !filterStatuses.has(jobStatusToApi(j.status))) return false
return true
})
const activeFilterCount = (filterKind !== 'all' ? 1 : 0) + (filterStatus !== 'all' ? 1 : 0)
const activeFilterCount = filterKinds.size + filterStatuses.size
return (
<div className="flex flex-col h-full">
<div className="flex items-center justify-between gap-2 px-2 py-1.5 border-b border-border bg-surface-container-low shrink-0">
<span className="text-xs font-medium text-muted-foreground px-1">{title}</span>
<div className="flex items-center gap-1.5">
{filterKind !== 'all' && (
<div className="flex items-center gap-1.5 flex-wrap justify-end">
{Array.from(filterKinds).map((k) => (
<button
key={`k-${k}`}
type="button"
onClick={() => setFilterKind('all')}
onClick={() => toggleKind(k)}
className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded border bg-muted text-muted-foreground hover:bg-surface-container font-mono"
aria-label="Wis kind-filter"
aria-label={`Wis filter ${KIND_LABELS[k]}`}
>
<span>{KIND_LABELS[filterKind]}</span>
<span>{KIND_LABELS[k]}</span>
<span aria-hidden>×</span>
</button>
)}
{filterStatus !== 'all' && (
))}
{Array.from(filterStatuses).map((s) => (
<button
key={`s-${s}`}
type="button"
onClick={() => setFilterStatus('all')}
onClick={() => toggleStatus(s)}
className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full border bg-muted text-muted-foreground hover:bg-surface-container"
aria-label="Wis status-filter"
aria-label={`Wis filter ${JOB_STATUS_LABELS[s]}`}
>
<span>{JOB_STATUS_LABELS[filterStatus as ClaudeJobStatusApi]}</span>
<span>{JOB_STATUS_LABELS[s]}</span>
<span aria-hidden>×</span>
</button>
)}
))}
<Popover>
<PopoverTrigger
render={
@ -164,17 +207,19 @@ export default function JobsColumn({
}
/>
<PopoverContent align="end" className="w-72 space-y-4">
<FilterPills
<MultiFilterPills
label="Soort"
options={KIND_OPTIONS}
value={filterKind}
onChange={setFilterKind}
selected={filterKinds}
onToggle={toggleKind}
onClear={() => setFilterKinds(new Set())}
/>
<FilterPills
<MultiFilterPills
label="Status"
options={statusOptions}
value={filterStatus}
onChange={setFilterStatus}
selected={filterStatuses}
onToggle={toggleStatus}
onClear={() => setFilterStatuses(new Set())}
/>
<div className="flex justify-end pt-1 border-t border-border">
<Button
@ -184,8 +229,8 @@ export default function JobsColumn({
className="h-7 text-xs"
disabled={activeFilterCount === 0}
onClick={() => {
setFilterKind('all')
setFilterStatus('all')
setFilterKinds(new Set())
setFilterStatuses(new Set())
}}
>
Wis filters