refactor(frontend): ersetze Inline-Buttons durch ActionMenu in DataTables #219

New issue

Closed

opened 2026-07-04 11:48:21 +00:00 by niboer · 0 comments

niboer commented

2026-07-04 11:48:21 +00:00

Owner

Beschreibung

Laut frontend/AGENTS.md duerfen Actions-Spalten in DataTables ausschliesslich das ActionMenu (drei Punkte •••) verwenden.
In fuenf Dateien werden noch alte Inline-Buttons (<Button>) statt <ActionMenu> verwendet.

Betroffene Dateien und Aenderungen

1. `frontend/src/routes/app/groups/+page.svelte` (Zeilen 92-95)

Aktuell: <Button> Bearbeiten + <Button> Loeschen
Neu: <ActionMenu> mit zwei Items:

"Bearbeiten" per onClick: () => openEdit(row as Group)
"Loeschen" als type: 'submit', action: '?/delete' oder per onClick: () => openDelete(row as Group), variant: 'destructive'

2. `frontend/src/routes/app/groups/[groupId]/+page.svelte` (Zeilen 157-166)

Aktuell: Form + <Button> Genehmigen + <Button> Ablehnen
Neu: <ActionMenu> (bereits importiert fuer Mitglieder-Table) mit zwei submit-Items:

"Genehmigen": type: 'submit', action: '?/approveJoin', fields: [{ name: 'personId', value: ... }]
"Ablehnen": Wie oben, aber action: '?/rejectJoin', variant: 'destructive'

3. `frontend/src/routes/app/templates/+page.svelte` (Zeilen 92-97)

Aktuell: <a> + <Button> Bearbeiten + <Button> Loeschen
Neu: <ActionMenu> importieren mit zwei Items:

"Bearbeiten" per href: '/app/templates/${id}'
"Loeschen" per onClick: () => openDelete(row as Template), variant: 'destructive'

4. `frontend/src/routes/app/events/[eventId]/+page.svelte` (Zeilen 1212-1227)

Aktuell: <Button> Bearbeiten + <Button> Loeschen (Event-Rollen-Table)
Neu: <ActionMenu> (bereits importiert fuer Gaestetable) mit zwei Items:

"Bearbeiten" per onClick: () => (editingRole = row as EventRole)
"Loeschen" per onClick: () => (showDeleteConfirm = row as EventRole), variant: 'destructive'

5. `frontend/src/routes/app/deletion-requests/+page.svelte` (Zeilen 122-135)

Aktuell: <Button> Genehmigen + <Button> Ablehnen (nur bei status === 'pending')
Neu: <ActionMenu> importieren. Die Bedingung {#if status === 'pending'} bleibt erhalten; im pending-Fall wird <ActionMenu> mit zwei Items gerendert:

"Genehmigen" per onClick: () => openConfirm(row, 'approve')
"Ablehnen" per onClick: () => openConfirm(row, 'reject'), variant: 'destructive'

Referenz

Bereits migrierte Beispiele (als Vorlage):

frontend/src/routes/app/persons/+page.svelte (Zeilen 122-134)
frontend/src/routes/app/groups/[groupId]/+page.svelte (Mitglieder-Table, Zeilen 132-137)
frontend/src/routes/app/events/[eventId]/+page.svelte (Gaestetable, Zeilen 929-958)

Akzeptanzkriterien

Alle fuenf Dateien verwenden <ActionMenu> statt <Button> in der Actions-Spalte
Alte Button-Importe sind entfernt, wo sie nicht mehr benoetigt werden
npm run test laeuft ohne Fehler
npm run build ist erfolgreich

## Beschreibung Laut `frontend/AGENTS.md` duerfen Actions-Spalten in DataTables ausschliesslich das `ActionMenu` (drei Punkte `•••`) verwenden. In fuenf Dateien werden noch alte Inline-Buttons (`<Button>`) statt `<ActionMenu>` verwendet. ## Betroffene Dateien und Aenderungen ### 1. `frontend/src/routes/app/groups/+page.svelte` (Zeilen 92-95) **Aktuell:** `<Button>` Bearbeiten + `<Button>` Loeschen **Neu:** `<ActionMenu>` mit zwei Items: - "Bearbeiten" per `onClick: () => openEdit(row as Group)` - "Loeschen" als `type: 'submit', action: '?/delete'` oder per `onClick: () => openDelete(row as Group)`, `variant: 'destructive'` ### 2. `frontend/src/routes/app/groups/[groupId]/+page.svelte` (Zeilen 157-166) **Aktuell:** Form + `<Button>` Genehmigen + `<Button>` Ablehnen **Neu:** `<ActionMenu>` (bereits importiert fuer Mitglieder-Table) mit zwei submit-Items: - "Genehmigen": `type: 'submit', action: '?/approveJoin', fields: [{ name: 'personId', value: ... }]` - "Ablehnen": Wie oben, aber `action: '?/rejectJoin', variant: 'destructive'` ### 3. `frontend/src/routes/app/templates/+page.svelte` (Zeilen 92-97) **Aktuell:** `<a>` + `<Button>` Bearbeiten + `<Button>` Loeschen **Neu:** `<ActionMenu>` importieren mit zwei Items: - "Bearbeiten" per `href: '/app/templates/${id}'` - "Loeschen" per `onClick: () => openDelete(row as Template)`, `variant: 'destructive'` ### 4. `frontend/src/routes/app/events/[eventId]/+page.svelte` (Zeilen 1212-1227) **Aktuell:** `<Button>` Bearbeiten + `<Button>` Loeschen (Event-Rollen-Table) **Neu:** `<ActionMenu>` (bereits importiert fuer Gaestetable) mit zwei Items: - "Bearbeiten" per `onClick: () => (editingRole = row as EventRole)` - "Loeschen" per `onClick: () => (showDeleteConfirm = row as EventRole)`, `variant: 'destructive'` ### 5. `frontend/src/routes/app/deletion-requests/+page.svelte` (Zeilen 122-135) **Aktuell:** `<Button>` Genehmigen + `<Button>` Ablehnen (nur bei `status === 'pending'`) **Neu:** `<ActionMenu>` importieren. Die Bedingung `{#if status === 'pending'}` bleibt erhalten; im pending-Fall wird `<ActionMenu>` mit zwei Items gerendert: - "Genehmigen" per `onClick: () => openConfirm(row, 'approve')` - "Ablehnen" per `onClick: () => openConfirm(row, 'reject')`, `variant: 'destructive'` ## Referenz Bereits migrierte Beispiele (als Vorlage): - `frontend/src/routes/app/persons/+page.svelte` (Zeilen 122-134) - `frontend/src/routes/app/groups/[groupId]/+page.svelte` (Mitglieder-Table, Zeilen 132-137) - `frontend/src/routes/app/events/[eventId]/+page.svelte` (Gaestetable, Zeilen 929-958) ## Akzeptanzkriterien - [ ] Alle fuenf Dateien verwenden `<ActionMenu>` statt `<Button>` in der Actions-Spalte - [ ] Alte Button-Importe sind entfernt, wo sie nicht mehr benoetigt werden - [ ] `npm run test` laeuft ohne Fehler - [ ] `npm run build` ist erfolgreich

niboer added this to the MS-REST: Restliche Aufgaben milestone

2026-07-04 11:48:21 +00:00

niboer added the

component/frontend

type/refactor

labels

2026-07-04 11:48:21 +00:00

niboer referenced this issue from a commit

2026-07-05 19:22:57 +00:00

refactor(frontend): ersetze Inline-Buttons durch ActionMenu in DataTables

niboer referenced this issue from a commit

2026-07-05 19:26:18 +00:00