feat: adjust linked recipe qty display and load recipe with scale set

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

@@ -265,6 +265,9 @@ type BooleanString = "true" | "false" | "";
 
 const paramsEdit = useRouteQuery<BooleanString>("edit", "");
 const paramsParse = useRouteQuery<BooleanString>("parse", "");
+const paramsScale = useRouteQuery<string>("scale", "1");
+
+const scale = ref(1);
 
 onMounted(() => {
   if (paramsEdit.value === "true" && isOwnGroup.value) {
@@ -274,6 +277,12 @@ onMounted(() => {
   if (paramsParse.value === "true" && isOwnGroup.value) {
     toggleIsParsing(true);
   }
+
+  // Set scale from URL parameter
+  const scaleValue = Number(paramsScale.value);
+  if (!isNaN(scaleValue) && scaleValue > 0) {
+    scale.value = scaleValue;
+  }
 });
 
 watch(isEditMode, (newVal) => {
@@ -288,6 +297,15 @@ watch(isParsing, () => {
   }
 });
 
+watch(scale, (newVal) => {
+  if (newVal !== 1) {
+    paramsScale.value = String(newVal);
+  }
+  else {
+    paramsScale.value = undefined;
+  }
+});
+
 /** =============================================================
  * Recipe Save Delete
  */
@@ -372,8 +390,6 @@ function chipClicked(item: RecipeTag | RecipeCategory | RecipeTool, itemType: st
   router.push(`/g/${groupSlug.value}?${itemType}=${item.id}`);
 }
 
-const scale = ref(1);
-
 // expose to template
 // (all variables used in template are top-level in <script setup>)
 </script>

frontend/composables/recipes/use-recipe-ingredients.ts

@@ -36,12 +36,12 @@ function useUnitName(unit: CreateIngredientUnit | IngredientUnit | undefined, us
   return returnVal;
 }
 
-function useRecipeLink(recipe: Recipe | undefined, groupSlug: string | undefined): string | undefined {
+function useRecipeLink(recipe: Recipe | undefined, groupSlug: string | undefined, scale: number = 1): string | undefined {
   if (!(recipe && recipe.slug && recipe.name && groupSlug)) {
     return undefined;
   }
 
-  return `<a href="/g/${groupSlug}/r/${recipe.slug}" target="_blank">${recipe.name}</a>`;
+  return `<a href="/g/${groupSlug}/r/${recipe.slug}?scale=${scale}" target="_blank">${recipe.name}</a>`;
 }
 
 type ParsedIngredientText = {
@@ -79,19 +79,23 @@ export function useParsedIngredientText(ingredient: RecipeIngredient, scale = 1,
           ? `<sup>${fraction[1]}</sup><span>&frasl;</span><sub>${fraction[2]}</sub>`
           : ` ${fraction[1]}/${fraction[2]}`;
       }
+
+      if (referencedRecipe) {
+        const i18n = useI18n();
+        returnQty += quantity > 1 ? ` ${i18n.t("recipe.batch_plural")}` : ` ${i18n.t("recipe.batch")}`;
+      }
     }
   }
 
-  // TODO: Add support for sub-recipes here?
   const unitName = useUnitName(unit || undefined, usePluralUnit);
   const ingName = referencedRecipe ? referencedRecipe.name || "" : useFoodName(food || undefined, usePluralFood);
-
+  const recipeLink = referencedRecipe ? useRecipeLink(referencedRecipe, groupSlug, quantity ? quantity : 1) : undefined;
   return {
     quantity: returnQty ? sanitizeIngredientHTML(returnQty) : undefined,
     unit: unitName && quantity ? sanitizeIngredientHTML(unitName) : undefined,
     name: ingName ? sanitizeIngredientHTML(ingName) : undefined,
     note: note ? sanitizeIngredientHTML(note) : undefined,
-    recipeLink: useRecipeLink(referencedRecipe || undefined, groupSlug),
+    recipeLink: recipeLink ? recipeLink : undefined,
   };
 }
 

frontend/lang/messages/en-US.json

@@ -698,7 +698,9 @@
     "cover-image": "Cover image",
     "include-linked-recipes": "Include Linked Recipes",
     "include-linked-recipe-ingredients": "Include Linked Recipe Ingredients",
-    "toggle-recipe": "Toggle Recipe"
+    "toggle-recipe": "Toggle Recipe",
+    "batch_plural": "batches",
+    "batch": "batch"
   },
   "recipe-finder": {
     "recipe-finder": "Recipe Finder",