Rueckgabe sichtbar machen, Zubehoerteile am Einzelstueck
RUECKGABE
Der Knopf war da, nur nicht zu finden: ein 16-px-Symbol in einer Spalte ohne
Ueberschrift, 52 px breit, ganz rechts in einer horizontal scrollenden Tabelle.
Beschriftet war er allein ueber title= - ein Tooltip, den auf einem Touchgeraet
nie jemand sieht.
Jetzt traegt er Text ("Zuruecknehmen"), die Spalte heisst "Verleih" und ist
breit genug, und beide Knoepfe haben ein aria-label. Dazu eine neue Seite
"Verliehen" in der Seitenleiste: alles Draussene an einem Ort, Rueckgabe direkt
aus der Liste. Bisher gab es diese Uebersicht nur als zwei Dashboard-Karten, und
die stehen nicht im Standard-Layout - wer sie nicht selbst hinzufuegte, hatte
gar keine.
In der App fuehrte der einzige Weg ueber das Bearbeiten-Formular des Stuecks;
jetzt geht es per Wischgeste und Kontextmenue direkt aus der Liste. Der
Verleih-Filter dort sass hinter einem nackten Symbol und ist beschriftet.
Zurueckgenommen wird nur noch nach Rueckfrage, in Web und App.
ZUBEHOER
Ein Netzteil gehoert zu einem Laptop: items.parent_item_id, genau ein Geraet je
Teil, beliebig viele Teile je Geraet. Eine Spalte genuegt dafuer, es braucht
keine Verknuepfungstabelle. ON DELETE SET NULL, damit das Netzteil den Laptop
ueberlebt statt mitgeloescht zu werden - und weil SQLite Fremdschluessel nicht
erzwingt, loest der Router die Zuordnung beim Loeschen zusaetzlich selbst.
Ringe (A traegt B, B traegt A) weist die Zuordnung mit 409 ab; die Elternkette
wird dafuer hochgelaufen, wie beim Kategoriebaum.
Die Beziehung laeuft ueber eigene Endpunkte und bewusst NICHT ueber ItemUpdate:
dessen Schema sendet immer alle Felder mit, auch leere, damit sich Felder
loeschen lassen. Genau so gingen schon einmal Kaufpreis und Waehrung verloren,
als ein Aufrufer ein Feld vergass.
Beim Verleihen fragt die Oberflaeche, welche Teile mitgehen (vorausgewaehlt:
alles, was im Haus ist), beim Zuruecknehmen kommen sie zusammen zurueck. Ohne
das Spiegelbild kaeme das Geraet zurueck und sein Netzteil bliebe ewig
"verliehen", weil niemand mehr danach sucht. Ungefragt nimmt der Server nie
etwas mit.
In der App sind zubehoer und gehoert_zu optional dekodiert: Die App spricht mit
mehreren Serverprofilen, und ein aelterer Server schickt die Felder nicht - ein
Vorgabewert reicht dafuer nicht, Swift nimmt ihn beim Dekodieren nicht her.
12 neue Tests (320 gesamt). Der Umlauf ist ausserdem gegen ein lokales Backend
im Browser durchgespielt: verleihen mit Zubehoer, Rueckfrage, beide zusammen
zurueck.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
co-authored by
Claude Opus 5
Claude Opus 5
parent
ca4e9a2264
commit
a3fd9819c4
@@ -107,7 +107,10 @@ export default function ItemList() {
|
||||
render: (it) => <span className="muted">{it.note || "–"}</span> },
|
||||
{ key: "open", header: "Artikel", label: "Produkt öffnen", width: 90, align: "num",
|
||||
render: (it) => <Link to={`/products/${it.product_id}`}>Produkt</Link> },
|
||||
{ key: "actions", header: "", label: "Verleihen", fixed: true, width: 52, align: "num",
|
||||
// Überschrift und Breite sind Absicht: Vorher stand hier ein unbeschriftetes
|
||||
// 16-px-Symbol in einer 52 px schmalen Spalte ohne Titel, ganz rechts in
|
||||
// einer breiten Tabelle – es war schlicht nicht zu finden.
|
||||
{ key: "actions", header: "Verleih", label: "Verleihen", fixed: true, width: 150, align: "num",
|
||||
render: (it) => (
|
||||
<VerleihAktion item={it} onLend={setLend} onChanged={load} onError={setError} />
|
||||
) },
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { api } from "../api";
|
||||
import Icon from "../components/Icon";
|
||||
import { FristBadge, verleihRowClass } from "../components/Verleih";
|
||||
import { useConfirm } from "../confirm";
|
||||
import { useToast } from "../toast";
|
||||
|
||||
/**
|
||||
* „Was ist gerade draußen?" – alle offenen Verleihe an einem Ort, mit Rückgabe
|
||||
* direkt aus der Liste.
|
||||
*
|
||||
* Bis hierher gab es diese Frage nur über zwei Dashboard-Karten, und die sind
|
||||
* nicht im Standard-Layout (routers/dashboard.py BUILTIN_LAYOUT) – wer sie nicht
|
||||
* selbst hinzufügte, hatte keine Übersicht. Die Einzelstück-Liste beantwortet
|
||||
* sie auch, aber erst nach Filtern über eine Spalte.
|
||||
*/
|
||||
export default function Verliehen() {
|
||||
const toast = useToast();
|
||||
const confirm = useConfirm();
|
||||
const [zeilen, setZeilen] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
const [busyId, setBusyId] = useState(null);
|
||||
|
||||
const laden = useCallback(async () => {
|
||||
try {
|
||||
setZeilen(await api.loans({ openOnly: true }));
|
||||
setError(null);
|
||||
} catch (err) { setError(err.message); setZeilen([]); }
|
||||
}, []);
|
||||
|
||||
useEffect(() => { laden(); }, [laden]);
|
||||
|
||||
async function zurueck(loan) {
|
||||
const ok = await confirm({
|
||||
title: `„${loan.item_uid}“ zurücknehmen?`,
|
||||
message: `Von ${loan.borrower}.`,
|
||||
confirmLabel: "Zurücknehmen",
|
||||
});
|
||||
if (!ok) return;
|
||||
setBusyId(loan.id);
|
||||
try {
|
||||
// Das Zubehör hängt am Einzelstück, nicht am Verleih – diese Liste kennt
|
||||
// es nicht. Wer ein Gerät samt Teilen zurücknimmt, tut das über das
|
||||
// Stück selbst (/i/<uid>), wo beides zusammen angeboten wird.
|
||||
await api.returnItem(loan.item_id);
|
||||
toast(`${loan.item_uid} ist zurück.`);
|
||||
await laden();
|
||||
} catch (err) { setError(err.message); } finally { setBusyId(null); }
|
||||
}
|
||||
|
||||
const ueberfaellig = (zeilen || []).filter((l) => l.days_overdue).length;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-head">
|
||||
<h1>Verliehen</h1>
|
||||
{zeilen && zeilen.length > 0 && (
|
||||
<span className="muted">
|
||||
{zeilen.length} {zeilen.length === 1 ? "Stück" : "Stücke"} draußen
|
||||
{ueberfaellig > 0 && `, ${ueberfaellig} überfällig`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
|
||||
|
||||
{zeilen == null && <div className="muted">Lädt…</div>}
|
||||
|
||||
{zeilen && zeilen.length === 0 && !error && (
|
||||
<div className="card center" style={{ padding: "var(--sp-5)" }}>
|
||||
<Icon name="loan" size={28} />
|
||||
<p className="muted">Nichts verliehen – alles im Haus.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{zeilen && zeilen.length > 0 && (
|
||||
<div className="card table-wrap">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Einzelstück</th>
|
||||
<th>Artikel</th>
|
||||
<th>Verliehen an</th>
|
||||
<th>Seit</th>
|
||||
<th>Zurück bis</th>
|
||||
<th className="num">Verleih</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{zeilen.map((l) => (
|
||||
<tr key={l.id} className={verleihRowClass(l)}>
|
||||
<td data-label="Einzelstück">
|
||||
<Link to={`/i/${l.item_uid}`}>{l.item_uid}</Link>
|
||||
</td>
|
||||
<td data-label="Artikel">
|
||||
{l.product_id
|
||||
? <Link to={`/products/${l.product_id}`}>{l.product_name || "Artikel"}</Link>
|
||||
: <span className="muted">–</span>}
|
||||
{l.product_brand && <span className="muted small"> · {l.product_brand}</span>}
|
||||
</td>
|
||||
<td data-label="Verliehen an"><span className="strong">{l.borrower}</span></td>
|
||||
<td data-label="Seit" className="muted">{l.lent_on}</td>
|
||||
<td data-label="Zurück bis">
|
||||
{l.due_on ? <FristBadge loan={l} /> : <span className="muted">ohne Frist</span>}
|
||||
</td>
|
||||
<td data-label="Verleih" className="num">
|
||||
<button type="button" className="btn sm" disabled={busyId === l.id}
|
||||
onClick={() => zurueck(l)}
|
||||
aria-label={`„${l.item_uid}“ von ${l.borrower} zurücknehmen`}>
|
||||
<Icon name="checkin" size={16} />
|
||||
{busyId === l.id ? "Moment…" : "Zurücknehmen"}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user