refactor(frontend): Zentrale Personen-Spaltendefinition fuer persons- und groups-Tabellen #198

New issue

Closed

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

niboer commented

2026-07-02 22:41:41 +00:00

Owner

Einordnung

Position: 4 (Phase B, nach Phase A)
Benötigt: #197 (joinedAt entfernen — groups-Tabelle muss erst sauber sein)
Wird benötigt von: #195 (PersonEditModal in groups braucht zentrale Spalten)

Beschreibung

Die Personen-Tabelle in app/persons und die Mitglieder-Tabelle in app/groups/{id} haben groesstenteils identische Spalten (name, status, createdAt, user, actions). Aktuell sind die Spaltendefinitionen in jeder Seite separat hardcodiert.

Eine zentrale Definition verhindert Inkonsistenzen und erleichtert zukuenftige Aenderungen (z. B. neue Spalte hinzufuegen).

Soll-Zustand

Neue Datei: `frontend/src/lib/config/person-table.ts`

export const PERSON_TABLE_COLUMNS = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'status', label: 'Status', sortable: true },
  { key: 'createdAt', label: 'Erstellt am', sortable: true },
  { key: 'user', label: 'Benutzer', sortable: false },
  { key: 'actions', label: '', sortable: false },
];

// groups-Tabelle = Personen-Spalten + Consent vor actions
export const GROUP_MEMBER_COLUMNS = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'status', label: 'Status', sortable: true },
  { key: 'createdAt', label: 'Erstellt am', sortable: true },
  { key: 'user', label: 'Benutzer', sortable: false },
  { key: 'consent', label: 'Zustimmung', sortable: true },
  { key: 'actions', label: '', sortable: false },
];

Integration in `persons/+page.svelte`

import { PERSON_TABLE_COLUMNS } from '$lib/config/person-table.ts';

<DataTable columns={PERSON_TABLE_COLUMNS} data={persons}>
  {#snippet children(col, row)}
    ...
  {/snippet}
</DataTable>

Integration in `groups/[groupId]/+page.svelte`

import { GROUP_MEMBER_COLUMNS } from '$lib/config/person-table.ts';

<DataTable columns={GROUP_MEMBER_COLUMNS} data={members}>
  {#snippet children(col, row)}
    ...
  {/snippet}
</DataTable>

Der children-Snippet bleibt seiten-spezifisch, da das Rendering pro Spalte variiert (Link-Ziele, Badges etc.). Nur die Column-Definition (Keys, Labels, Sortierbarkeit) wird zentralisiert.

Dateien

Datei	Aenderung
`frontend/src/lib/config/person-table.ts`	Neu — zentrale Spaltendefinitionen
`frontend/src/routes/app/persons/+page.svelte`	`columns={...}` durch Import ersetzen
`frontend/src/routes/app/groups/[groupId]/+page.svelte`	`columns={...}` durch Import ersetzen

## Einordnung - **Position:** 4 (Phase B, nach Phase A) - **Benötigt:** #197 (`joinedAt` entfernen — groups-Tabelle muss erst sauber sein) - **Wird benötigt von:** #195 (PersonEditModal in groups braucht zentrale Spalten) ## Beschreibung Die Personen-Tabelle in `app/persons` und die Mitglieder-Tabelle in `app/groups/{id}` haben groesstenteils identische Spalten (name, status, createdAt, user, actions). Aktuell sind die Spaltendefinitionen in jeder Seite separat hardcodiert. Eine zentrale Definition verhindert Inkonsistenzen und erleichtert zukuenftige Aenderungen (z. B. neue Spalte hinzufuegen). --- ## Soll-Zustand ### Neue Datei: `frontend/src/lib/config/person-table.ts` ```typescript export const PERSON_TABLE_COLUMNS = [ { key: 'name', label: 'Name', sortable: true }, { key: 'status', label: 'Status', sortable: true }, { key: 'createdAt', label: 'Erstellt am', sortable: true }, { key: 'user', label: 'Benutzer', sortable: false }, { key: 'actions', label: '', sortable: false }, ]; // groups-Tabelle = Personen-Spalten + Consent vor actions export const GROUP_MEMBER_COLUMNS = [ { key: 'name', label: 'Name', sortable: true }, { key: 'status', label: 'Status', sortable: true }, { key: 'createdAt', label: 'Erstellt am', sortable: true }, { key: 'user', label: 'Benutzer', sortable: false }, { key: 'consent', label: 'Zustimmung', sortable: true }, { key: 'actions', label: '', sortable: false }, ]; ``` ### Integration in `persons/+page.svelte` ```svelte import { PERSON_TABLE_COLUMNS } from '$lib/config/person-table.ts'; <DataTable columns={PERSON_TABLE_COLUMNS} data={persons}> {#snippet children(col, row)} ... {/snippet} </DataTable> ``` ### Integration in `groups/[groupId]/+page.svelte` ```svelte import { GROUP_MEMBER_COLUMNS } from '$lib/config/person-table.ts'; <DataTable columns={GROUP_MEMBER_COLUMNS} data={members}> {#snippet children(col, row)} ... {/snippet} </DataTable> ``` Der `children`-Snippet bleibt seiten-spezifisch, da das Rendering pro Spalte variiert (Link-Ziele, Badges etc.). Nur die Column-Definition (Keys, Labels, Sortierbarkeit) wird zentralisiert. --- ## Dateien | Datei | Aenderung | |---|---| | `frontend/src/lib/config/person-table.ts` | **Neu** — zentrale Spaltendefinitionen | | `frontend/src/routes/app/persons/+page.svelte` | `columns={...}` durch Import ersetzen | | `frontend/src/routes/app/groups/[groupId]/+page.svelte` | `columns={...}` durch Import ersetzen |

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

2026-07-02 22:41:41 +00:00

niboer added the

component/frontend

type/refactor

labels

2026-07-02 22:41:41 +00:00

niboer referenced this issue

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

refactor(backend+frontend): joinedAt aus GroupMember entfernen #197

niboer referenced this issue

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