feat: Improved Recipe Scaling Support and Shopping List Recipe Refactor (#1847)

* propogate scale changes to print view

* fixed incorrect variable reference

* refactored shopping list recipe routes
cleaned up existing logic
added support for recipe scaling

* updated current revision

* adding to shopping list respects UI recipe scale

* added field annotations

* added tests for recipe scaling

* made column nullable and set to 1 during migration

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -51,6 +51,7 @@
         color="info"
         :card-menu="false"
         :recipe-id="recipe.id"
+        :recipe-scale="recipeScale"
         :use-items="{
           delete: false,
           edit: false,
@@ -105,6 +106,10 @@ export default defineComponent({
       required: true,
       type: String,
     },
+    recipeScale: {
+      type: Number,
+      default: 1,
+    },
     open: {
       required: true,
       type: Boolean,

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -199,6 +199,10 @@ export default defineComponent({
       required: true,
       type: String,
     },
+    recipeScale: {
+      type: Number,
+      default: 1,
+    },
     /**
      * Optional group ID prop that is only _required_ when the
      * public URL is requested. If the public URL button is pressed
@@ -316,7 +320,7 @@ export default defineComponent({
     }
 
     async function addRecipeToList(listId: string) {
-      const { data } = await api.shopping.lists.addRecipe(listId, props.recipeId);
+      const { data } = await api.shopping.lists.addRecipe(listId, props.recipeId, props.recipeScale);
       if (data) {
         alert.success(i18n.t("recipe.recipe-added-to-list") as string);
         state.shoppingListDialog = false;

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container :class="{ 'pa-0': $vuetify.breakpoint.smAndDown }">
     <v-card :flat="$vuetify.breakpoint.smAndDown" class="d-print-none">
-      <RecipePageHeader :recipe="recipe" :landscape="landscape" @save="saveRecipe" @delete="deleteRecipe" />
+      <RecipePageHeader :recipe="recipe" :recipe-scale="scale" :landscape="landscape" @save="saveRecipe" @delete="deleteRecipe" />
       <LazyRecipeJsonEditor v-if="isEditJSON" v-model="recipe" class="mt-10" :options="EDITOR_OPTIONS" />
       <v-card-text v-else>
         <!--
@@ -70,7 +70,7 @@
       :recipe="recipe"
       class="px-1 my-4 d-print-none"
     />
-    <RecipePrintView :recipe="recipe" />
+    <RecipePrintView :recipe="recipe" :scale="scale" />
   </v-container>
 </template>
 

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue

@@ -45,6 +45,7 @@
       v-if="user.id"
       :recipe="recipe"
       :slug="recipe.slug"
+      :recipe-scale="recipeScale"
       :locked="user.id !== recipe.userId && recipe.settings.locked"
       :name="recipe.name"
       :logged-in="$auth.loggedIn"
@@ -85,6 +86,10 @@ export default defineComponent({
       type: Object as () => NoUndefinedField<Recipe>,
       required: true,
     },
+    recipeScale: {
+      type: Number,
+      default: 1,
+    },
     landscape: {
       type: Boolean,
       default: false,

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -96,6 +96,10 @@ export default defineComponent({
       type: Object as () => Recipe,
       required: true,
     },
+    scale: {
+      type: Number,
+      default: 1,
+    },
   },
   setup(props) {
     // Group ingredients by section so we can style them independently
@@ -181,7 +185,7 @@ export default defineComponent({
     });
 
     function parseText(ingredient: RecipeIngredient) {
-      return parseIngredientText(ingredient, props.recipe.settings?.disableAmount || false);
+      return parseIngredientText(ingredient, props.recipe.settings?.disableAmount || false, props.scale);
     }
 
     return {