Refactor: große Dateien in kleinere Module/Komponenten aufgeteilt

Explizite Vorgabe: keine wachsenden Monolith-Dateien. AdminPage.tsx (349 Zeilen) in pages/admin/{Standort,Material,Objekt}Section.tsx aufgeteilt, KontrollPage.tsx (277 Zeilen) in pages/kontrolle/{useKontrolle, PositionCard,StatusBadge,types} aufgeteilt, services/kontrolle.py (332 Zeilen) in ein Package (lifecycle/erfassung/exceptions) aufgeteilt - öffentliche API bleibt über __init__.py unverändert re-exportiert, kein bestehender Import musste angepasst werden. Reines Refactoring, keine Verhaltensänderung. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L85hmKbvX7Cqkq47KnQhFt
2026-09-04 00:45:18 +02:00
parent 08b10c7c37
commit f6084e2d5a
14 changed files with 1079 additions and 661 deletions
@@ -0,0 +1,146 @@
+import { useState } from "react";
+
+import { apiRequest } from "../../api/client";
+import type { Material } 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_FORMULAR = {
+  name: "",
+  artikelnummer: "",
+  einheit: "Stück",
+  materialtyp: "standard",
+};
+
+interface Props {
+  materialien: Material[];
+  onGeaendert: () => Promise<void>;
+  onFehler: (text: string) => void;
+}
+
+export function MaterialSection({ materialien, onGeaendert, onFehler }: Props) {
+  const [formular, setFormular] = useState(LEERES_FORMULAR);
+  const [bearbeiteteId, setBearbeiteteId] = useState<number | null>(null);
+  const [wirdGespeichert, setWirdGespeichert] = useState(false);
+
+  function bearbeiten(material: Material) {
+    setBearbeiteteId(material.id);
+    setFormular({
+      name: material.name,
+      artikelnummer: material.artikelnummer ?? "",
+      einheit: material.einheit,
+      materialtyp: material.materialtyp,
+    });
+  }
+
+  function zuruecksetzen() {
+    setBearbeiteteId(null);
+    setFormular(LEERES_FORMULAR);
+  }
+
+  async function speichern() {
+    setWirdGespeichert(true);
+    const body = {
+      name: formular.name,
+      artikelnummer: formular.artikelnummer || null,
+      einheit: formular.einheit,
+      materialtyp: formular.materialtyp,
+    };
+    try {
+      if (bearbeiteteId !== null) {
+        await apiRequest(`/materialien/${bearbeiteteId}`, { method: "PATCH", body });
+      } else {
+        await apiRequest("/materialien", { method: "POST", body });
+      }
+      zuruecksetzen();
+      await onGeaendert();
+    } catch {
+      onFehler("Material konnte nicht gespeichert werden.");
+    } finally {
+      setWirdGespeichert(false);
+    }
+  }
+
+  return (
+    <section className="section">
+      <h2>Material {bearbeiteteId !== null ? "bearbeiten" : "anlegen"}</h2>
+      <div className="card">
+        <div className="stack" style={{ marginBottom: "1.25rem" }}>
+          <div className="field">
+            <label>Name</label>
+            <input
+              className="input"
+              value={formular.name}
+              onChange={(e) => setFormular({ ...formular, name: e.target.value })}
+            />
+          </div>
+          <div className="row">
+            <div className="field" style={{ flex: 1 }}>
+              <label>Artikelnummer</label>
+              <input
+                className="input"
+                value={formular.artikelnummer}
+                onChange={(e) => setFormular({ ...formular, artikelnummer: e.target.value })}
+              />
+            </div>
+            <div className="field" style={{ width: "7rem" }}>
+              <label>Einheit</label>
+              <input
+                className="input"
+                value={formular.einheit}
+                onChange={(e) => setFormular({ ...formular, einheit: e.target.value })}
+              />
+            </div>
+          </div>
+          <div className="field">
+            <label>Materialtyp</label>
+            <select
+              className="input"
+              value={formular.materialtyp}
+              onChange={(e) => setFormular({ ...formular, 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={speichern}
+              disabled={!formular.name || !formular.einheit || wirdGespeichert}
+            >
+              {bearbeiteteId !== null ? "Speichern" : "Anlegen"}
+            </button>
+            {bearbeiteteId !== null && (
+              <button className="btn btn-secondary" onClick={zuruecksetzen}>
+                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={() => bearbeiten(m)}>
+                  Bearbeiten
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,112 @@
+import { useState } from "react";
+
+import { apiRequest } from "../../api/client";
+import type { Beladungsvorlage, Objekt, Standort } from "../../api/types";
+
+interface Props {
+  objekte: Objekt[];
+  vorlagen: Beladungsvorlage[];
+  standorte: Standort[];
+  onGeaendert: () => Promise<void>;
+  onFehler: (text: string) => void;
+}
+
+export function ObjektSection({ objekte, vorlagen, standorte, onGeaendert, onFehler }: Props) {
+  const [code, setCode] = useState("");
+  const [name, setName] = useState("");
+  const [vorlageId, setVorlageId] = useState<number | "">("");
+  const [standortId, setStandortId] = useState<number | "">("");
+  const [wirdAngelegt, setWirdAngelegt] = useState(false);
+
+  async function anlegen() {
+    if (vorlageId === "" || standortId === "") {
+      onFehler("Vorlage und Standort auswählen.");
+      return;
+    }
+    setWirdAngelegt(true);
+    const vorlage = vorlagen.find((v) => v.id === vorlageId);
+    try {
+      await apiRequest("/objekte", {
+        method: "POST",
+        body: {
+          code,
+          name,
+          objekttyp_id: vorlage?.objekttyp_id,
+          vorlage_id: vorlageId,
+          standort_id: standortId,
+        },
+      });
+      setCode("");
+      setName("");
+      await onGeaendert();
+    } catch {
+      onFehler("Objekt konnte nicht angelegt werden (Code evtl. schon vergeben).");
+    } finally {
+      setWirdAngelegt(false);
+    }
+  }
+
+  return (
+    <section className="section">
+      <h2>Objekt aus Vorlage anlegen</h2>
+      <div className="card">
+        {vorlagen.length === 0 ? (
+          <p className="text-muted">
+            Keine aktive Vorlage vorhanden – erst Excel-Import oder Vorlage per API anlegen.
+          </p>
+        ) : (
+          <div className="stack">
+            <div className="field">
+              <label>Vorlage</label>
+              <select className="input" value={vorlageId} onChange={(e) => setVorlageId(Number(e.target.value) || "")}>
+                <option value="">Vorlage wählen…</option>
+                {vorlagen.map((v) => (
+                  <option key={v.id} value={v.id}>
+                    {v.name} (v{v.version})
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="field">
+              <label>Standort</label>
+              <select
+                className="input"
+                value={standortId}
+                onChange={(e) => setStandortId(Number(e.target.value) || "")}
+              >
+                <option value="">Standort wählen…</option>
+                {standorte.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="field">
+              <label>Code (eindeutig)</label>
+              <input className="input" value={code} onChange={(e) => setCode(e.target.value)} />
+            </div>
+            <div className="field">
+              <label>Name</label>
+              <input className="input" value={name} onChange={(e) => setName(e.target.value)} />
+            </div>
+            <button className="btn btn-primary" onClick={anlegen} disabled={!code || !name || wirdAngelegt}>
+              Anlegen
+            </button>
+          </div>
+        )}
+
+        {objekte.length > 0 && (
+          <ul className="card-list" style={{ marginTop: "1.25rem" }}>
+            {objekte.map((o) => (
+              <li key={o.id} className="row-between" style={{ padding: "0.4rem 0" }}>
+                <span>{o.name}</span>
+                <span className="text-muted">{o.code}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,56 @@
+import { useState } from "react";
+
+import { apiRequest } from "../../api/client";
+import type { Standort } from "../../api/types";
+
+interface Props {
+  standorte: Standort[];
+  onGeaendert: () => Promise<void>;
+  onFehler: (text: string) => void;
+}
+
+export function StandortSection({ standorte, onGeaendert, onFehler }: Props) {
+  const [name, setName] = useState("");
+  const [wirdAngelegt, setWirdAngelegt] = useState(false);
+
+  async function anlegen() {
+    setWirdAngelegt(true);
+    try {
+      await apiRequest("/standorte", { method: "POST", body: { name } });
+      setName("");
+      await onGeaendert();
+    } catch {
+      onFehler("Standort konnte nicht angelegt werden.");
+    } finally {
+      setWirdAngelegt(false);
+    }
+  }
+
+  return (
+    <section className="section">
+      <h2>Standort anlegen</h2>
+      <div className="card">
+        <div className="row" style={{ marginBottom: standorte.length ? "1rem" : 0 }}>
+          <input
+            className="input"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Name des Standorts"
+          />
+          <button className="btn btn-primary" onClick={anlegen} disabled={!name || wirdAngelegt}>
+            Anlegen
+          </button>
+        </div>
+        {standorte.length > 0 && (
+          <ul className="card-list">
+            {standorte.map((s) => (
+              <li key={s.id} className="row-between" style={{ padding: "0.4rem 0" }}>
+                <span>{s.name}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+}