From 976bce5fdd22b97bb28316c716cc8078643d20d6 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Thu, 14 Apr 2022 22:10:48 +0200
Subject: [PATCH] add merge capability to ingredient editor

---
 .../IngredientEditorView.vue                  | 144 +++++++++++-------
 1 file changed, 90 insertions(+), 54 deletions(-)

diff --git a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
index 9e9e4ee7b..8cf438fb0 100644
--- a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
+++ b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
@@ -1,69 +1,96 @@
 <template>
     <div id="app">
         <div class="row">
-            <div class="col-md-6">
+            <div class="col col-md-6">
                 <generic-multiselect @change="food = $event.val; refreshList()"
                                      :model="Models.FOOD"
                                      :initial_single_selection="food"
                                      :multiple="false"></generic-multiselect>
-                <b-button @click="show_food_delete=true" :disabled="food === null"> <i class="fas fa-trash-alt"></i></b-button>
-                <generic-modal-form :model="Models.FOOD" :action="Actions.DELETE" :show="show_food_delete" :item1="food"
-                                @finish-action="food = null; show_food_delete=false"/>
+                <b-button @click="show_food_delete=true" :disabled="food === null"><i class="fas fa-trash-alt"></i>
+                </b-button>
+                <b-button @click="generic_model = Models.FOOD; generic_action=Actions.MERGE" :disabled="food === null">
+                    <i class="fas fa-compress-arrows-alt"></i>
+                </b-button>
+                <generic-modal-form :model="Models.FOOD" :action="generic_action" :show="generic_model === Models.FOOD" :item1="food"
+                                    @finish-action="food = null; generic_action=null; generic_model=null"/>
             </div>
-            <div class="col-md-6">
-                <generic-multiselect @change="unit = $event.val; refreshList()"
-                                     :model="Models.UNIT"
-                                     :initial_single_selection="unit"
-                                     :multiple="false"></generic-multiselect>
-<!--TODO remove unit/Food from list when deleted -->
-                 <b-button @click="show_unit_delete=true" :disabled="unit === null"> <i class="fas fa-trash-alt"></i></b-button>
-                <generic-modal-form :model="Models.UNIT" :action="Actions.DELETE" :show="show_unit_delete" :item1="unit"
-                                @finish-action="unit = null; show_unit_delete=false"/>
+            <div class="col col-md-6">
+
+                <generic-multiselect
+                    @change="unit = $event.val; refreshList()"
+                    :model="Models.UNIT"
+                    :initial_single_selection="unit"
+                    :multiple="false"></generic-multiselect>
+
+                <b-button @click="generic_model = Models.UNIT; generic_action=Actions.DELETE" :disabled="unit === null">
+                    <i class="fas fa-trash-alt"></i>
+                </b-button>
+                <b-button @click="generic_model = Models.UNIT; generic_action=Actions.MERGE" :disabled="unit === null">
+                    <i class="fas fa-compress-arrows-alt"></i>
+                </b-button>
+                <generic-modal-form :model="Models.UNIT" :action="generic_action" :show="generic_model === Models.UNIT"
+                                    :item1="unit"
+                                    @finish-action="unit = null; generic_action=null; generic_model=null"/>
+
+
             </div>
         </div>
 
-        <table class="table table-bordered">
-            <thead>
-            <tr>
-                <th>{{$t('Amount')}}</th>
-                <th>{{$t('Unit')}}</th>
-                <th>{{$t('Food')}}</th>
-                <th>{{$t('Note')}}</th>
-                <th>{{$t('Save')}}</th>
-            </tr>
-            </thead>
-            <tr v-for="i in ingredients" v-bind:key="i.id">
-                <td style="width: 10vw">
-                    <input type="number" class="form-control" v-model="i.amount">
-                </td>
-                <td style="width: 30vw">
-                    <generic-multiselect @change="i.unit = $event.val;"
-                                         :initial_single_selection="i.unit"
-                                         :model="Models.UNIT"
-                                         :search_on_load="false"
-                                         :allow_create="true"
-                                         :create_placeholder="$t('Create')"
-                                         :multiple="false"></generic-multiselect>
-                </td>
-                <td style="width: 30vw">
-                    <generic-multiselect @change="i.food = $event.val;"
-                                         :initial_single_selection="i.food"
-                                         :model="Models.FOOD"
-                                         :search_on_load="false"
-                                         :allow_create="true"
-                                         :create_placeholder="$t('Create')"
-                                         :multiple="false"></generic-multiselect>
-                </td>
-                <td style="width: 30vw">
-                    <input class="form-control" v-model="i.note">
+        <div class="row mt-2">
+            <div class="col col-md-12">
+                <table class="table table-bordered">
+                    <thead>
+                    <tr>
+                        <th>{{ $t('Amount') }}</th>
+                        <th>{{ $t('Unit') }}</th>
+                        <th>{{ $t('Food') }}</th>
+                        <th>{{ $t('Note') }}</th>
+                        <th>{{ $t('Save') }}</th>
+                    </tr>
+                    </thead>
+                    <tr v-if="loading">
+                        <td colspan="4">
+                            <loading-spinner></loading-spinner>
+                        </td>
+                    </tr>
+                    <template v-if="!loading">
+                        <tr v-for="i in ingredients" v-bind:key="i.id">
+                            <td style="width: 5vw">
+                                <input type="number" class="form-control" v-model="i.amount">
+                            </td>
+                            <td style="width: 30vw">
+                                <generic-multiselect @change="i.unit = $event.val;"
+                                                     :initial_single_selection="i.unit"
+                                                     :model="Models.UNIT"
+                                                     :search_on_load="false"
+                                                     :allow_create="true"
+                                                     :create_placeholder="$t('Create')"
+                                                     :multiple="false"></generic-multiselect>
+                            </td>
+                            <td style="width: 30vw">
+                                <generic-multiselect @change="i.food = $event.val;"
+                                                     :initial_single_selection="i.food"
+                                                     :model="Models.FOOD"
+                                                     :search_on_load="false"
+                                                     :allow_create="true"
+                                                     :create_placeholder="$t('Create')"
+                                                     :multiple="false"></generic-multiselect>
+                            </td>
+                            <td style="width: 30vw">
+                                <input class="form-control" v-model="i.note">
 
-                </td>
-                <td>
-                    <b-button variant="primary" @click="updateIngredient(i)">Save</b-button>
-                </td>
+                            </td>
+                            <td style="width: 5vw">
+                                <b-button variant="primary" @click="updateIngredient(i)"><i class="fas fa-save"></i>
+                                </b-button>
+                            </td>
 
-            </tr>
-        </table>
+                        </tr>
+                    </template>
+
+                </table>
+            </div>
+        </div>
 
 
     </div>
@@ -78,18 +105,22 @@ import {ApiMixin, StandardToasts} from "@/utils/utils"
 import {ApiApiFactory} from "@/utils/openapi/api";
 import GenericMultiselect from "@/components/GenericMultiselect";
 import GenericModalForm from "@/components/Modals/GenericModalForm";
+import LoadingSpinner from "@/components/LoadingSpinner";
 
 Vue.use(BootstrapVue)
 
 export default {
     name: "IngredientEditorView",
     mixins: [ApiMixin],
-    components: {GenericMultiselect, GenericModalForm},
+    components: {LoadingSpinner, GenericMultiselect, GenericModalForm},
     data() {
         return {
             ingredients: [],
+            loading: false,
             food: null,
             unit: null,
+            generic_action: null,
+            generic_model: null,
             show_food_delete: false,
             show_unit_delete: false,
         }
@@ -104,6 +135,7 @@ export default {
             if (this.food === null && this.unit === null) {
                 this.ingredients = []
             } else {
+                this.loading = true
                 let apiClient = new ApiApiFactory()
                 let params = {'query': {'simple': 1}}
                 if (this.food !== null) {
@@ -114,6 +146,10 @@ export default {
                 }
                 apiClient.listIngredients(params).then(result => {
                     this.ingredients = result.data
+                    this.loading = false
+                }).catch((err) => {
+                    StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
+                    this.loading = false
                 })
             }
         },