Lagerorte umhängen (Backend + Web)

Bestehende Lagerorte lassen sich jetzt nachträglich einem anderen Elternort
zuordnen oder auf die oberste Ebene holen.
- Backend: LocationUpdate um parent_id (Name jetzt optional); update_location
  haengt um, mit Schutz gegen Ringe (weder auf sich selbst noch auf einen
  eigenen Unterort) und Existenzpruefung des Ziels. 6 Tests.
- Web: Lagerorte-Seite bekommt je Ort Bearbeiten (Name + Elternort ueber den
  CategorySelect-Baum, eigene Unterorte ausgeschlossen); api.updateLocation.

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

web/src/pages/Locations.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { api } from "../api";
 import { useConfirm } from "../confirm";
 import Icon from "../components/Icon";
+import CategorySelect from "../components/CategorySelect";
 import { QrImg, printQrLabels } from "../qr";
 
 export default function Locations() {
@@ -10,6 +11,10 @@ export default function Locations() {
   const [name, setName] = useState("");
   const [parentId, setParentId] = useState("");
   const [error, setError] = useState(null);
+  // Inline-Bearbeiten (Umbenennen + Umhängen) eines vorhandenen Orts.
+  const [editId, setEditId] = useState(null);
+  const [editName, setEditName] = useState("");
+  const [editParent, setEditParent] = useState(null);
 
   async function load() {
     try {
@@ -34,6 +39,44 @@ export default function Locations() {
     }
   }
 
+  function startEdit(l) {
+    setEditId(l.id);
+    setEditName(l.name);
+    setEditParent(l.parent_id ?? null);
+    setError(null);
+  }
+
+  function cancelEdit() {
+    setEditId(null);
+  }
+
+  async function saveEdit() {
+    setError(null);
+    try {
+      await api.updateLocation(editId, {
+        name: editName.trim(),
+        parent_id: editParent == null ? null : Number(editParent),
+      });
+      setEditId(null);
+      load();
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  // Eigene Unterorte (rekursiv) – als Ziel beim Umhängen ausgeschlossen.
+  function descendantIds(id) {
+    const result = new Set();
+    const stack = [id];
+    while (stack.length) {
+      const cur = stack.pop();
+      for (const c of locations.filter((l) => l.parent_id === cur)) {
+        if (!result.has(c.id)) { result.add(c.id); stack.push(c.id); }
+      }
+    }
+    return result;
+  }
+
   async function remove(id) {
     const ok = await confirm({
       title: "Lagerort löschen?",
@@ -65,6 +108,11 @@ export default function Locations() {
   }
   for (const r of locations.filter(isRoot)) walk(r, 0);
 
+  // Mögliche neue Elternorte beim Bearbeiten: alle außer dem Ort selbst und
+  // seinen Unterorten (sonst entstünde ein Ring).
+  const editDesc = editId != null ? descendantIds(editId) : new Set();
+  const editParentNodes = ordered.filter((o) => o.id !== editId && !editDesc.has(o.id));
+
   return (
     <div>
       <div className="page-head">
@@ -106,22 +154,51 @@ export default function Locations() {
 
         <ul className="simple-list">
           {ordered.map((l) => (
-            <li key={l.id}>
-              <span style={{ display: "flex", alignItems: "center", gap: 8, paddingLeft: l.depth * 22 }}>
-                {l.depth > 0 && <span className="muted">↳</span>}
-                <Icon name="location" size={15} className="muted" />
-                {l.name}
-                {l.depth > 0 && l.parent_id && nameById[l.parent_id] && (
-                  <span className="badge">in {nameById[l.parent_id]}</span>
-                )}
-              </span>
-              <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                <QrImg text={`${window.location.origin}/l/${l.id}`} size={44} />
-                <button className="btn-icon danger" onClick={() => remove(l.id)} title="Löschen">
-                  <Icon name="trash" size={16} />
-                </button>
-              </span>
-            </li>
+            editId === l.id ? (
+              <li key={l.id}>
+                <div className="row" style={{ width: "100%", gap: 8, alignItems: "flex-end" }}>
+                  <label className="grow" style={{ margin: 0 }}>
+                    Name
+                    <input value={editName} onChange={(e) => setEditName(e.target.value)} />
+                  </label>
+                  <label className="grow" style={{ margin: 0 }}>
+                    Übergeordnet
+                    <CategorySelect
+                      value={editParent}
+                      nodes={editParentNodes}
+                      rootLabel="– keiner (oberste Ebene) –"
+                      onChange={(id) => setEditParent(id == null ? null : id)}
+                    />
+                  </label>
+                  <span style={{ display: "flex", gap: 6 }}>
+                    <button className="btn primary" onClick={saveEdit} disabled={!editName.trim()}>
+                      <Icon name="check" size={16} />Speichern
+                    </button>
+                    <button type="button" className="btn ghost" onClick={cancelEdit}>Abbrechen</button>
+                  </span>
+                </div>
+              </li>
+            ) : (
+              <li key={l.id}>
+                <span style={{ display: "flex", alignItems: "center", gap: 8, paddingLeft: l.depth * 22 }}>
+                  {l.depth > 0 && <span className="muted">↳</span>}
+                  <Icon name="location" size={15} className="muted" />
+                  {l.name}
+                  {l.depth > 0 && l.parent_id && nameById[l.parent_id] && (
+                    <span className="badge">in {nameById[l.parent_id]}</span>
+                  )}
+                </span>
+                <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <QrImg text={`${window.location.origin}/l/${l.id}`} size={44} />
+                  <button className="btn-icon" onClick={() => startEdit(l)} title="Bearbeiten">
+                    <Icon name="edit" size={16} />
+                  </button>
+                  <button className="btn-icon danger" onClick={() => remove(l.id)} title="Löschen">
+                    <Icon name="trash" size={16} />
+                  </button>
+                </span>
+              </li>
+            )
           ))}
           {locations.length === 0 && <li className="empty">Noch keine Lagerorte.</li>}
         </ul>