454 lines
15 KiB
TypeScript
454 lines
15 KiB
TypeScript
'use client'
|
|
|
|
// IdeaList — top-level lijstpagina voor /ideas.
|
|
// - Strikt user_id-only data (server haalt al; client filtert binnen die set).
|
|
// - Filters: zoeken op titel, product-dropdown, status-multiselect.
|
|
// - Klik op rij navigeert naar /ideas/[id]. Acties (Grill / Make Plan /
|
|
// Materialiseer) staan in components/ideas/idea-row-actions.tsx (T-508).
|
|
// - DemoTooltip rondom muteer-acties; bulk-archive blijft achter feature-flag
|
|
// in T-508 en latere stories.
|
|
|
|
import { useMemo, useState, useTransition } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Plus, ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
|
import { getIdeaStatusBadge } from '@/lib/idea-status-colors'
|
|
import type { IdeaStatusApi } from '@/lib/idea-status'
|
|
import type { IdeaDto } from '@/lib/idea-dto'
|
|
import { debugProps } from '@/lib/debug'
|
|
import { createIdeaAction, archiveIdeaAction } from '@/actions/ideas'
|
|
import { IdeaRowActions } from '@/components/ideas/idea-row-actions'
|
|
|
|
// Reverse mapping voor het renderen van de status-badge — DTO bevat lowercase
|
|
// API-strings, het badge-helper verwacht DB-enum.
|
|
const API_TO_DB: Record<IdeaStatusApi, Parameters<typeof getIdeaStatusBadge>[0]> = {
|
|
draft: 'DRAFT',
|
|
grilling: 'GRILLING',
|
|
grill_failed: 'GRILL_FAILED',
|
|
grilled: 'GRILLED',
|
|
planning: 'PLANNING',
|
|
plan_failed: 'PLAN_FAILED',
|
|
plan_ready: 'PLAN_READY',
|
|
planned: 'PLANNED',
|
|
}
|
|
|
|
interface ProductOption {
|
|
id: string
|
|
name: string
|
|
repo_url: string | null
|
|
}
|
|
|
|
type SortKey = 'code' | 'title' | 'product' | 'status'
|
|
|
|
interface IdeaListProps {
|
|
ideas: IdeaDto[]
|
|
products: ProductOption[]
|
|
isDemo: boolean
|
|
}
|
|
|
|
const STATUS_FILTERS: { value: IdeaStatusApi; label: string }[] = [
|
|
{ value: 'draft', label: 'Concept' },
|
|
{ value: 'grilling', label: 'Grillen' },
|
|
{ value: 'grilled', label: 'Gegrilld' },
|
|
{ value: 'planning', label: 'Plannen' },
|
|
{ value: 'plan_ready', label: 'Plan klaar' },
|
|
{ value: 'planned', label: 'Gepland' },
|
|
{ value: 'grill_failed', label: 'Grill mislukt' },
|
|
{ value: 'plan_failed', label: 'Plan mislukt' },
|
|
]
|
|
|
|
const STATUS_SORT_ORDER: Record<IdeaStatusApi, number> = {
|
|
draft: 0, grilling: 1, grilled: 2, planning: 3,
|
|
plan_ready: 4, planned: 5, grill_failed: 6, plan_failed: 7,
|
|
}
|
|
|
|
function SortHeader({
|
|
col,
|
|
label,
|
|
sortKey,
|
|
sortDir,
|
|
onSort,
|
|
}: {
|
|
col: SortKey
|
|
label: string
|
|
sortKey: SortKey
|
|
sortDir: 'asc' | 'desc'
|
|
onSort: (col: SortKey) => void
|
|
}) {
|
|
const active = sortKey === col
|
|
const Icon = active
|
|
? sortDir === 'asc' ? ArrowUp : ArrowDown
|
|
: ArrowUpDown
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onSort(col)}
|
|
className={cn(
|
|
'flex items-center gap-1 text-xs font-medium hover:text-foreground transition-colors',
|
|
active ? 'text-foreground' : 'text-muted-foreground'
|
|
)}
|
|
>
|
|
{label}
|
|
<Icon className="size-3" />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function IdeaList({ ideas, products, isDemo }: IdeaListProps) {
|
|
const router = useRouter()
|
|
const [isPending, startTransition] = useTransition()
|
|
|
|
// Filter state
|
|
const [search, setSearch] = useState('')
|
|
const [productFilter, setProductFilter] = useState<string>('all')
|
|
const [statusFilter, setStatusFilter] = useState<Set<IdeaStatusApi>>(new Set())
|
|
|
|
// Sort state
|
|
const [sortKey, setSortKey] = useState<SortKey>('code')
|
|
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
|
|
|
|
// Create-form state
|
|
const [showCreate, setShowCreate] = useState(false)
|
|
const [newTitle, setNewTitle] = useState('')
|
|
const [newDescription, setNewDescription] = useState('')
|
|
const [newProductId, setNewProductId] = useState<string>('')
|
|
|
|
// Quick-idea form state
|
|
const [showQuick, setShowQuick] = useState(false)
|
|
const [quickTitle, setQuickTitle] = useState('')
|
|
const [quickDescription, setQuickDescription] = useState('')
|
|
|
|
const filtered = useMemo(() => {
|
|
const q = search.trim().toLowerCase()
|
|
const result = ideas.filter((idea) => {
|
|
if (q && !idea.title.toLowerCase().includes(q)) return false
|
|
if (productFilter !== 'all') {
|
|
if (productFilter === 'none') {
|
|
if (idea.product_id !== null) return false
|
|
} else {
|
|
const matchesPrimary = idea.product_id === productFilter
|
|
const matchesSecondary =
|
|
idea.secondary_products?.some((sp) => sp.product_id === productFilter) ?? false
|
|
if (!matchesPrimary && !matchesSecondary) return false
|
|
}
|
|
}
|
|
if (statusFilter.size > 0 && !statusFilter.has(idea.status)) return false
|
|
return true
|
|
})
|
|
const dir = sortDir === 'asc' ? 1 : -1
|
|
return [...result].sort((a, b) => {
|
|
switch (sortKey) {
|
|
case 'code': return dir * a.code.localeCompare(b.code)
|
|
case 'title': return dir * a.title.localeCompare(b.title)
|
|
case 'product': return dir * (a.product?.name ?? '').localeCompare(b.product?.name ?? '')
|
|
case 'status': return dir * a.status.localeCompare(b.status)
|
|
}
|
|
})
|
|
}, [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'))
|
|
} else {
|
|
setSortKey(col)
|
|
setSortDir('asc')
|
|
}
|
|
}
|
|
|
|
function toggleStatus(s: IdeaStatusApi) {
|
|
setStatusFilter((prev) => {
|
|
const next = new Set(prev)
|
|
if (next.has(s)) next.delete(s)
|
|
else next.add(s)
|
|
return next
|
|
})
|
|
}
|
|
|
|
function handleCreate() {
|
|
if (isDemo) return
|
|
const title = newTitle.trim()
|
|
if (!title) {
|
|
toast.error('Titel is verplicht')
|
|
return
|
|
}
|
|
startTransition(async () => {
|
|
const r = await createIdeaAction({
|
|
title,
|
|
description: newDescription.trim() || null,
|
|
product_id: newProductId || null,
|
|
})
|
|
if ('error' in r) {
|
|
toast.error(r.error)
|
|
return
|
|
}
|
|
toast.success(`Idee aangemaakt (${r.data?.code})`)
|
|
setNewTitle('')
|
|
setNewDescription('')
|
|
setNewProductId('')
|
|
setShowCreate(false)
|
|
router.refresh()
|
|
})
|
|
}
|
|
|
|
function handleQuickCreate() {
|
|
if (isDemo) return
|
|
const title = quickTitle.trim()
|
|
if (!title) {
|
|
toast.error('Titel is verplicht')
|
|
return
|
|
}
|
|
startTransition(async () => {
|
|
const r = await createIdeaAction({ title, description: quickDescription.trim() || null, product_id: null })
|
|
if ('error' in r) {
|
|
toast.error(r.error)
|
|
return
|
|
}
|
|
toast.success(`Idee aangemaakt (${r.data?.code})`)
|
|
setQuickTitle('')
|
|
setQuickDescription('')
|
|
setShowQuick(false)
|
|
router.refresh()
|
|
})
|
|
}
|
|
|
|
function handleArchive(id: string) {
|
|
if (isDemo) return
|
|
startTransition(async () => {
|
|
const r = await archiveIdeaAction(id)
|
|
if ('error' in r) {
|
|
toast.error(r.error)
|
|
return
|
|
}
|
|
toast.success('Idee gearchiveerd')
|
|
router.refresh()
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4" {...debugProps('idea-list', 'IdeaList', 'components/ideas/idea-list.tsx')}>
|
|
{/* Top-bar: search + nieuw-knop */}
|
|
<div className="flex flex-wrap items-center gap-3" data-debug-id="idea-list__toolbar">
|
|
<Input
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder="Zoek op titel..."
|
|
className="max-w-sm"
|
|
/>
|
|
<select
|
|
value={productFilter}
|
|
onChange={(e) => setProductFilter(e.target.value)}
|
|
className="h-9 rounded-md border border-input bg-background px-3 text-sm"
|
|
>
|
|
<option value="all">Alle producten</option>
|
|
<option value="none">Geen product</option>
|
|
{products.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<DemoTooltip show={isDemo}>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setShowQuick((v) => !v)}
|
|
disabled={isDemo || isPending}
|
|
>
|
|
<Plus className="size-4 mr-1" />
|
|
Snel idee
|
|
</Button>
|
|
</DemoTooltip>
|
|
<DemoTooltip show={isDemo}>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => setShowCreate((v) => !v)}
|
|
disabled={isDemo || isPending}
|
|
>
|
|
<Plus className="size-4 mr-1" />
|
|
Nieuw idee
|
|
</Button>
|
|
</DemoTooltip>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status-chips als multi-select filter */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{STATUS_FILTERS.map((s) => {
|
|
const active = statusFilter.has(s.value)
|
|
return (
|
|
<button
|
|
key={s.value}
|
|
type="button"
|
|
onClick={() => toggleStatus(s.value)}
|
|
className={`rounded-full border px-2.5 py-0.5 text-xs transition-colors ${
|
|
active
|
|
? 'bg-primary text-on-primary border-primary'
|
|
: 'bg-background text-muted-foreground border-input hover:bg-muted'
|
|
}`}
|
|
>
|
|
{s.label}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Snel idee form — geen product-dropdown */}
|
|
{showQuick && (
|
|
<div className="rounded-md border border-input bg-surface-container p-4 space-y-3">
|
|
<Input
|
|
placeholder="Titel *"
|
|
value={quickTitle}
|
|
onChange={(e) => setQuickTitle(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleQuickCreate()}
|
|
/>
|
|
<Textarea
|
|
placeholder="Beschrijving (optioneel)"
|
|
value={quickDescription}
|
|
onChange={(e) => setQuickDescription(e.target.value)}
|
|
rows={2}
|
|
/>
|
|
<div className="flex gap-2 justify-end">
|
|
<Button size="sm" variant="ghost" onClick={() => setShowQuick(false)}>Annuleer</Button>
|
|
<Button size="sm" onClick={handleQuickCreate} disabled={isPending || !quickTitle.trim()}>Opslaan</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Inline create form */}
|
|
{showCreate && (
|
|
<div className="rounded-md border border-input bg-surface-container p-4 space-y-3">
|
|
<Input
|
|
value={newTitle}
|
|
onChange={(e) => setNewTitle(e.target.value)}
|
|
placeholder="Titel van het idee..."
|
|
disabled={isPending}
|
|
/>
|
|
<Textarea
|
|
value={newDescription}
|
|
onChange={(e) => setNewDescription(e.target.value)}
|
|
placeholder="Korte beschrijving (optioneel)..."
|
|
rows={3}
|
|
disabled={isPending}
|
|
/>
|
|
<select
|
|
value={newProductId}
|
|
onChange={(e) => setNewProductId(e.target.value)}
|
|
className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
|
|
disabled={isPending}
|
|
>
|
|
<option value="">Geen product (kan later worden gekoppeld)</option>
|
|
{products.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.name}
|
|
{p.repo_url ? '' : ' (geen repo)'}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setShowCreate(false)}
|
|
disabled={isPending}
|
|
>
|
|
Annuleer
|
|
</Button>
|
|
<Button size="sm" onClick={handleCreate} disabled={isPending || !newTitle.trim()}>
|
|
Aanmaken
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tabel */}
|
|
{sorted.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground py-8 text-center">
|
|
{ideas.length === 0
|
|
? 'Nog geen ideeën — start hierboven met "Nieuw idee".'
|
|
: 'Geen ideeën die aan de filters voldoen.'}
|
|
</p>
|
|
) : (
|
|
<Table data-debug-id="idea-list__items">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-24"><SortHeader col="code" label="Code" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} /></TableHead>
|
|
<TableHead><SortHeader col="title" label="Titel" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} /></TableHead>
|
|
<TableHead className="w-40"><SortHeader col="product" label="Product" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} /></TableHead>
|
|
<TableHead className="w-32"><SortHeader col="status" label="Status" sortKey={sortKey} sortDir={sortDir} onSort={handleSort} /></TableHead>
|
|
<TableHead className="w-72">Acties</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{sorted.map((idea) => {
|
|
const badge = getIdeaStatusBadge(API_TO_DB[idea.status])
|
|
return (
|
|
<TableRow
|
|
key={idea.id}
|
|
className="cursor-pointer hover:bg-muted/50"
|
|
onClick={() => router.push(`/ideas/${idea.id}`)}
|
|
>
|
|
<TableCell className="font-mono text-xs text-muted-foreground">
|
|
{idea.code}
|
|
</TableCell>
|
|
<TableCell className="font-medium">{idea.title}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{idea.product?.name ?? <span className="italic">geen</span>}
|
|
</TableCell>
|
|
<TableCell>
|
|
<span
|
|
className={badge.classes + (badge.pulse ? ' animate-pulse' : '')}
|
|
>
|
|
{badge.label}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell onClick={(e) => e.stopPropagation()}>
|
|
<IdeaRowActions
|
|
idea={idea}
|
|
isDemo={isDemo}
|
|
onArchive={() => handleArchive(idea.id)}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|