refactor(frontend): Actions-Spalte in Personen-Ansicht als Dropdown-Menue wie Gaesteliste #192

New issue

Closed

opened 2026-07-02 22:21:57 +00:00 by niboer · 0 comments

niboer commented

2026-07-02 22:21:57 +00:00

Owner

Einordnung

Status: GESCHLOSSEN — superseded by #193 (ActionMenu-Komponente)
Begruendung: #193 migriert ALLE Actions-Spalten (Event-Detail 3x, Persons, Groups) auf das neue ActionMenu. Die reine Personen-Migration ist darin enthalten.

Beschreibung

Die Actions-Spalte der Personen-Ansicht (frontend/src/routes/app/persons/+page.svelte) zeigt aktuell zwei Inline-Buttons nebeneinander an ("Einladen", "Archivieren"). Dies fuehrt zu Layout-Problemen auf kleinen Bildschirmen und ist inkonsistent zur Gaesteliste im Event-Detail, die ein Dropdown-Menue verwendet.

Ist-Zustand

{:else if col.key === 'actions' && !(row as Person).archivedAt}
  <div class="flex gap-1">
    {#if !(row as Person).hasKeycloakUser}
      <form method="POST" action="?/invite" use:enhance>
        <input type="hidden" name="personId" value={(row as Person).personId} />
        <Button type="submit" variant="outline" size="sm">{t('persons.invite')}</Button>
      </form>
    {/if}
    <form method="POST" action="?/archive" use:enhance>
      <input type="hidden" name="personId" value={(row as Person).personId} />
      <Button type="submit" variant="outline" size="sm">{t('persons.archive')}</Button>
    </form>
  </div>
{/if}

Soll-Zustand

Die Actions-Spalte soll ein Dropdown-Menue mit Drei-Punkt-Button (•••) enthalten, analog zur Gaesteliste in frontend/src/routes/app/events/[eventId]/+page.svelte:946-1035:

Menuepunkte: "Einladen" (nur wenn !hasKeycloakUser), "Archivieren" (nur wenn !archivedAt)
Layout: Fixed-Positionierung via getBoundingClientRect, Backdrop-zum-Schliessen
i18n: Bereits vorhandene Keys t('persons.invite'), t('persons.archive') nutzen
Optionale Erweiterung: "Einladung erneut senden" fuers erneute Keycloak-Invite

Nach Extraktion einer standardisierten ActionMenu-Komponente (siehe Folge-Issue) soll die Personen-Ansicht diese Komponente verwenden.

Dateien

frontend/src/routes/app/persons/+page.svelte — Actions-Spalte (Z. 130-137)
frontend/src/routes/app/events/[eventId]/+page.svelte — Referenzimplementierung (Z. 946-1035)
frontend/src/routes/app/persons/+page.server.ts — Actions invite und archive (bestehen bereits)

## Einordnung - **Status:** GESCHLOSSEN — superseded by #193 (ActionMenu-Komponente) - **Begruendung:** #193 migriert ALLE Actions-Spalten (Event-Detail 3x, Persons, Groups) auf das neue ActionMenu. Die reine Personen-Migration ist darin enthalten. ## Beschreibung Die Actions-Spalte der Personen-Ansicht (`frontend/src/routes/app/persons/+page.svelte`) zeigt aktuell zwei Inline-Buttons nebeneinander an ("Einladen", "Archivieren"). Dies fuehrt zu Layout-Problemen auf kleinen Bildschirmen und ist inkonsistent zur Gaesteliste im Event-Detail, die ein Dropdown-Menue verwendet. ## Ist-Zustand ```svelte {:else if col.key === 'actions' && !(row as Person).archivedAt} <div class="flex gap-1"> {#if !(row as Person).hasKeycloakUser} <form method="POST" action="?/invite" use:enhance> <input type="hidden" name="personId" value={(row as Person).personId} /> <Button type="submit" variant="outline" size="sm">{t('persons.invite')}</Button> </form> {/if} <form method="POST" action="?/archive" use:enhance> <input type="hidden" name="personId" value={(row as Person).personId} /> <Button type="submit" variant="outline" size="sm">{t('persons.archive')}</Button> </form> </div> {/if} ``` ## Soll-Zustand Die Actions-Spalte soll ein Dropdown-Menue mit Drei-Punkt-Button (`•••`) enthalten, analog zur Gaesteliste in `frontend/src/routes/app/events/[eventId]/+page.svelte:946-1035`: - **Menuepunkte:** "Einladen" (nur wenn `!hasKeycloakUser`), "Archivieren" (nur wenn `!archivedAt`) - **Layout:** Fixed-Positionierung via `getBoundingClientRect`, Backdrop-zum-Schliessen - **i18n:** Bereits vorhandene Keys `t('persons.invite')`, `t('persons.archive')` nutzen - **Optionale Erweiterung:** "Einladung erneut senden" fuers erneute Keycloak-Invite Nach Extraktion einer standardisierten `ActionMenu`-Komponente (siehe Folge-Issue) soll die Personen-Ansicht diese Komponente verwenden. ## Dateien - `frontend/src/routes/app/persons/+page.svelte` — Actions-Spalte (Z. 130-137) - `frontend/src/routes/app/events/[eventId]/+page.svelte` — Referenzimplementierung (Z. 946-1035) - `frontend/src/routes/app/persons/+page.server.ts` — Actions `invite` und `archive` (bestehen bereits)

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

2026-07-02 22:21:57 +00:00

niboer added the

component/frontend

prio/medium

type/refactor

labels

2026-07-02 22:21:57 +00:00

niboer referenced this issue

2026-07-02 22:43:28 +00:00

refactor(frontend): ActionMenu als standardisierte Komponente (DRY) + Rule: Keine Inline-Buttons #193

niboer closed this issue