Madhura68
59e214fc12
Builds the full TaskDialog on top of the existing @base-ui/react Dialog primitive. Covers create mode, edit mode (status field + created_at metadata + delete), dirty-check AlertDialog, delete confirm AlertDialog, Cmd+Enter submit, and per-field char counters. Uses react-hook-form + zodResolver against the shared taskSchema. Priority and status are extracted to PrioritySegmented and StatusSelect sub-components using MD3 tokens throughout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import type { TaskStatus } from '@prisma/client'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
} from '@/components/ui/select'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const STATUS_CONFIG: Record<TaskStatus, { label: string; dot: string }> = {
|
|
TO_DO: { label: 'To Do', dot: 'bg-muted-foreground' },
|
|
IN_PROGRESS: { label: 'Bezig', dot: 'bg-status-in-progress' },
|
|
REVIEW: { label: 'Review', dot: 'bg-status-review' },
|
|
DONE: { label: 'Klaar', dot: 'bg-status-done' },
|
|
}
|
|
|
|
const STATUS_ORDER: TaskStatus[] = ['TO_DO', 'IN_PROGRESS', 'REVIEW', 'DONE']
|
|
|
|
function StatusIndicator({ status }: { status: TaskStatus }) {
|
|
return (
|
|
<span className="flex items-center gap-2">
|
|
<span className={cn('size-2.5 rounded-full shrink-0', STATUS_CONFIG[status].dot)} />
|
|
{STATUS_CONFIG[status].label}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
interface StatusSelectProps {
|
|
value?: TaskStatus
|
|
onChange: (value: TaskStatus) => void
|
|
disabled?: boolean
|
|
}
|
|
|
|
export function StatusSelect({ value = 'TO_DO', onChange, disabled }: StatusSelectProps) {
|
|
return (
|
|
<Select
|
|
value={value}
|
|
onValueChange={(v) => onChange(v as TaskStatus)}
|
|
disabled={disabled}
|
|
>
|
|
<SelectTrigger className="w-48">
|
|
<StatusIndicator status={value} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{STATUS_ORDER.map(status => (
|
|
<SelectItem key={status} value={status}>
|
|
<StatusIndicator status={status} />
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)
|
|
}
|