From 012dea5a0c5af5c23b147b488f7d310c5ae149c9 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sat, 11 Feb 2023 11:57:52 +0100
Subject: [PATCH] fixed and improved import ingredient edit

---
 .../apps/ImportView/ImportViewStepEditor.vue  | 47 ++++++++++++++++---
 vue/src/locales/en.json                       |  2 +-
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/vue/src/apps/ImportView/ImportViewStepEditor.vue b/vue/src/apps/ImportView/ImportViewStepEditor.vue
index ec2caf49..11fd91e8 100644
--- a/vue/src/apps/ImportView/ImportViewStepEditor.vue
+++ b/vue/src/apps/ImportView/ImportViewStepEditor.vue
@@ -28,7 +28,7 @@
                         <b-badge variant="secondary" v-if="i.unit">{{ i.unit.name }}</b-badge>
                         <b-badge variant="info" v-if="i.food">{{ i.food.name }}</b-badge>
                         <i>{{ i.original_text }}</i>
-                        <b-button @click="current_edit_ingredient = i" v-b-modal.ingredient_edit_modal class="float-right btn-sm"><i class="fas fa-pencil-alt"></i></b-button>
+                        <b-button @click="prepareIngredientEditModal(s,i)" v-b-modal.ingredient_edit_modal class="float-right btn-sm"><i class="fas fa-pencil-alt"></i></b-button>
                     </b-list-group-item>
                 </draggable>
             </div>
@@ -62,25 +62,34 @@
                 </div>
             </div>
 
-            <b-modal id="ingredient_edit_modal" :title="$t('Edit')" ok-only>
+            <b-modal id="ingredient_edit_modal" :title="$t('Edit')">
                 <div v-if="current_edit_ingredient !== null">
                     <b-form-group v-bind:label="$t('Original_Text')" class="mb-3">
                         <b-form-input v-model="current_edit_ingredient.original_text" type="text" disabled></b-form-input>
                     </b-form-group>
 
                     <b-form-group v-bind:label="$t('Amount')" class="mb-3">
-                        <b-form-input v-model="current_edit_ingredient.amount" type="number" ></b-form-input>
+                        <b-form-input v-model.number="current_edit_ingredient.amount" type="number"></b-form-input>
                     </b-form-group>
 
-                    <b-form-group v-bind:label="$t('Unit')" class="mb-3">
-                        <b-form-input v-model="current_edit_ingredient.unit.name" type="text" ></b-form-input>
+                    <b-form-group v-bind:label="$t('Unit')" class="mb-3" v-if="current_edit_ingredient.unit !== null">
+                        <b-form-input v-model="current_edit_ingredient.unit.name" type="text"></b-form-input>
                     </b-form-group>
 
                     <b-form-group v-bind:label="$t('Food')" class="mb-3">
-                        <b-form-input v-model="current_edit_ingredient.food.name" type="text" ></b-form-input>
+                        <b-form-input v-model="current_edit_ingredient.food.name" type="text"></b-form-input>
                     </b-form-group>
-
                 </div>
+
+                <template v-slot:modal-footer>
+                    <div class="row w-100">
+
+                        <div class="col-auto justify-content-end">
+                            <b-button class="mx-1" @click="$bvModal.hide('ingredient_edit_modal'); current_edit_ingredient=null">{{ $t('Ok') }}</b-button>
+                            <b-button class="mx-1" @click="removeIngredient(current_edit_step,current_edit_ingredient);$bvModal.hide('ingredient_edit_modal'); current_edit_ingredient=null" variant="danger">{{ $t('Delete') }}</b-button>
+                        </div>
+                    </div>
+                </template>
             </b-modal>
         </div>
     </div>
@@ -104,6 +113,7 @@ export default {
         return {
             recipe_json: undefined,
             current_edit_ingredient: null,
+            current_edit_step: null,
         }
     },
     watch: {
@@ -202,7 +212,30 @@ export default {
                     found = true
                 }
             })
+        },
+        /**
+         * Prepare variable that holds currently edited ingredient for modal to manipulate it
+         * add default placeholder for food/unit in case it is not present, so it can be edited as well
+         * @param ingredient
+         */
+        prepareIngredientEditModal: function (step, ingredient) {
+            if (ingredient.unit === null) {
+                ingredient.unit = {
+                    "name": ""
+                }
+            }
+            if (ingredient.food === null) {
+                ingredient.food = {
+                    "name": ""
+                }
+            }
+            this.current_edit_ingredient = ingredient
+            this.current_edit_step = step
+        },
+        removeIngredient: function (step, ingredient) {
+            step.ingredients = step.ingredients.filter((i) => i !== ingredient)
         }
+
     }
 }
 </script>
diff --git a/vue/src/locales/en.json b/vue/src/locales/en.json
index 137c48b5..47ce0a5a 100644
--- a/vue/src/locales/en.json
+++ b/vue/src/locales/en.json
@@ -118,7 +118,7 @@
     "Image": "Image",
     "Delete": "Delete",
     "Open": "Open",
-    "Ok": "Open",
+    "Ok": "Ok",
     "Save": "Save",
     "Step": "Step",
     "Search": "Search",