feat(ST-108/ST-208): replace inline forms with PBI and story dialogs
- PbiDialog: create/edit with priority select and optional description - StoryDialog: create/edit with priority, description, acceptance criteria, activity log, and delete - PrioritySelect: reusable controlled select component - Edit icons always visible on PBI rows and story blocks - Dialog backdrop uses 40% opacity blur Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
ce6ba59540
commit
4df83dcdbb
7 changed files with 538 additions and 343 deletions
|
|
@ -89,7 +89,7 @@ export default async function ProductBacklogPage({ params }: Props) {
|
|||
left={
|
||||
<PbiList
|
||||
productId={id}
|
||||
pbis={pbis.map((p: (typeof pbis)[number]) => ({ id: p.id, title: p.title, priority: p.priority }))}
|
||||
pbis={pbis.map((p: (typeof pbis)[number]) => ({ id: p.id, title: p.title, priority: p.priority, description: p.description }))}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
}
|
||||
|
|
|
|||
149
components/backlog/pbi-dialog.tsx
Normal file
149
components/backlog/pbi-dialog.tsx
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
DialogClose,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { PrioritySelect } from '@/components/shared/priority-select'
|
||||
import { createPbiAction, updatePbiAction } from '@/actions/pbis'
|
||||
|
||||
export interface PbiDialogPbi {
|
||||
id: string
|
||||
title: string
|
||||
priority: number
|
||||
description?: string | null
|
||||
}
|
||||
|
||||
type CreateState = { mode: 'create'; productId: string; defaultPriority?: number }
|
||||
type EditState = { mode: 'edit'; pbi: PbiDialogPbi; productId: string }
|
||||
export type PbiDialogState = CreateState | EditState
|
||||
|
||||
interface PbiDialogProps {
|
||||
state: PbiDialogState | null
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
function SubmitButton({ label }: { label: string }) {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? '…' : label}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function PbiDialog({ state, onClose }: PbiDialogProps) {
|
||||
const isEdit = state?.mode === 'edit'
|
||||
const pbi = isEdit ? state.pbi : null
|
||||
|
||||
const initialPriority = isEdit ? pbi!.priority : (state?.defaultPriority ?? 2)
|
||||
const [priority, setPriority] = useState<number>(initialPriority)
|
||||
|
||||
// Sync priority when dialog opens for a different PBI or switches create/edit mode
|
||||
useEffect(() => {
|
||||
if (state) {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setPriority(isEdit ? (state as EditState).pbi.priority : ((state as CreateState).defaultPriority ?? 2))
|
||||
}
|
||||
}, [state, isEdit])
|
||||
|
||||
const [createState, createAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createPbiAction(_prev, fd)
|
||||
if (result?.success) { toast.success('PBI aangemaakt'); onClose() }
|
||||
else if (typeof result?.error === 'string') toast.error(result.error)
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
const [updateState, updateAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await updatePbiAction(_prev, fd)
|
||||
if (result?.success) { toast.success('PBI opgeslagen'); onClose() }
|
||||
else if (typeof result?.error === 'string') toast.error(result.error)
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
const error = isEdit
|
||||
? (typeof updateState?.error === 'string' ? updateState.error : null)
|
||||
: (typeof createState?.error === 'string' ? createState.error : null)
|
||||
|
||||
const titleRef = useRef<HTMLInputElement>(null)
|
||||
useEffect(() => {
|
||||
if (state) {
|
||||
setTimeout(() => titleRef.current?.focus(), 50)
|
||||
}
|
||||
}, [state])
|
||||
|
||||
return (
|
||||
<Dialog open={!!state} onOpenChange={(open) => { if (!open) onClose() }}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEdit ? 'PBI bewerken' : 'Nieuw PBI'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form key={isEdit ? pbi!.id : 'create'} action={isEdit ? updateAction : createAction} className="grid gap-4">
|
||||
{isEdit && <input type="hidden" name="id" value={pbi!.id} />}
|
||||
{!isEdit && <input type="hidden" name="productId" value={(state as CreateState | null)?.productId ?? ''} />}
|
||||
<input type="hidden" name="priority" value={priority} />
|
||||
|
||||
<div className="grid gap-1.5">
|
||||
<label htmlFor="pbi-title" className="text-sm font-medium">Titel</label>
|
||||
<Input
|
||||
id="pbi-title"
|
||||
ref={titleRef}
|
||||
name="title"
|
||||
defaultValue={pbi?.title ?? ''}
|
||||
placeholder="PBI-titel…"
|
||||
required
|
||||
maxLength={200}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1.5">
|
||||
<label className="text-sm font-medium">Prioriteit</label>
|
||||
<PrioritySelect value={priority} onChange={setPriority} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1.5">
|
||||
<label htmlFor="pbi-description" className="text-sm font-medium">
|
||||
Beschrijving <span className="text-muted-foreground font-normal">(optioneel)</span>
|
||||
</label>
|
||||
<Textarea
|
||||
id="pbi-description"
|
||||
name="description"
|
||||
defaultValue={pbi?.description ?? ''}
|
||||
placeholder="Korte omschrijving van het PBI…"
|
||||
rows={3}
|
||||
maxLength={2000}
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-xs text-error">{error}</p>}
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button type="button" variant="outline" />}>
|
||||
Annuleren
|
||||
</DialogClose>
|
||||
<SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} />
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition, useEffect } from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import {
|
||||
DndContext,
|
||||
DragEndEvent,
|
||||
|
|
@ -24,15 +22,15 @@ import {
|
|||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { usePlannerStore } from '@/stores/planner-store'
|
||||
import { createPbiAction, deletePbiAction } from '@/actions/pbis'
|
||||
import { deletePbiAction } from '@/actions/pbis'
|
||||
import { reorderPbisAction, updatePbiPriorityAction } from '@/actions/stories'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { PbiDialog, type PbiDialogState } from './pbi-dialog'
|
||||
|
||||
const PRIORITY_LABELS: Record<number, string> = {
|
||||
1: 'Kritiek',
|
||||
|
|
@ -52,6 +50,7 @@ interface Pbi {
|
|||
id: string
|
||||
title: string
|
||||
priority: number
|
||||
description?: string | null
|
||||
}
|
||||
|
||||
interface PbiListProps {
|
||||
|
|
@ -66,12 +65,14 @@ function SortablePbiRow({
|
|||
isSelected,
|
||||
isDemo,
|
||||
onSelect,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: {
|
||||
pbi: Pbi
|
||||
isSelected: boolean
|
||||
isDemo: boolean
|
||||
onSelect: () => void
|
||||
onEdit: () => void
|
||||
onDelete: () => void
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
|
|
@ -107,69 +108,33 @@ function SortablePbiRow({
|
|||
)}
|
||||
<span className="text-sm truncate flex-1">{pbi.title}</span>
|
||||
{!isDemo && (
|
||||
<div className="flex items-center gap-1 ml-2 shrink-0">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onEdit() }}
|
||||
className="border border-border rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors"
|
||||
aria-label="Bewerk PBI"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onDelete() }}
|
||||
className="opacity-0 group-hover:opacity-100 ml-2 text-muted-foreground hover:text-error text-xs shrink-0"
|
||||
className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error text-xs"
|
||||
aria-label="Verwijder PBI"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Inline create form ---
|
||||
function CreatePbiForm({
|
||||
productId,
|
||||
priority,
|
||||
onDone,
|
||||
}: {
|
||||
productId: string
|
||||
priority: number
|
||||
onDone: () => void
|
||||
}) {
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createPbiAction(_prev, fd)
|
||||
if (result?.success) { toast.success('PBI aangemaakt'); onDone() }
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
const error = state?.error
|
||||
|
||||
return (
|
||||
<form action={formAction} className="flex gap-2 p-2">
|
||||
<input type="hidden" name="productId" value={productId} />
|
||||
<input type="hidden" name="priority" value={priority} />
|
||||
<Input name="title" autoFocus placeholder="PBI-titel…" className="h-7 text-sm" required />
|
||||
<CreateSubmitButton />
|
||||
<Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>
|
||||
×
|
||||
</Button>
|
||||
{typeof error === 'string' && (
|
||||
<p className="text-xs text-error self-center">{error}</p>
|
||||
)}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateSubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" size="sm" className="h-7" disabled={pending}>
|
||||
{pending ? '…' : 'Toevoegen'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Main component ---
|
||||
export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
||||
const { selectedPbiId, selectPbi } = useSelectionStore()
|
||||
const { pbiOrder, pbiPriority, initPbis, reorderPbis, rollbackPbis, updatePbiPriority } = usePlannerStore()
|
||||
const [filterPriority, setFilterPriority] = useState<number | null>(null)
|
||||
const [creatingForPriority, setCreatingForPriority] = useState<number | null>(null)
|
||||
const [dialogState, setDialogState] = useState<PbiDialogState | null>(null)
|
||||
const [activeDragId, setActiveDragId] = useState<string | null>(null)
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
|
|
@ -197,9 +162,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
return acc
|
||||
}, {} as Record<number, Pbi[]>)
|
||||
|
||||
const visiblePriorities = [1, 2, 3, 4].filter(
|
||||
p => grouped[p].length > 0 || creatingForPriority === p
|
||||
)
|
||||
const visiblePriorities = [1, 2, 3, 4].filter(p => grouped[p].length > 0)
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
|
|
@ -292,7 +255,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
<Button
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setCreatingForPriority(creatingForPriority ? null : 2)}
|
||||
onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}
|
||||
>
|
||||
+ PBI
|
||||
</Button>
|
||||
|
|
@ -302,17 +265,18 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{pbis.length === 0 && creatingForPriority === null ? (
|
||||
{pbis.length === 0 ? (
|
||||
<div className="p-8 text-center text-muted-foreground text-sm space-y-3">
|
||||
<p>Nog geen PBI's aangemaakt.</p>
|
||||
{!isDemo && (
|
||||
<Button size="sm" variant="outline" onClick={() => setCreatingForPriority(2)}>
|
||||
<Button size="sm" variant="outline" onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}>
|
||||
Maak je eerste PBI aan
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
id="pbi-list"
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
|
|
@ -328,7 +292,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
<div className="flex-1 h-px bg-border" />
|
||||
{!isDemo && (
|
||||
<button
|
||||
onClick={() => setCreatingForPriority(priority)}
|
||||
onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: priority })}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
+
|
||||
|
|
@ -347,36 +311,14 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
isSelected={selectedPbiId === pbi.id}
|
||||
isDemo={isDemo}
|
||||
onSelect={() => selectPbi(pbi.id)}
|
||||
onEdit={() => setDialogState({ mode: 'edit', productId, pbi })}
|
||||
onDelete={() => handleDelete(pbi.id)}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
|
||||
{creatingForPriority === priority && (
|
||||
<CreatePbiForm
|
||||
productId={productId}
|
||||
priority={priority}
|
||||
onDone={() => setCreatingForPriority(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{creatingForPriority !== null && !visiblePriorities.includes(creatingForPriority) && (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 px-4 py-1.5">
|
||||
<span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[creatingForPriority])}>
|
||||
{PRIORITY_LABELS[creatingForPriority]}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
</div>
|
||||
<CreatePbiForm
|
||||
productId={productId}
|
||||
priority={creatingForPriority}
|
||||
onDone={() => setCreatingForPriority(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DragOverlay>
|
||||
|
|
@ -389,6 +331,11 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
|||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PbiDialog
|
||||
state={dialogState}
|
||||
onClose={() => setDialogState(null)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
282
components/backlog/story-dialog.tsx
Normal file
282
components/backlog/story-dialog.tsx
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState, useTransition } from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogClose,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { PrioritySelect, PRIORITY_LABELS, PRIORITY_COLORS } from '@/components/shared/priority-select'
|
||||
import { StoryLog } from '@/components/shared/story-log'
|
||||
import { createStoryAction, updateStoryAction, deleteStoryAction, getStoryLogsAction } from '@/actions/stories'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { Story } from './story-panel'
|
||||
|
||||
export type StoryDialogState =
|
||||
| { mode: 'create'; pbiId: string; productId: string; defaultPriority?: number }
|
||||
| { mode: 'edit'; story: Story; productId: string }
|
||||
|
||||
interface StoryDialogProps {
|
||||
state: StoryDialogState | null
|
||||
onClose: () => void
|
||||
isDemo?: boolean
|
||||
}
|
||||
|
||||
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',
|
||||
}
|
||||
|
||||
function SubmitButton({ label }: { label: string }) {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? '…' : label}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps) {
|
||||
const isEdit = state?.mode === 'edit'
|
||||
const story = isEdit ? (state as Extract<StoryDialogState, { mode: 'edit' }>).story : null
|
||||
const createState_ = isEdit ? null : (state as Extract<StoryDialogState, { mode: 'create' }> | null)
|
||||
|
||||
const [priority, setPriority] = useState(story?.priority ?? createState_?.defaultPriority ?? 2)
|
||||
const [confirmDelete, setConfirmDelete] = useState(false)
|
||||
const [isDeleting, startDeleteTransition] = useTransition()
|
||||
const [logs, setLogs] = useState<Awaited<ReturnType<typeof getStoryLogsAction>> | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!state) return
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setConfirmDelete(false)
|
||||
if (state.mode === 'edit') {
|
||||
|
||||
setPriority(state.story.priority)
|
||||
|
||||
setLogs(null)
|
||||
getStoryLogsAction(state.story.id).then(setLogs)
|
||||
} else {
|
||||
|
||||
setPriority(state.defaultPriority ?? 2)
|
||||
}
|
||||
}, [state])
|
||||
|
||||
const [createResult, createAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createStoryAction(_prev, fd)
|
||||
if (result?.success) { toast.success('Story aangemaakt'); onClose() }
|
||||
else if (typeof result?.error === 'string') toast.error(result.error)
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
const [updateResult, updateAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await updateStoryAction(_prev, fd)
|
||||
if (result?.success) { toast.success('Story opgeslagen'); onClose() }
|
||||
else if (typeof result?.error === 'string') toast.error(result.error)
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
const fieldError = (field: string) => {
|
||||
const err = updateResult?.error
|
||||
if (!err || typeof err === 'string') return undefined
|
||||
return (err as Record<string, string[]>)[field]?.[0]
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
if (!story) return
|
||||
startDeleteTransition(async () => {
|
||||
const result = await deleteStoryAction(story.id)
|
||||
if (result && 'error' in result) toast.error(result.error ?? 'Verwijderen mislukt')
|
||||
else toast.success('Story verwijderd')
|
||||
onClose()
|
||||
})
|
||||
}
|
||||
|
||||
const titleRef = useRef<HTMLInputElement>(null)
|
||||
useEffect(() => {
|
||||
if (state) setTimeout(() => titleRef.current?.focus(), 50)
|
||||
}, [state])
|
||||
|
||||
const showForm = !isDemo || !isEdit
|
||||
|
||||
return (
|
||||
<Dialog open={!!state} onOpenChange={(open) => { if (!open) onClose() }}>
|
||||
<DialogContent className="sm:max-w-lg flex flex-col gap-0 p-0 max-h-[90vh] overflow-hidden">
|
||||
<DialogHeader className="px-5 pt-5 pb-4 border-b border-border shrink-0 pr-14">
|
||||
<DialogTitle>{isEdit ? story!.title : 'Nieuwe story'}</DialogTitle>
|
||||
{isEdit && (
|
||||
<div className="flex gap-2 mt-1">
|
||||
<Badge className={cn('text-xs border', PRIORITY_COLORS[priority])}>
|
||||
{PRIORITY_LABELS[priority]}
|
||||
</Badge>
|
||||
<Badge className={cn('text-xs border', STATUS_COLORS[story!.status])}>
|
||||
{STATUS_LABELS[story!.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</DialogHeader>
|
||||
|
||||
<form
|
||||
key={isEdit ? story!.id : 'create'}
|
||||
action={isEdit ? updateAction : createAction}
|
||||
className="flex flex-col min-h-0 flex-1"
|
||||
>
|
||||
{isEdit && <input type="hidden" name="id" value={story!.id} />}
|
||||
{!isEdit && (
|
||||
<>
|
||||
<input type="hidden" name="pbiId" value={createState_?.pbiId ?? ''} />
|
||||
<input type="hidden" name="productId" value={createState_?.productId ?? ''} />
|
||||
</>
|
||||
)}
|
||||
<input type="hidden" name="priority" value={priority} />
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{showForm ? (
|
||||
<div className="p-5 space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Titel</label>
|
||||
<Input
|
||||
ref={titleRef}
|
||||
name="title"
|
||||
defaultValue={story?.title ?? ''}
|
||||
required
|
||||
maxLength={200}
|
||||
className={fieldError('title') ? 'border-error' : ''}
|
||||
/>
|
||||
{fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Prioriteit</label>
|
||||
<PrioritySelect value={priority} onChange={setPriority} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
Omschrijving <span className="normal-case font-normal">(optioneel)</span>
|
||||
</label>
|
||||
<Textarea
|
||||
name="description"
|
||||
rows={3}
|
||||
defaultValue={story?.description ?? ''}
|
||||
placeholder="Als… wil ik… zodat…"
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
Acceptatiecriteria <span className="normal-case font-normal">(optioneel)</span>
|
||||
</label>
|
||||
<Textarea
|
||||
name="acceptance_criteria"
|
||||
rows={3}
|
||||
defaultValue={story?.acceptance_criteria ?? ''}
|
||||
placeholder="- Gegeven… Als… Dan…"
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{typeof (isEdit ? updateResult?.error : createResult?.error) === 'string' && (
|
||||
<p className="text-xs text-error">
|
||||
{String(isEdit ? updateResult?.error : createResult?.error)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-5 space-y-4">
|
||||
{story?.description && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
|
||||
<p className="text-sm">{story.description}</p>
|
||||
</div>
|
||||
)}
|
||||
{story?.acceptance_criteria && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Acceptatiecriteria</p>
|
||||
<p className="text-sm whitespace-pre-line">{story.acceptance_criteria}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isEdit && (
|
||||
<div className="px-5 py-4 border-t border-border">
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Activiteitenlog</p>
|
||||
{logs && 'logs' in logs && logs.logs ? (
|
||||
<StoryLog
|
||||
logs={logs.logs.map(l => ({
|
||||
...l,
|
||||
status: l.status ?? null,
|
||||
commit_hash: l.commit_hash ?? null,
|
||||
commit_message: l.commit_message ?? null,
|
||||
}))}
|
||||
repoUrl={logs.repoUrl}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">Laden…</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEdit && !isDemo && (
|
||||
<div className="px-5 py-3 border-t border-border shrink-0">
|
||||
{confirmDelete ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground flex-1">
|
||||
Weet je het zeker? Taken worden ook verwijderd.
|
||||
</span>
|
||||
<Button type="button" variant="destructive" size="sm" disabled={isDeleting} onClick={handleDelete}>
|
||||
{isDeleting ? 'Bezig…' : 'Verwijderen'}
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="sm" onClick={() => setConfirmDelete(false)}>
|
||||
Annuleren
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-error hover:bg-error/10"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
>
|
||||
Story verwijderen
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0 rounded-b-xl bg-muted/50">
|
||||
<DialogClose render={<Button type="button" variant="outline" />}>
|
||||
{isDemo ? 'Sluiten' : 'Annuleren'}
|
||||
</DialogClose>
|
||||
{!isDemo && <SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} />}
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition, useEffect, useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { useState, useTransition, useEffect } from 'react'
|
||||
import {
|
||||
DndContext,
|
||||
DragEndEvent,
|
||||
|
|
@ -23,16 +22,13 @@ import {
|
|||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { usePlannerStore } from '@/stores/planner-store'
|
||||
import { createStoryAction, updateStoryAction, deleteStoryAction, reorderStoriesAction, getStoryLogsAction } from '@/actions/stories'
|
||||
import { StoryLog } from '@/components/shared/story-log'
|
||||
import { reorderStoriesAction } from '@/actions/stories'
|
||||
import { StoryDialog, type StoryDialogState } from './story-dialog'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
|
||||
|
|
@ -95,9 +91,17 @@ function SortableStoryBlock({
|
|||
{...listeners}
|
||||
onClick={onClick}
|
||||
title={story.title}
|
||||
className="w-28 shrink-0 bg-surface-container-low border border-border rounded-lg p-2 cursor-pointer hover:border-primary transition-colors space-y-1.5 select-none"
|
||||
className="relative w-28 shrink-0 bg-surface-container-low border border-border rounded-lg p-2 cursor-pointer hover:border-primary transition-colors space-y-1.5 select-none"
|
||||
>
|
||||
<p className="text-xs font-medium text-foreground line-clamp-3 min-h-[3rem]">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
className="absolute top-1.5 right-2 border border-border rounded px-1 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors leading-none"
|
||||
aria-label="Bewerk story"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<p className="text-xs font-medium text-foreground line-clamp-3 min-h-[3rem] pr-4">
|
||||
{story.title}
|
||||
</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
|
|
@ -112,213 +116,13 @@ function SortableStoryBlock({
|
|||
)
|
||||
}
|
||||
|
||||
// --- Story detail slide-over ---
|
||||
function StoryDetailSheet({
|
||||
story,
|
||||
productId: _productId,
|
||||
pbiId: _pbiId,
|
||||
onClose,
|
||||
isDemo,
|
||||
}: {
|
||||
story: Story
|
||||
productId: string
|
||||
pbiId: string
|
||||
onClose: () => void
|
||||
isDemo: boolean
|
||||
}) {
|
||||
const [confirmDelete, setConfirmDelete] = useState(false)
|
||||
const [isDeleting, startDeleteTransition] = useTransition()
|
||||
const [logs, setLogs] = useState<Awaited<ReturnType<typeof getStoryLogsAction>> | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
getStoryLogsAction(story.id).then(setLogs)
|
||||
}, [story.id])
|
||||
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await updateStoryAction(_prev, fd)
|
||||
if (result?.success) { toast.success('Story opgeslagen'); onClose() }
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
function handleDelete() {
|
||||
startDeleteTransition(async () => {
|
||||
const result = await deleteStoryAction(story.id)
|
||||
if (result && 'error' in result) toast.error(result.error ?? 'Verwijderen mislukt')
|
||||
else toast.success('Story verwijderd')
|
||||
onClose()
|
||||
})
|
||||
}
|
||||
|
||||
const fieldError = (field: string) => {
|
||||
const err = state?.error
|
||||
if (!err || typeof err === 'string') return undefined
|
||||
return (err as Record<string, string[]>)[field]?.[0]
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet open onOpenChange={(open) => { if (!open) onClose() }}>
|
||||
<SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
|
||||
<SheetHeader className="px-5 pt-5 pb-4 border-b border-border">
|
||||
<SheetTitle>{story.title}</SheetTitle>
|
||||
<div className="flex gap-2 mt-1">
|
||||
<Badge className={cn('text-xs border', PRIORITY_COLORS[story.priority])}>
|
||||
{PRIORITY_LABELS[story.priority]}
|
||||
</Badge>
|
||||
<Badge className={cn('text-xs border', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{!isDemo ? (
|
||||
<form action={formAction} className="p-5 space-y-4">
|
||||
<input type="hidden" name="id" value={story.id} />
|
||||
<input type="hidden" name="priority" value={story.priority} />
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Titel</label>
|
||||
<Input name="title" defaultValue={story.title} required className={fieldError('title') ? 'border-error' : ''} />
|
||||
{fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Omschrijving</label>
|
||||
<Textarea name="description" rows={4} defaultValue={story.description ?? ''} placeholder="Als… wil ik… zodat…" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Acceptatiecriteria</label>
|
||||
<Textarea name="acceptance_criteria" rows={4} defaultValue={story.acceptance_criteria ?? ''} placeholder="- Gegeven… Als… Dan…" />
|
||||
</div>
|
||||
|
||||
{typeof state?.error === 'string' && (
|
||||
<p className="text-xs text-error">{state.error}</p>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<SaveButton />
|
||||
<Button type="button" variant="ghost" onClick={onClose}>Annuleren</Button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<div className="p-5 space-y-4">
|
||||
{story.description && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
|
||||
<p className="text-sm">{story.description}</p>
|
||||
</div>
|
||||
)}
|
||||
{story.acceptance_criteria && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Acceptatiecriteria</p>
|
||||
<p className="text-sm whitespace-pre-line">{story.acceptance_criteria}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Activity log */}
|
||||
<div className="px-5 py-4 border-t border-border">
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Activiteitenlog</p>
|
||||
{logs && 'logs' in logs && logs.logs ? (
|
||||
<StoryLog logs={logs.logs.map(l => ({ ...l, status: l.status ?? null, commit_hash: l.commit_hash ?? null, commit_message: l.commit_message ?? null }))} repoUrl={logs.repoUrl} />
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">Laden…</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isDemo && (
|
||||
<div className="border-t border-border p-4">
|
||||
{confirmDelete ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground flex-1">Weet je het zeker? Taken worden ook verwijderd.</span>
|
||||
<Button variant="destructive" size="sm" disabled={isDeleting} onClick={handleDelete}>
|
||||
{isDeleting ? 'Bezig…' : 'Verwijderen'}
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => setConfirmDelete(false)}>Annuleren</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-error hover:bg-error/10"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
>
|
||||
Story verwijderen
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
function SaveButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? 'Opslaan…' : 'Opslaan'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Inline create form ---
|
||||
function CreateStoryForm({
|
||||
productId,
|
||||
pbiId,
|
||||
priority,
|
||||
onDone,
|
||||
}: {
|
||||
productId: string
|
||||
pbiId: string
|
||||
priority: number
|
||||
onDone: () => void
|
||||
}) {
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createStoryAction(_prev, fd)
|
||||
if (result?.success) { toast.success('Story aangemaakt'); onDone() }
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
return (
|
||||
<form action={formAction} className="flex gap-2 items-center mt-2">
|
||||
<input type="hidden" name="pbiId" value={pbiId} />
|
||||
<input type="hidden" name="productId" value={productId} />
|
||||
<input type="hidden" name="priority" value={priority} />
|
||||
<Input name="title" autoFocus placeholder="Story titel…" className="h-7 text-sm flex-1" required />
|
||||
<CreateStorySubmitButton />
|
||||
<Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>×</Button>
|
||||
{typeof state?.error === 'string' && <p className="text-xs text-error">{state.error}</p>}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateStorySubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" size="sm" className="h-7" disabled={pending}>
|
||||
{pending ? '…' : 'Toevoegen'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Main component ---
|
||||
export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps) {
|
||||
const { selectedPbiId } = useSelectionStore()
|
||||
const { storyOrder, initStories, reorderStories, rollbackStories } = usePlannerStore()
|
||||
const [filterStatus, setFilterStatus] = useState<string | null>(null)
|
||||
const [filterPriority, setFilterPriority] = useState<number | null>(null)
|
||||
const [creatingPriority, setCreatingPriority] = useState<number | null>(null)
|
||||
const [openStory, setOpenStory] = useState<Story | null>(null)
|
||||
const [storyDialogState, setStoryDialogState] = useState<StoryDialogState | null>(null)
|
||||
const [activeDragId, setActiveDragId] = useState<string | null>(null)
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
|
|
@ -346,9 +150,7 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
return acc
|
||||
}, {} as Record<number, Story[]>)
|
||||
|
||||
const visiblePriorities = [1, 2, 3, 4].filter(
|
||||
p => grouped[p].length > 0 || creatingPriority === p
|
||||
)
|
||||
const visiblePriorities = [1, 2, 3, 4].filter(p => grouped[p].length > 0)
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
|
|
@ -422,7 +224,7 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
<Button
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setCreatingPriority(creatingPriority ? null : 2)}
|
||||
onClick={() => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}
|
||||
>
|
||||
+ Story
|
||||
</Button>
|
||||
|
|
@ -436,17 +238,18 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
<p className="text-sm text-muted-foreground text-center mt-8">
|
||||
Selecteer een PBI om de stories te bekijken.
|
||||
</p>
|
||||
) : rawStories.length === 0 && creatingPriority === null ? (
|
||||
) : rawStories.length === 0 ? (
|
||||
<div className="text-center mt-8 space-y-3">
|
||||
<p className="text-sm text-muted-foreground">Nog geen stories voor dit PBI.</p>
|
||||
{!isDemo && (
|
||||
<Button size="sm" variant="outline" onClick={() => setCreatingPriority(2)}>
|
||||
{!isDemo && selectedPbiId && (
|
||||
<Button size="sm" variant="outline" onClick={() => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}>
|
||||
Maak je eerste story aan
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
id="story-panel"
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
|
|
@ -460,9 +263,9 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
{PRIORITY_LABELS[priority]}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
{!isDemo && (
|
||||
{!isDemo && selectedPbiId && (
|
||||
<button
|
||||
onClick={() => setCreatingPriority(priority)}
|
||||
onClick={() => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: priority })}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
+
|
||||
|
|
@ -479,39 +282,14 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
<SortableStoryBlock
|
||||
key={story.id}
|
||||
story={story}
|
||||
onClick={() => setOpenStory(story)}
|
||||
onClick={() => setStoryDialogState({ mode: 'edit', story, productId })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
|
||||
{creatingPriority === priority && selectedPbiId && (
|
||||
<CreateStoryForm
|
||||
productId={productId}
|
||||
pbiId={selectedPbiId}
|
||||
priority={priority}
|
||||
onDone={() => setCreatingPriority(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{creatingPriority !== null && !visiblePriorities.includes(creatingPriority) && selectedPbiId && (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[creatingPriority])}>
|
||||
{PRIORITY_LABELS[creatingPriority]}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
</div>
|
||||
<CreateStoryForm
|
||||
productId={productId}
|
||||
pbiId={selectedPbiId}
|
||||
priority={creatingPriority}
|
||||
onDone={() => setCreatingPriority(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DragOverlay>
|
||||
|
|
@ -525,15 +303,11 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
)}
|
||||
</div>
|
||||
|
||||
{openStory && selectedPbiId && (
|
||||
<StoryDetailSheet
|
||||
story={openStory}
|
||||
productId={productId}
|
||||
pbiId={selectedPbiId}
|
||||
<StoryDialog
|
||||
state={storyDialogState}
|
||||
onClose={() => setStoryDialogState(null)}
|
||||
isDemo={isDemo}
|
||||
onClose={() => setOpenStory(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
43
components/shared/priority-select.tsx
Normal file
43
components/shared/priority-select.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
'use client'
|
||||
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export const PRIORITY_LABELS: Record<number, string> = {
|
||||
1: 'Kritiek',
|
||||
2: 'Hoog',
|
||||
3: 'Gemiddeld',
|
||||
4: 'Laag',
|
||||
}
|
||||
|
||||
export 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',
|
||||
}
|
||||
|
||||
interface PrioritySelectProps {
|
||||
value: number
|
||||
onChange: (value: number) => void
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function PrioritySelect({ value, onChange, className }: PrioritySelectProps) {
|
||||
return (
|
||||
<Select
|
||||
value={String(value)}
|
||||
onValueChange={(v) => { if (v) onChange(parseInt(v)) }}
|
||||
>
|
||||
<SelectTrigger className={cn('w-full', className)}>
|
||||
{PRIORITY_LABELS[value] ?? String(value)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">Kritiek</SelectItem>
|
||||
<SelectItem value="2">Hoog</SelectItem>
|
||||
<SelectItem value="3">Gemiddeld</SelectItem>
|
||||
<SelectItem value="4">Laag</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@ function DialogOverlay({
|
|||
<DialogPrimitive.Backdrop
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
"fixed inset-0 isolate z-50 bg-black/40 backdrop-blur-sm duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue