Eigene Felder: Spalten in der Artikelliste und Export nach Feldwerten

Eigene Felder waren bisher nur im Artikelformular zu sehen. Zwei Luecken
daraus: In den Listen tauchten sie gar nicht auf, und es gab keinen Weg,
gezielt nach einem Feldwert zu exportieren.

SPALTEN. Je eigenem Feld eine Spalte in der Artikelliste, Schluessel
feld:<id> wie im Etikettenexport (die ID und nicht key, der ist nur je
Kategorie eindeutig). Reine Oberflaechenarbeit: GET /products liefert die
Werte laengst mit, Products.jsx warf sie nur weg. Filtern, Sortieren,
Ein-/Ausblenden und das Merken erbt die Spalte von DataTable.

Ja/Nein erscheint als Haken, liefert zum Filtern aber "Ja"/"Nein" - und
"Nein" auch ohne gespeicherten Wert: Wer den Haken wegnimmt, loescht die
Zeile, "nein" und "nie gesetzt" sind in den Daten dasselbe. Zahlen sortieren
als Zahl, sonst stuende "10" vor "9".

DataTable lernt dafuer defaultHidden: Alle Feldspalten starten verborgen und
sind erst auf Wunsch da - sonst hinge die Liste je nach Haushalt voller
Spalten, die fuer die meisten Zeilen gar nicht gelten.

Dabei einen vorhandenen Fehler gefunden: urlState las die Sortierung mit
split(":") und nahm das erste Stueck als Spalte. Bei "feld:12:asc" kam
dadurch "feld" heraus, und die Sortierung fiel beim Neuladen still weg. Jetzt
am LETZTEN Doppelpunkt getrennt.

EXPORT. Die Etikettenvorlagen bekommen einen Wertefilter: feldfilter in der
Konfiguration, mehrere Bedingungen UND-verknuepft, genau verglichen ohne
Ruecksicht auf Gross-/Kleinschreibung, leerer Wert heisst "ohne Wert".
Gefiltert wird in Python ueber die ohnehin geladenen Feldwerte - auf value
liegt kein Index, und "fehlende Zeile zaehlt als leer" braeuchte in SQL je
Bedingung ein NOT EXISTS.

Der Filter gilt auch fuer Einzelstuecke; der Wert haengt am Artikel des
Stuecks. Ein geloeschtes Feld laesst seine Bedingung wegfallen, genau wie
eine Spalte zu einem geloeschten Feld still verschwindet.

Die Sicherung schreibt den Filter wie die Spalten auf Kategorie::Label um -
ohne das zeigte er nach dem Zurueckspielen auf ein fremdes Feld, und der
Export gaebe mehr Zeilen aus als das Original. Dafuer ist _konfiguration aus
dem Router als konfiguration_schreiben in den Dienst gezogen: Sonst haetten
DREI Stellen denselben JSON-Text gebaut.

Zehn neue Tests, 540 gruen. Keine Schemaaenderung - konfiguration ist freies
JSON, alte Vorlagen lesen sich als leerer Filter.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/components/DataTable.jsx

@@ -13,7 +13,8 @@ import { leseTabelle, schreibeTabelle } from "../urlState";
  *
  * Spalten-Def: { key, header, render(row)→JSX, filterText(row)? (aktiviert Filter),
  * sortValue(row)? (Sortierung), align:"num", grow:true (füllt Restbreite),
- * fixed:true (kein Reorder/Resize), width, min }.
+ * fixed:true (kein Reorder/Resize), width, min,
+ * defaultHidden:true (erscheint erst, wenn man sie im Spalten-Menü einschaltet) }.
  *
  * `tree` (optional): { column, idOf(row), parentIdOf(row) } – zeigt die Zeilen als
  * ein-/ausklappbaren Baum in der Spalte `column`. Sobald gefiltert oder sortiert
@@ -60,11 +61,25 @@ export default function DataTable({
   // Deshalb hier nachziehen. Angehaengt, nicht einsortiert: eine selbst
   // gewaehlte Reihenfolge soll nicht umspringen.
   const schluessel = columns.map((c) => c.key).join("|");
+  // Spiegel der Reihenfolge, um sie im Effekt zu lesen, ohne sie in die
+  // Abhaengigkeiten zu nehmen (das liefe im Kreis). Gleiche Technik wie bei
+  // onVisibleRef weiter unten.
+  const ordnungRef = useRef(order);
+  ordnungRef.current = order;
   useEffect(() => {
-    setOrder((alt) => {
-      const fehlend = columns.map((c) => c.key).filter((k) => !alt.includes(k));
-      return fehlend.length ? [...alt, ...fehlend] : alt;
-    });
+    const fehlend = columns.map((c) => c.key).filter((k) => !ordnungRef.current.includes(k));
+    if (!fehlend.length) return;
+    setOrder((alt) => [...alt, ...fehlend.filter((k) => !alt.includes(k))]);
+    // Spalten, die sich als „erst auf Wunsch" melden (defaultHidden), starten
+    // verborgen - aber nur beim ERSTEN Auftauchen. Wer sie einschaltet, steht
+    // danach in `order` und taucht hier nie wieder auf.
+    //
+    // setzeHidden und nicht setHidden: Nur der merkt den Stand ueberhaupt
+    // (siehe Speicher-Effekt). Mit setHidden stuende die Spalte zwar in der
+    // gemerkten Reihenfolge, aber nicht unter den versteckten - beim zweiten
+    // Besuch waere sie sichtbar.
+    const verbergen = fehlend.filter((k) => colByKey[k]?.defaultHidden);
+    if (verbergen.length) setzeHidden((s) => new Set([...s, ...verbergen]));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schluessel]);
 
@@ -431,7 +446,9 @@ export default function DataTable({
     // Sortierung bleiben; der Speicher-Effekt schreibt den neuen Stand.
     setOrder(columns.map((c) => c.key));
     setWidths({});
-    setzeHidden(new Set());
+    // „Zuruecksetzen" heisst Auslieferungszustand, nicht „alles einblenden":
+    // Spalten mit defaultHidden verschwinden wieder.
+    setzeHidden(new Set(columns.filter((c) => c.defaultHidden).map((c) => c.key)));
   }
 
   return (

web/src/components/EtikettenVorlagen.jsx

@@ -123,6 +123,9 @@ export default function EtikettenVorlagen({ onError }) {
                 <span className="muted small">
                   {ARTEN.find((a) => a.wert === v.art)?.label || v.art}
                   {" · "}{v.spalten.length} Spalten
+                  {/* Dass eine Vorlage nur einen Teil ausgibt, soll man sehen,
+                      ohne sie aufzuklappen. */}
+                  {v.feldfilter?.length ? " · gefiltert" : ""}
                   {v.datei_name ? " · mit Vorlage" : ""}
                 </span>
               </button>
@@ -158,6 +161,7 @@ function VorlageEditor({ vorlage, onGespeichert, onError }) {
   const [spalten, setSpalten] = useState(vorlage.spalten);
   const [katIds, setKatIds] = useState(vorlage.kategorie_ids);
   const [trenn, setTrenn] = useState(vorlage.trennzeichen);
+  const [feldfilter, setFeldfilter] = useState(vorlage.feldfilter || []);
   const [moeglich, setMoeglich] = useState([]);
   const [kategorien, setKategorien] = useState([]);
   const [busy, setBusy] = useState(false);
@@ -192,7 +196,7 @@ function VorlageEditor({ vorlage, onGespeichert, onError }) {
     setBusy(true);
     try {
       await api.etikettenVorlageAendern(vorlage.id, {
-        art, spalten, kategorie_ids: katIds, trennzeichen: trenn,
+        art, spalten, kategorie_ids: katIds, trennzeichen: trenn, feldfilter,
       });
       await onGespeichert();
       toast("Vorlage gespeichert.");
@@ -256,6 +260,43 @@ function VorlageEditor({ vorlage, onGespeichert, onError }) {
             Eigene Felder hängen am Artikel, nicht am einzelnen Stück – alle Stücke
             eines Artikels tragen denselben Wert.
           </p>
+
+          <span className="muted small" style={{ display: "block", marginTop: "var(--sp-3)" }}>
+            Nur Zeilen mit bestimmten Feldwerten (alle Bedingungen müssen zutreffen)
+          </span>
+          <ul className="clean-list" style={{ marginTop: "var(--sp-2)" }}>
+            {feldfilter.map((f, i) => (
+              <li key={f.feld_id}>
+                <span style={{ flex: 1, minWidth: 0 }}>{titelVon(`feld:${f.feld_id}`)}</span>
+                <input value={f.wert} placeholder="ohne Wert" style={{ width: 120 }}
+                  onChange={(e) => setFeldfilter(feldfilter.map((x, j) =>
+                    (j === i ? { ...x, wert: e.target.value } : x)))} />
+                <button type="button" className="btn-icon danger" title="Bedingung entfernen"
+                  onClick={() => setFeldfilter(feldfilter.filter((_, j) => j !== i))}>
+                  <Icon name="close" size={14} />
+                </button>
+              </li>
+            ))}
+          </ul>
+          <select value="" style={{ marginTop: "var(--sp-1)" }}
+            onChange={(e) => {
+              const id = Number(e.target.value.slice("feld:".length));
+              if (!id) return;
+              // Ein Feld nur einmal: zwei Bedingungen darauf koennten sich nie
+              // beide erfuellen.
+              setFeldfilter([...feldfilter.filter((x) => x.feld_id !== id),
+                             { feld_id: id, wert: "" }]);
+            }}>
+            <option value="">+ Bedingung auf einem eigenen Feld …</option>
+            {moeglich.filter((m) => m.schluessel.startsWith("feld:")).map((m) => (
+              <option key={m.schluessel} value={m.schluessel}>{m.titel}</option>
+            ))}
+          </select>
+          <p className="muted small">
+            Wert genau so eingeben, wie er im Feld steht; bei Ja/Nein-Feldern
+            „ja" oder „nein". <strong>Leer heißt: ohne Wert</strong> – also alle,
+            bei denen das Feld nicht ausgefüllt ist.
+          </p>
         </>
       )}
 

web/src/fields.jsx

@@ -1,3 +1,5 @@
+import Icon from "./components/Icon";
+
 // Selbst definierte Felder: Typen-Registry und die passenden Eingabe-Elemente.
 // Bewusst schlank gehalten und aus einer Konfiguration heraus gerendert – analog
 // zur Karten-Registry des Dashboards (dashboard/cards.jsx).
@@ -97,3 +99,87 @@ export function DynamicFields({ fields, values, onChange, disabled }) {
     </div>
   );
 }
+
+/**
+ * Ein eigenes Feld als Tabellenspalte.
+ *
+ * Der Schlüssel ist `feld:<id>` – dieselbe Schreibweise wie im Etikettenexport
+ * (FELD_PRAEFIX in services/etiketten.py). Die ID und nicht `key`, weil `key`
+ * nur JE KATEGORIE eindeutig ist: Zwei Kategorien dürfen beide „kapazitaet"
+ * führen.
+ *
+ * `header` kommt von aussen, weil erst der Aufrufer weiss, ob das Label mit
+ * einem anderen kollidiert und um die Kategorie ergänzt werden muss.
+ *
+ * Anzeige und Filterwert sind bewusst verschieden: Ein Häkchen lässt sich nicht
+ * durchsuchen, deshalb liefert `filterText` „Ja"/„Nein" – damit bietet die
+ * Werteauswahl der Tabelle genau diese beiden an.
+ */
+export function feldSpalte(field, header) {
+  const lies = (p) => p.field_values?.[String(field.id)] ?? "";
+
+  const spalte = {
+    key: `feld:${field.id}`,
+    header,
+    width: 130,
+    // Eigene Felder hängen an einer Kategorie; für die meisten Zeilen gibt es
+    // das Feld gar nicht. Ein „–" behauptete „nichts eingetragen" – leer liest
+    // sich richtig als „trifft hier nicht zu".
+    render: (p) => lies(p) || null,
+    filterText: lies,
+    defaultHidden: true,
+  };
+
+  switch (field.field_type) {
+    case "boolean":
+      return {
+        ...spalte,
+        render: (p) => (lies(p) === "true" ? <Icon name="check" size={14} /> : null),
+        // „Nein" auch ohne gespeicherten Wert: Wer den Haken wegnimmt, löscht
+        // die Zeile (apply_field_values) – „nein" und „nie gesetzt" sind in den
+        // Daten dasselbe.
+        filterText: (p) => (lies(p) === "true" ? "Ja" : "Nein"),
+      };
+    case "number":
+      return {
+        ...spalte,
+        align: "num",
+        // Zahlen müssen als Zahl sortieren, sonst steht "10" vor "9". Der
+        // Vergleich der Tabelle rechnet nur, wenn BEIDE Seiten Zahlen sind.
+        // Leeres zuerst, und -Infinity statt NaN: NaN machte die Sortierung
+        // unstetig, 0 vermischte Leeres mit echten Nullen.
+        sortValue: (p) => {
+          const n = Number(String(lies(p)).replace(",", "."));
+          return Number.isFinite(n) ? n : -Infinity;
+        },
+      };
+    case "date":
+      return {
+        ...spalte,
+        render: (p) => {
+          const roh = lies(p);
+          const d = roh ? new Date(roh) : null;
+          return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString("de-DE") : roh || null;
+        },
+        filterText: (p) => {
+          const roh = lies(p);
+          const d = roh ? new Date(roh) : null;
+          return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString("de-DE") : roh;
+        },
+        // Nach dem ISO-Text sortieren: buchstäblich geordnet ist zeitlich geordnet.
+        sortValue: lies,
+      };
+    case "textarea":
+      return {
+        ...spalte,
+        // Zeilenumbrüche zusammenfalten, sonst sprengt eine Notiz die Zeilenhöhe.
+        // Gesucht wird weiterhin im vollen Text.
+        render: (p) => {
+          const roh = lies(p);
+          return roh ? <span title={roh}>{roh.replace(/\s+/g, " ")}</span> : null;
+        },
+      };
+    default:
+      return spalte;
+  }
+}

web/src/pages/Products.jsx

@@ -10,6 +10,7 @@ import CategoryPathLabel, { pathParts } from "../components/CategoryPathLabel";
 import { categoryInfoMap } from "../categoryPath";
 import { gruppenInfoMap } from "../groupGraph";
 import { fmt, gebinde, unitShort } from "../units";
+import { feldSpalte } from "../fields";
 
 // Wie viele Basiseinheiten eine "Artikeleinheit" umfasst (Gebinde oder Produkteinheit).
 function unitCount(p) {
@@ -47,6 +48,9 @@ export default function Products({ fixedType = null }) {
   const [categories, setCategories] = useState([]);
   // Gruppen nur fuer die Pfad-Anzeige der Gruppen-Spalte.
   const [groups, setGroups] = useState([]);
+  // Alle eigenen Felder quer ueber die Kategorien - eine Anfrage, wenige
+  // Zeilen. Die WERTE stehen ohnehin schon an jedem Artikel.
+  const [felder, setFelder] = useState([]);
   // "" = alle, sonst "food"/"object": trennt Lebensmittel und Gegenstände.
   // In der URL, damit ein Neuladen die Auswahl behält und sich ein Stand
   // verschicken lässt.
@@ -63,6 +67,7 @@ export default function Products({ fixedType = null }) {
       .finally(() => setLoading(false));
     api.listCategories().then(setCategories).catch(() => {});
     api.listGroups().then(setGroups).catch(() => {});
+    api.listFieldDefinitions().then(setFelder).catch(() => {});
   }, []);
 
   // Kategorie als Pfad + Tokens (jede Ebene), damit "Klamotten" auch die
@@ -76,7 +81,25 @@ export default function Products({ fixedType = null }) {
   const titel = fixedType === "food" ? "Lebensmittel"
     : fixedType === "object" ? "Gegenstände" : "Produkte";
 
-  const columns = [
+  // Eine Spalte je eigenem Feld, standardmaessig ausgeblendet. Der Titel traegt
+  // die Einheit wie im Etikettenexport; kollidieren zwei Labels aus
+  // verschiedenen Kategorien, kommt der Kategoriename dazu - sonst stuenden im
+  // Spalten-Menue zwei gleich benannte Eintraege, die nur die ID unterscheidet.
+  const feldSpalten = useMemo(() => {
+    const titel = (f) => (f.unit ? `${f.label} (${f.unit})` : f.label);
+    const wieOft = new Map();
+    for (const f of felder) wieOft.set(titel(f), (wieOft.get(titel(f)) || 0) + 1);
+    return felder.map((f) => {
+      const kat = catInfo.get(f.category_id)?.parts.at(-1);
+      const kopf = wieOft.get(titel(f)) > 1 && kat ? `${titel(f)} · ${kat}` : titel(f);
+      return feldSpalte(f, kopf);
+    });
+  }, [felder, catInfo]);
+
+  // Gemerkt, weil die Tabelle ihre Wertelisten neu rechnet, sobald sich die
+  // Identitaet des Spalten-Arrays aendert - mit vielen Feldspalten ueber alle
+  // Artikel waere das bei jedem Rendern spuerbar.
+  const columns = useMemo(() => [
     { key: "thumb", header: "", label: "Bild", fixed: true, width: 56,
       render: (p) => <ProduktThumb productId={p.id} version={p.image_version} alt={p.name} /> },
     { key: "name", header: "Name", grow: true, min: 200,
@@ -148,7 +171,8 @@ export default function Products({ fixedType = null }) {
     // einen sichtbaren Titel – an einem leeren Kopf gibt es nichts zu greifen.
     { key: "details", header: "Details", label: "Details", width: 90, align: "num",
       render: (p) => <Link to={`/products/${p.id}`}>Details</Link> },
-  ].filter(Boolean);
+    ...feldSpalten,
+  ].filter(Boolean), [activeTyp, catInfo, grpInfo, feldSpalten]);
 
   return (
     <div>

web/src/urlState.js

@@ -158,7 +158,12 @@ export function leseTabelle(params, kennt) {
   let sort = null;
   const sortRoh = params.get("sort");
   if (sortRoh) {
-    const [spalte, richtung] = sortRoh.split(":");
+    // Am LETZTEN Doppelpunkt trennen: Spaltenschlüssel dürfen selbst einen
+    // enthalten ("feld:12"). Ein split(":") machte daraus die Spalte "feld",
+    // die niemand kennt – die Sortierung fiel beim Neuladen still weg.
+    const schnitt = sortRoh.lastIndexOf(":");
+    const spalte = schnitt < 0 ? sortRoh : sortRoh.slice(0, schnitt);
+    const richtung = schnitt < 0 ? "asc" : sortRoh.slice(schnitt + 1);
     if (kennt(spalte)) {
       sort = { key: spalte, dir: richtung === "desc" ? "desc" : "asc" };
       etwas = true;