Scrum4Me/components/shared/pbi-status-select.tsx
Madhura68 2381832c67 feat(ST-1109.7): add status select to PBI dialog
- New components/shared/pbi-status-select.tsx mirrors PrioritySelect:
  PBI_STATUS_LABELS (NL), PBI_STATUS_COLORS, PbiStatusSelect component
- Reuses existing --status-todo/blocked/done MD3 tokens
- PbiDialog: status state with sync-on-open; default 'ready' for create,
  pbi.status for edit; hidden input submits lowercase API value
- Priority + Status sit side-by-side in 2-col grid
- PbiDialogPbi.status is optional; pbi-list.tsx will populate in ST-1109.8

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-29 17:13:36 +02:00

41 lines
1.3 KiB
TypeScript

'use client'
import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
import { cn } from '@/lib/utils'
import type { PbiStatusApi } from '@/lib/task-status'
export const PBI_STATUS_LABELS: Record<PbiStatusApi, string> = {
ready: 'Klaar voor sprint',
blocked: 'Geblokkeerd',
done: 'Afgerond',
}
export const PBI_STATUS_COLORS: Record<PbiStatusApi, string> = {
ready: 'bg-status-todo/15 text-status-todo border-status-todo/30',
blocked: 'bg-status-blocked/15 text-status-blocked border-status-blocked/30',
done: 'bg-status-done/15 text-status-done border-status-done/30',
}
interface PbiStatusSelectProps {
value: PbiStatusApi
onChange: (value: PbiStatusApi) => void
className?: string
}
export function PbiStatusSelect({ value, onChange, className }: PbiStatusSelectProps) {
return (
<Select
value={value}
onValueChange={(v) => { if (v) onChange(v as PbiStatusApi) }}
>
<SelectTrigger className={cn('w-full', className)}>
{PBI_STATUS_LABELS[value] ?? value}
</SelectTrigger>
<SelectContent>
<SelectItem value="ready">Klaar voor sprint</SelectItem>
<SelectItem value="blocked">Geblokkeerd</SelectItem>
<SelectItem value="done">Afgerond</SelectItem>
</SelectContent>
</Select>
)
}