Files
GerbilManager/gerbil-manager-web
Gulum 54e873c115
All checks were successful
CI / Backend Tests (.NET) (push) Successful in 1m15s
CI / Frontend Tests (Node/Vite) (push) Successful in 9m37s
CI / Docker Build & Push (push) Successful in 7m36s
CI / Deploy auf TrueNAS (Custom App) (push) Successful in 8s
feat(tiere): Eltern direkt in der Tier-Akte bearbeiten (QOL)
Im Tier-Formular gibt es jetzt den Block „Abstammung" mit Wurf-Auswahl und
Vater-/Mutter-Picker — die Eltern müssen nicht mehr über die Wurf-Seite
gesucht und dort editiert werden. Das Datenmodell bleibt unverändert: Eltern
hängen weiterhin am Geburtswurf.

- Backend: PUT /gerbils/{id}/parents schreibt Litter.FatherId/MotherId des
  Geburtswurfs. Ohne Wurf wird ein bestehender mit gleichem Elternpaar +
  gleichem Datum verknüpft, sonst ein Träger-Wurf angelegt
  ("Wurf von X + Y", ShowInChronicle=false, IsManual=true).
  Geschlechts-Regel wiederverwendet LitterEndpoints.ValidateParents,
  Selbstbezug (Tier als eigener Elternteil) wird abgewiesen.
- UI: Vorbelegung aus dem gewählten Wurf, Warnung mit Anzahl der Geschwister
  (Eltern gehören dem Wurf → Änderung gilt für alle), Hinweis wenn ein
  Wurf-Eintrag angelegt wird. Texte in de.ts.
- Nebenbei: Speichern nutzt im Edit-Modus die Route-Id (PUT /gerbils/{id}
  antwortet 204 ohne Body) und der vorher schon rote Spec-Locator
  „Würfe als Elternteil" ist auf den Abschnitt eingegrenzt.
- Tests: GerbilParentsTests (9), e2e tiere.spec (2 neu) + Mock-Route.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-19 20:43:28 +02:00
..

gerbil-manager-web

Frontend des Rennmaus-Managers — React + TypeScript + Vite, mobile-first (Smartphone und Laptop).

Entwicklung

npm install
npm run dev

Erwartet die laufende GerbilManagerWebAPI unter http://localhost:5179 (Profil http in GerbilManagerWebAPI/Properties/launchSettings.json).

Konfiguration

Variable Standard Beschreibung
VITE_API_BASE_URL http://localhost:5179 Basis-URL der GerbilManagerWebAPI

Konventionen

  • Alle für Benutzer sichtbaren Texte sind Deutsch und liegen zentral in src/strings/de.ts — keine Texte direkt in Komponenten hartkodieren.
  • API-Zugriffe laufen über src/api/client.ts.
  • Routen werden in src/App.tsx registriert, Seiten liegen in src/pages/.
  • Mutationen (useMutation aus src/hooks/useApi.ts): run() wirft NIE, sondern liefert ein MutationOutcome<T>{ ok: true, value } oder { ok: false, error, cause }. Aufrufer MÜSSEN verzweigen: const r = await m.run(x); if (r.ok) navigate(r.value.id). m.error treibt die Inline-Anzeige; für Spezialfälle (z. B. HTTP 409) r.cause prüfen (r.cause instanceof ApiError && r.cause.status === 409). So sind unbehandelte Promise-Rejections an Aufrufstellen ausgeschlossen (siehe auch src/dev/unhandledRejectionGuard.ts).

Build

npm run build
npm run preview

Farbschlag-Katalog (AR-5)

Der Katalog lebt in src/genetics/catalog.ts (Single Source of Truth). Nach jeder Änderung dort den Generator laufen lassen:

npm run gen:catalog

Erzeugt zwei Artefakte und committet beide:

Datei Notation Verwendung
src/genetics/colorVarietySeed.generated.json Klammer (e[f], c[chm]) UI-Dropdowns, Frontend-Suche
src/genetics/colorVarietySeed.backend.json Frozen symbols (ef, cchm) EF-Seed-Migrationen (Pam, DATA-Lane)

Der vitest-Drift-Guard (catalog-drift.test.ts) schlägt fehl, wenn generated.json nach einer Katalog-Änderung nicht aktualisiert wurde.

E2E-Tests (QA-1, Playwright)

npm run e2e                # Mock-Modus: startet Vite auf :5199, API wird gemockt
npx playwright test --project=phone   # nur Smartphone-Viewport (390px)
  • Mock-Modus (Standard): kein Backend nötig. e2e/mock-api.ts fängt alle API-Aufrufe ab (DATA-2-Vertrag: Gridify-Paging, camelCase, 409-Konflikte) mit frischem Datenbestand pro Test (e2e/mock-data.ts).
  • Live-Modus: dieselbe Suite gegen den echten Stack — $env:E2E_BASE_URL = 'http://localhost:5173'; npm run e2e (vorher AppHost starten). Tests, die Mock-Seed-Daten voraussetzen, überspringen sich selbst; die übrigen legen eigene Datensätze an.
  • Beide Viewports (Smartphone 390px, Laptop 1280px) laufen für jede Spec; alle Assertions prüfen die deutschen Oberflächentexte direkt aus src/strings/de.ts.