Web: alle Kategorie-Auswahlen als aufklappbarer Baum

Statt der nativen "— —"-Dropdowns nutzen jetzt auch Produktformular (Kategorie + Inline-"Neue Kategorie"-Elternwahl), Einlagern-Maske und Produkte-Filter den CategorySelect-Baum. CategorySelect um optionale Zusatz-Eintraege (extraOptions) erweitert, damit der Produkte-Filter "Alle Kategorien"/"Ohne Kategorie" weiter anbietet. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-26 13:07:36 +02:00
parent 956a472c04
commit dc66a6d7ff
4 changed files with 51 additions and 35 deletions
--- a/web/src/components/CategorySelect.jsx
+++ b/web/src/components/CategorySelect.jsx
@@ -16,6 +16,9 @@ export default function CategorySelect({
  onChange,
  nodes,
  rootLabel = "– oberste Ebene –",
+  // Zusätzliche Einträge über dem Baum, z.B. { value: 0, label: "Ohne Kategorie" }
+  // für Filter. Ihr Wert wird unverändert an onChange gereicht.
+  extraOptions = [],
  disabled = false,
 }) {
  const [open, setOpen] = useState(false);
@@ -29,8 +32,10 @@ export default function CategorySelect({
  const idset = new Set(nodes.map((n) => n.id));
  const hasKids = (id) => nodes.some((n) => n.parent_id === id);

-  const selected = value == null || value === "" ? null : Number(value);
-  const label = selected == null ? rootLabel : nameById[selected] ?? rootLabel;
+  const isRoot = value == null || value === "";
+  const extra = extraOptions.find((o) => String(o.value) === String(value));
+  const selectedId = !isRoot && !extra ? Number(value) : null;
+  const label = isRoot ? rootLabel : extra ? extra.label : nameById[selectedId] ?? rootLabel;

  function place() {
    const r = btnRef.current?.getBoundingClientRect();
@@ -101,7 +106,7 @@ export default function CategorySelect({
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
      >
-        <span className={selected == null ? "muted" : ""}>{label}</span>
+        <span className={isRoot ? "muted" : ""}>{label}</span>
        <Icon name="chevronRight" size={13} className={`caret ${open ? "open" : ""}`} />
      </button>

@@ -113,12 +118,23 @@ export default function CategorySelect({
        >
          <button
            type="button"
-            className={`tree-pop-opt ${selected == null ? "sel" : ""}`}
+            className={`tree-pop-opt ${isRoot ? "sel" : ""}`}
            style={{ paddingLeft: 12 }}
            onClick={() => pick(null)}
          >
            {rootLabel}
          </button>
+          {extraOptions.map((o) => (
+            <button
+              key={String(o.value)}
+              type="button"
+              className={`tree-pop-opt ${extra && String(extra.value) === String(o.value) ? "sel" : ""}`}
+              style={{ paddingLeft: 12 }}
+              onClick={() => pick(o.value)}
+            >
+              {o.label}
+            </button>
+          ))}
          {visible.map((n) => {
            const kids = hasKids(n.id);
            const zu = collapsed.has(n.id);
@@ -139,7 +155,7 @@ export default function CategorySelect({
                )}
                <button
                  type="button"
-                  className={`tree-pop-opt ${selected === n.id ? "sel" : ""}`}
+                  className={`tree-pop-opt ${selectedId === n.id ? "sel" : ""}`}
                  onClick={() => pick(n.id)}
                >
                  {n.name}
--- a/web/src/pages/CheckIn.jsx
+++ b/web/src/pages/CheckIn.jsx
@@ -7,6 +7,7 @@ import { ProduktThumb } from "../components/ProduktBild";
 import { useToast } from "../toast";
 import { suggestionToProduct } from "../offUtils";
 import { asTree } from "../categoryTree";
+import CategorySelect from "../components/CategorySelect";
 import { buildUnitOptions, fmt, fromMonthInput, isExpired, monthInputToLastDay } from "../units";

 const emptyLine = () => ({ quantity: "", best_before: "" });
@@ -138,12 +139,12 @@ export default function CheckIn() {
        <div className="row">
          <label className="grow">
            Kategorie
-            <select value={newCategoryId} onChange={(e) => setNewCategoryId(e.target.value)}>
-              <option value="">– keine –</option>
-              {asTree(categories).map((c) => (
-                <option key={c.id} value={c.id}>{"— ".repeat(c.depth)}{c.name}</option>
-              ))}
-            </select>
+            <CategorySelect
+              value={newCategoryId === "" ? null : Number(newCategoryId)}
+              nodes={asTree(categories)}
+              rootLabel="– keine –"
+              onChange={(id) => setNewCategoryId(id == null ? "" : String(id))}
+            />
            <span className="muted small">Nur für den Überblick in der Artikelliste.</span>
          </label>
          <label className="grow">
--- a/web/src/pages/ProductForm.jsx
+++ b/web/src/pages/ProductForm.jsx
@@ -10,6 +10,7 @@ import ProduktBild from "../components/ProduktBild";
 import { useToast } from "../toast";
 import { useSettings } from "../settings";
 import { asTree } from "../categoryTree";
+import CategorySelect from "../components/CategorySelect";
 import { DynamicFields, FIELD_TYPES } from "../fields";
 import ObjektBestand from "../components/ObjektBestand";
 import Einzelstuecke from "../components/Einzelstuecke";
@@ -696,15 +697,13 @@ export default function ProductForm() {
              <span className="tip" title="Nur Kategorien des gewählten Typs. Gegenstands-Kategorien zeigen Menge je Lagerort, Lebensmittel MHD/Chargen.">
                Kategorie
              </span>
-              <select value={form.category_id} onChange={(e) => set("category_id", e.target.value)}
-                disabled={readOnly}>
-                <option value="">– keine –</option>
-                {asTree(categories).filter((c) => c.tracking === modus).map((c) => (
-                  <option key={c.id} value={c.id}>
-                    {"— ".repeat(c.depth)}{c.name}
-                  </option>
-                ))}
-              </select>
+              <CategorySelect
+                value={form.category_id === "" ? null : Number(form.category_id)}
+                nodes={asTree(categories).filter((c) => c.tracking === modus)}
+                rootLabel="– keine –"
+                disabled={readOnly}
+                onChange={(id) => set("category_id", id == null ? "" : String(id))}
+              />
            </label>
            {isAdmin && (
              <div className="grow" style={{ display: "flex", alignItems: "flex-end" }}>
@@ -729,13 +728,12 @@ export default function ProductForm() {
                    onChange={(e) => setNewCat({ ...newCat, name: e.target.value })} />
                </label>
                <label className="grow">Untergeordnet (optional)
-                  <select value={newCat.parent_id}
-                    onChange={(e) => setNewCat({ ...newCat, parent_id: e.target.value })}>
-                    <option value="">– oberste Ebene –</option>
-                    {asTree(categories).filter((c) => c.tracking === modus).map((c) => (
-                      <option key={c.id} value={c.id}>{"— ".repeat(c.depth)}{c.name}</option>
-                    ))}
-                  </select>
+                  <CategorySelect
+                    value={newCat.parent_id === "" ? null : Number(newCat.parent_id)}
+                    nodes={asTree(categories).filter((c) => c.tracking === modus)}
+                    rootLabel="– oberste Ebene –"
+                    onChange={(id) => setNewCat({ ...newCat, parent_id: id == null ? "" : String(id) })}
+                  />
                </label>
              </div>
              <button type="button" className="btn primary" onClick={createCategoryInline}>
--- a/web/src/pages/Products.jsx
+++ b/web/src/pages/Products.jsx
@@ -6,6 +6,7 @@ import Icon from "../components/Icon";
 import { ProduktThumb } from "../components/ProduktBild";
 import { fmt, gebinde, unitShort } from "../units";
 import { asTree } from "../categoryTree";
+import CategorySelect from "../components/CategorySelect";

 // Wie viele Basiseinheiten eine "Artikeleinheit" umfasst (Gebinde oder Produkteinheit).
 function unitCount(p) {
@@ -83,14 +84,14 @@ export default function Products() {
        <label className="grow" style={{ margin: 0 }}>
          <input placeholder="Produkt suchen…" value={q} onChange={(e) => setQ(e.target.value)} />
        </label>
-        <label style={{ margin: 0 }}>
-          <select value={categoryId} onChange={(e) => { setCategoryId(e.target.value); load(e.target.value); }}>
-            <option value="">Alle Kategorien</option>
-            <option value="0">Ohne Kategorie</option>
-            {asTree(categories).filter((c) => !typ || c.tracking === typ).map((c) => (
-              <option key={c.id} value={c.id}>{"— ".repeat(c.depth)}{c.name}</option>
-            ))}
-          </select>
+        <label style={{ margin: 0, width: 230 }}>
+          <CategorySelect
+            value={categoryId}
+            nodes={asTree(categories).filter((c) => !typ || c.tracking === typ)}
+            rootLabel="Alle Kategorien"
+            extraOptions={[{ value: 0, label: "Ohne Kategorie" }]}
+            onChange={(id) => { const v = id == null ? "" : String(id); setCategoryId(v); load(v); }}
+          />
        </label>
        <button className="btn"><Icon name="search" size={16} />Suchen</button>
      </form>