feat: Add DELETE /{slug}/image (#6259)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue

@@ -20,18 +20,36 @@
         </v-btn>
       </template>
       <v-card width="400">
-        <v-card-title class="headline flex mb-0">
+        <v-card-title class="headline flex-wrap mb-0">
           <div>
             {{ $t("recipe.recipe-image") }}
           </div>
-          <AppButtonUpload
-            class="ml-auto"
-            url="none"
-            file-name="image"
-            :text-btn="false"
-            :post="false"
-            @uploaded="uploadImage"
-          />
+          <div class="d-flex gap-2">
+            <AppButtonUpload
+              url="none"
+              file-name="image"
+              :text-btn="false"
+              :post="false"
+              @uploaded="uploadImage"
+            />
+            <BaseButton
+              class="ml-2"
+              delete
+              @click="dialogDeleteImage = true"
+            />
+            <BaseDialog
+              v-model="dialogDeleteImage"
+              :title="$t('recipe.delete-image')"
+              :icon="$globals.icons.alertCircle"
+              color="error"
+              can-delete
+              @delete="deleteImage"
+            >
+              <v-card-text>
+                {{ $t("recipe.delete-image-confirmation") }}
+              </v-card-text>
+            </BaseDialog>
+          </div>
         </v-card-title>
         <v-card-text class="mt-n5">
           <div>
@@ -62,38 +80,58 @@
 </template>
 
 <script setup lang="ts">
+import { alert } from "~/composables/use-toast";
 import { useUserApi } from "~/composables/api";
 
-const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
+const DELETE_EVENT = "delete";
 
 const props = defineProps<{ slug: string }>();
 
 const emit = defineEmits<{
   refresh: [];
   upload: [fileObject: File];
+  delete: [];
 }>();
 
+const i18n = useI18n();
+const api = useUserApi();
+
 const url = ref("");
 const loading = ref(false);
 const menu = ref(false);
+const dialogDeleteImage = ref(false);
 
 function uploadImage(fileObject: File) {
   emit(UPLOAD_EVENT, fileObject);
   menu.value = false;
 }
 
-const api = useUserApi();
+async function deleteImage() {
+  loading.value = true;
+  try {
+    await api.recipes.deleteImage(props.slug);
+    emit(DELETE_EVENT);
+    menu.value = false;
+  }
+  catch (e) {
+    alert.error(i18n.t("events.something-went-wrong"));
+    console.error("Failed to delete image", e);
+  }
+  finally {
+    loading.value = false;
+  }
+}
+
 async function getImageFromURL() {
   loading.value = true;
   if (await api.recipes.updateImagebyURL(props.slug, url.value)) {
-    emit(REFRESH_EVENT);
+    emit(DELETE_EVENT);
   }
   loading.value = false;
   menu.value = false;
 }
 
-const i18n = useI18n();
 const messages = computed(() =>
   props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")],
 );