Merge branch 'develop' into feature/shopping_list_v2

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -1,5 +1,6 @@
 <template>
     <div id="app" style="margin-bottom: 4vh">
+        <RecipeSwitcher mode="mealplan" />
         <div class="row">
             <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
                 <div class="row">
@@ -244,6 +245,7 @@ import RecipeCard from "@/components/RecipeCard"
 import GenericMultiselect from "@/components/GenericMultiselect"
 import Treeselect from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
 
 Vue.use(BootstrapVue)
 
@@ -252,7 +254,7 @@ let SETTINGS_COOKIE_NAME = "search_settings"
 export default {
     name: "RecipeSearchView",
     mixins: [ResolveUrlMixin, ApiMixin],
-    components: { GenericMultiselect, RecipeCard, Treeselect },
+    components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher },
     data() {
         return {
             // this.Models and this.Actions inherited from ApiMixin

vue/src/apps/RecipeView/RecipeView.vue

@@ -5,6 +5,7 @@
         </template>
 
         <div v-if="!loading">
+            <RecipeSwitcher :recipe="rootrecipe.id" :name="rootrecipe.name" mode="recipe" @switch="quickSwitch($event)" />
             <div class="row">
                 <div class="col-12" style="text-align: center">
                     <h3>{{ recipe.name }}</h3>
@@ -75,12 +76,12 @@
                             />
                         </div>
                         <div class="my-auto">
-                            <span class="text-primary"
-                                ><b
-                                    ><template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template
-                                    ><template v-else>{{ recipe.servings_text }}</template></b
-                                ></span
-                            >
+                            <span class="text-primary">
+                                <b>
+                                    <template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template>
+                                    <template v-else>{{ recipe.servings_text }}</template>
+                                </b>
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -172,6 +173,7 @@ import IngredientsCard from "@/components/IngredientsCard"
 import StepComponent from "@/components/StepComponent"
 import KeywordsComponent from "@/components/KeywordsComponent"
 import NutritionComponent from "@/components/NutritionComponent"
+import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
 
 Vue.prototype.moment = moment
 
@@ -192,22 +194,32 @@ export default {
         KeywordsComponent,
         LoadingSpinner,
         AddRecipeToBook,
+        RecipeSwitcher,
     },
     computed: {
         ingredient_factor: function () {
             return this.servings / this.recipe.servings
         },
+        ingredient_count() {
+            return this.recipe?.steps.map((x) => x.ingredients).flat().length
+        },
     },
     data() {
         return {
             loading: true,
             recipe: undefined,
-            ingredient_count: 0,
+            rootrecipe: undefined,
             servings: 1,
+            servings_cache: {},
             start_time: "",
             share_uid: window.SHARE_UID,
         }
     },
+    watch: {
+        servings(newVal, oldVal) {
+            this.servings_cache[this.recipe.id] = this.servings
+        },
+    },
     mounted() {
         this.loadRecipe(window.RECIPE_ID)
         this.$i18n.locale = window.CUSTOM_LOCALE
@@ -218,12 +230,9 @@ export default {
                 if (window.USER_SERVINGS !== 0) {
                     recipe.servings = window.USER_SERVINGS
                 }
-                this.servings = recipe.servings
 
                 let total_time = 0
                 for (let step of recipe.steps) {
-                    this.ingredient_count += step.ingredients.length
-
                     for (let ingredient of step.ingredients) {
                         this.$set(ingredient, "checked", false)
                     }
@@ -237,7 +246,8 @@ export default {
                     this.start_time = moment().format("yyyy-MM-DDTHH:mm")
                 }
 
-                this.recipe = recipe
+                this.recipe = this.rootrecipe = recipe
+                this.servings = this.servings_cache[this.rootrecipe.id] = recipe.servings
                 this.loading = false
             })
         },
@@ -253,6 +263,15 @@ export default {
                 }
             }
         },
+        quickSwitch: function (e) {
+            if (e === -1) {
+                this.recipe = this.rootrecipe
+                this.servings = this.servings_cache[this.rootrecipe?.id ?? 1]
+            } else {
+                this.recipe = e
+                this.servings = this.servings_cache?.[e.id] ?? e.servings
+            }
+        },
     },
 }
 </script>