diff --git a/src/app/(app)/aufgaben/filterleiste.tsx b/src/app/(app)/aufgaben/filterleiste.tsx new file mode 100644 index 0000000..61bc73c --- /dev/null +++ b/src/app/(app)/aufgaben/filterleiste.tsx @@ -0,0 +1,157 @@ +'use client' + +import { useRouter, useSearchParams } from 'next/navigation' +import { useTransition } from 'react' +import { X } from 'lucide-react' +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 { STATUS_NAME, TYP_NAME } from '@/lib/aufgabe' + +type Eigenschaften = { + bereiche: { id: string; name: string }[] + projekte: { id: string; name: string }[] +} + +const STATUS = ['OFFEN', 'GEPLANT', 'WARTET', 'ERLEDIGT', 'VERWORFEN'] as const +const TYPEN = ['AUFGABE', 'ARBEITSPAKET', 'MEILENSTEIN', 'IDEE', 'SPIEGEL'] as const + +/** + * Die Filter stehen in der Adresse, nicht im Zustand der Komponente. So lässt + * sich eine gefilterte Liste als Lesezeichen ablegen und teilen, und der + * Zurück-Knopf tut, was er soll. + */ +export function Filterleiste({ bereiche, projekte }: Eigenschaften) { + const router = useRouter() + const parameter = useSearchParams() + const [laeuft, starte] = useTransition() + + function setzen(schluessel: string, wert: string) { + const neu = new URLSearchParams(parameter.toString()) + if (wert) neu.set(schluessel, wert) + else neu.delete(schluessel) + starte(() => router.push(`/aufgaben?${neu.toString()}`)) + } + + const gesetzt = ['bereich', 'projekt', 'status', 'typ', 'suche'].filter((s) => + parameter.get(s), + ) + + return ( +
+ {aufgaben.length === 0 + ? 'Nichts gefunden.' + : `${aufgaben.length} Aufgabe(n)${geschaetzt > 0 ? `, zusammen ${alsDauer(geschaetzt)} geschätzt` : ''}.`} +
++ Was irgendwann einmal lohnen könnte. Ideen haben bewusst keinen Termin und + drängen sich nicht in die Aufgabenliste — bis du eine übernimmst. +
++ Alles, was noch keinem Bereich zugeordnet ist. Erst erfassen, später + einsortieren — Nachdenken beim Aufschreiben kostet nur Zeit. +
+{alsDatum(heute)}
-- {alsDauer(wochenKapazitaet(bereich))} in der Woche eingeplant -
-+ {offeneHier.length === 0 + ? 'Nichts offen' + : `${offeneHier.length} offen`}{' '} + · {alsDauer(wochenKapazitaet(bereich))} Kapazität je Woche +
++ {projekt.beschreibung} +
+ )} + ++ {fortschritt.gesamt === 0 + ? 'Noch keine Aufgaben zugeordnet.' + : `${fortschritt.erledigt} von ${fortschritt.gesamt} erledigt (${fortschritt.prozent} %)`} + {offenerAufwand > 0 && ` · noch ${alsDauer(offenerAufwand)} geschätzt`} + {projekt.zielAm && ` · Ziel ${alsDatum(projekt.zielAm)}`} +
++ Eine Klammer um mehrere Aufgaben. Aufwand und Fortschritt ergeben sich aus + dem, was drinsteckt. +
++ {projekt.beschreibung} +
+ )} ++ {fortschritt.gesamt === 0 + ? 'Noch keine Aufgaben zugeordnet.' + : `${fortschritt.erledigt} von ${fortschritt.gesamt} erledigt (${fortschritt.prozent} %)`} + {offenerAufwand > 0 && ` · noch ${alsDauer(offenerAufwand)}`} + {projekt.zielAm && ` · Ziel ${alsDatum(projekt.zielAm)}`} +
++ {aufgabe.titel} +
+ + {aufgabe.notiz && ( ++ {aufgabe.notiz} +
+ )} + +