From 05c62ac414592fce617443b8321d10aeba51f629 Mon Sep 17 00:00:00 2001
From: admin <tim.leikauf@gmail.com>
Date: Sat, 16 May 2026 21:19:51 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Bild=20in=20Annotieren-View=20l=C3=B6sc?=
 =?UTF-8?q?hen=20(Eintrag=20+=20Datei=20aus=20Directus)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app.py                        | 33 +++++++++++++++++++++++++++++----
 frontend/src/api.ts           | 11 +++++++++++
 frontend/src/pages/DrawIt.tsx | 29 +++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/app.py b/app.py
index 73b9447..1e815d7 100644
--- a/app.py
+++ b/app.py
@@ -1727,11 +1727,36 @@ def directus_db_pictures_design_options():
     return jsonify({"choices": choices})
 
 
-@app.route("/api/directus/db-pictures/<pic_id>", methods=["PATCH"])
-def directus_db_picture_patch(pic_id):
+@app.route("/api/directus/db-pictures/<pic_id>", methods=["PATCH", "DELETE"])
+def directus_db_picture(pic_id):
     token = request.headers.get("Authorization", "")
-    data, status = _directus("PATCH", f"/items/db_pictures/{pic_id}", token, body=request.get_json(force=True, silent=True))
-    return jsonify(data), status
+    if request.method == "PATCH":
+        data, status = _directus("PATCH", f"/items/db_pictures/{pic_id}", token, body=request.get_json(force=True, silent=True))
+        return jsonify(data), status
+
+    # DELETE: erst picture-Eintrag laden, dann Eintrag + Datei löschen
+    pic_data, pic_status = _directus("GET", f"/items/db_pictures/{pic_id}?fields=id,picture", token)
+    if pic_status != 200:
+        return jsonify({"error": "Bild nicht gefunden"}), 404
+    file_uuid = (pic_data.get("data") or {}).get("picture")
+
+    # db_picture-Eintrag löschen
+    _, del_status = _directus("DELETE", f"/items/db_pictures/{pic_id}", token)
+    if del_status not in (200, 204):
+        return jsonify({"error": f"Fehler beim Löschen des Eintrags (Status {del_status})"}), del_status
+
+    # Prüfen ob wirklich gelöscht
+    _, check_status = _directus("GET", f"/items/db_pictures/{pic_id}?fields=id", token)
+    if check_status == 200:
+        return jsonify({"error": "Eintrag konnte nicht gelöscht werden"}), 500
+
+    # Datei löschen (nur wenn vorhanden)
+    if file_uuid:
+        _, file_del_status = _directus("DELETE", f"/files/{file_uuid}", token)
+        if file_del_status not in (200, 204):
+            return jsonify({"error": f"Eintrag gelöscht, aber Datei konnte nicht gelöscht werden (Status {file_del_status})"}), 500
+
+    return jsonify({}), 204
 
 
 @app.route("/api/directus/db-objects", methods=["GET", "POST"])
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index 13a3b70..5c957cb 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -347,6 +347,17 @@ export async function getDbPictures(token: string, status = 'draft'): Promise<Db
   return data.data as DbPicture[]
 }
 
+export async function deleteDbPicture(pictureId: string, token: string): Promise<void> {
+  const res = await fetch(`/api/directus/db-pictures/${pictureId}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}))
+    throw new Error(data.error || 'Fehler beim Löschen des Bildes')
+  }
+}
+
 export async function updateDbPicture(pictureId: string, fields: Record<string, unknown>, token: string): Promise<void> {
   const res = await fetch(`/api/directus/db-pictures/${pictureId}`, {
     method: 'PATCH',
diff --git a/frontend/src/pages/DrawIt.tsx b/frontend/src/pages/DrawIt.tsx
index d383c6f..9759304 100644
--- a/frontend/src/pages/DrawIt.tsx
+++ b/frontend/src/pages/DrawIt.tsx
@@ -6,6 +6,7 @@ import {
   getDbPictures,
   updateDbPicture,
   updateDbPictureStatus,
+  deleteDbPicture,
   getDbObjects,
   createDbObject,
   updateDbObject,
@@ -60,6 +61,7 @@ export default function DrawIt() {
   const [hasSelection, setHasSelection] = useState(false)
   const [saving, setSaving] = useState(false)
   const [finishing, setFinishing] = useState(false)
+  const [deleting, setDeleting] = useState(false)
   const [statusMsg, setStatusMsg] = useState('')
   const [statusError, setStatusError] = useState(false)
   const [imageLoaded, setImageLoaded] = useState(false)
@@ -288,6 +290,24 @@ export default function DrawIt() {
     }
   }
 
+  const deleteCurrentPicture = async () => {
+    if (!token || !currentPicture) return
+    if (!window.confirm('Bild wirklich löschen? Der Eintrag und die Datei werden dauerhaft aus Directus entfernt.')) return
+    setDeleting(true)
+    try {
+      await deleteDbPicture(currentPicture.id, token)
+      const newList = pictureList.filter(p => p.id !== currentPicture.id)
+      setPictureList(newList)
+      const nextIndex = Math.min(currentIndex, newList.length - 1)
+      setCurrentIndex(nextIndex)
+      showStatus('Bild gelöscht.')
+    } catch (e) {
+      showStatus(e instanceof Error ? e.message : 'Fehler beim Löschen.', true)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
   const imageNav = (
     <div className="image-nav">
       <button className="btn-icon" onClick={() => setCurrentIndex(i => i - 1)} disabled={currentIndex <= 0}>
@@ -301,6 +321,15 @@ export default function DrawIt() {
       <button className="btn-icon" onClick={() => setCurrentIndex(i => i + 1)} disabled={currentIndex >= pictureList.length - 1}>
         <ChevronRightIcon />
       </button>
+      <button
+        className="btn-icon"
+        onClick={deleteCurrentPicture}
+        disabled={deleting || !currentPicture}
+        title="Bild löschen"
+        style={{ color: 'var(--error, #dc2626)', marginLeft: 8 }}
+      >
+        <TrashIcon />
+      </button>
     </div>
   )