feat(frontend): Gaesteliste mit Status-Filter #72

New issue

Closed

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

niboer commented

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

Owner

Beschreibung

Gaesteliste fuer ein Event mit Filterfunktion nach Status und Zahlungsstatus. Organisatoren koennen Gaeste hinzufuegen, entfernen und deren Status aendern. Ersetzt die alte Issue #10.

Endpunkte

GET /api/v1/events/{event_id}/guests?status=...&payment=... - Gefilterte Gaesteliste
POST /api/v1/events/{event_id}/guests - Gast hinzufuegen
DELETE /api/v1/events/{event_id}/guests/{person_id} - Gast entfernen
PUT /api/v1/events/{event_id}/guests/{person_id}/status - Status aendern
GET /api/v1/persons - Personen-Liste fuer Auswahl beim Hinzufuegen

load-Funktion (+page.server.ts)

s export async function load({ fetch, params, url }) { const eventId = params.eventId; const status = url.searchParams.get('status') || ''; const payment = url.searchParams.get('payment') || ''; const query = new URLSearchParams(); if (status) query.set('status', status); if (payment) query.set('payment', payment); const qs = query.toString(); const [guests, persons] = await Promise.all([ fetch(/api/v1/events//guests), fetch('/api/v1/persons'), ]); return { guests: guests.ok ? await guests.json() : [], persons: persons.ok ? await persons.json() : [], filter: { status, payment }, }; }

Seite (+page.svelte)

Filter-Leiste:
- Status: Alle / Eingeladen / Zugesagt / Abgesagt
- Payment: Alle / Offen / Bezahlt / Befreit
- Filter setzen URL-SearchParams (SSR-kompatibel)
DataTable:
- Spalten: Name (aus Person), Status (Badge), Payment (Badge), Beitrag (Euro), Aktionen
- Aktionen: Status aendern (Dropdown), Gast entfernen (Button mit Confirm)
Gast hinzufuegen: Button oeffnet Dialog/Modal
- Modal: Personen-Dropdown (alle Personen), optionaler Beitrag, Status
- Submit: POST an API, Seite neu laden

Nutzt Komponenten aus #67

PageHeader, DataTable, StatusBadge, Modal (shadcn-dialog), FormField, EmptyState, ErrorAlert

Tests

guests.test.ts: load mit Filter-Parametern, add/remove-Actions, Status-Aenderung
Analog dem Pattern in playground.test.ts

Akzeptanzkriterien

Gaesteliste zeigt alle Gaeste eines Events
Filter nach Status funktioniert (URL-gesteuert)
Filter nach Payment funktioniert
Gast hinzufuegen ueber Modal mit Personen-Auswahl
Gast entfernen mit Bestaetigung
Status aendern per Dropdown (Inline)
EmptyState bei leerer Gaesteliste
Tests laufen gruen

## Beschreibung Gaesteliste fuer ein Event mit Filterfunktion nach Status und Zahlungsstatus. Organisatoren koennen Gaeste hinzufuegen, entfernen und deren Status aendern. Ersetzt die alte Issue #10. ## Endpunkte - GET /api/v1/events/{event_id}/guests?status=...&payment=... - Gefilterte Gaesteliste - POST /api/v1/events/{event_id}/guests - Gast hinzufuegen - DELETE /api/v1/events/{event_id}/guests/{person_id} - Gast entfernen - PUT /api/v1/events/{event_id}/guests/{person_id}/status - Status aendern - GET /api/v1/persons - Personen-Liste fuer Auswahl beim Hinzufuegen ## load-Funktion (+page.server.ts) ` s export async function load({ fetch, params, url }) { const eventId = params.eventId; const status = url.searchParams.get('status') || ''; const payment = url.searchParams.get('payment') || ''; const query = new URLSearchParams(); if (status) query.set('status', status); if (payment) query.set('payment', payment); const qs = query.toString(); const [guests, persons] = await Promise.all([ fetch(/api/v1/events//guests), fetch('/api/v1/persons'), ]); return { guests: guests.ok ? await guests.json() : [], persons: persons.ok ? await persons.json() : [], filter: { status, payment }, }; } ` ## Seite (+page.svelte) - **Filter-Leiste**: - Status: Alle / Eingeladen / Zugesagt / Abgesagt - Payment: Alle / Offen / Bezahlt / Befreit - Filter setzen URL-SearchParams (SSR-kompatibel) - **DataTable**: - Spalten: Name (aus Person), Status (Badge), Payment (Badge), Beitrag (Euro), Aktionen - Aktionen: Status aendern (Dropdown), Gast entfernen (Button mit Confirm) - **Gast hinzufuegen**: Button oeffnet Dialog/Modal - Modal: Personen-Dropdown (alle Personen), optionaler Beitrag, Status - Submit: POST an API, Seite neu laden ## Nutzt Komponenten aus #67 - PageHeader, DataTable, StatusBadge, Modal (shadcn-dialog), FormField, EmptyState, ErrorAlert ## Tests - guests.test.ts: load mit Filter-Parametern, add/remove-Actions, Status-Aenderung - Analog dem Pattern in playground.test.ts ## Akzeptanzkriterien - [ ] Gaesteliste zeigt alle Gaeste eines Events - [ ] Filter nach Status funktioniert (URL-gesteuert) - [ ] Filter nach Payment funktioniert - [ ] Gast hinzufuegen ueber Modal mit Personen-Auswahl - [ ] Gast entfernen mit Bestaetigung - [ ] Status aendern per Dropdown (Inline) - [ ] EmptyState bei leerer Gaesteliste - [ ] Tests laufen gruen

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

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

niboer added the

component/frontend

prio/high

type/feature

labels

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

niboer referenced this issue

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

Gästeliste-Ansicht mit Status-Filter #10

niboer referenced this issue