diff --git a/gerbil-manager-web/src/pages/GerbilsPage.tsx b/gerbil-manager-web/src/pages/GerbilsPage.tsx index 36e5516..79d3ceb 100644 --- a/gerbil-manager-web/src/pages/GerbilsPage.tsx +++ b/gerbil-manager-web/src/pages/GerbilsPage.tsx @@ -1,12 +1,13 @@ import { useMemo, useState } from 'react' import { Link } from 'react-router-dom' import { de } from '../strings/de' -import { listGerbils } from '../api/gerbils' +import { listGerbils, updateGerbil } from '../api/gerbils' import { listColorVarieties } from '../api/lookups' import { andFilter, condition, type GridifyQuery } from '../api/gridify' import { GENDERS, GERBIL_STATUSES, type Gender, type GerbilStatus } from '../api/types' -import { useApi } from '../hooks/useApi' +import { useApi, useMutation } from '../hooks/useApi' import { formatDate, genderLabel, statusLabel } from '../format/labels' +import './gerbils.css' const PAGE_SIZE = 20 @@ -64,6 +65,26 @@ export default function GerbilsPage() { const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE)) const items = gerbils.data?.items ?? [] + // Multi-select bulk "Zur Abgabe stellen". + const [selected, setSelected] = useState>(new Set()) + const toggleSelect = (id: string) => + setSelected((prev) => { + const next = new Set(prev) + if (next.has(id)) next.delete(id) + else next.add(id) + return next + }) + const bulkForSale = useMutation((ids: string[]) => + Promise.all(ids.map((id) => updateGerbil(id, { status: 'ForSale' }))), + ) + async function markSelectedForSale() { + const result = await bulkForSale.run([...selected]) + if (result.ok) { + setSelected(new Set()) + gerbils.reload() + } + } + return (
@@ -159,10 +180,34 @@ export default function GerbilsPage() {

{t.empty}

)} + {selected.size > 0 && ( +
+ + {selected.size} {t.countLabel} + + + {bulkForSale.error && {bulkForSale.error}} +
+ )} + {items.length > 0 && (
    {items.map((g) => ( -
  • +
  • + toggleSelect(g.id)} + aria-label={g.name} + /> {g.name} diff --git a/gerbil-manager-web/src/pages/gerbils.css b/gerbil-manager-web/src/pages/gerbils.css new file mode 100644 index 0000000..bf03b52 --- /dev/null +++ b/gerbil-manager-web/src/pages/gerbils.css @@ -0,0 +1,33 @@ +/* FEAT-12a multi-select on the Tiere list — page-scoped. */ + +.gerbil-row { + display: flex; + align-items: center; + gap: 0.6rem; +} + +.gerbil-row__check { + width: 1.25rem; + height: 1.25rem; + min-height: 0; + flex: 0 0 auto; +} + +.gerbil-row > .gerbil-card { + flex: 1; +} + +.bulk-bar { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; + padding: 0.6rem 0.9rem; + margin: 0.5rem 0; + border: 1px solid var(--color-accent); + border-radius: 0.5rem; + background: var(--color-accent-soft); + position: sticky; + top: 0; + z-index: 1; +}