From 9f90306f6c67c2bef4d581425b1036d67f379247 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sat, 23 Apr 2022 17:13:27 +0200
Subject: [PATCH] at least basic ui for ingredient editor

---
 vue/src/apps/ImportView/ImportView.vue        |   6 +-
 .../IngredientEditorView.vue                  | 144 +++++++++++-------
 vue/src/locales/en.json                       |   1 +
 3 files changed, 96 insertions(+), 55 deletions(-)

diff --git a/vue/src/apps/ImportView/ImportView.vue b/vue/src/apps/ImportView/ImportView.vue
index 28993fae..c76c1f19 100644
--- a/vue/src/apps/ImportView/ImportView.vue
+++ b/vue/src/apps/ImportView/ImportView.vue
@@ -218,8 +218,7 @@
                                                                :href="resolveDjangoUrl('view_recipe',r.id)">{{
                                                                     r.name
                                                                 }}</a>
-                                                            <span class="float-right">Imported</span>
-                                                            <!-- TODO  localize -->
+                                                            <span class="float-right">{{ $t('Imported') }}</span>
                                                         </div>
                                                     </b-list-group-item>
 
@@ -230,8 +229,7 @@
                                                         <div class="clearfix">
                                                             <a class="float-left" target="_blank"
                                                                rel="noreferrer nofollow" :href="u">{{ u }}</a>
-                                                            <span class="float-right">Failed</span>
-                                                            <!-- TODO  localize -->
+                                                            <span class="float-right">{{ $t('Failure') }}</span>
                                                         </div>
                                                     </b-list-group-item>
                                                 </b-list-group>
diff --git a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
index 35b1c5ba..3bfdeaa4 100644
--- a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
+++ b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
@@ -1,23 +1,36 @@
 <template>
     <div id="app">
-        <beta-warning></beta-warning>
 
         <div class="row mt-2">
             <div class="col col-md-6">
-                <generic-multiselect @change="food = $event.val; refreshList()" ref="food_multiselect"
-                                     :model="Models.FOOD"
-                                     :initial_single_selection="food"
-                                     :multiple="false"></generic-multiselect>
-                <b-button @click="generic_model = Models.FOOD; generic_action=Actions.DELETE" :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>
+                <b-input-group>
+                    <generic-multiselect @change="food = $event.val; refreshList()" ref="food_multiselect"
+                                         :model="Models.FOOD"
+                                         :initial_single_selection="food"
+                                         :multiple="false"></generic-multiselect>
 
-                <b-button @click="generic_model = Models.FOOD; generic_action=Actions.UPDATE" :disabled="food === null">
-                    <i class="fas fa-edit"></i>
-                </b-button>
+                    <b-input-group-append>
+                        <b-dropdown no-caret right :disabled="food === null">
+                            <template #button-content>
+                                <i class="fas fa-ellipsis-v"></i>
+                            </template>
+
+                            <b-dropdown-item @click="generic_model = Models.FOOD; generic_action=Actions.UPDATE"
+                                             :disabled="food === null">
+                                <i class="fas fa-edit fa-fw"></i> {{ $t('Edit') }}
+                            </b-dropdown-item>
+                            <b-dropdown-item @click="generic_model = Models.FOOD; generic_action=Actions.MERGE"
+                                             :disabled="food === null">
+                                <i class="fas fa-compress-arrows-alt fa-fw"></i> {{ $t('Merge') }}
+                            </b-dropdown-item>
+                            <b-dropdown-item @click="generic_model = Models.FOOD; generic_action=Actions.DELETE"
+                                             :disabled="food === null">
+                                <i class="fas fa-trash-alt fa-fw"></i> {{ $t('Delete') }}
+                            </b-dropdown-item>
+
+                        </b-dropdown>
+                    </b-input-group-append>
+                </b-input-group>
 
                 <generic-modal-form :model="Models.FOOD" :action="generic_action" :show="generic_model === Models.FOOD"
                                     :item1="food"
@@ -25,36 +38,57 @@
             </div>
             <div class="col col-md-6">
 
-                <generic-multiselect
-                    @change="unit = $event.val; refreshList()"
-                    :model="Models.UNIT"
-                    ref="unit_multiselect"
-                    :initial_single_selection="unit"
-                    :multiple="false"></generic-multiselect>
+                <b-input-group>
+             
+                        <generic-multiselect
+                            @change="unit = $event.val; refreshList()"
+                            :model="Models.UNIT"
+                            ref="unit_multiselect"
+                            :initial_single_selection="unit"
+                            :multiple="false"></generic-multiselect>
+
+                    <b-input-group-append>
+                        <b-dropdown no-caret right :disabled="unit === null">
+                            <template #button-content>
+                                <i class="fas fa-ellipsis-v"></i>
+                            </template>
+
+                            <b-dropdown-item @click="generic_model = Models.UNIT; generic_action=Actions.UPDATE"
+                                             :disabled="unit === null">
+                                <i class="fas fa-edit fa-fw"></i> {{ $t('Edit') }}
+                            </b-dropdown-item>
+                            <b-dropdown-item @click="generic_model = Models.UNIT; generic_action=Actions.MERGE"
+                                             :disabled="unit === null">
+                                <i class="fas fa-compress-arrows-alt fa-fw"></i> {{ $t('Merge') }}
+                            </b-dropdown-item>
+                            <b-dropdown-item @click="generic_model = Models.UNIT; generic_action=Actions.DELETE"
+                                             :disabled="unit === null">
+                                <i class="fas fa-trash-alt fa-fw"></i> {{ $t('Delete') }}
+                            </b-dropdown-item>
+
+                        </b-dropdown>
+                    </b-input-group-append>
+                </b-input-group>
 
-                <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>
-                <b-button @click="generic_model = Models.UNIT; generic_action=Actions.UPDATE" :disabled="unit === null">
-                    <i class="fas fa-edit"></i>
-                </b-button>
                 <generic-modal-form :model="Models.UNIT" :action="generic_action" :show="generic_model === Models.UNIT"
                                     :item1="unit"
                                     @finish-action="finishGenericAction()"/>
 
-
             </div>
         </div>
 
-        <b-pagination pills v-model="current_page" :total-rows="total_object_count" :per-page="page_size"
-                      @change="pageChange"></b-pagination>
+        <b-row class="mt-2">
+            <b-col cols="12">
+                <b-pagination align="center" pills v-model="current_page" :total-rows="total_object_count"
+                              :per-page="page_size"
+                              @change="pageChange"></b-pagination>
+            </b-col>
+        </b-row>
 
-        <div class="row mt-2">
-            <div class="col col-md-12">
-                <table class="table table-bordered">
+
+        <b-row class="mt-2">
+            <b-col>
+                <table class="table table-bordered table-sm">
                     <thead>
                     <tr>
                         <th>{{ $t('Amount') }}</th>
@@ -62,7 +96,8 @@
                         <th>{{ $t('Food') }}</th>
                         <th>{{ $t('Note') }}</th>
                         <th>
-                            <b-button variant="success" @click="updateIngredient()"><i class="fas fa-save"></i>
+                            <b-button variant="success" class="btn btn-sm" @click="updateIngredient()"><i
+                                class="fas fa-save"></i>
                             </b-button>
                         </th>
                     </tr>
@@ -108,15 +143,17 @@
 
                             </td>
                             <td style="width: 5vw">
-                                <b-button :disabled="i.changed !== true"
-                                          :variant="(i.changed !== true) ? 'primary' : 'success'"
-                                          @click="updateIngredient(i)">
-                                    <i class="fas fa-save"></i>
-                                </b-button>
-                                <b-button variant="danger"
-                                          @click="deleteIngredient(i)">
-                                    <i class="fas fa-trash"></i>
-                                </b-button>
+                                <b-button-group>
+                                    <b-button :disabled="i.changed !== true"
+                                              :variant="(i.changed !== true) ? 'primary' : 'success'"
+                                              @click="updateIngredient(i)">
+                                        <i class="fas fa-save"></i>
+                                    </b-button>
+                                    <b-button variant="danger"
+                                              @click="deleteIngredient(i)">
+                                        <i class="fas fa-trash"></i>
+                                    </b-button>
+                                </b-button-group>
                             </td>
 
                         </tr>
@@ -127,12 +164,17 @@
 
                 </table>
 
-                 <b-pagination pills v-model="current_page" :total-rows="total_object_count" :per-page="page_size"
-                      @change="pageChange"></b-pagination>
-            </div>
-        </div>
 
+            </b-col>
+        </b-row>
 
+        <b-row class="mt-2">
+            <b-col cols="12">
+                <b-pagination align="center" pills v-model="current_page" :total-rows="total_object_count"
+                              :per-page="page_size"
+                              @change="pageChange"></b-pagination>
+            </b-col>
+        </b-row>
     </div>
 </template>
 
@@ -153,7 +195,7 @@ Vue.use(BootstrapVue)
 export default {
     name: "IngredientEditorView",
     mixins: [ApiMixin, ResolveUrlMixin],
-    components: {BetaWarning, LoadingSpinner, GenericMultiselect, GenericModalForm},
+    components: {LoadingSpinner, GenericMultiselect, GenericModalForm},
     data() {
         return {
             ingredients: [],
@@ -202,7 +244,7 @@ export default {
                 if (this.unit !== null) {
                     params.query.unit = this.unit.id
                 }
-                apiClient.listIngredients(this.current_page, this.page_size,params).then(result => {
+                apiClient.listIngredients(this.current_page, this.page_size, params).then(result => {
                     this.ingredients = result.data.results
                     this.total_object_count = result.data.count
                     this.loading = false
diff --git a/vue/src/locales/en.json b/vue/src/locales/en.json
index 98eaf3a9..d2340586 100644
--- a/vue/src/locales/en.json
+++ b/vue/src/locales/en.json
@@ -368,6 +368,7 @@
     "no_pinned_recipes": "You have no pinned recipes!",
     "Planned": "Planned",
     "Pinned": "Pinned",
+    "Imported": "Imported",
     "Quick actions": "Quick actions",
     "Ratings": "Ratings",
     "Internal": "Internal",