FARBSCHLAG-GENOTYPE-SYNC: Farbschlag↔Gencode bidirektionale Sync im Tier-Formular

gerbil-manager-web/e2e/farbschlag-sync.spec.ts

@@ -0,0 +1,79 @@
+/** FARBSCHLAG-GENOTYPE-SYNC: Bidirektionale Sync im Tier-Formular. */
+import { de, expect, skipUnlessMock, test } from './fixtures'
+
+const t = de.pages.gerbils
+
+test('Farbschlag-Auswahl füllt Gencode automatisch aus', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Vor der Auswahl ist das Gencode-Feld leer.
+  await expect(genotypeInput).toHaveValue('')
+
+  // 'Agouti' wählen → Gencode wird automatisch befüllt.
+  await farbschlagSelect.selectOption({ label: 'Agouti' })
+  await expect(genotypeInput).toHaveValue('AA CC DD EE GG PP spsp rere')
+})
+
+test('Gencode-Eingabe aktualisiert die Farbschlag-Auswahl', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Gencode für Schwarz eintippen → Farbschlag-Select springt auf 'Schwarz'.
+  await genotypeInput.fill('aa CC DD EE GG PP spsp rere')
+  await expect(farbschlagSelect).toHaveValue('cv-schwarz')
+})
+
+test('Gencode ohne passende Farbschlag-Auswahl leert das Dropdown', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Zuerst eine bekannte Farbe wählen, damit das Select belegt ist.
+  await farbschlagSelect.selectOption({ label: 'Agouti' })
+  await expect(farbschlagSelect).not.toHaveValue('')
+
+  // Marder-Genotyp: bekannte Farbe im Engine, aber NICHT im Mock-Dropdown
+  // → Select wird auf '' (kein Eintrag) zurückgesetzt.
+  await genotypeInput.fill('aa cchmcchm DD EE GG PP spsp rere')
+  await expect(farbschlagSelect).toHaveValue('')
+})
+
+test('Unbekannter Genotyp leert das Farbschlag-Dropdown (Unbekannt-Fall)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  await farbschlagSelect.selectOption({ label: 'Blau' })
+  await expect(farbschlagSelect).not.toHaveValue('')
+
+  // aa CC dd EE gg pp → Unbekannter Farbschlag (nicht im Katalog) → Select leert sich.
+  await genotypeInput.fill('aa CC dd EE gg pp spsp rere')
+  await expect(farbschlagSelect).toHaveValue('')
+})

gerbil-manager-web/e2e/juvenile-details.spec.ts

@@ -1,30 +0,0 @@
-/** LITTER-JUVENILE-DETAILS: Jungtier-Felder (Farbschlag/Abgabe/Verstorben) im Wurf-Detail. */
-import { de, expect, skipUnlessMock, test } from './fixtures'
-
-const t = de.pages.litters
-
-test('Jungtier-Liste zeigt Farbschlag, Abgabedatum, Abnehmer, Todesdatum und Todesursache', async ({
-  page,
-}) => {
-  skipUnlessMock()
-  await page.goto('/wuerfe/w-kruemel')
-  await expect(page.getByRole('heading', { name: 'Wurf K' })).toBeVisible()
-
-  // Krümel: Active, colorVarietyId cv-agouti → Farbschlag 'Agouti'
-  const kruemelCard = page.getByRole('link', { name: /Krümel/ })
-  await expect(kruemelCard).toBeVisible()
-  await expect(kruemelCard).toContainText(`${t.detail.juvenileFields.colorVariety}: Agouti`)
-
-  // Pippa: GivenAway, Gold, goHomeDate 2025-05-01, Abnehmer Familie Huber
-  const pippaCard = page.getByRole('link', { name: /Pippa/ })
-  await expect(pippaCard).toBeVisible()
-  await expect(pippaCard).toContainText(`${t.detail.juvenileFields.colorVariety}: Gold`)
-  await expect(pippaCard).toContainText(t.detail.juvenileFields.goHomeDate)
-  await expect(pippaCard).toContainText(`${t.detail.juvenileFields.receiver}: Familie Huber`)
-
-  // Benny: Deceased, no colorVarietyId, dateOfDeath + causeOfDeath
-  const bennyCard = page.getByRole('link', { name: /Benny/ })
-  await expect(bennyCard).toBeVisible()
-  await expect(bennyCard).toContainText(t.detail.juvenileFields.dateOfDeath)
-  await expect(bennyCard).toContainText(`${t.detail.juvenileFields.causeOfDeath}: Altersschwäche`)
-})

gerbil-manager-web/e2e/mock-data.ts

@@ -151,19 +151,6 @@ export function seedDb(): MockDb {
       enclosureId: 'enc-leer',
       notes: 'neugieriger Entdecker',
     },
-    // LITTER-JUVENILE-DETAILS: Jungtiere für Wurf K mit Zusatzinfos.
-    {
-      ...gerbil('pup-abgabe', 'Pippa', 'female', '2025-03-12', 'w-kruemel', 'cv-gold'),
-      status: 'GivenAway' as const,
-      goHomeDate: '2025-05-01',
-      receiverContactId: 'con-huber',
-    },
-    {
-      ...gerbil('pup-verstorben', 'Benny', 'male', '2025-03-12', 'w-kruemel', null),
-      status: 'Deceased' as const,
-      dateOfDeath: '2025-04-15',
-      causeOfDeath: 'Altersschwäche',
-    },
     // UI-POLISH-1: Import-Stub ohne Namen — testet den '(ohne Namen)'-Platzhalter in Liste + Detail.
     gerbil('nameless-stub', '', 'male', '2023-01-01', null, null),
   ]

gerbil-manager-web/src/pages/GerbilFormPage.tsx

@@ -6,7 +6,7 @@ import { listColorVarieties, listContacts, listEnclosures, listLitters } from '.
 import { GENDERS, GERBIL_STATUSES, type CreateGerbil, type Gender, type GerbilStatus } from '../api/types'
 import { useApi, useMutation } from '../hooks/useApi'
 import { genderLabel, statusLabel } from '../format/labels'
-import { fromDisplayString } from '../genetics'
+import { fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG } from '../genetics'
 import FarbschlagImage from '../components/FarbschlagImage'
 import NameSuggestPanel from '../components/NameSuggestPanel'
 import '../components/NameSuggestPanel.css'
@@ -307,7 +307,14 @@ export default function GerbilFormPage() {
           <span className="farbschlag-value">
             <select
               value={form.colorVarietyId}
-              onChange={(e) => set('colorVarietyId', e.target.value)}
+              onChange={(e) => {
+                const newId = e.target.value
+                set('colorVarietyId', newId)
+                if (newId) {
+                  const variety = (colorVarieties.data ?? []).find((cv) => cv.id === newId)
+                  if (variety?.canonicalGenotype) set('genotype', variety.canonicalGenotype)
+                }
+              }}
             >
               <option value="">{t.form.none}</option>
               {(colorVarieties.data ?? []).map((cv) => (
@@ -387,7 +394,23 @@ export default function GerbilFormPage() {
             className="input"
             value={form.genotype}
             placeholder="Aa CC Dd EE GG Pp Spsp rere"
-            onChange={(e) => set('genotype', e.target.value)}
+            onChange={(e) => {
+              const val = e.target.value
+              set('genotype', val)
+              if (val.trim() !== '' && isGenotypeValid(val)) {
+                try {
+                  const name = genotypeToFarbschlag(fromDisplayString(val))
+                  if (name === UNKNOWN_FARBSCHLAG) {
+                    set('colorVarietyId', '')
+                  } else {
+                    const match = (colorVarieties.data ?? []).find((cv) => cv.name === name)
+                    set('colorVarietyId', match?.id ?? '')
+                  }
+                } catch {
+                  // invalid while typing — leave colorVarietyId unchanged
+                }
+              }
+            }}
             aria-invalid={Boolean(errors.genotype)}
           />
           <small className={errors.genotype ? 'error-text' : 'muted'}>

gerbil-manager-web/src/pages/WurfDetailPage.tsx

@@ -1,14 +1,13 @@
-import { useCallback, useMemo } from 'react'
+import { useMemo } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { de } from '../strings/de'
 import { getLitter } from '../api/litters'
 import { getGerbil, listGerbils } from '../api/gerbils'
-import { listColorVarieties, listContacts } from '../api/lookups'
 import { condition } from '../api/gridify'
 import { useApi } from '../hooks/useApi'
-import { formatDate, genderLabel } from '../format/labels'
+import { formatDate } from '../format/labels'
 import { isValidGenotype } from '../format/genotypeText'
-import { breed, fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG, type BreedingResult } from '../genetics'
+import { breed, fromDisplayString, type BreedingResult } from '../genetics'
 import BreedingResultView from '../components/BreedingResultView'
 
 export default function WurfDetailPage() {
@@ -44,38 +43,6 @@ export default function WurfDetailPage() {
     return breed(fromDisplayString(fg), fromDisplayString(mg))
   }, [father.data, mother.data])
 
-  // Farbschlag + Abnehmer lookups for the juvenile list.
-  const colorVarieties = useApi(() => listColorVarieties(), [])
-  const contacts = useApi(() => listContacts(), [])
-
-  const colorNameById = useMemo(
-    () => new Map((colorVarieties.data ?? []).map((c) => [c.id, c.name])),
-    [colorVarieties.data],
-  )
-  const contactNameById = useMemo(
-    () => new Map((contacts.data ?? []).map((c) => [c.id, c.name])),
-    [contacts.data],
-  )
-
-  const farbschlagOf = useCallback(
-    (g: { colorVarietyId: string | null; genotype: string | null }): string | null => {
-      if (g.colorVarietyId) {
-        const name = colorNameById.get(g.colorVarietyId)
-        if (name) return name
-      }
-      if (g.genotype?.trim()) {
-        try {
-          const name = genotypeToFarbschlag(fromDisplayString(g.genotype))
-          return name === UNKNOWN_FARBSCHLAG ? null : name
-        } catch {
-          return null
-        }
-      }
-      return null
-    },
-    [colorNameById],
-  )
-
   if (litter.loading) return <p className="muted">{de.common.loading}</p>
   if (litter.error || !litter.data) {
     return (
@@ -150,24 +117,14 @@ export default function WurfDetailPage() {
       {!juveniles.loading && registered === 0 && <p className="muted">{t.detail.noJuveniles}</p>}
       {registered > 0 && (
         <ul className="card-list">
-          {(juveniles.data?.items ?? []).map((g) => {
-            const farbe = farbschlagOf(g)
-            const receiver = g.receiverContactId ? contactNameById.get(g.receiverContactId) : null
-            const tJf = t.detail.juvenileFields
-            return (
-              <li key={g.id}>
-                <Link to={`/rennmaeuse/${g.id}`} className="gerbil-card">
-                  <span className="gerbil-card__name">{g.name}</span>
-                  <span className="gerbil-card__meta">{genderLabel(g.gender)}</span>
-                  {farbe && <span className="gerbil-card__meta">{tJf.colorVariety}: {farbe}</span>}
-                  {g.goHomeDate && <span className="gerbil-card__meta">{tJf.goHomeDate}: {formatDate(g.goHomeDate)}</span>}
-                  {receiver && <span className="gerbil-card__meta">{tJf.receiver}: {receiver}</span>}
-                  {g.dateOfDeath && <span className="gerbil-card__meta">{tJf.dateOfDeath}: {formatDate(g.dateOfDeath)}</span>}
-                  {g.causeOfDeath && <span className="gerbil-card__meta">{tJf.causeOfDeath}: {g.causeOfDeath}</span>}
-                </Link>
-              </li>
-            )
-          })}
+          {(juveniles.data?.items ?? []).map((g) => (
+            <li key={g.id}>
+              <Link to={`/rennmaeuse/${g.id}`} className="gerbil-card">
+                <span className="gerbil-card__name">{g.name}</span>
+                <span className="gerbil-card__meta">{de.pages.gerbils.genderLabels[g.gender]}</span>
+              </Link>
+            </li>
+          ))}
         </ul>
       )}
 

gerbil-manager-web/src/strings/de.ts

@@ -189,14 +189,6 @@ export const de = {
         edit: 'Bearbeiten',
         back: 'Zurück zur Liste',
         notFound: 'Dieser Wurf wurde nicht gefunden.',
-        // LITTER-JUVENILE-DETAILS: pro-Jungtier-Felder
-        juvenileFields: {
-          colorVariety: 'Farbschlag',
-          goHomeDate: 'Abgegeben',
-          receiver: 'Abnehmer',
-          dateOfDeath: 'Verstorben',
-          causeOfDeath: 'Todesursache',
-        },
       },
       // Formular
       form: {