From 89e35e7de6a7dca124cc734e9ff131244c206240 Mon Sep 17 00:00:00 2001
From: "matthias.lotz" <matthias.lotz@hobbyhimmel.de>
Date: Sat, 15 Nov 2025 18:59:21 +0100
Subject: [PATCH] fix: Use correct image ID when deleting images in preview
 mode

Changed ImageGalleryCard to pass itemId (image.id) instead of index
when deleting images in preview mode. This fixes 'Image not found' error
when attempting to delete individual images in ManagementPortalPage
and ModerationGroupImagesPage.

The index was being passed to the API, but the API expects the actual
database image ID.
---
 .../ComponentUtils/ImageDescriptionManager.js | 54 +++++++++++++++++++
 .../ComponentUtils/ImageGalleryCard.js        |  2 +-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Components/ComponentUtils/ImageDescriptionManager.js b/frontend/src/Components/ComponentUtils/ImageDescriptionManager.js
index 48a8a19..32962c1 100644
--- a/frontend/src/Components/ComponentUtils/ImageDescriptionManager.js
+++ b/frontend/src/Components/ComponentUtils/ImageDescriptionManager.js
@@ -23,6 +23,59 @@ function ImageDescriptionManager({
   const [isEditMode, setIsEditMode] = useState(false);
   const [saving, setSaving] = useState(false);
 
+  // Handle deleting a single image
+  const handleDeleteImage = async (imageId) => {
+    const result = await Swal.fire({
+      title: 'Bild löschen?',
+      text: 'Möchten Sie dieses Bild wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#d33',
+      cancelButtonColor: '#3085d6',
+      confirmButtonText: 'Ja, löschen',
+      cancelButtonText: 'Abbrechen'
+    });
+
+    if (!result.isConfirmed) return;
+
+    try {
+      // Different API endpoints for manage vs moderate
+      const endpoint = mode === 'moderate' 
+        ? `/groups/${groupId}/images/${imageId}`
+        : `/api/manage/${token}/images/${imageId}`;
+
+      const res = await fetch(endpoint, {
+        method: 'DELETE'
+      });
+
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error || 'Fehler beim Löschen des Bildes');
+      }
+
+      await Swal.fire({
+        icon: 'success',
+        title: 'Gelöscht',
+        text: 'Bild wurde erfolgreich gelöscht.',
+        timer: 2000,
+        showConfirmButton: false
+      });
+
+      // Refresh data
+      if (onRefresh) {
+        await onRefresh();
+      }
+
+    } catch (error) {
+      console.error('Error deleting image:', error);
+      Swal.fire({
+        icon: 'error',
+        title: 'Fehler',
+        text: error.message || 'Bild konnte nicht gelöscht werden'
+      });
+    }
+  };
+
   // Initialize descriptions from images
   React.useEffect(() => {
     if (images && images.length > 0) {
@@ -158,6 +211,7 @@ function ImageDescriptionManager({
         onReorder={onReorder}
         imageDescriptions={imageDescriptions}
         onDescriptionChange={handleDescriptionChange}
+        onDelete={handleDeleteImage}
       />
 
       {hasChanges() && (
diff --git a/frontend/src/Components/ComponentUtils/ImageGalleryCard.js b/frontend/src/Components/ComponentUtils/ImageGalleryCard.js
index 229adb5..5e5cc6a 100644
--- a/frontend/src/Components/ComponentUtils/ImageGalleryCard.js
+++ b/frontend/src/Components/ComponentUtils/ImageGalleryCard.js
@@ -223,7 +223,7 @@ const ImageGalleryCard = ({
                             <>
                                 <button 
                                     className="btn btn-danger"
-                                    onClick={() => onDelete(index !== undefined ? index : itemId)}
+                                    onClick={() => onDelete(itemId)}
                                 >
                                     🗑️ Löschen
                                 </button>