feat(aufgaben): Inbox, Aufgabenliste, Ideen und Projekte
Die Schnellerfassung braucht ein Feld und einen Knopf; wer beim Erfassen erst ein Formular ausfüllen muss, erfasst nichts. Der Fokus bleibt danach im Feld, damit mehrere Sachen hintereinander hineingehen. Die Filter der Aufgabenliste stehen in der Adresse, nicht im Zustand der Komponente — so lässt sich eine gefilterte Liste als Lesezeichen ablegen, und der Zurück-Knopf tut, was er soll. Die Startseite zeigt jetzt, was überfällig, heute oder morgen fällig ist, statt nur die Bereiche aufzuzählen. Für die Auswahlfelder bewusst das native <select>: es bedient sich auf dem Handy mit dem Systemdialog und ist ohne Zusatzcode tastaturbedienbar. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Florian Wilde
co-authored by
Claude Opus 5
Claude Opus 5
parent
b3ca1c9ce7
commit
a4a889fcb8
@@ -0,0 +1,233 @@
|
||||
'use client'
|
||||
|
||||
import { useTransition, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select } from '@/components/ui/select'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
AUFWAND_MAX_MINUTEN,
|
||||
PRIORITAET_NAME,
|
||||
STATUS_NAME,
|
||||
TYP_NAME,
|
||||
moeglicheUebergaenge,
|
||||
} from '@/lib/aufgabe'
|
||||
import type { AufgabeAnzeige } from '@/lib/aufgabe-anzeige'
|
||||
import { aufgabeAendern, aufgabeAnlegen } from '@/server/aktionen/aufgaben'
|
||||
|
||||
export type BereichWahl = { id: string; name: string }
|
||||
export type ProjektWahl = { id: string; name: string }
|
||||
|
||||
type Eigenschaften = {
|
||||
/** Fehlt sie, wird eine neue Aufgabe angelegt. */
|
||||
aufgabe?: AufgabeAnzeige
|
||||
bereiche: BereichWahl[]
|
||||
projekte: ProjektWahl[]
|
||||
/** Vorbelegung beim Anlegen. */
|
||||
vorgabe?: { bereichId?: string; projektId?: string; typ?: string }
|
||||
onFertig?: () => void
|
||||
}
|
||||
|
||||
const TYPEN = ['AUFGABE', 'IDEE', 'ARBEITSPAKET', 'MEILENSTEIN'] as const
|
||||
|
||||
export function AufgabeFormular({
|
||||
aufgabe,
|
||||
bereiche,
|
||||
projekte,
|
||||
vorgabe,
|
||||
onFertig,
|
||||
}: Eigenschaften) {
|
||||
const router = useRouter()
|
||||
const [laeuft, starte] = useTransition()
|
||||
const [felder, setFelder] = useState<Record<string, string>>({})
|
||||
|
||||
// Aus einem abgeschlossenen Zustand geht es nur zurück nach OFFEN. Die
|
||||
// Auswahl zeigt deshalb nur, was von hier aus wirklich möglich ist.
|
||||
const statusAuswahl = aufgabe
|
||||
? [aufgabe.status, ...moeglicheUebergaenge(aufgabe.status)]
|
||||
: (['OFFEN', 'GEPLANT', 'WARTET'] as const)
|
||||
|
||||
function absenden(ereignis: React.FormEvent<HTMLFormElement>) {
|
||||
ereignis.preventDefault()
|
||||
const formular = ereignis.currentTarget
|
||||
const daten = new FormData(formular)
|
||||
|
||||
starte(async () => {
|
||||
const antwort = aufgabe
|
||||
? await aufgabeAendern(aufgabe.id, daten)
|
||||
: await aufgabeAnlegen(daten)
|
||||
|
||||
if (antwort.ok) {
|
||||
setFelder({})
|
||||
toast.success(antwort.meldung)
|
||||
if (!aufgabe) formular.reset()
|
||||
router.refresh()
|
||||
onFertig?.()
|
||||
} else {
|
||||
setFelder(antwort.felder ?? {})
|
||||
toast.error(antwort.fehler)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const kennung = aufgabe?.id ?? 'neu'
|
||||
|
||||
return (
|
||||
<form onSubmit={absenden} className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor={`titel-${kennung}`}>Titel</Label>
|
||||
<Input
|
||||
id={`titel-${kennung}`}
|
||||
name="titel"
|
||||
defaultValue={aufgabe?.titel ?? ''}
|
||||
required
|
||||
maxLength={200}
|
||||
aria-invalid={Boolean(felder.titel)}
|
||||
/>
|
||||
{felder.titel && <p className="text-gefahr text-xs">{felder.titel}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor={`notiz-${kennung}`}>Notiz</Label>
|
||||
<Textarea
|
||||
id={`notiz-${kennung}`}
|
||||
name="notiz"
|
||||
defaultValue={aufgabe?.notiz ?? ''}
|
||||
maxLength={5000}
|
||||
placeholder="Was dazugehört, aber nicht in den Titel passt."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor={`typ-${kennung}`}>Art</Label>
|
||||
<Select
|
||||
id={`typ-${kennung}`}
|
||||
name="typ"
|
||||
defaultValue={aufgabe?.typ ?? vorgabe?.typ ?? 'AUFGABE'}
|
||||
>
|
||||
{TYPEN.map((typ) => (
|
||||
<option key={typ} value={typ}>
|
||||
{TYP_NAME[typ]}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor={`status-${kennung}`}>Status</Label>
|
||||
<Select
|
||||
id={`status-${kennung}`}
|
||||
name="status"
|
||||
defaultValue={aufgabe?.status ?? 'OFFEN'}
|
||||
aria-invalid={Boolean(felder.status)}
|
||||
>
|
||||
{[...new Set(statusAuswahl)].map((status) => (
|
||||
<option key={status} value={status}>
|
||||
{STATUS_NAME[status]}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
{felder.status && <p className="text-gefahr text-xs">{felder.status}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor={`prioritaet-${kennung}`}>Priorität</Label>
|
||||
<Select
|
||||
id={`prioritaet-${kennung}`}
|
||||
name="prioritaet"
|
||||
defaultValue={String(aufgabe?.prioritaet ?? 3)}
|
||||
>
|
||||
{[1, 2, 3, 4, 5].map((stufe) => (
|
||||
<option key={stufe} value={stufe}>
|
||||
{stufe} – {PRIORITAET_NAME[stufe]}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor={`aufwand-${kennung}`}>Aufwand in Minuten</Label>
|
||||
<Input
|
||||
id={`aufwand-${kennung}`}
|
||||
name="aufwandMinuten"
|
||||
type="number"
|
||||
min={1}
|
||||
max={AUFWAND_MAX_MINUTEN}
|
||||
step={15}
|
||||
defaultValue={aufgabe?.aufwandMinuten ?? ''}
|
||||
placeholder="noch nicht geschätzt"
|
||||
aria-invalid={Boolean(felder.aufwandMinuten)}
|
||||
/>
|
||||
{felder.aufwandMinuten && (
|
||||
<p className="text-gefahr text-xs">{felder.aufwandMinuten}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor={`faellig-${kennung}`}>Fällig am</Label>
|
||||
<Input
|
||||
id={`faellig-${kennung}`}
|
||||
name="faelligAm"
|
||||
type="date"
|
||||
defaultValue={aufgabe?.faelligWert ?? ''}
|
||||
aria-invalid={Boolean(felder.faelligAm)}
|
||||
/>
|
||||
{felder.faelligAm && <p className="text-gefahr text-xs">{felder.faelligAm}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor={`bereich-${kennung}`}>Bereich</Label>
|
||||
<Select
|
||||
id={`bereich-${kennung}`}
|
||||
name="bereichId"
|
||||
defaultValue={aufgabe?.bereich?.id ?? vorgabe?.bereichId ?? ''}
|
||||
aria-invalid={Boolean(felder.bereichId)}
|
||||
>
|
||||
<option value="">Inbox – noch nicht einsortiert</option>
|
||||
{bereiche.map((bereich) => (
|
||||
<option key={bereich.id} value={bereich.id}>
|
||||
{bereich.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
{felder.bereichId && <p className="text-gefahr text-xs">{felder.bereichId}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 sm:col-span-2">
|
||||
<Label htmlFor={`projekt-${kennung}`}>Projekt</Label>
|
||||
<Select
|
||||
id={`projekt-${kennung}`}
|
||||
name="projektId"
|
||||
defaultValue={aufgabe?.projekt?.id ?? vorgabe?.projektId ?? ''}
|
||||
aria-invalid={Boolean(felder.projektId)}
|
||||
>
|
||||
<option value="">Kein Projekt</option>
|
||||
{projekte.map((projekt) => (
|
||||
<option key={projekt.id} value={projekt.id}>
|
||||
{projekt.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
{felder.projektId && <p className="text-gefahr text-xs">{felder.projektId}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" disabled={laeuft}>
|
||||
{laeuft && <Loader2 className="animate-spin" aria-hidden />}
|
||||
{aufgabe ? 'Speichern' : 'Aufgabe anlegen'}
|
||||
</Button>
|
||||
{onFertig && (
|
||||
<Button type="button" art="leise" onClick={onFertig} disabled={laeuft}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user