From 3f7c22cfe00f689fab1434d986aec6e467f7a363 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sun, 22 Dec 2024 13:18:46 +0100
Subject: [PATCH] fixed image import in URL import

---
 vue3/src/composables/useFileApi.ts  | 11 ++++++++++-
 vue3/src/pages/RecipeImportPage.vue | 16 +++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/vue3/src/composables/useFileApi.ts b/vue3/src/composables/useFileApi.ts
index 57b5ebc90..15e21b799 100644
--- a/vue3/src/composables/useFileApi.ts
+++ b/vue3/src/composables/useFileApi.ts
@@ -48,11 +48,20 @@ export function useFileApi() {
         })
     }
 
-    function updateRecipeImage(recipeId: number, file: File|null){
+    /**
+     * update a recipes image either by a given file or given url
+     * @param recipeId ID of recipe to update
+     * @param file file object to upload or null to delete image (if no imageUrl is given)
+     * @param imageUrl url of an image to download by server
+     */
+    function updateRecipeImage(recipeId: number, file: File|null, imageUrl?: string){
         let formData = new FormData()
         if (file != null) {
             formData.append('image', file)
         }
+        if (imageUrl) {
+            formData.append('image_url', imageUrl)
+        }
 
         return fetch(getDjangoUrl(`api/recipe/${recipeId}/image/`), {
             method: 'PUT',
diff --git a/vue3/src/pages/RecipeImportPage.vue b/vue3/src/pages/RecipeImportPage.vue
index c7a5e57ec..0ae11d921 100644
--- a/vue3/src/pages/RecipeImportPage.vue
+++ b/vue3/src/pages/RecipeImportPage.vue
@@ -147,7 +147,7 @@
 
                             </v-stepper-window-item>
                             <v-stepper-window-item value="5">
-                                <v-card :loading="loading">
+                                <v-card :loading="loading || fileApiLoading">
                                     <v-card-title>{{ importResponse.recipe.name }}</v-card-title>
                                     <v-row>
                                         <v-col cols="12" md="6">
@@ -159,7 +159,7 @@
                                             <v-text-field :label="$t('ServingsText')" v-model="importResponse.recipe.servingsText"></v-text-field>
                                             <v-textarea :label="$t('Description')" v-model="importResponse.recipe.description" clearable></v-textarea>
 
-                                            <v-btn class="mt-5" size="large" @click="createRecipeFromImport()" color="success" :loading="loading">{{ $t('Import') }}</v-btn>
+                                            <v-btn class="mt-5" size="large" @click="createRecipeFromImport()" color="success" :loading="loading || fileApiLoading">{{ $t('Import') }}</v-btn>
                                         </v-col>
                                     </v-row>
 
@@ -194,8 +194,10 @@ import {VueDraggable} from "vue-draggable-plus";
 import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 import KeywordsBar from "@/components/display/KeywordsBar.vue";
 import {VNumberInput} from 'vuetify/labs/VNumberInput'
+import {useFileApi} from "@/composables/useFileApi";
 
 const router = useRouter()
+const {updateRecipeImage, fileApiLoading} = useFileApi()
 
 const stepper = ref("1")
 const dialog = ref(false)
@@ -234,14 +236,14 @@ function createRecipeFromImport() {
         loading.value = true
         importResponse.value.recipe.keywords = importResponse.value.recipe.keywords.filter(k => k.importKeyword)
 
-        api.apiRecipeCreate({recipe: importResponse.value.recipe}).then(r => {
-            api.apiRecipeImageUpdate({id: r.id, imageUrl: importResponse.value.recipe?.imageUrl}).then(rI => {
-                router.push({name: 'view_recipe', params: {id: r.id}})
-            }).finally(() => {
-                loading.value = false
+        api.apiRecipeCreate({recipe: importResponse.value.recipe}).then(recipe => {
+            updateRecipeImage(recipe.id!, null, importResponse.value.recipe?.imageUrl).then(r => {
+                router.push({name: 'view_recipe', params: {id: recipe.id}})
             })
         }).catch(err => {
             useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+        }).finally(() => {
+            loading.value = false
         })
     }
 }