update SLR servings UI

cookbook/static/themes/tandoor_dark.min.css

@@ -2850,78 +2850,36 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     color: #fff
 }
 
-.btn-primary:hover {
-    background: transparent;
-    color: #b98766;
-    border: 1px solid #b98766
-}
-
 .btn-secondary {
     transition: all .5s ease-in-out;
     color: #fff
 }
 
-.btn-secondary:hover {
-    background: transparent;
-    color: #b55e4f;
-    border: 1px solid #b55e4f
-}
-
 .btn-success {
     transition: all .5s ease-in-out;
     color: #fff
 }
 
-.btn-success:hover {
-    background: transparent;
-    color: #82aa8b;
-    border: 1px solid #82aa8b
-}
-
 .btn-info {
     transition: all .5s ease-in-out;
     color: #fff
 }
 
-.btn-info:hover {
-    background: transparent;
-    color: #385f84;
-    border: 1px solid #385f84
-}
-
 .btn-warning {
     transition: all .5s ease-in-out;
     color: #fff
 }
 
-.btn-warning:hover {
-    background: transparent;
-    color: #eaaa21;
-    border: 1px solid #eaaa21
-}
-
 .btn-danger {
     transition: all .5s ease-in-out;
     color: #fff
 }
 
-.btn-danger:hover {
-    background: transparent;
-    color: #a7240e;
-    border: 1px solid #a7240e
-}
-
 .btn-light {
     transition: all .5s ease-in-out;
     color: #fff
 }
 
-.btn-light:hover {
-    background-color: hsla(0, 0%, 18%, .5);
-    color: #cfd5cd;
-    border: 1px solid hsla(0, 0%, 18%, .5)
-}
-
 .btn-dark {
     transition: all .5s ease-in-out;
     color: #fff

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -75,6 +75,7 @@
                     <span class="d-none d-md-block">{{ $t('Recipes') + ` (${Object.keys(shopping_list_store.getAssociatedRecipes()).length})` }}</span>
                 </template>
 
+
                 <b-row class="d-lg-block d-print-none d-none pr-1 pl-1 mb-3 mt-3">
                     <b-col cols="12">
                         <generic-multiselect
@@ -85,17 +86,25 @@
                     </b-col>
                 </b-row>
 
+
                 <b-row v-for="r in shopping_list_store.getAssociatedRecipes()" :key="r.shopping_list_recipe_id" class="pr-1 pl-1">
                     <b-col cols="12">
-                        <b-button-group class="w-100 mt-1">
+                        <b-button-group class="w-100 mt-2">
                             <b-button variant="dark" block class="btn btn-block text-left">
                                 <span>{{ r.recipe_name }}</span> <br/>
                                 <span><small class="text-muted">{{ r.recipe_name }}</small></span> <!-- TODO show meal plan date/type -->
                             </b-button>
-                            <b-form-input min="1" type="number" :debounce="300" v-model="r.servings" @update="updateServings(r.shopping_list_recipe_id, r.servings)"></b-form-input>
+                            <!--                            <b-form-input min="1" type="number" :debounce="300" v-model="r.servings" @update="updateServings(r.shopping_list_recipe_id, r.servings)"></b-form-input>-->
                             <b-button variant="danger" @click="deleteRecipe(r.shopping_list_recipe_id)"><i class="fas fa-trash fa-fw"></i></b-button>
                         </b-button-group>
 
+                        <b-button-group class="w-100 mt-1">
+                            <b-button @click="r.servings = updateServings(r, 'half')" :disabled="shopping_list_store.currently_updating"><i class="fas fa-divide"></i> 2</b-button>
+                            <b-button variant="info" @click="r.servings = updateServings(r, 'sub')" :disabled="shopping_list_store.currently_updating"><i class="fas fa-minus"></i></b-button>
+                            <b-button variant="info" @click="r.servings = updateServings(r, 'prompt')">{{ r.servings }}</b-button>
+                            <b-button variant="info" @click="r.servings = updateServings(r, 'add')" :disabled="shopping_list_store.currently_updating"><i class="fas fa-plus"></i></b-button>
+                            <b-button @click="r.servings = updateServings(r, 'multiply')" :disabled="shopping_list_store.currently_updating"><i class="fas fa-times"></i> 2</b-button>
+                        </b-button-group>
 
                     </b-col>
                 </b-row>
@@ -361,9 +370,11 @@
         <shopping-modal v-if="new_recipe.id" :recipe="new_recipe" :modal_id="new_recipe.id" :servings="new_recipe.servings" :mealplan="undefined" @finish="finishShopping"/>
 
         <bottom-navigation-bar active-view="view_shopping">
-            <template #custom_nav_content>
+            <template #custom_nav_content v-if="current_tab <= 1">
                 <div class="d-flex flex-row justify-content-around mb-3">
 
+
+                    <template v-if="current_tab===0">
                         <b-input-group>
                             <b-form-input v-model="new_item.ingredient" :placeholder="$t('Food')" @keyup.enter="addItem"></b-form-input>
                             <b-input-group-append>
@@ -372,6 +383,15 @@
                                 </b-button>
                             </b-input-group-append>
                         </b-input-group>
+                    </template>
+                    <template v-if="current_tab===1">
+                        <generic-multiselect
+                            :model="Models.RECIPE"
+                            :multiple="false"
+                            @change="addRecipeToShopping($event.val)"
+                        ></generic-multiselect>
+                    </template>
+
 
                 </div>
             </template>
@@ -691,9 +711,8 @@ export default {
          */
         deleteRecipe: function (shopping_list_recipe_id) {
             let api = new ApiApiFactory()
-            //TODO properly integrate into store logic
             api.destroyShoppingListRecipe(shopping_list_recipe_id).then((x) => {
-                useShoppingListStore().refreshFromAPI()
+                useShoppingListStore().refreshFromAPI() //TODO only do partial refresh
             }).catch((err) => {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
             })
@@ -841,16 +860,37 @@ export default {
         /**
          * change number of servings of a shopping list recipe
          * backend handles scaling of associated entries
-         * @param shopping_list_recipe_id shopping list recipe to update
+         * @param recipe recipe to update
-         * @param servings number of servings to set shopping list recipe to
+         * @param mode mode to change servings
          */
-        updateServings(shopping_list_recipe_id, servings) {
+        updateServings(recipe, mode) {
-            if (servings !== 0 && servings !== "") {
+            if (mode === 'half') {
-                console.log('NEW SERVINGS', servings)
+                recipe.servings = recipe.servings / 2
+            }
+            if (mode === 'multiply') {
+                recipe.servings = recipe.servings * 2
+            }
+            if (mode === 'add') {
+                recipe.servings++
+            }
+            if (mode === 'sub') {
+                recipe.servings--
+            }
+            if (mode === 'prompt') {
+                let servings = prompt(this.$t('Servings'), recipe.servings);
+                if (servings !== null && servings !== "" && !isNaN(servings) && !isNaN(parseFloat(servings))) {
+                    recipe.servings = parseFloat(servings)
+                } else {
+                    console.log('Invalid input in servings prompt', servings)
+                }
+            }
+
+            if (recipe.servings > 0 && recipe.servings !== "") {
                 let api = new ApiApiFactory()
-                api.partialUpdateShoppingListRecipe(shopping_list_recipe_id, {id: shopping_list_recipe_id, servings: servings}).then(() => {
+                api.partialUpdateShoppingListRecipe(recipe.shopping_list_recipe_id, {id: recipe.shopping_list_recipe_id, servings: recipe.servings}).then(() => {
                     useShoppingListStore().refreshFromAPI()
                 })
+                return recipe.servings
             }
         },
         deleteSupermarket(index) {
@@ -1100,10 +1140,8 @@ export default {
             })
         },
         finishShopping() {
-            this.add_recipe_servings = 1
             this.new_recipe = {id: undefined}
-            this.edit_recipe_list = undefined
+            useShoppingListStore().refreshFromAPI() //TODO only do partial fetch
-            this.getShoppingList()
         },
         editRecipeList(e, r) {
             this.new_recipe = {

vue/src/stores/ShoppingListStore.js

@@ -124,7 +124,6 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
         },
     },
     actions: {
-        // TODO implement shopping list recipes
         /**
          * Retrieves all shopping related data (shopping list entries, supermarkets, supermarket categories and shopping list recipes) from API
          */
@@ -133,6 +132,8 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 this.currently_updating = true
                 let apiClient = new ApiApiFactory()
                 apiClient.listShoppingListEntrys().then((r) => {
+                    this.entries = {}
+
                     r.data.forEach((e) => {
                         Vue.set(this.entries, e.id, e)
                     })