ingredient editor basics done

cookbook/templates/base.html

@@ -218,6 +218,18 @@
 
                         </div>
                         <div class="row m-0">
+                            <div class="col-4">
+                                <a href="{% url 'view_ingredient_editor' %}" class="p-1">
+                                    <div class="card p-0 no-gutters border-0">
+                                        <div class="card-body text-center p-0 no-gutters">
+                                            <i class="fas fa-th-list fa-2x"></i>
+                                        </div>
+                                        <div class="card-body text-break text-center p-0 no-gutters text-muted">
+                                            {% trans 'Ingredient Editor' %}
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
                             <div class="col-4">
                                 <a href="{% url 'view_export' %}" class="p-1">
                                     <div class="card p-0 no-gutters border-0">

cookbook/templates/ingredient_editor.html

@@ -8,7 +8,13 @@
 
 {% block content %}
 
+    <div class="row">
+        <div class="col col-md-12">
+            <h3>{% trans 'Ingredient Editor' %}</h3>
+        </div>
+    </div>
     <div id="app">
+
         <ingredient-editor-view></ingredient-editor-view>
     </div>
 

vue/src/apps/IngredientEditorView/IngredientEditorView.vue

@@ -1,6 +1,8 @@
 <template>
     <div id="app">
-        <div class="row">
+        <beta-warning></beta-warning>
+
+        <div class="row mt-2">
             <div class="col col-md-6">
                 <generic-multiselect @change="food = $event.val; refreshList()"
                                      :model="Models.FOOD"
@@ -11,7 +13,8 @@
                 <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"
+                <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 col-md-6">
@@ -45,7 +48,10 @@
                         <th>{{ $t('Unit') }}</th>
                         <th>{{ $t('Food') }}</th>
                         <th>{{ $t('Note') }}</th>
-                        <th>{{ $t('Save') }}</th>
+                        <th>
+                            <b-button variant="success" @click="updateIngredient()"><i class="fas fa-save"></i>
+                            </b-button>
+                        </th>
                     </tr>
                     </thead>
                     <tr v-if="loading">
@@ -56,10 +62,11 @@
                     <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">
+                                <input type="number" class="form-control" v-model="i.amount"
+                                       @input="$set(i, 'changed', true)">
                             </td>
                             <td style="width: 30vw">
-                                <generic-multiselect @change="i.unit = $event.val;"
+                                <generic-multiselect @change="i.unit = $event.val; $set(i, 'changed', true)"
                                                      :initial_single_selection="i.unit"
                                                      :model="Models.UNIT"
                                                      :search_on_load="false"
@@ -68,7 +75,7 @@
                                                      :multiple="false"></generic-multiselect>
                             </td>
                             <td style="width: 30vw">
-                                <generic-multiselect @change="i.food = $event.val;"
+                                <generic-multiselect @change="i.food = $event.val; $set(i, 'changed', true)"
                                                      :initial_single_selection="i.food"
                                                      :model="Models.FOOD"
                                                      :search_on_load="false"
@@ -77,11 +84,12 @@
                                                      :multiple="false"></generic-multiselect>
                             </td>
                             <td style="width: 30vw">
-                                <input class="form-control" v-model="i.note">
+                                <input class="form-control" v-model="i.note" @keydown="$set(i, 'changed', true)">
 
                             </td>
                             <td style="width: 5vw">
-                                <b-button variant="primary" @click="updateIngredient(i)"><i class="fas fa-save"></i>
+                                <b-button :disabled="i.changed !== true" :variant="(i.changed !== true) ? 'primary' : 'success'" @click="updateIngredient(i)">
+                                    <i class="fas fa-save"></i>
                                 </b-button>
                             </td>
 
@@ -106,13 +114,14 @@ import {ApiApiFactory} from "@/utils/openapi/api";
 import GenericMultiselect from "@/components/GenericMultiselect";
 import GenericModalForm from "@/components/Modals/GenericModalForm";
 import LoadingSpinner from "@/components/LoadingSpinner";
+import BetaWarning from "@/components/BetaWarning";
 
 Vue.use(BootstrapVue)
 
 export default {
     name: "IngredientEditorView",
     mixins: [ApiMixin],
-    components: {LoadingSpinner, GenericMultiselect, GenericModalForm},
+    components: {BetaWarning, LoadingSpinner, GenericMultiselect, GenericModalForm},
     data() {
         return {
             ingredients: [],
@@ -154,11 +163,24 @@ export default {
             }
         },
         updateIngredient: function (i) {
-            let apiClient = new ApiApiFactory()
+            let update_list = []
-            apiClient.updateIngredient(i.id, i).then(r => {
+            if (i === undefined) {
-                StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
+                this.ingredients.forEach(x => {
-            }).catch((r, e) => {
+                    if (x.changed) {
-                StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
+                        update_list.push(x)
+                    }
+                })
+            } else {
+                update_list = [i]
+            }
+
+            update_list.forEach(i => {
+                let apiClient = new ApiApiFactory()
+                apiClient.updateIngredient(i.id, i).then(r => {
+                    this.$set(i, 'changed', false)
+                }).catch((r, e) => {
+                    StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
+                })
             })
         },
     },