feat(frontend): Wiederverwendbare Template-Komponenten (DataTable, PageHeader, Badges, Forms) #67

New issue

Closed

opened 2026-06-21 16:18:02 +00:00 by niboer · 0 comments

niboer commented

2026-06-21 16:18:02 +00:00

Owner

Beschreibung

Sammlung wiederverwendbarer UI-Komponenten, die das schnelle Erstellen neuer Seiten ermoeglichen. Diese Komponenten ersetzen schrittweise die CSS-Klassen aus playground.css und werden in allen /app/*-Seiten eingesetzt.

Komponenten

PageHeader

Props: itle: string, description?: string, ctions?: slot
Einheitlicher Seitenkopf mit Titel, Untertitel und optionalen Aktions-Buttons

DataTable

Props: columns: ColumnConfig[], data: T[], loading?: boolean
ColumnConfig: { key: string, label: string, sortable?: boolean, class?: string, render?: (row: T) => any }
Sortierung durch Klick auf Spaltenkopf (toggle asc/desc)
Leerer Zustand: Zeigt EmptyState-Komponente
Responsive: Horizontal scrollbar auf Mobil

StatusBadge

Props: ype: 'guest-status' | 'payment-status' | 'default', alue: string
Mapping:
- guest-status: invited (grau), confirmed (gruen), declined (rot)
- payment-status: open (gelb), paid (gruen), exempted (blau)
Nutzt shadcn-Badge als Basis

EmptyState

Props: itle: string, description?: string, ction?: slot
Zentrierte Leer-Zustands-Anzeige mit Icon (optional), Text und Action-Button

ErrorAlert

Props: message: string, details?: string, onRetry?: () => void
Rot hinterlegte Fehleranzeige mit Detail-Text und optionalem "Wiederholen"-Button

FormField

Props: label: string,
ame: string, error?: string,
equired?: boolean, hint?: string
Slot fuer das Input-Element
Zeigt Label, Fehlertext (rot) und Hilfetext an

Dateien

rontend/src/lib/components/page-header.svelte
rontend/src/lib/components/data-table.svelte
rontend/src/lib/components/status-badge.svelte
rontend/src/lib/components/empty-state.svelte
rontend/src/lib/components/error-alert.svelte
rontend/src/lib/components/form-field.svelte
rontend/src/tests/data-table.test.ts
rontend/src/tests/status-badge.test.ts
rontend/src/tests/empty-state.test.ts

Tests

DataTable: rendert alle Zeilen, Sortierung funktioniert, EmptyState bei leerem Array
StatusBadge: korrekte Farbe pro Status-Wert, keine unbekannten Werte
PageHeader: Titel und Description werden angezeigt, Actions-Slot funktioniert
EmptyState: Titel + Description werden angezeigt, Action-Slot funktioniert
ErrorAlert: Message wird angezeigt, onRetry feuert bei Klick
FormField: Label wird angezeigt, Error wird rot dargestellt

Akzeptanzkriterien

Alle Komponenten sind aus $lib/components/ importierbar
DataTable sortiert per Klick auf Spaltenkopf
StatusBadge zeigt korrekte Farben pro Status
FormField zeigt Label + Error + Hint an
Tests laufen gruen

Aktualisierter Plan (2026-06-21)

Zusaetzlich erkannt (L2)

Test-Infrastruktur fuer Svelte-Component-Tests fehlt. Aktuelles vitest-Environment (node) kann keine Svelte-Komponenten rendern. Benoetigt mindestens eine Config-Erweiterung:
pm install -D @testing-library/svelte jsdom.

Commits

2a est(frontend): Test-Infrastruktur fuer Svelte-Komponenten (refs #67)

npm install -D @testing-library/svelte jsdom
vitest.config.ts erweitern (jsdom-Environment)

2b eat(frontend): Basis-Template-Komponenten (refs #67)

page-header.svelte, status-badge.svelte, empty-state.svelte,
error-alert.svelte, form-field.svelte
Tests: status-badge.test.ts, empty-state.test.ts

2c eat(frontend): DataTable-Komponente mit Sortierung (closes #67)

data-table.svelte (ColumnConfig[], Sortierung, EmptyState, Loading)
Test: data-table.test.ts

## Beschreibung Sammlung wiederverwendbarer UI-Komponenten, die das schnelle Erstellen neuer Seiten ermoeglichen. Diese Komponenten ersetzen schrittweise die CSS-Klassen aus playground.css und werden in allen /app/*-Seiten eingesetzt. ## Komponenten ### PageHeader - Props: itle: string, description?: string, ctions?: slot - Einheitlicher Seitenkopf mit Titel, Untertitel und optionalen Aktions-Buttons ### DataTable - Props: columns: ColumnConfig[], data: T[], loading?: boolean - ColumnConfig: { key: string, label: string, sortable?: boolean, class?: string, render?: (row: T) => any } - Sortierung durch Klick auf Spaltenkopf (toggle asc/desc) - Leerer Zustand: Zeigt EmptyState-Komponente - Responsive: Horizontal scrollbar auf Mobil ### StatusBadge - Props: ype: 'guest-status' | 'payment-status' | 'default', alue: string - Mapping: - guest-status: invited (grau), confirmed (gruen), declined (rot) - payment-status: open (gelb), paid (gruen), exempted (blau) - Nutzt shadcn-Badge als Basis ### EmptyState - Props: itle: string, description?: string, ction?: slot - Zentrierte Leer-Zustands-Anzeige mit Icon (optional), Text und Action-Button ### ErrorAlert - Props: message: string, details?: string, onRetry?: () => void - Rot hinterlegte Fehleranzeige mit Detail-Text und optionalem "Wiederholen"-Button ### FormField - Props: label: string, ame: string, error?: string, equired?: boolean, hint?: string - Slot fuer das Input-Element - Zeigt Label, Fehlertext (rot) und Hilfetext an ## Dateien - rontend/src/lib/components/page-header.svelte - rontend/src/lib/components/data-table.svelte - rontend/src/lib/components/status-badge.svelte - rontend/src/lib/components/empty-state.svelte - rontend/src/lib/components/error-alert.svelte - rontend/src/lib/components/form-field.svelte - rontend/src/tests/data-table.test.ts - rontend/src/tests/status-badge.test.ts - rontend/src/tests/empty-state.test.ts ## Tests - DataTable: rendert alle Zeilen, Sortierung funktioniert, EmptyState bei leerem Array - StatusBadge: korrekte Farbe pro Status-Wert, keine unbekannten Werte - PageHeader: Titel und Description werden angezeigt, Actions-Slot funktioniert - EmptyState: Titel + Description werden angezeigt, Action-Slot funktioniert - ErrorAlert: Message wird angezeigt, onRetry feuert bei Klick - FormField: Label wird angezeigt, Error wird rot dargestellt ## Akzeptanzkriterien - [ ] Alle Komponenten sind aus $lib/components/ importierbar - [ ] DataTable sortiert per Klick auf Spaltenkopf - [ ] StatusBadge zeigt korrekte Farben pro Status - [ ] FormField zeigt Label + Error + Hint an - [ ] Tests laufen gruen ## Aktualisierter Plan (2026-06-21) ### Zusaetzlich erkannt (L2) Test-Infrastruktur fuer Svelte-Component-Tests fehlt. Aktuelles vitest-Environment (node) kann keine Svelte-Komponenten rendern. Benoetigt mindestens eine Config-Erweiterung: pm install -D @testing-library/svelte jsdom. ### Commits **2a** est(frontend): Test-Infrastruktur fuer Svelte-Komponenten (refs #67) - npm install -D @testing-library/svelte jsdom - vitest.config.ts erweitern (jsdom-Environment) **2b** eat(frontend): Basis-Template-Komponenten (refs #67) - page-header.svelte, status-badge.svelte, empty-state.svelte, error-alert.svelte, form-field.svelte - Tests: status-badge.test.ts, empty-state.test.ts **2c** eat(frontend): DataTable-Komponente mit Sortierung (closes #67) - data-table.svelte (ColumnConfig[], Sortierung, EmptyState, Loading) - Test: data-table.test.ts

niboer added this to the MS10: Vollständige UI milestone

2026-06-21 16:18:02 +00:00

niboer added the

component/frontend

prio/medium

type/feature

labels

2026-06-21 16:18:02 +00:00

niboer referenced this issue

2026-06-21 16:18:02 +00:00

feat(frontend): Dashboard-Seite mit Uebersichtskacheln #69

niboer referenced this issue