From 07f1232d6b4f6e5bd15f28c4518ad627cd8bcc47 Mon Sep 17 00:00:00 2001
From: Scarriffle <scarriffleservices@gmail.com>
Date: Wed, 22 Jul 2026 13:08:29 +0200
Subject: [PATCH] Chargen bearbeiten: Einheit waehlbar (Produkteinheit oder
 Packungen), Texte entschlackt

- Beim Bearbeiten einer Charge steht neben dem Mengenfeld ein Umschalter
  (z.B. Gramm <-> Packung(en)); der Wert wird beim Wechsel umgerechnet und beim
  Speichern korrekt in die Basiseinheit zurueckgerechnet.
- Umstaendlicher Hinweistext unter der Mindestmenge entfernt.
- Redundanter Fusstext unter den Chargen ("Mengen in ...") entfernt; es bleibt
  nur die knappe Umrechnung "1 Packung = 195 g".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/pages/ProductForm.jsx | 43 ++++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/ProductForm.jsx b/web/src/pages/ProductForm.jsx
index 15160a7..f2f19f3 100644
--- a/web/src/pages/ProductForm.jsx
+++ b/web/src/pages/ProductForm.jsx
@@ -289,10 +289,6 @@ export default function ProductForm() {
                   )}
                 </select>
               </div>
-              <span className="muted small">
-                Nur Einheiten der Art „{selectedUnit ? KIND_LABEL[selectedUnit.kind] : "–"}“
-                (passend zur Produkteinheit) plus Packungen.
-              </span>
             </label>
             <label className="grow">
               Gruppe
@@ -340,6 +336,8 @@ export default function ProductForm() {
 function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onChanged, onError }) {
   const [editId, setEditId] = useState(null);
   const [draft, setDraft] = useState({ quantity: "", best_before: "" });
+  // In welcher Einheit die Menge bearbeitet wird: "unit" oder "package".
+  const [editUnit, setEditUnit] = useState("unit");
 
   const unitFactor = product?.unit_factor || 1;
   const unitName = product?.unit_name || baseShort;
@@ -357,15 +355,31 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha
     return parts.join(" · ");
   }
 
+  // Faktor der aktuell im Editor gewählten Eingabeeinheit.
+  function editFactorOf(mode) {
+    return mode === "package" && pkgSize > 0 ? pkgSize : unitFactor;
+  }
+  const editFactor = editFactorOf(editUnit);
+
   function startEdit(l) {
     setEditId(l.id);
-    setDraft({ quantity: l.quantity / primaryFactor, best_before: l.best_before || "" });
+    setEditUnit("unit");
+    setDraft({ quantity: l.quantity / unitFactor, best_before: l.best_before || "" });
+  }
+
+  function changeEditUnit(newMode) {
+    if (draft.quantity !== "" && newMode !== editUnit) {
+      const oldF = editFactorOf(editUnit);
+      const newF = editFactorOf(newMode);
+      setDraft((d) => ({ ...d, quantity: String((Number(d.quantity) * oldF) / newF) }));
+    }
+    setEditUnit(newMode);
   }
 
   async function saveEdit(l) {
     try {
       await api.updateLot(l.id, {
-        quantity: Number(draft.quantity) * primaryFactor,
+        quantity: Number(draft.quantity) * editFactor,
         best_before: draft.best_before || null,
       });
       setEditId(null);
@@ -412,7 +426,15 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha
                         <input type="number" step="any" min="0" value={draft.quantity}
                           onChange={(e) => setDraft({ ...draft, quantity: e.target.value })}
                           style={{ maxWidth: 90, marginTop: 0 }} />
-                        <span className="muted small">{primaryLabel}</span>
+                        {pkgSize > 0 ? (
+                          <select value={editUnit} onChange={(e) => changeEditUnit(e.target.value)}
+                            style={{ maxWidth: 120, marginTop: 0 }}>
+                            <option value="unit">{unitName}</option>
+                            <option value="package">Packung(en)</option>
+                          </select>
+                        ) : (
+                          <span className="muted small">{unitName}</span>
+                        )}
                       </div>
                     ) : (
                       <>
@@ -461,10 +483,9 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha
           </tbody>
         </table>
       </div>
-      <p className="muted small">
-        Mengen in {unitName}
-        {pkgSize > 0 ? ` (1 Packung = ${fmt(pkgSize)} ${baseShort})` : ""}.
-      </p>
+      {pkgSize > 0 && (
+        <p className="muted small">1 Packung = {fmt(pkgSize)} {baseShort}</p>
+      )}
     </section>
   );
 }