feat(frontend): Account-Einstellungen (Stammdaten, Kontaktdaten, Delegationen) #70

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

Account-Seite zum Anzeigen und Bearbeiten der eigenen Stammdaten, Kontaktdaten und Delegationen.

Endpunkte (via BFF-Proxy)

GET /api/v1/persons/{person_id} - Eigene Personendaten
PUT /api/v1/persons/{person_id} - Stammdaten aktualisieren
GET /api/v1/persons/{person_id}/contacts - Kontaktdaten lesen
PUT /api/v1/persons/{person_id}/contacts - Kontaktdaten aktualisieren
GET /api/v1/persons/{person_id}/delegations - (optional, falls Endpunkt existiert)

load-Funktion (+page.server.ts)

s export async function load({ fetch, locals }) { const personId = locals.user?.personId; if (!personId) return { person: null, contacts: null }; const [person, contacts] = await Promise.all([ fetch(/api/v1/persons/).then(r => r.ok ? r.json() : null), fetch(/api/v1/persons//contacts).then(r => r.ok ? r.json() : null), ]); return { person, contacts }; }

Formular-Actions

default: PUT Stammdaten (/api/v1/persons/{person_id})
contacts: PUT Kontaktdaten (/api/v1/persons/{person_id}/contacts)

Seite (+page.svelte)

Abschnitt "Stammdaten": Vorname, Nachname (editierbar)
Abschnitt "Kontaktdaten": E-Mail, Telefon, Adresse (editierbar)
- E-Mail und Telefon als Input-Felder
- Adresse als drei Felder: Strasse, PLZ, Ort
Abschnitt "Delegationen": (read-only) Liste der Personen, fuer die man als Stellvertreter eingetragen ist
- Falls kein Endpunkt existiert: Platzhalter "Delegationen werden in MS11 verwaltet"

Nutzt Komponenten aus #67

PageHeader, FormField (Input), Card, ErrorAlert

Tests

ccount.test.ts: load-Funktion mit Mock-API, Formular-Actions (PUT)
Testet: Daten werden aus der API geladen, PUT-Action sendet korrekte Daten, Validierungsfehler werden angezeigt

Akzeptanzkriterien

Stammdaten werden angezeigt und koennen bearbeitet werden
Kontaktdaten werden angezeigt und koennen bearbeitet werden
Nach erfolgreichem Speichern erscheint eine Erfolgsmeldung
Bei API-Fehlern erscheint ErrorAlert
Tests laufen gruen

## Beschreibung Account-Seite zum Anzeigen und Bearbeiten der eigenen Stammdaten, Kontaktdaten und Delegationen. ## Endpunkte (via BFF-Proxy) - GET /api/v1/persons/{person_id} - Eigene Personendaten - PUT /api/v1/persons/{person_id} - Stammdaten aktualisieren - GET /api/v1/persons/{person_id}/contacts - Kontaktdaten lesen - PUT /api/v1/persons/{person_id}/contacts - Kontaktdaten aktualisieren - GET /api/v1/persons/{person_id}/delegations - (optional, falls Endpunkt existiert) ## load-Funktion (+page.server.ts) ` s export async function load({ fetch, locals }) { const personId = locals.user?.personId; if (!personId) return { person: null, contacts: null }; const [person, contacts] = await Promise.all([ fetch(/api/v1/persons/).then(r => r.ok ? r.json() : null), fetch(/api/v1/persons//contacts).then(r => r.ok ? r.json() : null), ]); return { person, contacts }; } ` ## Formular-Actions - default: PUT Stammdaten (/api/v1/persons/{person_id}) - contacts: PUT Kontaktdaten (/api/v1/persons/{person_id}/contacts) ## Seite (+page.svelte) - **Abschnitt "Stammdaten"**: Vorname, Nachname (editierbar) - **Abschnitt "Kontaktdaten"**: E-Mail, Telefon, Adresse (editierbar) - E-Mail und Telefon als Input-Felder - Adresse als drei Felder: Strasse, PLZ, Ort - **Abschnitt "Delegationen"**: (read-only) Liste der Personen, fuer die man als Stellvertreter eingetragen ist - Falls kein Endpunkt existiert: Platzhalter "Delegationen werden in MS11 verwaltet" ## Nutzt Komponenten aus #67 - PageHeader, FormField (Input), Card, ErrorAlert ## Tests - ccount.test.ts: load-Funktion mit Mock-API, Formular-Actions (PUT) - Testet: Daten werden aus der API geladen, PUT-Action sendet korrekte Daten, Validierungsfehler werden angezeigt ## Akzeptanzkriterien - [ ] Stammdaten werden angezeigt und koennen bearbeitet werden - [ ] Kontaktdaten werden angezeigt und koennen bearbeitet werden - [ ] Nach erfolgreichem Speichern erscheint eine Erfolgsmeldung - [ ] Bei API-Fehlern erscheint ErrorAlert - [ ] 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/medium

type/feature

labels

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

niboer referenced this issue from a commit

2026-06-22 15:39:58 +00:00

test(frontend): Tests fuer Account-Einstellungen

niboer referenced this issue from a commit