From ffbe559f329771f77e99496e3bb314e003bb3bb8 Mon Sep 17 00:00:00 2001
From: chloe <chloestanton117@gmail.com>
Date: Thu, 19 Mar 2026 20:45:46 +0000
Subject: [PATCH] added delete button

---
 .../Controllers/RecipeController.cs           |  19 +++
 Seasoned.Frontend/app/pages/gallery.vue       | 109 +++++++++++++++---
 2 files changed, 110 insertions(+), 18 deletions(-)

diff --git a/Seasoned.Backend/Controllers/RecipeController.cs b/Seasoned.Backend/Controllers/RecipeController.cs
index 843efb3..d59782c 100644
--- a/Seasoned.Backend/Controllers/RecipeController.cs
+++ b/Seasoned.Backend/Controllers/RecipeController.cs
@@ -155,4 +155,23 @@ public class RecipeController : ControllerBase
 
         return Ok(results);
     }
+
+    [HttpDelete("{id}")]
+    public async Task<IActionResult> DeleteRecipe(int id)
+    {
+        var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
+        
+        var recipe = await _context.Recipes
+            .FirstOrDefaultAsync(r => r.Id == id && r.UserId == userId);
+
+        if (recipe == null)
+        {
+            return NotFound("Recipe not found or you don't have permission to delete it.");
+        }
+
+        _context.Recipes.Remove(recipe);
+        await _context.SaveChangesAsync();
+
+        return Ok(new { message = "Recipe deleted from your archives." });
+    }
 }
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/pages/gallery.vue b/Seasoned.Frontend/app/pages/gallery.vue
index 41f1688..471c990 100644
--- a/Seasoned.Frontend/app/pages/gallery.vue
+++ b/Seasoned.Frontend/app/pages/gallery.vue
@@ -70,24 +70,28 @@
             </p>
             
             <v-card-actions class="justify-center">
-              <v-card-actions class="justify-center">
-                <v-btn 
-                  variant="text" 
-                  color="#556b2f"
-                  class="save-btn"
-                  @click="openRecipe(recipe)"
-                >
-                  Open
-                </v-btn>
-                <v-btn 
-                  variant="text" 
-                  color="#8c4a32" 
-                  class="cancel-btn"
-                  @click="editRecipe(recipe)"
-                >
-                  Edit
-                </v-btn>
-              </v-card-actions>
+              <v-btn 
+                variant="text" 
+                color="#556b2f"
+                class="save-btn"
+                @click="openRecipe(recipe)"
+              >
+                Open
+              </v-btn>
+              <v-btn 
+                variant="text" 
+                color="#8c4a32" 
+                class="cancel-btn"
+                @click="editRecipe(recipe)"
+              >
+                Edit
+              </v-btn>
+              <v-btn 
+                variant="text" 
+                color="#8c4a32" 
+                icon="mdi-trash-can-outline"
+                @click="deleteRecipe(recipe.id)"
+              ></v-btn>
             </v-card-actions>
           </v-card>
         </v-col>
@@ -250,6 +254,46 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+    
+    <v-dialog v-model="deleteConfirmVisible" max-width="400" persistent>
+      <v-card 
+        class="recipe-card elevation-5" 
+        style="height: auto !important; min-height: unset !important; display: block !important;"
+      >
+        <div class="pa-8 text-center">
+          <v-icon 
+            icon="mdi-alert-rhombus-outline" 
+            color="#8c4a32" 
+            size="48" 
+            class="mb-4"
+          ></v-icon>
+          
+          <h3 class="recipe-title mb-10" style="font-size: 1.5rem; line-height: 1;">
+            Remove from Archive?
+          </h3>
+          
+          <div class="d-flex justify-center align-center mt-6">
+            <v-btn 
+              variant="text" 
+              class="cancel-btn px-4 mr-4" 
+              @click="deleteConfirmVisible = false"
+            >
+              Keep it
+            </v-btn>
+            
+            <v-btn 
+              color="#8c4a32" 
+              class="save-recipe-btn px-6 text-white" 
+              elevation="1"
+              :loading="isDeleting"
+              @click="confirmDelete"
+            >
+              Yes, Delete
+            </v-btn>
+          </div>
+        </div>
+      </v-card>
+    </v-dialog>
   </v-container>
 </template>
 
@@ -269,6 +313,9 @@ const config = useRuntimeConfig()
 const searchQuery = ref('')
 const isSearching = ref(false)
 let debounceTimeout = null
+const deleteConfirmVisible = ref(false)
+const recipeToDelete = ref(null)
+const isDeleting = ref(false)
 
 onMounted(async () => {
   await fetchRecipes()
@@ -404,5 +451,31 @@ watch(searchQuery, (newVal) => {
   }, 600)
 })
 
+const deleteRecipe = (id) => {
+  recipeToDelete.value = id
+  deleteConfirmVisible.value = true
+}
+
+const confirmDelete = async () => {
+  if (!recipeToDelete.value) return;
+
+  try {
+    isDeleting.value = true
+    await $fetch(`${config.public.apiBase}api/recipe/${recipeToDelete.value}`, {
+      method: 'DELETE',
+      credentials: 'include'
+    });
+
+    recipes.value = recipes.value.filter(r => r.id !== recipeToDelete.value);
+    
+    deleteConfirmVisible.value = false;
+    recipeToDelete.value = null;
+  } catch (err) {
+    console.error("The archive could not be cleared:", err);
+  } finally {
+    isDeleting.value = false
+  }
+}
+
 
 </script>
\ No newline at end of file