Gulum/GerbilManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LITTER-JUVENILE-DETAILS: Farbschlag/Abgabe/Abnehmer/Todesdaten pro Jungtier im Wurf-Detail

Browse Source
This commit is contained in:
Gulum
2026-06-07 03:23:22 +02:00
parent c1b215d06f
commit 03f8e4de90
4 changed files with 105 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
gerbil-manager-web/src/pages/WurfDetailPage.tsx
View File

@@ -1,13 +1,14 @@
import { useMemo } from 'react'
import { useCallback, 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 } from '../format/labels'
import { formatDate, genderLabel } from '../format/labels'
import { isValidGenotype } from '../format/genotypeText'
import { breed, fromDisplayString, type BreedingResult } from '../genetics'
import { breed, fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG, type BreedingResult } from '../genetics'
import BreedingResultView from '../components/BreedingResultView'
export default function WurfDetailPage() {
@@ -43,6 +44,38 @@ 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 (
@@ -117,14 +150,24 @@ 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) => (
<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>
))}
{(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>
)
})}
</ul>
)}