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

MS-FE-5: Berechtigungen UI umsetzen #105

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

Aufgaben

  • Composite-Rollen-UI (Rollen erstellen/bearbeiten)
  • Permission-Matrix (Ankreuztabelle)
  • Event-Admin-Vergabe in der Gaesteliste
  • Rollen-Anzeige in der Sidebar

Siehe docs/design/03-autorisierungsmatrix.md (Permission-Matrix).

Umsetzungsplan (3 Commits)

Commit 1: feat(frontend): Composite-Rollen-UI und Permission-Matrix

refs #105

Scope: Neue Registerkarte "Berechtigungen" im Event-Detail mit vollstaendiger Rollen-CRUD.

Aenderungen:

  • +page.svelte: Neuen Tab-Button "Berechtigungen" zwischen "Zahlungsabgleich" und "Formular" einfuegen. Neuer tab === 'bereche'-Zweig.
  • +page.server.ts: Load-Funktion erweitern, sodass eventRoles auch fuer tab === 'bereche' geladen werden (bisher nur fuer guests/payment/form/antworten). Drei neue Actions: createRole, updateRole, deleteRole.
  • Neue RoleEditor-Komponente ($lib/components/role-editor.svelte) mit:
    • Name-Input (@maxLength 50)
    • Permission-Checkboxen (organizer, event-admin) — die "Ankreuztabelle"
    • Oeffnet/schliesst via Dialog
  • Berechtigungen-View: Tabelle mit Spalten: Rollenname, Permissions (als Badges), Aktionen (Bearbeiten/Loeschen)
  • Typecheck+Lint vor Commit
  • Keine DB-Aenderungen (Backend-Endpunkte existieren bereits via #124)
  • Keine i18n-Dateien (werden in MS-FE-6 eingefuehrt)

Tests:

  • events.test.ts: Neue Describe-Blöcke fuer:
    • createRole-Action (Erfolg, Fehler, Validierung)
    • updateRole-Action (Erfolg, Fehler)
    • deleteRole-Action (Erfolg, Fehler)
    • Berechtigungen-Tab existiert in der Komponente
  • Struktur-Tests in events.test.ts:
    • Tab-Button "Berechtigungen" vorhanden
    • switchTab('bereche') vorhanden
    • Role-Liste mit Permission-Badges
    • createRole/updateRole/deleteRole-Formulare

Commit 2: feat(frontend): Event-Admin-Vergabe verbessert

refs #105

Scope: Verbesserung der bestehenden Gast-Rollen-UI in der Gaesteliste.

Aenderungen:

  • +page.svelte: Role-Badge in Gasttabelle (falls compositeRole gesetzt) — neben dem Namen anzeigen.
  • Enhanced Role-Dropdown: Zeigt bei jeder Option die Permission-Badges an (z. B. "Helfer [event-admin]").
  • Star-Toggle bleibt erhalten, wird aber ggf. durch einen Icon-Button mit Tooltip ersetzt.
  • Neue PermissionBadge-Komponente ($lib/components/permission-badge.svelte) fuer wiederverwendbare Anzeige von Permissions.

Tests:

  • Badge-Rendering in Gasttabelle: compositeRole wird als Badge angezeigt
  • PermissionBadge-Komponente existiert
  • Permission-Info im Role-Dropdown

Commit 3: feat(frontend): Rollen-Anzeige in der Sidebar

closes #105

Scope: Anzeige der Keycloak-Composite-Rollen des Users in der Sidebar.

Aenderungen:

  • +layout.server.ts: Zusaetzlich realm_access.roles aus JWT-Payload extrahieren. Neue Rueckgabe-Felder: userRoles: string[].
  • +layout.svelte: userRoles an AppShell weiterreichen.
  • app-shell.svelte: Neues Prop userRoles, an Sidebar weiterreichen.
  • sidebar.svelte: Rollen-Badges unterhalb des User-Infobereichs anzeigen (Permissions wie app-admin, event-admin, template-admin mit passenden Labels).
  • Neues Prop userRoles: string[] mit Default [].

Tests:

  • sidebar.test.ts: Neue Tests fuer Rollen-Anzeige
    • userRoles als Prop akzeptiert
    • Rollen-Badges unterhalb Username
    • Leeres Array zeigt nichts an

Abhaengigkeiten zu anderen Meilensteinen

  • Setzt #124 (EventRole-CRUD Backend) voraus — erledigt
  • Keine DB-Migration notwendig (Backend-Endpunkte + generierte Typen reichen)
  • Rollen-Profil-Teil aus MS-FE-1 (#101) wird hiermit nachgereicht
## Aufgaben - [x] Composite-Rollen-UI (Rollen erstellen/bearbeiten) - [x] Permission-Matrix (Ankreuztabelle) - [x] Event-Admin-Vergabe in der Gaesteliste - [x] Rollen-Anzeige in der Sidebar Siehe docs/design/03-autorisierungsmatrix.md (Permission-Matrix). --- ## Umsetzungsplan (3 Commits) ### Commit 1: `feat(frontend): Composite-Rollen-UI und Permission-Matrix` **refs #105** **Scope:** Neue Registerkarte "Berechtigungen" im Event-Detail mit vollstaendiger Rollen-CRUD. **Aenderungen:** - **`+page.svelte`**: Neuen Tab-Button "Berechtigungen" zwischen "Zahlungsabgleich" und "Formular" einfuegen. Neuer `tab === 'bereche'`-Zweig. - **`+page.server.ts`**: Load-Funktion erweitern, sodass `eventRoles` auch fuer `tab === 'bereche'` geladen werden (bisher nur fuer `guests/payment/form/antworten`). Drei neue Actions: `createRole`, `updateRole`, `deleteRole`. - Neue **`RoleEditor`-Komponente** (`$lib/components/role-editor.svelte`) mit: - Name-Input (@maxLength 50) - Permission-Checkboxen (organizer, event-admin) — die "Ankreuztabelle" - Oeffnet/schliesst via Dialog - **Berechtigungen-View**: Tabelle mit Spalten: Rollenname, Permissions (als Badges), Aktionen (Bearbeiten/Loeschen) - **Typecheck+Lint** vor Commit - **Keine DB-Aenderungen** (Backend-Endpunkte existieren bereits via #124) - **Keine i18n-Dateien** (werden in MS-FE-6 eingefuehrt) **Tests:** - `events.test.ts`: Neue Describe-Blöcke fuer: - `createRole`-Action (Erfolg, Fehler, Validierung) - `updateRole`-Action (Erfolg, Fehler) - `deleteRole`-Action (Erfolg, Fehler) - Berechtigungen-Tab existiert in der Komponente - Struktur-Tests in `events.test.ts`: - Tab-Button "Berechtigungen" vorhanden - `switchTab('bereche')` vorhanden - Role-Liste mit Permission-Badges - createRole/updateRole/deleteRole-Formulare ### Commit 2: `feat(frontend): Event-Admin-Vergabe verbessert` **refs #105** **Scope:** Verbesserung der bestehenden Gast-Rollen-UI in der Gaesteliste. **Aenderungen:** - **`+page.svelte`**: Role-Badge in Gasttabelle (falls `compositeRole` gesetzt) — neben dem Namen anzeigen. - Enhanced Role-Dropdown: Zeigt bei jeder Option die Permission-Badges an (z. B. "Helfer [event-admin]"). - Star-Toggle bleibt erhalten, wird aber ggf. durch einen Icon-Button mit Tooltip ersetzt. - Neue **`PermissionBadge`-Komponente** (`$lib/components/permission-badge.svelte`) fuer wiederverwendbare Anzeige von Permissions. **Tests:** - Badge-Rendering in Gasttabelle: `compositeRole` wird als Badge angezeigt - PermissionBadge-Komponente existiert - Permission-Info im Role-Dropdown ### Commit 3: `feat(frontend): Rollen-Anzeige in der Sidebar` **closes #105** **Scope:** Anzeige der Keycloak-Composite-Rollen des Users in der Sidebar. **Aenderungen:** - **`+layout.server.ts`**: Zusaetzlich `realm_access.roles` aus JWT-Payload extrahieren. Neue Rueckgabe-Felder: `userRoles: string[]`. - **`+layout.svelte`**: `userRoles` an `AppShell` weiterreichen. - **`app-shell.svelte`**: Neues Prop `userRoles`, an `Sidebar` weiterreichen. - **`sidebar.svelte`**: Rollen-Badges unterhalb des User-Infobereichs anzeigen (Permissions wie `app-admin`, `event-admin`, `template-admin` mit passenden Labels). - Neues Prop `userRoles: string[]` mit Default `[]`. **Tests:** - `sidebar.test.ts`: Neue Tests fuer Rollen-Anzeige - `userRoles` als Prop akzeptiert - Rollen-Badges unterhalb Username - Leeres Array zeigt nichts an --- ## Abhaengigkeiten zu anderen Meilensteinen - Setzt #124 (EventRole-CRUD Backend) voraus — **erledigt** - Keine DB-Migration notwendig (Backend-Endpunkte + generierte Typen reichen) - Rollen-Profil-Teil aus MS-FE-1 (#101) wird hiermit nachgereicht
niboer commented 2026-06-28 12:22:09 +02:00
Author
Owner
Copy link

Commit 1 abgeschlossen

5c57bc6 — feat(frontend): Composite-Rollen-UI und Permission-Matrix

Aenderungen:

  • Neue Registerkarte "Berechtigungen" im Event-Detail (tab === 'bereche')
  • PermissionBadge-Komponente ($lib/components/permission-badge.svelte)
  • RoleEditor-Komponente mit Permission-Checkboxen ($lib/components/role-editor.svelte)
  • +page.server.ts: Load-Funktion erweitert fuer bereche-Tab + createRole/updateEventRole/deleteRole Actions
  • Tests: Action-Tests (createRole, updateEventRole, deleteRole) + Struktur-Tests (Tab, PermissionBadge, RoleEditor)

Status: Composite-Rollen-UI und Permission-Matrix abgeschlossen.

Naechster Schritt: Commit 2 — Event-Admin-Vergabe verbessern

## Commit 1 abgeschlossen `5c57bc6` — `feat(frontend): Composite-Rollen-UI und Permission-Matrix` **Aenderungen:** - Neue Registerkarte "Berechtigungen" im Event-Detail (`tab === 'bereche'`) - PermissionBadge-Komponente (`$lib/components/permission-badge.svelte`) - RoleEditor-Komponente mit Permission-Checkboxen (`$lib/components/role-editor.svelte`) - `+page.server.ts`: Load-Funktion erweitert fuer `bereche`-Tab + `createRole`/`updateEventRole`/`deleteRole` Actions - Tests: Action-Tests (createRole, updateEventRole, deleteRole) + Struktur-Tests (Tab, PermissionBadge, RoleEditor) **Status:** Composite-Rollen-UI und Permission-Matrix abgeschlossen. **Naechster Schritt:** Commit 2 — Event-Admin-Vergabe verbessern
niboer commented 2026-06-28 12:27:57 +02:00
Author
Owner
Copy link

Commit 2 abgeschlossen (8f55722) — Event-Admin-Vergabe in Gaesteliste verbessert:

  • Role-Badge (Badge variant=outline) neben Gastnamen in Name-Spalte
  • roleOptions zeigt Permission-Kuerzel (Org, EA) im Label
  • Star-Toggle auf SVG-Icons (filled/outline) statt Unicode-Zeichen
  • Stray-Anfuehrungszeichen in updatePayment-Form entfernt

Starte Commit 3: Rollen-Anzeige in der Sidebar.

**Commit 2 abgeschlossen** (`8f55722`) — Event-Admin-Vergabe in Gaesteliste verbessert: - Role-Badge (Badge variant=outline) neben Gastnamen in Name-Spalte - roleOptions zeigt Permission-Kuerzel (Org, EA) im Label - Star-Toggle auf SVG-Icons (filled/outline) statt Unicode-Zeichen - Stray-Anfuehrungszeichen in updatePayment-Form entfernt Starte Commit 3: Rollen-Anzeige in der Sidebar.
niboer commented 2026-06-28 12:32:29 +02:00
Author
Owner
Copy link

MS-FE-5 abgeschlossen (3 Commits)

Commit 1 (5c57bc6) — Composite-Rollen-UI + Permission-Matrix

  • Neue Registerkarte "Berechtigungen" im Event-Detail
  • PermissionBadge-Komponente fuer Permission-Anzeige
  • RoleEditor-Komponente mit Permission-Checkboxen (organizer, event-admin)
  • createRole/updateEventRole/deleteRole Server Actions

Commit 2 (8f55722) — Event-Admin-Vergabe in Gaesteliste verbessert

  • Role-Badge (Badge variant=outline) neben Gastnamen
  • roleOptions zeigt Permission-Kuerzel (Org, EA) im Label
  • Star-Toggle auf SVG-Icons (filled/outline) statt Unicode-Zeichen

Commit 3 (d5ded47) — Rollen-Anzeige in der Sidebar

  • realm_access.roles aus JWT extrahiert und auf Composite-Rollen gefiltert
  • userRoles-Prop-Durchreichung durch Layout → AppShell → Sidebar
  • Rollen-Badges mit deutschen Labels (App-Admin, Event-Admin, Vorlagen-Admin)
  • 478 Tests, 0 svelte-check-Warnings

closes #105

**MS-FE-5 abgeschlossen** (3 Commits) ### Commit 1 (`5c57bc6`) — Composite-Rollen-UI + Permission-Matrix - Neue Registerkarte "Berechtigungen" im Event-Detail - PermissionBadge-Komponente fuer Permission-Anzeige - RoleEditor-Komponente mit Permission-Checkboxen (organizer, event-admin) - createRole/updateEventRole/deleteRole Server Actions ### Commit 2 (`8f55722`) — Event-Admin-Vergabe in Gaesteliste verbessert - Role-Badge (Badge variant=outline) neben Gastnamen - roleOptions zeigt Permission-Kuerzel (Org, EA) im Label - Star-Toggle auf SVG-Icons (filled/outline) statt Unicode-Zeichen ### Commit 3 (`d5ded47`) — Rollen-Anzeige in der Sidebar - realm_access.roles aus JWT extrahiert und auf Composite-Rollen gefiltert - userRoles-Prop-Durchreichung durch Layout → AppShell → Sidebar - Rollen-Badges mit deutschen Labels (App-Admin, Event-Admin, Vorlagen-Admin) - 478 Tests, 0 svelte-check-Warnings closes #105
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
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#105
No description provided.