fix(frontend): locale-aware currency input und zentrale formatPriceDisplay #325

Merged

niboer merged 1 commit from feat/locale-currency-input into main

2026-07-22 19:03:36 +00:00

niboer commented

2026-07-22 17:45:19 +00:00

Owner

closes #324

Altes Verhalten

Der Preis-Input in form-editor.svelte nutzt <input type="number" step="0.50"> — drei Bugs:

Deutsches Komma (,) wird nicht als Dezimaltrenner akzeptiert
Nach Komma sind mehr als 2 Ziffern moeglich
Select-all + "11,22" tippen ergibt "0.001122" statt "11,22"

Preis-Formatierung ist inkonsistent ueber drei Komponenten verteilt:

form-editor.svelte: .toFixed(2) (Punkt-Format)
form-fields.svelte: .toLocaleString('de-DE', ...) (hartcodiert)
events/[eventId]/+page.svelte: eigene formatEuroCent() + 2x inline .toLocaleString

Neues Verhalten

format-currency.ts — zentrale Utility mit parsePriceInput() und formatPriceDisplay(). Automatisch locale-korrekt via Intl.NumberFormat (keine hardcodierte Locale-Liste). formatPriceDisplay inkludiert EUR-Symbol via style: 'currency'.
form-editor.svelte — <input type="text" inputmode="decimal"> statt type="number". Draft-Tracking waehrend Tippen, erst bei onBlur wird nach Cent konvertiert. Ermoeglicht deutsches Komma, select-all+type, begrenzt auf 2 NK-Stellen.
form-fields.svelte — 3x .toLocaleString('de-DE') durch formatPriceDisplay(cents, i18n.locale) ersetzt
events/[eventId]/+page.svelte — formatEuroCent() delegiert an formatPriceDisplay; 2x inline .toLocaleString vereinheitlicht

Begruendung

Benutzbare Preiseingabe im deutschen Format, locale-aware ohne Wartungsaufwand bei neuen Sprachen.

Test-Hinweise

1251 Tests, 75 Test-Files, Lint und check-testid gruen
Neue Unit-Tests fuer parsePriceInput (10 Faelle: DE/EN/Tausender/Komma/Punkt/Edge) und formatPriceDisplay (5 Faelle)

Checkliste

use:testid an neuen <button>, <a>, <form>-Elementen gesetzt? — nicht relevant
Korrespondierender E2E-Test in e2e/specs/ angelegt? — nicht relevant

closes #324 ### Altes Verhalten Der Preis-Input in form-editor.svelte nutzt `<input type="number" step="0.50">` — drei Bugs: 1. Deutsches Komma (`,`) wird nicht als Dezimaltrenner akzeptiert 2. Nach Komma sind mehr als 2 Ziffern moeglich 3. Select-all + "11,22" tippen ergibt "0.001122" statt "11,22" Preis-Formatierung ist inkonsistent ueber drei Komponenten verteilt: - `form-editor.svelte`: `.toFixed(2)` (Punkt-Format) - `form-fields.svelte`: `.toLocaleString('de-DE', ...)` (hartcodiert) - `events/[eventId]/+page.svelte`: eigene `formatEuroCent()` + 2x inline `.toLocaleString` ### Neues Verhalten - **`format-currency.ts`** — zentrale Utility mit `parsePriceInput()` und `formatPriceDisplay()`. Automatisch locale-korrekt via `Intl.NumberFormat` (keine hardcodierte Locale-Liste). `formatPriceDisplay` inkludiert EUR-Symbol via `style: 'currency'`. - **`form-editor.svelte`** — `<input type="text" inputmode="decimal">` statt `type="number"`. Draft-Tracking waehrend Tippen, erst bei `onBlur` wird nach Cent konvertiert. Ermoeglicht deutsches Komma, select-all+type, begrenzt auf 2 NK-Stellen. - **`form-fields.svelte`** — 3x `.toLocaleString('de-DE')` durch `formatPriceDisplay(cents, i18n.locale)` ersetzt - **`events/[eventId]/+page.svelte`** — `formatEuroCent()` delegiert an `formatPriceDisplay`; 2x inline `.toLocaleString` vereinheitlicht ### Begruendung Benutzbare Preiseingabe im deutschen Format, locale-aware ohne Wartungsaufwand bei neuen Sprachen. ### Test-Hinweise - 1251 Tests, 75 Test-Files, Lint und check-testid gruen - Neue Unit-Tests fuer `parsePriceInput` (10 Faelle: DE/EN/Tausender/Komma/Punkt/Edge) und `formatPriceDisplay` (5 Faelle) ### Checkliste - [x] `use:testid` an neuen `<button>`, `<a>`, `<form>`-Elementen gesetzt? — nicht relevant - [x] Korrespondierender E2E-Test in `e2e/specs/` angelegt? — nicht relevant

niboer added 1 commit

2026-07-22 17:45:19 +00:00

fix(frontend): locale-aware currency input und zentrale formatPriceDisplay

CI Backend / lint-backend (pull_request) Successful in 1m1s

Details

CI Frontend / lint-frontend (pull_request) Successful in 1m27s

Details

CI Meta / conventional-commit (pull_request) Successful in 1s

Details

E2E / e2e (pull_request) Successful in 5m51s

Details

CI Backend / test-backend (pull_request) Successful in 4m4s

Details

CI Frontend / test-frontend (pull_request) Successful in 2m6s

Details

CI Frontend / lint-frontend (push) Successful in 1m31s

Details

CI Meta / conventional-commit (push) Has been skipped

Details

CI Frontend / test-frontend (push) Successful in 2m6s

Details

70ad1dfd35

Aktuell: form-editor.svelte nutzt <input type='number'> fuers
Euro-Feld, was zu drei Bugs fuehrt - (1) deutsches Komma wird
nicht akzeptiert, (2) select-all+type bricht zusammen, (3) mehr
als 2 Nachkommastellen moeglich. Preisformatierung ist inkonsistent
ueber drei Components verteilt (toFixed, toLocaleString, eigene
formatEuroCent-Funktion).

Neu: Zentrale Utility format-currency.ts mit parsePriceInput()
und formatPriceDisplay(), die via Intl.NumberFormat automatisch
locale-korrekt arbeitet (keine hardcodierte Liste).
form-editor.svelte: type='text'+inputmode='decimal', Draft-Tracking
waehrend Tippen, erst onBlur-Kommittierung nach Cent.
form-fields.svelte/events-page: alle Preis-Anzeigen einheitlich
ueber formatPriceDisplay().
formatPriceDisplay inkludiert EUR-Symbol via style:'currency'.
Format- und Parsing-Logik ist zentral und bei neuen Locales
automatisch korrekt.

refs #324

Aktuelles: Preis-Eingabe und -Anzeige inkonsistent und nicht
locale-faehig.

Neu: format-currency.ts zentralisiert beide Funktionen. 1251 Tests
pass, 75 Test-Files.

niboer merged commit 70ad1dfd35 into main

2026-07-22 19:03:36 +00:00

niboer deleted branch feat/locale-currency-input

2026-07-22 19:03:37 +00:00