Sprint 8: Material anlegen/bearbeiten im Admin-Portal

PATCH /materialien/{id} existierte im Backend bereits (Prompt 07), im
Frontend bisher nicht angebunden. Formular dient für Anlage UND Bearbeitung
(Klick auf "Bearbeiten" befüllt dasselbe Formular).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L85hmKbvX7Cqkq47KnQhFt

frontend/src/api/types.ts

@@ -44,8 +44,15 @@ export interface Kontrollposition {
 export interface Material {
   id: number;
   name: string;
+  artikelnummer: string | null;
   einheit: string;
   materialtyp: string;
+  kategorie_id: number | null;
+  hersteller: string | null;
+  beschreibung: string | null;
+  code: string | null;
+  warnzeitraum_tage: number | null;
+  aktiv: boolean;
 }
 
 export interface Standort {

frontend/src/pages/AdminPage.tsx

@@ -1,19 +1,33 @@
 import { useEffect, useState } from "react";
 
 import { apiRequest } from "../api/client";
-import type { Beladungsvorlage, Objekt, Standort } from "../api/types";
+import type { Beladungsvorlage, Material, Objekt, Standort } from "../api/types";
+
+const MATERIALTYPEN = [
+  { value: "standard", label: "Standard" },
+  { value: "ablauf_charge", label: "Ablauf/Charge" },
+  { value: "geraet_sn", label: "Gerät mit Seriennummer" },
+];
+
+const LEERES_MATERIAL_FORMULAR = {
+  name: "",
+  artikelnummer: "",
+  einheit: "Stück",
+  materialtyp: "standard",
+};
 
 /**
- * Minimale Admin-Seite (Standort/Objekt-Anlage), nachgezogen weil das
+ * Minimale Admin-Seite (Standort/Material/Objekt-Anlage), nachgezogen weil
- * Frontend bisher nur den Mitarbeiter-Kontrollflow (Sprint 7) abdeckte und
+ * das Frontend bisher nur den Mitarbeiter-Kontrollflow (Sprint 7) abdeckte
- * Stammdaten/Objekte nur per API/Skript angelegt werden konnten. Bewusst
+ * und Stammdaten/Objekte nur per API/Skript angelegt werden konnten. Bewusst
- * schlank: keine Bereich-/Kategorie-/Material-/Vorlagen-CRUD, nur was für
+ * schlank: keine Bereich-/Kategorie-/Vorlagen-CRUD, nur was für die
- * die Pilotphase sofort nötig ist (Vorlagen kommen aus dem Excel-Import).
+ * Pilotphase sofort nötig ist (Vorlagen kommen aus dem Excel-Import).
  */
 export function AdminPage() {
   const [standorte, setStandorte] = useState<Standort[]>([]);
   const [vorlagen, setVorlagen] = useState<Beladungsvorlage[]>([]);
   const [objekte, setObjekte] = useState<Objekt[]>([]);
+  const [materialien, setMaterialien] = useState<Material[]>([]);
   const [fehler, setFehler] = useState<string | null>(null);
   const [laedt, setLaedt] = useState(true);
 
@@ -26,15 +40,70 @@ export function AdminPage() {
   const [standortId, setStandortId] = useState<number | "">("");
   const [objektWirdAngelegt, setObjektWirdAngelegt] = useState(false);
 
+  const [materialFormular, setMaterialFormular] = useState(LEERES_MATERIAL_FORMULAR);
+  const [bearbeiteterMaterialId, setBearbeiteterMaterialId] = useState<number | null>(null);
+  const [materialWirdGespeichert, setMaterialWirdGespeichert] = useState(false);
+
   async function ladeAlles() {
-    const [s, v, o] = await Promise.all([
+    const [s, v, o, m] = await Promise.all([
       apiRequest<Standort[]>("/standorte"),
       apiRequest<Beladungsvorlage[]>("/vorlagen"),
       apiRequest<Objekt[]>("/objekte"),
+      apiRequest<Material[]>("/materialien"),
     ]);
     setStandorte(s);
     setVorlagen(v.filter((vorlage) => vorlage.status === "aktiv"));
     setObjekte(o);
+    setMaterialien(m);
+  }
+
+  function materialBearbeiten(material: Material) {
+    setBearbeiteterMaterialId(material.id);
+    setMaterialFormular({
+      name: material.name,
+      artikelnummer: material.artikelnummer ?? "",
+      einheit: material.einheit,
+      materialtyp: material.materialtyp,
+    });
+  }
+
+  function materialFormularZuruecksetzen() {
+    setBearbeiteterMaterialId(null);
+    setMaterialFormular(LEERES_MATERIAL_FORMULAR);
+  }
+
+  async function materialSpeichern() {
+    setFehler(null);
+    setMaterialWirdGespeichert(true);
+    try {
+      if (bearbeiteterMaterialId !== null) {
+        await apiRequest(`/materialien/${bearbeiteterMaterialId}`, {
+          method: "PATCH",
+          body: {
+            name: materialFormular.name,
+            artikelnummer: materialFormular.artikelnummer || null,
+            einheit: materialFormular.einheit,
+            materialtyp: materialFormular.materialtyp,
+          },
+        });
+      } else {
+        await apiRequest("/materialien", {
+          method: "POST",
+          body: {
+            name: materialFormular.name,
+            artikelnummer: materialFormular.artikelnummer || null,
+            einheit: materialFormular.einheit,
+            materialtyp: materialFormular.materialtyp,
+          },
+        });
+      }
+      materialFormularZuruecksetzen();
+      await ladeAlles();
+    } catch {
+      setFehler("Material konnte nicht gespeichert werden.");
+    } finally {
+      setMaterialWirdGespeichert(false);
+    }
   }
 
   useEffect(() => {
@@ -129,6 +198,83 @@ export function AdminPage() {
         </div>
       </section>
 
+      <section className="section">
+        <h2>Material {bearbeiteterMaterialId !== null ? "bearbeiten" : "anlegen"}</h2>
+        <div className="card">
+          <div className="stack" style={{ marginBottom: "1.25rem" }}>
+            <div className="field">
+              <label>Name</label>
+              <input
+                className="input"
+                value={materialFormular.name}
+                onChange={(e) => setMaterialFormular({ ...materialFormular, name: e.target.value })}
+              />
+            </div>
+            <div className="row">
+              <div className="field" style={{ flex: 1 }}>
+                <label>Artikelnummer</label>
+                <input
+                  className="input"
+                  value={materialFormular.artikelnummer}
+                  onChange={(e) => setMaterialFormular({ ...materialFormular, artikelnummer: e.target.value })}
+                />
+              </div>
+              <div className="field" style={{ width: "7rem" }}>
+                <label>Einheit</label>
+                <input
+                  className="input"
+                  value={materialFormular.einheit}
+                  onChange={(e) => setMaterialFormular({ ...materialFormular, einheit: e.target.value })}
+                />
+              </div>
+            </div>
+            <div className="field">
+              <label>Materialtyp</label>
+              <select
+                className="input"
+                value={materialFormular.materialtyp}
+                onChange={(e) => setMaterialFormular({ ...materialFormular, materialtyp: e.target.value })}
+              >
+                {MATERIALTYPEN.map((t) => (
+                  <option key={t.value} value={t.value}>
+                    {t.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="row">
+              <button
+                className="btn btn-primary"
+                onClick={materialSpeichern}
+                disabled={!materialFormular.name || !materialFormular.einheit || materialWirdGespeichert}
+              >
+                {bearbeiteterMaterialId !== null ? "Speichern" : "Anlegen"}
+              </button>
+              {bearbeiteterMaterialId !== null && (
+                <button className="btn btn-secondary" onClick={materialFormularZuruecksetzen}>
+                  Abbrechen
+                </button>
+              )}
+            </div>
+          </div>
+
+          {materialien.length > 0 && (
+            <ul className="card-list">
+              {materialien.map((m) => (
+                <li key={m.id} className="row-between" style={{ padding: "0.4rem 0" }}>
+                  <span>
+                    {m.name} <span className="text-muted">({m.einheit})</span>
+                  </span>
+                  <button className="btn btn-secondary" onClick={() => materialBearbeiten(m)}>
+                    Bearbeiten
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+
       <section className="section">
         <h2>Objekt aus Vorlage anlegen</h2>
         <div className="card">