diff --git a/components/ideas/idea-list.tsx b/components/ideas/idea-list.tsx index 2b92ca2..d052fd1 100644 --- a/components/ideas/idea-list.tsx +++ b/components/ideas/idea-list.tsx @@ -70,6 +70,11 @@ const STATUS_FILTERS: { value: IdeaStatusApi; label: string }[] = [ { value: 'plan_failed', label: 'Plan mislukt' }, ] +const STATUS_SORT_ORDER: Record = { + draft: 0, grilling: 1, grilled: 2, planning: 3, + plan_ready: 4, planned: 5, grill_failed: 6, plan_failed: 7, +} + function SortHeader({ col, label, @@ -113,7 +118,7 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) { // Sort state const [sortKey, setSortKey] = useState('code') - const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc') + const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc') // Create-form state const [showCreate, setShowCreate] = useState(false) @@ -149,6 +154,26 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) { }) }, [ideas, search, productFilter, statusFilter, sortKey, sortDir]) + const sorted = useMemo(() => { + return [...filtered].sort((a, b) => { + let cmp = 0 + if (sortKey === 'code') { + cmp = (a.code ?? '').localeCompare(b.code ?? '', 'nl', { numeric: true }) + } else if (sortKey === 'title') { + cmp = a.title.localeCompare(b.title, 'nl') + } else if (sortKey === 'product') { + const aN = a.product?.name ?? '' + const bN = b.product?.name ?? '' + if (!aN && bN) return sortDir === 'asc' ? 1 : -1 + if (aN && !bN) return sortDir === 'asc' ? -1 : 1 + cmp = aN.localeCompare(bN, 'nl') + } else { + cmp = (STATUS_SORT_ORDER[a.status] ?? 99) - (STATUS_SORT_ORDER[b.status] ?? 99) + } + return sortDir === 'asc' ? cmp : -cmp + }) + }, [filtered, sortKey, sortDir]) + function handleSort(col: SortKey) { if (sortKey === col) { setSortDir((d) => (d === 'asc' ? 'desc' : 'asc')) @@ -311,7 +336,7 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) { )} {/* Tabel */} - {filtered.length === 0 ? ( + {sorted.length === 0 ? (

{ideas.length === 0 ? 'Nog geen ideeën — start hierboven met "Nieuw idee".' @@ -329,7 +354,7 @@ export function IdeaList({ ideas, products, isDemo }: IdeaListProps) { - {filtered.map((idea) => { + {sorted.map((idea) => { const badge = getIdeaStatusBadge(API_TO_DB[idea.status]) return (