From e980fe6fc8138af2a5d28d5bd8d6ad2e6edeffa5 Mon Sep 17 00:00:00 2001
From: Tom Nowell <tom@tomnowell.com>
Date: Tue, 10 Dec 2024 12:24:53 +0000
Subject: [PATCH 1/5] Add delete button and functionality to recipe image modal

---
 .../Domain/Recipe/RecipeImageUploadBtn.vue         | 13 ++++++++++++-
 .../RecipePageParts/RecipePageEditorToolbar.vue    | 14 ++++++++++++--
 frontend/lib/api/types/recipe.ts                   |  2 +-
 frontend/lib/api/user/recipes/recipe.ts            |  4 ++++
 mealie/repos/repository_recipes.py                 |  5 +++++
 mealie/routes/recipe/recipe_crud_routes.py         |  8 +++++++-
 mealie/services/recipe/recipe_data_service.py      |  8 ++++++++
 7 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue b/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
index ab16c760fc1..83f58fb58d8 100644
--- a/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
+++ b/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
@@ -9,7 +9,7 @@
           {{ $t("general.image") }}
         </v-btn>
       </template>
-      <v-card width="400">
+      <v-card width="450">
         <v-card-title class="headline flex mb-0">
           <div>
             {{ $t("recipe.recipe-image") }}
@@ -22,6 +22,10 @@
             :post="false"
             @uploaded="uploadImage"
           />
+          <v-btn class="ml-2" color="error" :loading="loading" :disabled="!slug" @click="deleteImage">
+            <v-icon> {{ $globals.icons.delete }} </v-icon>
+            {{ $t("general.delete") }}
+          </v-btn>
         </v-card-title>
         <v-card-text class="mt-n5">
           <div>
@@ -45,6 +49,7 @@ import { useUserApi } from "~/composables/api";
 
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
+const DELETE_EVENT = "delete";
 
 export default defineComponent({
   props: {
@@ -65,6 +70,11 @@ export default defineComponent({
       state.menu = false;
     }
 
+    function deleteImage() {
+      context.emit(DELETE_EVENT);
+      state.menu = false;
+    }
+
     const api = useUserApi();
     async function getImageFromURL() {
       state.loading = true;
@@ -81,6 +91,7 @@ export default defineComponent({
     return {
       ...toRefs(state),
       uploadImage,
+      deleteImage,
       getImageFromURL,
       messages,
     };
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
index a3508e434a3..fff16602cb0 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex justify-start align-top py-2">
-    <RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @refresh="imageKey++" />
+    <RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @delete = "deleteImage" @refresh="imageKey++" />
     <RecipeSettingsMenu
       class="my-1 mx-1"
       :value="recipe.settings"
@@ -59,7 +59,6 @@ export default defineComponent({
     const { user } = usePageUser();
     const api = useUserApi();
     const { imageKey } = usePageState(props.recipe.slug);
-
     const canEditOwner = computed(() => {
       return user.id === props.recipe.userId || user.admin;
     })
@@ -86,10 +85,21 @@ export default defineComponent({
       imageKey.value++;
     }
 
+    async function deleteImage() {
+      if (props.recipe.image == null) {
+        return;
+      }
+      const response = await api.recipes.deleteImage(props.recipe.slug);
+      if (response) {
+        props.recipe.image = null
+      }
+    }
+
     return {
       user,
       canEditOwner,
       uploadImage,
+      deleteImage,
       imageKey,
       allUsers,
       ownerHousehold,
diff --git a/frontend/lib/api/types/recipe.ts b/frontend/lib/api/types/recipe.ts
index 84440f19b43..7c2e3ab72f1 100644
--- a/frontend/lib/api/types/recipe.ts
+++ b/frontend/lib/api/types/recipe.ts
@@ -492,7 +492,7 @@ export interface ScrapeRecipeTest {
   url: string;
   useOpenAI?: boolean;
 }
-export interface SlugResponse {}
+export interface SlugResponse { }
 export interface TagIn {
   name: string;
 }
diff --git a/frontend/lib/api/user/recipes/recipe.ts b/frontend/lib/api/user/recipes/recipe.ts
index 87288814c19..5cc6d3f5493 100644
--- a/frontend/lib/api/user/recipes/recipe.ts
+++ b/frontend/lib/api/user/recipes/recipe.ts
@@ -127,6 +127,10 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     return this.requests.put<UpdateImageResponse, FormData>(routes.recipesRecipeSlugImage(slug), formData);
   }
 
+  deleteImage(slug: string) {
+    return this.requests.delete<UpdateImageResponse>(routes.recipesRecipeSlugImage(slug));
+  }
+
   updateImagebyURL(slug: string, url: string) {
     return this.requests.post<UpdateImageResponse>(routes.recipesRecipeSlugImage(slug), { url });
   }
diff --git a/mealie/repos/repository_recipes.py b/mealie/repos/repository_recipes.py
index c1c78ee6298..ffbc63822e6 100644
--- a/mealie/repos/repository_recipes.py
+++ b/mealie/repos/repository_recipes.py
@@ -57,7 +57,12 @@ def update_image(self, slug: str, _: str | None = None) -> int:
         entry: RecipeModel = self._query_one(match_value=slug)
         entry.image = randint(0, 255)
         self.session.commit()
+        return entry.image
 
+    def delete_image(self, slug: str) -> None:
+        entry: RecipeModel = self._query_one(match_value=slug)
+        entry.image = None
+        self.session.commit()
         return entry.image
 
     def count_uncategorized(self, count=True, override_schema=None):
diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index 6e248c97a3b..906ed192336 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -613,10 +613,16 @@ def update_recipe_image(self, slug: str, image: bytes = File(...), extension: st
         recipe = self.mixins.get_one(slug)
         data_service = RecipeDataService(recipe.id)
         data_service.write_image(image, extension)
-
         new_version = self.recipes.update_image(slug, extension)
         return UpdateImageResponse(image=new_version)
 
+    @router.delete("/{slug}/image", tags=["Recipe: Images and Assets"])
+    def delete_recipe_image(self, slug: str):
+        recipe = self.mixins.get_one(slug)
+        data_service = RecipeDataService(recipe.id)
+        data_service.delete_image()
+        self.recipes.delete_image(slug)
+
     @router.post("/{slug}/assets", response_model=RecipeAsset, tags=["Recipe: Images and Assets"])
     def upload_recipe_asset(
         self,
diff --git a/mealie/services/recipe/recipe_data_service.py b/mealie/services/recipe/recipe_data_service.py
index a4d0432ac08..6366b32bce9 100644
--- a/mealie/services/recipe/recipe_data_service.py
+++ b/mealie/services/recipe/recipe_data_service.py
@@ -108,6 +108,14 @@ def write_image(self, file_data: bytes | Path, extension: str, image_dir: Path |
 
         return image_path
 
+    def delete_image(self) -> None:
+        image_dir = self.dir_image
+
+        try:
+            shutil.rmtree(image_dir)
+        except Exception as e:
+            self.logger.exception(f"Failed to delete image data: {e}")
+
     async def scrape_image(self, image_url: str | dict[str, str] | list[str]) -> None:
         self.logger.info(f"Image URL: {image_url}")
 

From bbff6b21fe4e0e9d1765595d5c9020eba9830ced Mon Sep 17 00:00:00 2001
From: Tom Nowell <tom@tomnowell.com>
Date: Wed, 11 Dec 2024 01:25:59 +0000
Subject: [PATCH 2/5] Add delete button and functionality to recipe image modal

---
 .vscode/settings.json            | 5 +++--
 frontend/lib/api/types/recipe.ts | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e4bfdeb9dbf..5fd3b3e5264 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,7 +17,7 @@
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "eslint.workingDirectories": [
     "./frontend"
   ],
@@ -60,5 +60,6 @@
   },
   "[vue]": {
     "editor.formatOnSave": false
-  }
+  },
+  "vue.autoInsert.bracketSpacing": false
 }
diff --git a/frontend/lib/api/types/recipe.ts b/frontend/lib/api/types/recipe.ts
index 7c2e3ab72f1..84440f19b43 100644
--- a/frontend/lib/api/types/recipe.ts
+++ b/frontend/lib/api/types/recipe.ts
@@ -492,7 +492,7 @@ export interface ScrapeRecipeTest {
   url: string;
   useOpenAI?: boolean;
 }
-export interface SlugResponse { }
+export interface SlugResponse {}
 export interface TagIn {
   name: string;
 }

From 12f4a5cccc355710cd49a2a29689d96e37564af3 Mon Sep 17 00:00:00 2001
From: Tom Nowell <tom@tomnowell.com>
Date: Wed, 11 Dec 2024 03:20:32 +0000
Subject: [PATCH 3/5] Add delete button and functionality to recipe image modal

---
 .vscode/settings.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5fd3b3e5264..a74238a4fd5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -59,7 +59,6 @@
     "README.md": "LICENSE, SECURITY.md"
   },
   "[vue]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
-  "vue.autoInsert.bracketSpacing": false
 }

From 597f3ca3dd99496e769cc87a3ec0b08e07161754 Mon Sep 17 00:00:00 2001
From: Tom Nowell <tom@tomnowell.com>
Date: Wed, 11 Dec 2024 03:24:02 +0000
Subject: [PATCH 4/5] Add delete button and functionality to recipe image modal

---
 .vscode/settings.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a74238a4fd5..84209a6cc26 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,7 +17,7 @@
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "eslint.workingDirectories": [
     "./frontend"
   ],
@@ -59,6 +59,6 @@
     "README.md": "LICENSE, SECURITY.md"
   },
   "[vue]": {
-    "editor.formatOnSave": true
+    "editor.formatOnSave": false
   },
 }

From ffe29cdf5ac0d41c0dbdcc39b9424a0a469e7f87 Mon Sep 17 00:00:00 2001
From: Tom Nowell <tom@tomnowell.com>
Date: Wed, 11 Dec 2024 03:25:54 +0000
Subject: [PATCH 5/5] Add delete button and functionality to recipe image modal

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 84209a6cc26..e4bfdeb9dbf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -60,5 +60,5 @@
   },
   "[vue]": {
     "editor.formatOnSave": false
-  },
+  }
 }