116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
import { useMemo, useState } from 'react'
|
|
import { de } from '../strings/de'
|
|
import { listGerbils } from '../api/gerbils'
|
|
import { listColorVarieties } from '../api/lookups'
|
|
import { condition } from '../api/gridify'
|
|
import type { Gerbil } from '../api/types'
|
|
import { useApi } from '../hooks/useApi'
|
|
import { fromDisplayString, genotypeToFarbschlag } from '../genetics'
|
|
import GroupComposer from '../components/GroupComposer'
|
|
import './abgabe.css'
|
|
|
|
const UNGROUPED = 'ungrouped'
|
|
|
|
export default function AbgabePage() {
|
|
const t = de.pages.abgabe
|
|
|
|
const forSale = useApi(
|
|
() =>
|
|
listGerbils({
|
|
filter: condition({ field: 'status', op: '==', value: 'ForSale' }),
|
|
orderBy: 'name',
|
|
page: 1,
|
|
pageSize: 1000,
|
|
}),
|
|
[],
|
|
)
|
|
const colorVarieties = useApi(() => listColorVarieties(), [])
|
|
|
|
const animals = useMemo(() => forSale.data?.items ?? [], [forSale.data])
|
|
const colorName = useMemo(
|
|
() => new Map((colorVarieties.data ?? []).map((c) => [c.id, c.name])),
|
|
[colorVarieties.data],
|
|
)
|
|
|
|
// Manual group assignment, seeded from Becken (enclosure) occupancy.
|
|
const [groupOf, setGroupOf] = useState<Record<string, string>>({})
|
|
const assignment = (g: Gerbil): string =>
|
|
groupOf[g.id] ?? g.enclosureId ?? UNGROUPED
|
|
|
|
// Ordered distinct group ids (in animal order) -> stable 1-based numbering.
|
|
const groupIds = useMemo(() => {
|
|
const seen: string[] = []
|
|
for (const a of animals) {
|
|
const gid = assignment(a)
|
|
if (!seen.includes(gid)) seen.push(gid)
|
|
}
|
|
return seen
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [animals, groupOf])
|
|
|
|
const farbschlagOf = (g: Gerbil): string => {
|
|
if (g.colorVarietyId && colorName.has(g.colorVarietyId)) return colorName.get(g.colorVarietyId)!
|
|
if (g.genotype) {
|
|
try {
|
|
return genotypeToFarbschlag(fromDisplayString(g.genotype))
|
|
} catch {
|
|
/* fall through */
|
|
}
|
|
}
|
|
return '—'
|
|
}
|
|
|
|
function moveTo(gerbilId: string, groupId: string) {
|
|
setGroupOf((s) => ({ ...s, [gerbilId]: groupId }))
|
|
}
|
|
|
|
if (forSale.loading) return <p className="muted">{de.common.loading}</p>
|
|
|
|
return (
|
|
<section className="page">
|
|
<h2>{t.title}</h2>
|
|
<p className="muted">{t.subtitle}</p>
|
|
|
|
{animals.length === 0 ? (
|
|
<p className="muted">{t.empty}</p>
|
|
) : (
|
|
<>
|
|
{/* Regrouping roster */}
|
|
<div className="abgabe-roster">
|
|
<h3>{t.grouping.title}</h3>
|
|
<p className="muted">{t.grouping.byEnclosure}</p>
|
|
<ul className="abgabe-roster__list">
|
|
{animals.map((a) => (
|
|
<li key={a.id}>
|
|
<span>{a.name}</span>
|
|
<select
|
|
value={assignment(a)}
|
|
onChange={(e) => moveTo(a.id, e.target.value)}
|
|
aria-label={t.grouping.moveTo}
|
|
>
|
|
{groupIds.map((gid, i) => (
|
|
<option key={gid} value={gid}>
|
|
{t.grouping.groupLabel} {i + 1}
|
|
</option>
|
|
))}
|
|
<option value={`new-${a.id}`}>{t.grouping.newGroup}</option>
|
|
</select>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{groupIds.map((gid, i) => (
|
|
<GroupComposer
|
|
key={gid}
|
|
groupNumber={i + 1}
|
|
animals={animals.filter((a) => assignment(a) === gid)}
|
|
farbschlagOf={farbschlagOf}
|
|
/>
|
|
))}
|
|
</>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|