add recipes to shopping list

vue/src/components/IngredientsCard.vue

@@ -7,8 +7,7 @@
                 </div>
                 <div class="col col-md-6 text-right" v-if="header">
                     <h4>
-                        <i v-if="show_shopping && ShoppingRecipes.length > 0" class="fas fa-trash text-danger px-2"
+                        <i v-if="show_shopping && ShoppingRecipes.length > 0" class="fas fa-trash text-danger px-2" @click="saveShopping(true)"></i>
-                           @click="saveShopping(true)"></i>
                         <i v-if="show_shopping" class="fas fa-save text-success px-2" @click="saveShopping()"></i>
                         <i class="fas fa-shopping-cart px-2" @click="getShopping()"></i>
                     </h4>
@@ -16,17 +15,16 @@
             </div>
             <div class="row text-right" v-if="ShoppingRecipes.length > 1">
                 <div class="col col-md-6 offset-md-6 text-right">
-                    <b-form-select v-model="selected_shoppingrecipe" :options="ShoppingRecipes"
+                    <b-form-select v-model="selected_shoppingrecipe" :options="ShoppingRecipes" size="sm"></b-form-select>
-                                   size="sm"></b-form-select>
                 </div>
             </div>
-            <br v-if="header"/>
+            <br v-if="header" />
             <div class="row no-gutter">
                 <div class="col-md-12">
                     <table class="table table-sm">
                         <!-- eslint-disable vue/no-v-for-template-key-on-child -->
-                        <template v-for="s in steps" >
+                        <template v-for="s in steps">
-                            <tr v-bind:key="s.id" v-if="s.show_as_header && s.name !== ''">
+                            <tr v-bind:key="s.id" v-if="s.show_as_header && s.name !== '' && !add_shopping_mode">
                                 <td colspan="5">
                                     <b>{{ s.name }}</b>
                                 </td>
@@ -56,18 +54,18 @@
 
 <script>
 import Vue from "vue"
-import {BootstrapVue} from "bootstrap-vue"
+import { BootstrapVue } from "bootstrap-vue"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import IngredientComponent from "@/components/IngredientComponent"
-import {ApiMixin, StandardToasts} from "@/utils/utils"
+import { ApiMixin, StandardToasts } from "@/utils/utils"
 
 Vue.use(BootstrapVue)
 
 export default {
     name: "IngredientCard",
     mixins: [ApiMixin],
-    components: {IngredientComponent},
+    components: { IngredientComponent },
     props: {
         steps: {
             type: Array,
@@ -75,12 +73,12 @@ export default {
                 return []
             },
         },
-        recipe: {type: Number},
+        recipe: { type: Number },
-        ingredient_factor: {type: Number, default: 1},
+        ingredient_factor: { type: Number, default: 1 },
-        servings: {type: Number, default: 1},
+        servings: { type: Number, default: 1 },
-        detailed: {type: Boolean, default: true},
+        detailed: { type: Boolean, default: true },
-        header: {type: Boolean, default: false},
+        header: { type: Boolean, default: false },
-        add_shopping_mode: {type: Boolean, default: false},
+        add_shopping_mode: { type: Boolean, default: false },
     },
     data() {
         return {
@@ -99,7 +97,7 @@ export default {
                         value: x?.list_recipe,
                         text: x?.recipe_mealplan?.name,
                         recipe: x?.recipe_mealplan?.recipe ?? 0,
-                        servings: x?.recipe_mealplan?.servings
+                        servings: x?.recipe_mealplan?.servings,
                     }
                 })
                 .filter((x) => x?.recipe == this.recipe)

vue/src/components/Modals/ShoppingModal.vue

@@ -2,7 +2,7 @@
     <div>
         <b-modal :id="`shopping_${this.modal_id}`" hide-footer @show="loadRecipe">
             <template v-slot:modal-title
-                ><h4>{{ $t("Add_Servings_to_Shopping", { servings: servings }) }}</h4></template
+                ><h4>{{ $t("Add_Servings_to_Shopping", { servings: recipe_servings }) }}</h4></template
             >
             <loading-spinner v-if="loading"></loading-spinner>
             <div class="accordion" role="tablist" v-if="!loading">
@@ -15,7 +15,7 @@
                             :steps="steps"
                             :recipe="recipe.id"
                             :ingredient_factor="ingredient_factor"
-                            :servings="servings"
+                            :servings="recipe_servings"
                             :show_shopping="true"
                             :add_shopping_mode="true"
                             :header="false"
@@ -33,7 +33,7 @@
                                     :steps="r.steps"
                                     :recipe="r.recipe.id"
                                     :ingredient_factor="ingredient_factor"
-                                    :servings="servings"
+                                    :servings="recipe_servings"
                                     :show_shopping="true"
                                     :add_shopping_mode="true"
                                     :header="false"
@@ -45,12 +45,19 @@
                     <!-- eslint-disable vue/no-v-for-template-key-on-child -->
                 </b-card>
             </div>
-            <div class="row mt-3 mb-3">
+
-                <div class="col-12 text-right">
+            <b-input-group class="my-3">
-                    <b-button class="mx-2" variant="secondary" @click="$bvModal.hide(`shopping_${modal_id}`)">{{ $t("Cancel") }} </b-button>
+                <b-input-group-prepend is-text>
-                    <b-button class="mx-2" variant="success" @click="saveShopping">{{ $t("Save") }} </b-button>
+                    {{ $t("Servings") }}
-                </div>
+                </b-input-group-prepend>
-            </div>
+
+                <b-form-spinbutton min="1" v-model="recipe_servings" inline style="height: 3em"></b-form-spinbutton>
+
+                <b-input-group-append>
+                    <b-button variant="secondary" @click="$bvModal.hide(`shopping_${modal_id}`)">{{ $t("Cancel") }} </b-button>
+                    <b-button variant="success" @click="saveShopping">{{ $t("Save") }} </b-button>
+                </b-input-group-append>
+            </b-input-group>
         </b-modal>
     </div>
 </template>
@@ -71,25 +78,37 @@ export default {
     mixins: [],
     props: {
         recipe: { required: true, type: Object },
-        servings: { type: Number },
+        servings: { type: Number, default: undefined },
         modal_id: { required: true, type: Number },
     },
     data() {
         return {
             loading: true,
             steps: [],
-            recipe_servings: 0,
+            recipe_servings: undefined,
             add_shopping: [],
             related_recipes: [],
         }
     },
-    mounted() {},
+    mounted() {
+        this.recipe_servings = this.servings
+    },
     computed: {
         ingredient_factor: function () {
-            return this.servings / this.recipe.servings || this.recipe_servings
+            return this.recipe_servings / this.recipe.servings
+        },
+    },
+    watch: {
+        recipe: {
+            handler() {
+                this.loadRecipe()
+            },
+            deep: true,
+        },
+        servings: function (newVal) {
+            this.recipe_servings = parseInt(newVal)
         },
     },
-    watch: {},
     methods: {
         loadRecipe: function () {
             this.add_shopping = []
@@ -109,7 +128,9 @@ export default {
                             .filter((x) => !x?.food?.food_onhand)
                             .map((x) => x.id),
                     ]
-                    this.recipe_servings = result.data?.servings
+                    if (!this.recipe_servings) {
+                        this.recipe_servings = result.data?.servings
+                    }
                     this.loading = false
                 })
                 .then(() => {
@@ -159,19 +180,27 @@ export default {
             let shopping_recipe = {
                 id: this.recipe.id,
                 ingredients: this.add_shopping,
-                servings: this.servings,
+                servings: this.recipe_servings,
             }
             let apiClient = new ApiApiFactory()
             apiClient
                 .shoppingRecipe(this.recipe.id, shopping_recipe)
                 .then((result) => {
                     StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
+                    this.$emit("finish")
                 })
                 .catch((err) => {
                     StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
                 })
+
             this.$bvModal.hide(`shopping_${this.modal_id}`)
         },
     },
 }
 </script>
+<style>
+.b-form-spinbutton.form-control {
+    background-color: #e9ecef;
+    border: 1px solid #ced4da;
+}
+</style>