Compare commits
4 Commits
feature/li
...
feature/st
| Author | SHA1 | Date | |
|---|---|---|---|
| 40f3ce250d | |||
| 2d54cb901f | |||
| 25af10a736 | |||
| ade40eef5e |
79
gerbil-manager-web/e2e/farbschlag-sync.spec.ts
Normal file
79
gerbil-manager-web/e2e/farbschlag-sync.spec.ts
Normal 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('')
|
||||||
|
})
|
||||||
@@ -91,7 +91,7 @@ function gerbil(
|
|||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
gender,
|
gender,
|
||||||
status: 'Active',
|
status: 'Breeding',
|
||||||
dateOfBirth,
|
dateOfBirth,
|
||||||
dateOfDeath: null,
|
dateOfDeath: null,
|
||||||
causeOfDeath: null,
|
causeOfDeath: null,
|
||||||
|
|||||||
58
gerbil-manager-web/e2e/status-model.spec.ts
Normal file
58
gerbil-manager-web/e2e/status-model.spec.ts
Normal 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()
|
||||||
|
})
|
||||||
@@ -10,9 +10,11 @@
|
|||||||
export type Gender = 'unknown' | 'male' | 'female'
|
export type Gender = 'unknown' | 'male' | 'female'
|
||||||
export const GENDERS: Gender[] = ['unknown', 'male', 'female']
|
export const GENDERS: Gender[] = ['unknown', 'male', 'female']
|
||||||
|
|
||||||
/** Gerbil.Status — C# enum { Active, Deceased, GivenAway, ForSale }. */
|
/** Gerbil.Status — C# enum { Breeding, Pet, Deceased, GivenAway, ForSale }. STATUS-MODEL: Active→Breeding (gated on Pam feature/status-model). */
|
||||||
export type GerbilStatus = 'Active' | 'Deceased' | 'GivenAway' | 'ForSale'
|
export type GerbilStatus = 'Breeding' | 'Pet' | 'Deceased' | 'GivenAway' | 'ForSale'
|
||||||
export const GERBIL_STATUSES: GerbilStatus[] = ['Active', 'ForSale', 'Deceased', 'GivenAway']
|
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). */
|
/** ISO date string "YYYY-MM-DD" (maps to C# DateOnly). */
|
||||||
export type DateOnlyString = string
|
export type DateOnlyString = string
|
||||||
|
|||||||
@@ -3,10 +3,10 @@ import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
|
|||||||
import { de } from '../strings/de'
|
import { de } from '../strings/de'
|
||||||
import { createGerbil, getGerbil, updateGerbil } from '../api/gerbils'
|
import { createGerbil, getGerbil, updateGerbil } from '../api/gerbils'
|
||||||
import { listColorVarieties, listContacts, listEnclosures, listLitters } from '../api/lookups'
|
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 { useApi, useMutation } from '../hooks/useApi'
|
||||||
import { genderLabel, statusLabel } from '../format/labels'
|
import { genderLabel, statusLabel } from '../format/labels'
|
||||||
import { fromDisplayString } from '../genetics'
|
import { fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG } from '../genetics'
|
||||||
import FarbschlagImage from '../components/FarbschlagImage'
|
import FarbschlagImage from '../components/FarbschlagImage'
|
||||||
import NameSuggestPanel from '../components/NameSuggestPanel'
|
import NameSuggestPanel from '../components/NameSuggestPanel'
|
||||||
import '../components/NameSuggestPanel.css'
|
import '../components/NameSuggestPanel.css'
|
||||||
@@ -34,7 +34,7 @@ interface FormState {
|
|||||||
const EMPTY: FormState = {
|
const EMPTY: FormState = {
|
||||||
name: '',
|
name: '',
|
||||||
gender: '',
|
gender: '',
|
||||||
status: 'Active',
|
status: 'Breeding',
|
||||||
dateOfBirth: '',
|
dateOfBirth: '',
|
||||||
dateOfDeath: '',
|
dateOfDeath: '',
|
||||||
causeOfDeath: '',
|
causeOfDeath: '',
|
||||||
@@ -245,16 +245,29 @@ export default function GerbilFormPage() {
|
|||||||
{errors.gender && <small className="error-text">{errors.gender}</small>}
|
{errors.gender && <small className="error-text">{errors.gender}</small>}
|
||||||
</label>
|
</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">
|
<label className="field">
|
||||||
<span>{t.fields.status}</span>
|
<span>{t.fields.status}</span>
|
||||||
<select value={form.status} onChange={(e) => set('status', e.target.value as GerbilStatus)}>
|
<select value={form.status} onChange={(e) => set('status', e.target.value as GerbilStatus)}>
|
||||||
{GERBIL_STATUSES.map((s) => (
|
{SELECTABLE_STATUSES.map((s) => (
|
||||||
<option key={s} value={s}>
|
<option key={s} value={s}>
|
||||||
{statusLabel(s)}
|
{statusLabel(s)}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
<label className="field">
|
<label className="field">
|
||||||
<span>{t.fields.dateOfBirth}</span>
|
<span>{t.fields.dateOfBirth}</span>
|
||||||
@@ -307,7 +320,14 @@ export default function GerbilFormPage() {
|
|||||||
<span className="farbschlag-value">
|
<span className="farbschlag-value">
|
||||||
<select
|
<select
|
||||||
value={form.colorVarietyId}
|
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>
|
<option value="">{t.form.none}</option>
|
||||||
{(colorVarieties.data ?? []).map((cv) => (
|
{(colorVarieties.data ?? []).map((cv) => (
|
||||||
@@ -387,7 +407,23 @@ export default function GerbilFormPage() {
|
|||||||
className="input"
|
className="input"
|
||||||
value={form.genotype}
|
value={form.genotype}
|
||||||
placeholder="Aa CC Dd EE GG Pp Spsp rere"
|
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)}
|
aria-invalid={Boolean(errors.genotype)}
|
||||||
/>
|
/>
|
||||||
<small className={errors.genotype ? 'error-text' : 'muted'}>
|
<small className={errors.genotype ? 'error-text' : 'muted'}>
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ const SORT_ORDER_BY: Record<SortKey, string> = {
|
|||||||
export default function GerbilsPage() {
|
export default function GerbilsPage() {
|
||||||
const t = de.pages.gerbils
|
const t = de.pages.gerbils
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState('')
|
||||||
const [status, setStatus] = useState<GerbilStatus | ''>('Active')
|
const [status, setStatus] = useState<GerbilStatus | ''>('Breeding')
|
||||||
const [gender, setGender] = useState<Gender | ''>('')
|
const [gender, setGender] = useState<Gender | ''>('')
|
||||||
const [colorVarietyId, setColorVarietyId] = useState('')
|
const [colorVarietyId, setColorVarietyId] = useState('')
|
||||||
const [originBreeder, setOriginBreeder] = useState('')
|
const [originBreeder, setOriginBreeder] = useState('')
|
||||||
@@ -64,7 +64,7 @@ export default function GerbilsPage() {
|
|||||||
|
|
||||||
const resetFilters = () => {
|
const resetFilters = () => {
|
||||||
setSearch('')
|
setSearch('')
|
||||||
setStatus('Active')
|
setStatus('Breeding')
|
||||||
setGender('')
|
setGender('')
|
||||||
setColorVarietyId('')
|
setColorVarietyId('')
|
||||||
setOriginBreeder('')
|
setOriginBreeder('')
|
||||||
@@ -85,7 +85,7 @@ export default function GerbilsPage() {
|
|||||||
|
|
||||||
// UX-MOBILE-1: count non-default filter values for the badge.
|
// UX-MOBILE-1: count non-default filter values for the badge.
|
||||||
const activeFilterCount =
|
const activeFilterCount =
|
||||||
(status !== 'Active' ? 1 : 0) +
|
(status !== 'Breeding' ? 1 : 0) +
|
||||||
(gender !== '' ? 1 : 0) +
|
(gender !== '' ? 1 : 0) +
|
||||||
(colorVarietyId !== '' ? 1 : 0) +
|
(colorVarietyId !== '' ? 1 : 0) +
|
||||||
(originBreeder !== '' ? 1 : 0) +
|
(originBreeder !== '' ? 1 : 0) +
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ function makeGerbil(id: string, name: string, litterId: string | null = null): G
|
|||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
gender: 'unknown',
|
gender: 'unknown',
|
||||||
status: 'Active',
|
status: 'Breeding',
|
||||||
dateOfBirth: null,
|
dateOfBirth: null,
|
||||||
dateOfDeath: null,
|
dateOfDeath: null,
|
||||||
causeOfDeath: null,
|
causeOfDeath: null,
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ function makeGerbil(over: Partial<Gerbil> & { id: string }): Gerbil {
|
|||||||
return {
|
return {
|
||||||
name: over.id,
|
name: over.id,
|
||||||
gender: 'unknown',
|
gender: 'unknown',
|
||||||
status: 'Active' as GerbilStatus,
|
status: 'Breeding' as GerbilStatus,
|
||||||
dateOfBirth: null,
|
dateOfBirth: null,
|
||||||
dateOfDeath: null,
|
dateOfDeath: null,
|
||||||
causeOfDeath: null,
|
causeOfDeath: null,
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ export function farbschlagDistribution(
|
|||||||
): NameCount[] {
|
): NameCount[] {
|
||||||
const byName = new Map<string | null, number>()
|
const byName = new Map<string | null, number>()
|
||||||
for (const g of gerbils) {
|
for (const g of gerbils) {
|
||||||
if (g.status !== 'Active') continue
|
if (g.status !== 'Breeding' && g.status !== 'Pet') continue
|
||||||
const name = resolveName(g)
|
const name = resolveName(g)
|
||||||
byName.set(name, (byName.get(name) ?? 0) + 1)
|
byName.set(name, (byName.get(name) ?? 0) + 1)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -124,6 +124,11 @@ export const de = {
|
|||||||
isDeafUnknown: 'Unbekannt',
|
isDeafUnknown: 'Unbekannt',
|
||||||
isDeafYes: 'Ja',
|
isDeafYes: 'Ja',
|
||||||
isDeafNo: 'Nein',
|
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',
|
save: 'Speichern',
|
||||||
cancel: 'Abbrechen',
|
cancel: 'Abbrechen',
|
||||||
saving: 'Speichern …',
|
saving: 'Speichern …',
|
||||||
@@ -141,8 +146,10 @@ export const de = {
|
|||||||
male: 'Männlich',
|
male: 'Männlich',
|
||||||
female: 'Weiblich',
|
female: 'Weiblich',
|
||||||
},
|
},
|
||||||
|
// STATUS-MODEL: Breeding/Pet ersetzen Active; Deceased+GivenAway = abgeleitet (Backend)
|
||||||
statusLabels: {
|
statusLabels: {
|
||||||
Active: 'Aktiv',
|
Breeding: 'Zucht',
|
||||||
|
Pet: 'Liebhaber',
|
||||||
Deceased: 'Verstorben',
|
Deceased: 'Verstorben',
|
||||||
GivenAway: 'Abgegeben',
|
GivenAway: 'Abgegeben',
|
||||||
ForSale: 'Zur Abgabe',
|
ForSale: 'Zur Abgabe',
|
||||||
|
|||||||
Reference in New Issue
Block a user