Frontend: Recalculate-Button im Antworten-Tab #155

New issue

Closed

opened 2026-06-30 21:00:19 +02:00 by niboer · 0 comments

niboer commented

2026-06-30 21:00:19 +02:00

Owner

Beschreibung

Nach #154 (Recalculate-Backend-Endpoint) muss der Organisator die Neuberechnung auch ausloesen koennen — per Button im Antworten-Tab der Event-Detailseite.

Aenderungen

`frontend/src/routes/app/events/[eventId]/+page.server.ts`

Neue Action recalculateContributions:

recalculateContributions: async ({ fetch, params }) => {
  const { eventId } = params;
  const res = await fetch(`/api/v1/events/${eventId}/recalculate`, {
    method: 'POST',
  });
  if (!res.ok) {
    const err = await res.json().catch(() => null) as { message?: string } | null;
    return fail(res.status, {
      error: err?.message ?? 'Fehler bei der Neuberechnung',
      formType: 'recalculate',
    });
  }
  const data = await res.json() as { updated: number; total: number };
  return { success: true, formType: 'recalculate', updated: data.updated, total: data.total };
};

`frontend/src/routes/app/events/[eventId]/+page.svelte`

Neues Derived recalculateSuccess / recalculateError:

let recalculateSuccess = $derived(
  form?.formType === 'recalculate' && form?.success === true
);
let recalculateError = $derived(
  form?.formType === 'recalculate' ? (form as any)?.error : undefined
);
let recalculateUpdated = $derived(
  form?.formType === 'recalculate' ? (form as any)?.updated : 0
);

Erfolgsmeldung: X Beitraege aktualisiert (von Y Gaesten mit Formular).

Button im Antworten-Tab (oberhalb der Antworten-DataTable, vor dem {#each householdGroups}):

<div class="mb-4 flex items-center justify-between">
  <span class="text-sm text-muted-foreground">
    Gesamtbeitraege auf Basis der Formularantworten
  </span>
  <form method="POST" action="?/recalculateContributions" use:enhance>
    <Button type="submit" variant="outline" size="sm">
      Beitraege neu berechnen
    </Button>
  </form>
</div>

Tests (`frontend/src/tests/events.test.ts`)

+page.svelte: Button "Beitraege neu berechnen" vorhanden
+page.server.ts: Action recalculateContributions existiert
+page.server.ts: Fehlerbehandlung bei API-Fehler

Abhaengig von

#154: Backend-Recalculate-Endpoint
#153: Automatische Beitragsberechnung bei submitFormFinal

## Beschreibung Nach #154 (Recalculate-Backend-Endpoint) muss der Organisator die Neuberechnung auch ausloesen koennen — per Button im Antworten-Tab der Event-Detailseite. ### Aenderungen #### `frontend/src/routes/app/events/[eventId]/+page.server.ts` Neue Action `recalculateContributions`: ```typescript recalculateContributions: async ({ fetch, params }) => { const { eventId } = params; const res = await fetch(`/api/v1/events/${eventId}/recalculate`, { method: 'POST', }); if (!res.ok) { const err = await res.json().catch(() => null) as { message?: string } | null; return fail(res.status, { error: err?.message ?? 'Fehler bei der Neuberechnung', formType: 'recalculate', }); } const data = await res.json() as { updated: number; total: number }; return { success: true, formType: 'recalculate', updated: data.updated, total: data.total }; }; ``` #### `frontend/src/routes/app/events/[eventId]/+page.svelte` - Neues Derived `recalculateSuccess` / `recalculateError`: ```typescript let recalculateSuccess = $derived( form?.formType === 'recalculate' && form?.success === true ); let recalculateError = $derived( form?.formType === 'recalculate' ? (form as any)?.error : undefined ); let recalculateUpdated = $derived( form?.formType === 'recalculate' ? (form as any)?.updated : 0 ); ``` - Erfolgsmeldung: `X Beitraege aktualisiert (von Y Gaesten mit Formular).` - Button im Antworten-Tab (oberhalb der Antworten-DataTable, vor dem `{#each householdGroups}`): ```svelte <div class="mb-4 flex items-center justify-between"> <span class="text-sm text-muted-foreground"> Gesamtbeitraege auf Basis der Formularantworten </span> <form method="POST" action="?/recalculateContributions" use:enhance> <Button type="submit" variant="outline" size="sm"> Beitraege neu berechnen </Button> </form> </div> ``` ### Tests (`frontend/src/tests/events.test.ts`) - `+page.svelte`: Button "Beitraege neu berechnen" vorhanden - `+page.server.ts`: Action `recalculateContributions` existiert - `+page.server.ts`: Fehlerbehandlung bei API-Fehler ### Abhaengig von - #154: Backend-Recalculate-Endpoint - #153: Automatische Beitragsberechnung bei submitFormFinal

niboer added this to the MS-FE-4: Formulare milestone

2026-06-30 21:00:19 +02:00

niboer added the

component/frontend

prio/medium

type/feature

labels

2026-06-30 21:00:19 +02:00

niboer referenced this issue from a commit

2026-06-30 21:20:37 +02:00

feat(frontend): Preisoptionen Editor, Gaeste-Formular, Organisator-Ansicht, Recalculate-Button

niboer referenced this issue from a commit