feat(frontend): Self-Service-Panel fuer Gaeste (RSVP, Formular, Delegierte) #74

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

Self-Service-Ansicht fuer Gaeste: Einladungen anzeigen, zu-/absagen und Formular-Antworten ausfuellen. Enthaelt auch die Stellvertreter-Ansicht (aus alter Issue #14, ohne DSGVO-Teil). Ersetzt die alten Issues #13 und #14 (anteilig).

Endpunkte (benoetigt Backend aus #64)

GET /api/v1/persons/{person_id}/invitations - Einladungen der Person
PUT /api/v1/events/{event_id}/guests/{person_id}/status - Status aendern (RSVP)

load-Funktion (+page.server.ts)

s export async function load({ fetch, params, locals }) { const personId = params.personId; const isOwnProfile = locals.user?.personId === personId; const res = await fetch(/api/v1/persons//invitations); return { invitations: res.ok ? await res.json() : [], isOwnProfile, personId, }; }

Seite (+page.svelte)

PageHeader: "Meine Einladungen" (oder "[Name]'s Einladungen" bei Delegierten)
Delegierten-Hinweis: Wenn isOwnProfile === false: "Sie handeln im Namen von [Name]" (oranger Hinweis)
Einladungs-Liste (Cards pro Event):
- Event-Titel, Datum, aktueller Status (Badge)
- Wenn status === "invited":
  - Zusagen / Absagen Buttons (primary / destructive)
- Wenn status === "confirmed" oder "declined":
  - Status-Text + Datum der Antwort
- Nach Zusage: Dynamische Formular-Felder aus ormDefinition (falls vorhanden)
  - formDefinition ist ein Array von Feldern: { label, type, required, options? }
  - Werte werden in ormAnswers gespeichert
  - Submit-Button: Sendet formAnswers mit dem Status-Update
Nutzt PageHeader, Card, StatusBadge, FormField, Button, ErrorAlert, EmptyState

Dynamisches Formular

Die ormDefinition des Events kann beliebige Felder enthalten. Das Frontend rendert diese dynamisch:
s {#each formDefinition as field} <FormField label={field.label} required={field.required}> {#if field.type === 'select'} <select>...</select> {:else} <input type={field.type} /> {/if} </FormField> {/each}

Tests

self-service.test.ts: load invitations, RSVP-Action (confirm/decline), formAnswers-Update
Testet: Einladungen werden geladen, RSVP-Buttons funktionieren, Delegierten-Hinweis wird angezeigt

Akzeptanzkriterien

Einladungen der Person werden angezeigt
Zusagen/Absagen funktionieren (Status aendern via API)
Nach Zusage erscheinen Formular-Felder aus formDefinition
formAnswers werden gespeichert
Delegierten-Hinweis wird bei Stellvertretung angezeigt
EmptyState wenn keine Einladungen
Tests laufen gruen

## Beschreibung Self-Service-Ansicht fuer Gaeste: Einladungen anzeigen, zu-/absagen und Formular-Antworten ausfuellen. Enthaelt auch die Stellvertreter-Ansicht (aus alter Issue #14, ohne DSGVO-Teil). Ersetzt die alten Issues #13 und #14 (anteilig). ## Endpunkte (benoetigt Backend aus #64) - GET /api/v1/persons/{person_id}/invitations - Einladungen der Person - PUT /api/v1/events/{event_id}/guests/{person_id}/status - Status aendern (RSVP) ## load-Funktion (+page.server.ts) ` s export async function load({ fetch, params, locals }) { const personId = params.personId; const isOwnProfile = locals.user?.personId === personId; const res = await fetch(/api/v1/persons//invitations); return { invitations: res.ok ? await res.json() : [], isOwnProfile, personId, }; } ` ## Seite (+page.svelte) - **PageHeader**: "Meine Einladungen" (oder "[Name]'s Einladungen" bei Delegierten) - **Delegierten-Hinweis**: Wenn isOwnProfile === false: "Sie handeln im Namen von [Name]" (oranger Hinweis) - **Einladungs-Liste** (Cards pro Event): - Event-Titel, Datum, aktueller Status (Badge) - Wenn status === "invited": - Zusagen / Absagen Buttons (primary / destructive) - Wenn status === "confirmed" oder "declined": - Status-Text + Datum der Antwort - Nach Zusage: Dynamische Formular-Felder aus ormDefinition (falls vorhanden) - formDefinition ist ein Array von Feldern: { label, type, required, options? } - Werte werden in ormAnswers gespeichert - Submit-Button: Sendet formAnswers mit dem Status-Update - Nutzt PageHeader, Card, StatusBadge, FormField, Button, ErrorAlert, EmptyState ## Dynamisches Formular Die ormDefinition des Events kann beliebige Felder enthalten. Das Frontend rendert diese dynamisch: ` s {#each formDefinition as field} <FormField label={field.label} required={field.required}> {#if field.type === 'select'} <select>...</select> {:else} <input type={field.type} /> {/if} </FormField> {/each} ` ## Tests - self-service.test.ts: load invitations, RSVP-Action (confirm/decline), formAnswers-Update - Testet: Einladungen werden geladen, RSVP-Buttons funktionieren, Delegierten-Hinweis wird angezeigt ## Akzeptanzkriterien - [ ] Einladungen der Person werden angezeigt - [ ] Zusagen/Absagen funktionieren (Status aendern via API) - [ ] Nach Zusage erscheinen Formular-Felder aus formDefinition - [ ] formAnswers werden gespeichert - [ ] Delegierten-Hinweis wird bei Stellvertretung angezeigt - [ ] EmptyState wenn keine Einladungen - [ ] 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

Self-Service-Panel für Gäste (Zusage/Absage, Formular) #13

niboer referenced this issue