Merge: auto Relations-Setup beim Word-Save

words_pictures M2M-Relationen werden idempotent beim POST eingerichtet –
kein manueller Setup-Call nötig.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -149,7 +149,36 @@ def directus_picture_words(pic_id):
     else:  # POST
         body = request.get_json(force=True, silent=True) or {}
         words = body.get("words", [])
+
+        # Junction + Relationen idempotent einrichten
         _ensure_junction("words_pictures", "words_id", "pictures_id", token)
+        _directus("PATCH", "/fields/pictures/linked_words", token, {
+            "type": "alias",
+            "meta": {"special": ["m2m"], "interface": "list-m2m",
+                     "options": {"template": "{{words_id.title_de}}"}},
+        })
+        _directus("PATCH", "/fields/words/linked_pictures", token, {
+            "type": "alias",
+            "meta": {"special": ["m2m"], "interface": "list-m2m",
+                     "options": {"template": "{{pictures_id.media}}"}},
+        })
+        _directus("POST", "/relations", token, {
+            "collection": "words_pictures", "field": "words_id",
+            "related_collection": "words",
+            "schema": {"on_delete": "CASCADE"},
+            "meta": {"junction_field": "pictures_id",
+                     "one_field": "linked_pictures",
+                     "one_deselect_action": "nullify"},
+        })
+        _directus("POST", "/relations", token, {
+            "collection": "words_pictures", "field": "pictures_id",
+            "related_collection": "pictures",
+            "schema": {"on_delete": "CASCADE"},
+            "meta": {"junction_field": "words_id",
+                     "one_field": "linked_words",
+                     "one_deselect_action": "nullify"},
+        })
+
         saved = 0
         for entry in words:
             title_de = (entry.get("title_de") or "").strip()
@@ -157,7 +186,10 @@ def directus_picture_words(pic_id):
             if not title_de:
                 continue
             try:
-                wid, _ = _find_or_create_word(title_de, level, token)
+                wid, is_new = _find_or_create_word(title_de, level, token)
+                if not is_new:
+                    # Wort existiert bereits → Level aktualisieren
+                    _directus("PATCH", f"/items/words/{wid}", token, {"level": level})
                 _ensure_link(
                     "words_pictures",
                     {"words_id": wid, "pictures_id": pic_id},
@@ -1572,6 +1604,64 @@ def setup_directus_schema():
                     "failed": len(failed), "results": results})
 
 
+@app.route("/api/setup-words-pictures", methods=["POST"])
+def setup_words_pictures():
+    """
+    Einmalig ausführen: Konfiguriert die M2M-Relation words ↔ pictures
+    via words_pictures Junction in Directus.
+    Idempotent – bereits vorhandene Felder/Relationen werden übersprungen.
+    """
+    token = request.headers.get("Authorization", "")
+    results = []
+
+    def do(label, method, path, body=None):
+        data, status = _directus(method, path, token, body)
+        ok = status in (200, 201, 204)
+        results.append({"label": label, "status": status, "ok": ok,
+                         "err": None if ok else (data.get("errors") or data)})
+        return ok
+
+    # Sicherstellen dass Junction-Collection existiert
+    _ensure_junction("words_pictures", "words_id", "pictures_id", token)
+
+    # special=m2m auf Alias-Felder setzen (idempotent)
+    do("patch pictures.linked_words special", "PATCH", "/fields/pictures/linked_words", {
+        "type": "alias",
+        "meta": {"special": ["m2m"], "interface": "list-m2m",
+                 "options": {"template": "{{words_id.title_de}}"},
+                 "note": "Verknüpfte Safe Words"},
+    })
+    do("patch words.linked_pictures special", "PATCH", "/fields/words/linked_pictures", {
+        "type": "alias",
+        "meta": {"special": ["m2m"], "interface": "list-m2m",
+                 "options": {"template": "{{pictures_id.media}}"},
+                 "note": "Verknüpfte Bilder"},
+    })
+
+    # Relation words_pictures.words_id → words
+    do("relation words_pictures.words_id→words", "POST", "/relations", {
+        "collection": "words_pictures", "field": "words_id",
+        "related_collection": "words",
+        "schema": {"on_delete": "CASCADE"},
+        "meta": {"junction_field": "pictures_id",
+                 "one_field": "linked_pictures",
+                 "one_deselect_action": "nullify"},
+    })
+    # Relation words_pictures.pictures_id → pictures
+    do("relation words_pictures.pictures_id→pictures", "POST", "/relations", {
+        "collection": "words_pictures", "field": "pictures_id",
+        "related_collection": "pictures",
+        "schema": {"on_delete": "CASCADE"},
+        "meta": {"junction_field": "words_id",
+                 "one_field": "linked_words",
+                 "one_deselect_action": "nullify"},
+    })
+
+    failed = [r for r in results if not r["ok"]]
+    return jsonify({"ok": len(failed) == 0, "total": len(results),
+                    "failed": len(failed), "results": results})
+
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=8000, debug=True)
 

frontend/src/pages/DrawIt.tsx

@@ -30,6 +30,7 @@ export default function DrawIt() {
 
   const [pictureList, setPictureList] = useState<DirectusPicture[]>([])
   const [currentIndex, setCurrentIndex] = useState(-1)
+  const [debouncedIndex, setDebouncedIndex] = useState(-1)
   const [objects, setObjects] = useState<DirectusObject[]>([])
   const [selectedObjectId, setSelectedObjectId] = useState<string | null>(null)
   const [currentSelections, setCurrentSelections] = useState<Selection[]>([])
@@ -52,6 +53,12 @@ export default function DrawIt() {
 
   const canvasRef = useRef<DrawCanvasHandle>(null)
 
+  // Debounce: Bild erst laden wenn 350ms keine weitere Navigation
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedIndex(currentIndex), 350)
+    return () => clearTimeout(t)
+  }, [currentIndex])
+
   useEffect(() => {
     if (safeWordInputVisible) safeWordInputRef.current?.focus()
   }, [safeWordInputVisible])
@@ -83,8 +90,9 @@ export default function DrawIt() {
     }
   }
 
+  // currentPicture folgt dem debouncedIndex → lädt erst wenn Navigation pausiert
   const currentPicture: DirectusPicture | null =
-    currentIndex >= 0 && currentIndex < pictureList.length ? pictureList[currentIndex] : null
+    debouncedIndex >= 0 && debouncedIndex < pictureList.length ? pictureList[debouncedIndex] : null
 
   // Map DirectusObject → CanvasObject for rendering
   const canvasObjects: CanvasObject[] = objects.map((obj, i) => ({