feat: ST-101-ST-110 M1 producten, PBI backlog, iconen en PWA manifest
- Product aanmaken/bewerken/archiveren/herstellen (ST-101, ST-103) - SplitPane component met versleepbare splitter en localStorage (ST-104) - PanelNavBar herbruikbaar paneelheader component (ST-105) - PbiList met prioriteitsgroepen, inline aanmaken, filter en verwijderen (ST-106-ST-110) - StoryPanel placeholder rechter paneel met selectie via Zustand (ST-109) - App iconen geinstalleerd: favicon, apple-icon, PWA manifest (192/512px) - AppIcon SVG component in navigatiebar - Root layout metadata bijgewerkt naar Nederlands Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
8017968e60
commit
ffda65490f
23 changed files with 1229 additions and 26 deletions
54
components/products/archive-product-button.tsx
Normal file
54
components/products/archive-product-button.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { archiveProductAction } from '@/actions/products'
|
||||
|
||||
interface ArchiveProductButtonProps {
|
||||
productId: string
|
||||
}
|
||||
|
||||
export function ArchiveProductButton({ productId }: ArchiveProductButtonProps) {
|
||||
const [confirming, setConfirming] = useState(false)
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
function handleArchive() {
|
||||
startTransition(async () => {
|
||||
await archiveProductAction(productId)
|
||||
})
|
||||
}
|
||||
|
||||
if (confirming) {
|
||||
return (
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
disabled={isPending}
|
||||
onClick={handleArchive}
|
||||
>
|
||||
{isPending ? 'Bezig…' : 'Ja, archiveer'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setConfirming(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Annuleren
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="shrink-0 border-error/40 text-error hover:bg-error/10"
|
||||
onClick={() => setConfirming(true)}
|
||||
>
|
||||
Archiveren
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
135
components/products/product-form.tsx
Normal file
135
components/products/product-form.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
'use client'
|
||||
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
|
||||
type FieldErrors = Record<string, string[]>
|
||||
type ActionResult = { error?: string | FieldErrors; success?: boolean } | undefined
|
||||
|
||||
function SubmitButton({ label }: { label: string }) {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? 'Even wachten…' : label}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function getFieldError(error: string | FieldErrors | undefined, field: string): string | undefined {
|
||||
if (!error || typeof error === 'string') return undefined
|
||||
return (error as FieldErrors)[field]?.[0]
|
||||
}
|
||||
|
||||
function getGlobalError(error: string | FieldErrors | undefined): string | undefined {
|
||||
if (typeof error === 'string') return error
|
||||
return undefined
|
||||
}
|
||||
|
||||
interface ProductFormProps {
|
||||
action: (_prevState: unknown, formData: FormData) => Promise<ActionResult>
|
||||
submitLabel: string
|
||||
defaultValues?: {
|
||||
id?: string
|
||||
name?: string
|
||||
description?: string
|
||||
repo_url?: string
|
||||
definition_of_done?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function ProductForm({ action, submitLabel, defaultValues }: ProductFormProps) {
|
||||
const [state, formAction] = useActionState(action, undefined)
|
||||
|
||||
const fieldError = (field: string) => getFieldError(state?.error, field)
|
||||
const globalError = getGlobalError(state?.error)
|
||||
|
||||
return (
|
||||
<form action={formAction} className="space-y-5">
|
||||
{defaultValues?.id && (
|
||||
<input type="hidden" name="id" value={defaultValues.id} />
|
||||
)}
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="name" className="text-sm font-medium text-foreground">
|
||||
Naam <span className="text-error">*</span>
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
defaultValue={defaultValues?.name}
|
||||
placeholder="bijv. DevPlanner"
|
||||
className={fieldError('name') ? 'border-error' : ''}
|
||||
/>
|
||||
{fieldError('name') && (
|
||||
<p className="text-xs text-error">{fieldError('name')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="description" className="text-sm font-medium text-foreground">
|
||||
Beschrijving
|
||||
</label>
|
||||
<Textarea
|
||||
id="description"
|
||||
name="description"
|
||||
rows={3}
|
||||
defaultValue={defaultValues?.description}
|
||||
placeholder="Korte omschrijving van het product…"
|
||||
className={fieldError('description') ? 'border-error' : ''}
|
||||
/>
|
||||
{fieldError('description') && (
|
||||
<p className="text-xs text-error">{fieldError('description')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="repo_url" className="text-sm font-medium text-foreground">
|
||||
Git-repo URL
|
||||
</label>
|
||||
<Input
|
||||
id="repo_url"
|
||||
name="repo_url"
|
||||
type="url"
|
||||
defaultValue={defaultValues?.repo_url ?? ''}
|
||||
placeholder="https://github.com/..."
|
||||
className={fieldError('repo_url') ? 'border-error' : ''}
|
||||
/>
|
||||
{fieldError('repo_url') && (
|
||||
<p className="text-xs text-error">{fieldError('repo_url')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="definition_of_done" className="text-sm font-medium text-foreground">
|
||||
Definition of Done <span className="text-error">*</span>
|
||||
</label>
|
||||
<Textarea
|
||||
id="definition_of_done"
|
||||
name="definition_of_done"
|
||||
required
|
||||
rows={4}
|
||||
defaultValue={defaultValues?.definition_of_done}
|
||||
placeholder="Bijv. code gereviewd, tests groen, gedeployed naar staging…"
|
||||
className={fieldError('definition_of_done') ? 'border-error' : ''}
|
||||
/>
|
||||
{fieldError('definition_of_done') && (
|
||||
<p className="text-xs text-error">{fieldError('definition_of_done')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{globalError && (
|
||||
<div className="bg-error-container text-error-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-error">
|
||||
{globalError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 pt-1">
|
||||
<SubmitButton label={submitLabel} />
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue