WompSchmiede/FamilienFeierPlaner
SHA256
1
1
Fork 0
Code Issues 18 Pull requests Projects Releases 5 Packages 3 Wiki Activity Actions

MS-FE-3: Events UI umsetzen #103

New issue
Closed
opened 2026-06-23 21:03:56 +00:00 by niboer · 2 comments
niboer commented 2026-06-23 21:03:56 +00:00
Owner
Copy link

Aufgaben

Backend-Endpunkte sind vollstaendig implementiert (MS-BE-API-2 bis MS-BE-API-4). Das Frontend baut auf MS-FE-1-Events-Grundstruktur auf.

Umsetzungsplan (Stand 2026-06-27)

# Commit Inhalt Tests Status
1 chore(frontend): Orval-Typen fuer MS-FE-3 regeneriert npm run generate:api, Typen auf Vollstaendigkeit prüfen Typ-Konsistenz in events.test.ts offen
2 feat(frontend): Gaesteliste um Gruppen-Anzeige und Haushalts-Kontext erweitert +page.server.ts: /api/v1/groups laden; +page.svelte: "Haushalt"-Spalte, groupId→groupName-Mapping Load: groups geladen; Page: Haushalt-Spalte offen
3 feat(frontend): Composite-Rollen-Auswahl und Event-Admin-Vergabe in Gaesteliste +page.server.ts: roles laden, updateRole-Action; +page.svelte: Rollen-Dropdown, Event-Admin-Quick-Action Load: roles geladen; Action: updateRole; Page: Dropdown offen
4 feat(frontend): Haushaltsweiser Gast-Status (closes #103) Batch-Aktion fuer Haushalte, visuelle Gruppierung, closes #103 Batch-Action, Gruppierungs-Rendering offen

Details im Umsetzungsplan-Kommentar.

Ueberschneidungen

  • MS-FE-5 (#105): "Event-Admin-Vergabe in der Gaesteliste" ist in beiden Issues gelistet. MS-FE-3 implementiert grundlegende Rollen-Auswahl per Dropdown. MS-FE-5 erweitert um Permission-Matrix und Rollen-CRUD.
  • Kein neues DB-Schema oder API-Endpunkt: Alle benoetigten APIs sind vorhanden.
## Aufgaben Backend-Endpunkte sind vollstaendig implementiert (MS-BE-API-2 bis MS-BE-API-4). Das Frontend baut auf MS-FE-1-Events-Grundstruktur auf. ### Umsetzungsplan (Stand 2026-06-27) | # | Commit | Inhalt | Tests | Status | |---|--------|--------|-------|--------| | 1 | `chore(frontend): Orval-Typen fuer MS-FE-3 regeneriert` | `npm run generate:api`, Typen auf Vollstaendigkeit prüfen | Typ-Konsistenz in events.test.ts | offen | | 2 | `feat(frontend): Gaesteliste um Gruppen-Anzeige und Haushalts-Kontext erweitert` | +page.server.ts: `/api/v1/groups` laden; +page.svelte: "Haushalt"-Spalte, groupId→groupName-Mapping | Load: groups geladen; Page: Haushalt-Spalte | offen | | 3 | `feat(frontend): Composite-Rollen-Auswahl und Event-Admin-Vergabe in Gaesteliste` | +page.server.ts: roles laden, `updateRole`-Action; +page.svelte: Rollen-Dropdown, Event-Admin-Quick-Action | Load: roles geladen; Action: updateRole; Page: Dropdown | offen | | 4 | `feat(frontend): Haushaltsweiser Gast-Status (closes #103)` | Batch-Aktion fuer Haushalte, visuelle Gruppierung, closes #103 | Batch-Action, Gruppierungs-Rendering | offen | Details im [Umsetzungsplan-Kommentar](https://git.gs-woa.hopto.org/niboer/FamilienFeierPlaner/issues/103#issuecomment-1096). ### Ueberschneidungen - **MS-FE-5 (#105):** "Event-Admin-Vergabe in der Gaesteliste" ist in beiden Issues gelistet. MS-FE-3 implementiert grundlegende Rollen-Auswahl per Dropdown. MS-FE-5 erweitert um Permission-Matrix und Rollen-CRUD. - **Kein neues DB-Schema oder API-Endpunkt:** Alle benoetigten APIs sind vorhanden.
niboer added this to the MS-FE-3: Events milestone 2026-06-23 21:03:56 +00:00
niboer commented 2026-06-27 16:53:27 +00:00
Author
Owner
Copy link

Umsetzungsplan (Stand 2026-06-27)

Backend-Voraussetzungen

Saemtliche Backend-Endpunkte sind bereits implementiert (MS-BE-API-2 bis MS-BE-API-4):

  • GET /api/v1/events/{id}/guests — Gaesteliste mit groupId und compositeRole
  • GET /api/v1/events/{id}/roles — Event-Rollen-Liste (EventRole[])
  • PUT /api/v1/events/{id}/guests/{pid}/role — Gast-Rolle setzen (UpdateGuestRole)
  • GET /api/v1/groups — Gruppen-Liste fuer Haushaltsnamen

Kein neues DB-Schema oder API-Endpunkt noetig.

Bereits erledigt (MS-FE-1 #101)

  • Event-Liste mit Status-Badge (planning/published)
  • Event-Detail mit Planning/Publish-Umschalter
  • Gast-CRUD (hinzufuegen, entfernen, Status, Zahlung)
  • Zahlungsabgleich-Tab

Schritt-fuer-Schritt-Plan

# Commit Inhalt Tests
1 chore(frontend): Orval-Typen fuer MS-FE-3 regeneriert npm run generate:api — sicherstellen dass Guest.groupId, Guest.compositeRole, EventRole, GuestRoleResponse, UpdateGuestRole, Group korrekt generiert sind Typ-Konsistenz in events.test.ts
2 feat(frontend): Gaesteliste um Gruppen-Anzeige und Haushalts-Kontext erweitert +page.server.ts: zusaetzlich /api/v1/groups laden; +page.svelte: Spalte "Haushalt" in Guest-DataTable, Mapping groupId -> groupName, visuelle Gruppierung nach Haushalt Load: groups werden geladen; Page: "Haushalt"-Spalte existiert
3 feat(frontend): Composite-Rollen-Auswahl und Event-Admin-Vergabe in Gaesteliste +page.server.ts: /api/v1/events/{id}/roles laden; Actions: updateRole (PUT role); +page.svelte: Rollen-Dropdown in Guest-Aktionen, Quick-Action fuer Event-Admin-Vergabe Load: roles werden geladen; Action: updateRole sendet PUT; Page: Dropdown und Quick-Action
4 feat(frontend): Haushaltsweiser Gast-Status (closes #103) Batch-Aktion: alle Haushaltsmitglieder gleichzeitig confirm/decline; visuelle Gruppierung mit Household-Header; closes #103 Batch-Action-Logik, Gruppierungs-Rendering

Detaillierte Commit-Beschreibungen

Commit 1: Orval-Typen regeneriert

  • npm run generate:api ausfuehren
  • generated.ts auf Vollstaendigkeit pruefen (Guest, EventRole, Group, GuestRoleResponse, UpdateGuestRole)
  • api-conventions.test.ts ggf. anpassen
  • Bestehende Tests muessen gruen bleiben

Commit 2: Gruppen-Anzeige + Haushalts-Kontext

+page.server.ts Aenderungen:

  • Zusaetzlicher API-Call: fetch('/api/v1/groups') → groups: Group[]
  • groups im Return-Objekt an die Page uebergeben

+page.svelte Aenderungen:

  • groups aus data laden
  • Spalte { key: 'group', label: 'Haushalt', sortable: true } in guest DataTable
  • Children-Snippet: bei col.key === 'group' groupId via groups.find() aufloesen
  • Ohne Haushalt: "—" anzeigen
  • DataTable-Sortierung auf groupName stuetzen (custom sort function)

events.test.ts:

  • Load-Test: mock fuer /api/v1/groups mit Testdaten
  • Page-Test: "Haushalt"-Spalte und "groups"-Import checken

Commit 3: Composite-Rollen + Event-Admin-Vergabe

+page.server.ts Aenderungen:

  • Zusaetzlicher API-Call: fetch('/api/v1/events/{eventId}/roles') → eventRoles: EventRole[]
  • Neue Action updateRole:
    • Liest personId und compositeRole aus FormData
    • Validiert: compositeRole muss UUID oder leer sein
    • Sendet PUT /api/v1/events/{eventId}/guests/{personId}/role mit { compositeRole: uuid | null }
    • Gibt 400 bei fehlender personId, 403 bei fehlender Berechtigung zurueck

+page.svelte Aenderungen:

  • eventRoles aus data laden
  • Rollen-Dropdown in guest actions (neben Status/Payment): 
    <form method="POST" action="?/updateRole" use:enhance>
  <input type="hidden" name="personId" value={guest.personId} />
  <select name="compositeRole" onchange="...form.requestSubmit()">
    <option value="">Keine Rolle</option>
    {#each eventRoles as role}
      <option value={role.roleId} selected={guest.compositeRole === role.roleId}>
        {role.name}
      </option>
    {/each}
  </select>
</form>
  • Event-Admin-Vergabe: Schnell-Button bei Rollen mit permissions.includes('event-admin')

events.test.ts:

  • Load-Test: mock fuer /api/v1/events/{id}/roles mit Test-EventRoles
  • Action-Test: updateRole mit gueltigen/ungueltigen Daten
  • Page-Test: "updateRole", "compositeRole", "Keine Rolle" in Komponente

Commit 4: Haushaltsweiser Gast-Status (closes #103)

+page.svelte Aenderungen:

  • DataTable in Sections pro Haushalt aufteilen
  • Household-Header: "Haushalt: [Name]" mit Batch-Aktionen
  • Batch-Aktion: Set-Status-Button fuer alle Haushaltsmitglieder
    • Ein "Alle zu-/absagen"-Button pro Haushalt
    • Sendet updateStatus fuer jede Person im Haushalt nacheinander

Hinweis: Batch-Aktion muss mehrere API-Calls taetigen. Bei Bedarf koennte spaeter ein Backend-Endpunkt PUT /events/{id}/guests/batch-status ergaenzt werden (MS-REST).

events.test.ts:

  • Page-Test: Batch-Buttons, Household-Header
  • Action-Tests bleiben wie in Commit 3

Abhaengigkeiten und Ueberschneidungen

  • Ueberschneidung mit MS-FE-5 (#105): "Event-Admin-Vergabe in der Gaesteliste" ist in beiden Issues gelistet. MS-FE-3 implementiert die grundlegende Rollen-Auswahl per Dropdown. MS-FE-5 erweitert um vollstaendige Permission-Matrix und Rollen-CRUD.
  • Keine Abhaengigkeit von MS-FE-4 oder MS-FE-5: MS-FE-3 kann unabhaengig umgesetzt werden.
  • Keine neuen Backend-Endpunkte noetig: Alle benoetigten APIs sind bereits in MS-BE-API-2 bis MS-BE-API-4 implementiert.
## Umsetzungsplan (Stand 2026-06-27) ### Backend-Voraussetzungen Saemtliche Backend-Endpunkte sind bereits implementiert (MS-BE-API-2 bis MS-BE-API-4): - `GET /api/v1/events/{id}/guests` — Gaesteliste mit `groupId` und `compositeRole` - `GET /api/v1/events/{id}/roles` — Event-Rollen-Liste (`EventRole[]`) - `PUT /api/v1/events/{id}/guests/{pid}/role` — Gast-Rolle setzen (`UpdateGuestRole`) - `GET /api/v1/groups` — Gruppen-Liste fuer Haushaltsnamen Kein neues DB-Schema oder API-Endpunkt noetig. ### Bereits erledigt (MS-FE-1 #101) - Event-Liste mit Status-Badge (planning/published) - Event-Detail mit Planning/Publish-Umschalter - Gast-CRUD (hinzufuegen, entfernen, Status, Zahlung) - Zahlungsabgleich-Tab ### Schritt-fuer-Schritt-Plan | # | Commit | Inhalt | Tests | |---|--------|--------|-------| | 1 | `chore(frontend): Orval-Typen fuer MS-FE-3 regeneriert` | `npm run generate:api` — sicherstellen dass `Guest.groupId`, `Guest.compositeRole`, `EventRole`, `GuestRoleResponse`, `UpdateGuestRole`, `Group` korrekt generiert sind | Typ-Konsistenz in events.test.ts | | 2 | `feat(frontend): Gaesteliste um Gruppen-Anzeige und Haushalts-Kontext erweitert` | `+page.server.ts`: zusaetzlich `/api/v1/groups` laden; `+page.svelte`: Spalte "Haushalt" in Guest-DataTable, Mapping `groupId` -> `groupName`, visuelle Gruppierung nach Haushalt | Load: groups werden geladen; Page: "Haushalt"-Spalte existiert | | 3 | `feat(frontend): Composite-Rollen-Auswahl und Event-Admin-Vergabe in Gaesteliste` | `+page.server.ts`: `/api/v1/events/{id}/roles` laden; Actions: `updateRole` (PUT role); `+page.svelte`: Rollen-Dropdown in Guest-Aktionen, Quick-Action fuer Event-Admin-Vergabe | Load: roles werden geladen; Action: `updateRole` sendet PUT; Page: Dropdown und Quick-Action | | 4 | `feat(frontend): Haushaltsweiser Gast-Status (closes #103)` | Batch-Aktion: alle Haushaltsmitglieder gleichzeitig confirm/decline; visuelle Gruppierung mit Household-Header; closes #103 | Batch-Action-Logik, Gruppierungs-Rendering | ### Detaillierte Commit-Beschreibungen #### Commit 1: Orval-Typen regeneriert - `npm run generate:api` ausfuehren - generated.ts auf Vollstaendigkeit pruefen (Guest, EventRole, Group, GuestRoleResponse, UpdateGuestRole) - api-conventions.test.ts ggf. anpassen - Bestehende Tests muessen gruen bleiben #### Commit 2: Gruppen-Anzeige + Haushalts-Kontext **+page.server.ts Aenderungen:** - Zusaetzlicher API-Call: `fetch('/api/v1/groups')` → `groups: Group[]` - `groups` im Return-Objekt an die Page uebergeben **+page.svelte Aenderungen:** - `groups` aus data laden - Spalte `{ key: 'group', label: 'Haushalt', sortable: true }` in guest DataTable - Children-Snippet: bei `col.key === 'group'` groupId via `groups.find()` aufloesen - Ohne Haushalt: "—" anzeigen - DataTable-Sortierung auf groupName stuetzen (custom sort function) **events.test.ts:** - Load-Test: mock fuer `/api/v1/groups` mit Testdaten - Page-Test: `"Haushalt"`-Spalte und `"groups"`-Import checken #### Commit 3: Composite-Rollen + Event-Admin-Vergabe **+page.server.ts Aenderungen:** - Zusaetzlicher API-Call: `fetch('/api/v1/events/{eventId}/roles')` → `eventRoles: EventRole[]` - Neue Action `updateRole`: - Liest `personId` und `compositeRole` aus FormData - Validiert: `compositeRole` muss UUID oder leer sein - Sendet `PUT /api/v1/events/{eventId}/guests/{personId}/role` mit `{ compositeRole: uuid | null }` - Gibt 400 bei fehlender personId, 403 bei fehlender Berechtigung zurueck **+page.svelte Aenderungen:** - `eventRoles` aus data laden - Rollen-Dropdown in guest actions (neben Status/Payment): ```html <form method="POST" action="?/updateRole" use:enhance> <input type="hidden" name="personId" value={guest.personId} /> <select name="compositeRole" onchange="...form.requestSubmit()"> <option value="">Keine Rolle</option> {#each eventRoles as role} <option value={role.roleId} selected={guest.compositeRole === role.roleId}> {role.name} </option> {/each} </select> </form> ``` - Event-Admin-Vergabe: Schnell-Button bei Rollen mit `permissions.includes('event-admin')` **events.test.ts:** - Load-Test: mock fuer `/api/v1/events/{id}/roles` mit Test-EventRoles - Action-Test: `updateRole` mit gueltigen/ungueltigen Daten - Page-Test: "updateRole", "compositeRole", "Keine Rolle" in Komponente #### Commit 4: Haushaltsweiser Gast-Status (closes #103) **+page.svelte Aenderungen:** - DataTable in Sections pro Haushalt aufteilen - Household-Header: "Haushalt: [Name]" mit Batch-Aktionen - Batch-Aktion: Set-Status-Button fuer alle Haushaltsmitglieder - Ein "Alle zu-/absagen"-Button pro Haushalt - Sendet `updateStatus` fuer jede Person im Haushalt nacheinander **Hinweis:** Batch-Aktion muss mehrere API-Calls taetigen. Bei Bedarf koennte spaeter ein Backend-Endpunkt `PUT /events/{id}/guests/batch-status` ergaenzt werden (MS-REST). **events.test.ts:** - Page-Test: Batch-Buttons, Household-Header - Action-Tests bleiben wie in Commit 3 ### Abhaengigkeiten und Ueberschneidungen - **Ueberschneidung mit MS-FE-5 (#105):** "Event-Admin-Vergabe in der Gaesteliste" ist in beiden Issues gelistet. MS-FE-3 implementiert die grundlegende Rollen-Auswahl per Dropdown. MS-FE-5 erweitert um vollstaendige Permission-Matrix und Rollen-CRUD. - **Keine Abhaengigkeit von MS-FE-4 oder MS-FE-5:** MS-FE-3 kann unabhaengig umgesetzt werden. - **Keine neuen Backend-Endpunkte noetig:** Alle benoetigten APIs sind bereits in MS-BE-API-2 bis MS-BE-API-4 implementiert.
niboer commented 2026-06-27 17:03:23 +00:00
Author
Owner
Copy link

Umsetzungsfortschritt

Commit 1+2 abgeschlossen (7e478f4)

Commit-Titel: feat(frontend): Gaesteliste um Gruppen-Anzeige und Haushalts-Kontext erweitert

Enthaelt:

  • Orval-Regeneration: npm run generate:api ausgefuehrt, generated.ts bereits aktuell (keine Aenderungen)
  • +page.server.ts: /api/v1/groups wird im Guests/Payment-Tab geladen und als groups an die Page uebergeben
  • +page.svelte: Haushalt-Spalte (label: 'Haushalt') in Guest-DataTable, groupName-Funktion fuer groupId->groupName-Mapping, Spalte auch im Zahlungsabgleich-Tab
  • events.test.ts: Load-Test fuer groups im Guests-Tab, Page-Tests fuer Haushalt-Spalte und Group-Import

Naechste Schritte: Commit 3 — Composite-Rollen-Auswahl und Event-Admin-Vergabe

## Umsetzungsfortschritt ### Commit 1+2 abgeschlossen (`7e478f4`) **Commit-Titel:** `feat(frontend): Gaesteliste um Gruppen-Anzeige und Haushalts-Kontext erweitert` **Enthaelt:** - Orval-Regeneration: `npm run generate:api` ausgefuehrt, generated.ts bereits aktuell (keine Aenderungen) - `+page.server.ts`: `/api/v1/groups` wird im Guests/Payment-Tab geladen und als `groups` an die Page uebergeben - `+page.svelte`: Haushalt-Spalte (`label: 'Haushalt'`) in Guest-DataTable, groupName-Funktion fuer groupId->groupName-Mapping, Spalte auch im Zahlungsabgleich-Tab - `events.test.ts`: Load-Test fuer groups im Guests-Tab, Page-Tests fuer Haushalt-Spalte und Group-Import **Naechste Schritte:** Commit 3 — Composite-Rollen-Auswahl und Event-Admin-Vergabe
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
v0.5.0
v0.4.0
v0.3.0
v0.2.2
v0.2.1
v0.2.0
v0.1.0
Labels
Clear labels   
component/backend
Backend-Komponente

  
component/docs
Dokumentation (README, design.md, AGENTS.md)

  
component/e2e
E2E-Testinfrastruktur (Playwright, Docker-E2E-Runner)

  
component/frontend
Frontend (Cloudflare Worker, BFF, UI)

  
component/infra
Infrastruktur (Docker, CI/CD, Build)

  
component/keycloak
Keycloak (Realm, Theme, Admin API)

  
prio/high
Hohe Prioritaet (blockierend/kritisch)

  
prio/low
Niedrige Prioritaet

  
prio/medium
Mittlere Prioritaet

  
type/bug
Fehler oder unerwartetes Verhalten

  
type/chore
Wartungs- und Konfigurationsaufgaben

  
type/feature
Neues Feature

  
type/refactor
Refactoring

  
type/test
Tests

No labels
component/backend
component/docs
component/e2e
component/frontend
component/infra
component/keycloak
prio/high
prio/low
prio/medium
type/bug
type/chore
type/feature
type/refactor
type/test
Milestone
Clear milestone
No items
No milestone
MS-FE-3: Events
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
WompSchmiede/FamilienFeierPlaner#103
No description provided.