Compare commits

...

4 Commits

Author SHA1 Message Date
40f3ce250d STATUS-MODEL-FE: Zucht/Liebhaber/Abzugeben wählbar; Verstorben+Abgegeben abgeleitet (gated auf Pam BE) 2026-06-07 03:36:10 +02:00
2d54cb901f Merge feature/litter-juvenile-details (LITTER-JUVENILE-DETAILS): pro Jungtier Farbschlag/Abgabedatum/Abnehmer/Todestag/Ursache im Wurf-Detail
Some checks failed
CI / Backend Tests (.NET) (push) Successful in 1m16s
CI / Docker Build & Push (push) Has been cancelled
CI / Frontend Tests (Node/Vite) (push) Has been cancelled
2026-06-07 03:25:53 +02:00
25af10a736 Merge feature/farbschlag-genotype-sync (FARBSCHLAG-GENOTYPE-SYNC): Farbschlag↔Gencode bidirektionale Sync im Tier-Formular
Some checks failed
CI / Backend Tests (.NET) (push) Successful in 1m2s
CI / Docker Build & Push (push) Has been cancelled
CI / Frontend Tests (Node/Vite) (push) Has been cancelled
2026-06-07 03:16:55 +02:00
ade40eef5e FARBSCHLAG-GENOTYPE-SYNC: Farbschlag↔Gencode bidirektionale Sync im Tier-Formular 2026-06-07 03:16:02 +02:00
10 changed files with 208 additions and 26 deletions

View File

@@ -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('')
})

View File

@@ -91,7 +91,7 @@ function gerbil(
id,
name,
gender,
status: 'Active',
status: 'Breeding',
dateOfBirth,
dateOfDeath: null,
causeOfDeath: null,

View File

@@ -0,0 +1,58 @@
/** STATUS-MODEL: Zucht/Liebhaber wählbar; Verstorben/Abgegeben abgeleitet (read-only). */
import { de, expect, skipUnlessMock, test, uniqueName } from './fixtures'
const t = de.pages.gerbils
test('Tier-Formular zeigt nur wählbare Statuswerte im Dropdown', async ({ page }) => {
skipUnlessMock()
await page.goto('/rennmaeuse/neu')
const statusField = page.locator('label.field', {
has: page.locator(`span:text-is("${t.fields.status}")`),
})
// Zucht (Breeding) ist vorausgewählt
await expect(statusField.locator('select')).toHaveValue('Breeding')
// Optionen: nur Zucht, Liebhaber, Abzugeben (NICHT Verstorben/Abgegeben)
const opts = statusField.locator('select option')
await expect(opts.filter({ hasText: t.statusLabels.Breeding })).toHaveCount(1)
await expect(opts.filter({ hasText: t.statusLabels.Pet })).toHaveCount(1)
await expect(opts.filter({ hasText: t.statusLabels.ForSale })).toHaveCount(1)
await expect(opts.filter({ hasText: t.statusLabels.Deceased })).toHaveCount(0)
await expect(opts.filter({ hasText: t.statusLabels.GivenAway })).toHaveCount(0)
})
test('Tier-Formular zeigt abgeleiteten Status Verstorben als Text + Hinweis', async ({ page }) => {
skipUnlessMock()
// Willi ist Deceased
await page.goto('/rennmaeuse/willi/bearbeiten')
// Status-Select ist NICHT vorhanden (abgeleitet)
const statusField = page.locator('.field', {
has: page.locator(`span:text-is("${t.fields.status}")`),
})
await expect(statusField).toBeVisible()
await expect(statusField.locator('select')).toHaveCount(0)
await expect(statusField).toContainText(t.statusLabels.Deceased)
await expect(statusField).toContainText(t.form.statusDerivedHint.Deceased)
})
test('Tiere-Liste zeigt Zucht als Standard-Status-Filter', async ({ page }) => {
skipUnlessMock()
await page.goto('/rennmaeuse')
const statusSelect = page
.locator('label.field', { has: page.locator(`span:text-is("${t.filters.status}")`) })
.locator('select')
await expect(statusSelect).toHaveValue('Breeding')
})
test('Neues Tier anlegen mit Status Liebhaber', async ({ page }) => {
skipUnlessMock()
const name = uniqueName('Tier')
await page.goto('/rennmaeuse/neu')
await page.getByLabel(`${t.fields.name} *`).fill(name)
await page.getByLabel(`${t.fields.gender} *`).selectOption({ label: t.genderLabels.male })
const statusField = page.locator('label.field', {
has: page.locator(`span:text-is("${t.fields.status}")`),
})
await statusField.locator('select').selectOption({ label: t.statusLabels.Pet })
await page.getByRole('button', { name: t.form.save, exact: true }).click()
await expect(page.getByRole('heading', { name })).toBeVisible()
})

View File

@@ -10,9 +10,11 @@
export type Gender = 'unknown' | 'male' | 'female'
export const GENDERS: Gender[] = ['unknown', 'male', 'female']
/** Gerbil.Status — C# enum { Active, Deceased, GivenAway, ForSale }. */
export type GerbilStatus = 'Active' | 'Deceased' | 'GivenAway' | 'ForSale'
export const GERBIL_STATUSES: GerbilStatus[] = ['Active', 'ForSale', 'Deceased', 'GivenAway']
/** Gerbil.Status — C# enum { Breeding, Pet, Deceased, GivenAway, ForSale }. STATUS-MODEL: Active→Breeding (gated on Pam feature/status-model). */
export type GerbilStatus = 'Breeding' | 'Pet' | 'Deceased' | 'GivenAway' | 'ForSale'
export const GERBIL_STATUSES: GerbilStatus[] = ['Breeding', 'Pet', 'ForSale', 'Deceased', 'GivenAway']
/** Statuses the user can pick freely in the form; Deceased+GivenAway are derived by the backend. */
export const SELECTABLE_STATUSES: GerbilStatus[] = ['Breeding', 'Pet', 'ForSale']
/** ISO date string "YYYY-MM-DD" (maps to C# DateOnly). */
export type DateOnlyString = string

View File

@@ -3,10 +3,10 @@ import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
import { de } from '../strings/de'
import { createGerbil, getGerbil, updateGerbil } from '../api/gerbils'
import { listColorVarieties, listContacts, listEnclosures, listLitters } from '../api/lookups'
import { GENDERS, GERBIL_STATUSES, type CreateGerbil, type Gender, type GerbilStatus } from '../api/types'
import { GENDERS, SELECTABLE_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'
@@ -34,7 +34,7 @@ interface FormState {
const EMPTY: FormState = {
name: '',
gender: '',
status: 'Active',
status: 'Breeding',
dateOfBirth: '',
dateOfDeath: '',
causeOfDeath: '',
@@ -245,16 +245,29 @@ export default function GerbilFormPage() {
{errors.gender && <small className="error-text">{errors.gender}</small>}
</label>
<label className="field">
<span>{t.fields.status}</span>
<select value={form.status} onChange={(e) => set('status', e.target.value as GerbilStatus)}>
{GERBIL_STATUSES.map((s) => (
<option key={s} value={s}>
{statusLabel(s)}
</option>
))}
</select>
</label>
{/* STATUS-MODEL: Deceased/GivenAway are derived by the backend — show as read-only with hint */}
{form.status === 'Deceased' || form.status === 'GivenAway' ? (
<div className="field">
<span>{t.fields.status}</span>
<span className="muted">
{statusLabel(form.status)}
<small className="muted" style={{ marginLeft: '0.5rem' }}>
({t.form.statusDerivedHint[form.status]})
</small>
</span>
</div>
) : (
<label className="field">
<span>{t.fields.status}</span>
<select value={form.status} onChange={(e) => set('status', e.target.value as GerbilStatus)}>
{SELECTABLE_STATUSES.map((s) => (
<option key={s} value={s}>
{statusLabel(s)}
</option>
))}
</select>
</label>
)}
<label className="field">
<span>{t.fields.dateOfBirth}</span>
@@ -307,7 +320,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 +407,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'}>

View File

@@ -29,7 +29,7 @@ const SORT_ORDER_BY: Record<SortKey, string> = {
export default function GerbilsPage() {
const t = de.pages.gerbils
const [search, setSearch] = useState('')
const [status, setStatus] = useState<GerbilStatus | ''>('Active')
const [status, setStatus] = useState<GerbilStatus | ''>('Breeding')
const [gender, setGender] = useState<Gender | ''>('')
const [colorVarietyId, setColorVarietyId] = useState('')
const [originBreeder, setOriginBreeder] = useState('')
@@ -64,7 +64,7 @@ export default function GerbilsPage() {
const resetFilters = () => {
setSearch('')
setStatus('Active')
setStatus('Breeding')
setGender('')
setColorVarietyId('')
setOriginBreeder('')
@@ -85,7 +85,7 @@ export default function GerbilsPage() {
// UX-MOBILE-1: count non-default filter values for the badge.
const activeFilterCount =
(status !== 'Active' ? 1 : 0) +
(status !== 'Breeding' ? 1 : 0) +
(gender !== '' ? 1 : 0) +
(colorVarietyId !== '' ? 1 : 0) +
(originBreeder !== '' ? 1 : 0) +

View File

@@ -22,7 +22,7 @@ function makeGerbil(id: string, name: string, litterId: string | null = null): G
id,
name,
gender: 'unknown',
status: 'Active',
status: 'Breeding',
dateOfBirth: null,
dateOfDeath: null,
causeOfDeath: null,

View File

@@ -27,7 +27,7 @@ function makeGerbil(over: Partial<Gerbil> & { id: string }): Gerbil {
return {
name: over.id,
gender: 'unknown',
status: 'Active' as GerbilStatus,
status: 'Breeding' as GerbilStatus,
dateOfBirth: null,
dateOfDeath: null,
causeOfDeath: null,

View File

@@ -83,7 +83,7 @@ export function farbschlagDistribution(
): NameCount[] {
const byName = new Map<string | null, number>()
for (const g of gerbils) {
if (g.status !== 'Active') continue
if (g.status !== 'Breeding' && g.status !== 'Pet') continue
const name = resolveName(g)
byName.set(name, (byName.get(name) ?? 0) + 1)
}

View File

@@ -124,6 +124,11 @@ export const de = {
isDeafUnknown: 'Unbekannt',
isDeafYes: 'Ja',
isDeafNo: 'Nein',
// STATUS-MODEL: Hinweis für abgeleitete Statuswerte
statusDerivedHint: {
Deceased: 'Wird automatisch gesetzt wenn Todesdatum erfasst.',
GivenAway: 'Wird automatisch gesetzt nach Abgabe.',
},
save: 'Speichern',
cancel: 'Abbrechen',
saving: 'Speichern …',
@@ -141,8 +146,10 @@ export const de = {
male: 'Männlich',
female: 'Weiblich',
},
// STATUS-MODEL: Breeding/Pet ersetzen Active; Deceased+GivenAway = abgeleitet (Backend)
statusLabels: {
Active: 'Aktiv',
Breeding: 'Zucht',
Pet: 'Liebhaber',
Deceased: 'Verstorben',
GivenAway: 'Abgegeben',
ForSale: 'Zur Abgabe',