feat: Allow to scale down below original recipe

frontend/components/Domain/Recipe/RecipeList.vue

@@ -30,7 +30,7 @@
 <script lang="ts">
 import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import DOMPurify from "dompurify";
-import { useFraction } from "~/composables/recipes/use-fraction";
+import { getLowestFraction } from "~/composables/recipes/use-fraction";
 import { ShoppingListItemOut } from "~/lib/api/types/group";
 import { RecipeSummary } from "~/lib/api/types/recipe";
 
@@ -59,7 +59,6 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const { frac } = useFraction();
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
@@ -118,7 +117,7 @@ export default defineComponent({
 
         let listItemDescription = ""
         if (props.listItem.unit?.fraction) {
-            const fraction = frac(quantity, 10, true);
+            const fraction = getLowestFraction(quantity);
             if (fraction[0] !== undefined && fraction[0] > 0) {
               listItemDescription += fraction[0];
             }

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

@@ -34,6 +34,7 @@ import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
 import { usePageState } from "~/composables/recipe-page/shared-state";
 import { useExtractRecipeYield } from "~/composables/recipe-page/use-extract-recipe-yield";
+import { sanitizeMarkdown } from "~/components/global/SafeMarkdown.vue";
 
 export default defineComponent({
   components: {
@@ -67,7 +68,8 @@ export default defineComponent({
     });
 
     const scaledYield = computed(() => {
-      return useExtractRecipeYield(props.recipe.recipeYield, scaleValue.value);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return sanitizeMarkdown(useExtractRecipeYield(props.recipe.recipeYield, scaleValue.value));
     });
 
     const basicYield = computed(() => {

frontend/components/Domain/Recipe/RecipeScaleEditButton.vue

@@ -5,7 +5,8 @@
         <v-menu v-model="menu" :disabled="!editScale" offset-y top nudge-top="6" :close-on-content-click="false">
           <template #activator="{ on, attrs }">
             <v-card class="pa-1 px-2" dark color="secondary darken-1" small v-bind="attrs" v-on="on">
-              <span v-if="recipeYield"> {{ scaledYield }} </span>
+              <!-- eslint-disable-next-line vue/no-v-html -->
+              <span v-if="recipeYield" v-html="scaledYield"></span>
               <span v-if="!recipeYield"> x {{ scale }} </span>
             </v-card>
           </template>
@@ -47,15 +48,16 @@
             event: 'increment',
           },
         ]"
-        @decrement="scale > 1 ? scale-- : null"
-        @increment="scale++"
+        @decrement="scale > 1 ? scale-- : scale = scale / 2"
+        @increment="scale > 1 ? scale++ : scale = scale * 2"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, computed } from "@nuxtjs/composition-api";
+import { sanitizeMarkdown } from "~/components/global/SafeMarkdown.vue";
 
 export default defineComponent({
   props: {

frontend/components/global/SafeMarkdown.vue

@@ -8,6 +8,29 @@ import VueMarkdown from "@adapttive/vue-markdown";
 import { defineComponent } from "@nuxtjs/composition-api";
 import DOMPurify from "isomorphic-dompurify";
 
+export function sanitizeMarkdown(rawHtml: string | null | undefined): string {
+  if (!rawHtml) {
+    return "";
+  }
+
+  const sanitized = DOMPurify.sanitize(rawHtml, {
+    // List based on
+    // https://support.zendesk.com/hc/en-us/articles/4408824584602-Allowing-unsafe-HTML-in-help-center-articles
+    ALLOWED_TAGS: [
+      "strong", "em", "b", "i", "u", "p", "code", "pre", "samp", "kbd", "var", "sub", "sup", "dfn", "cite",
+      "small", "address", "hr", "br", "id", "div", "span", "h1", "h2", "h3", "h4", "h5", "h6",
+      "ul", "ol", "li", "dl", "dt", "dd", "abbr", "a", "img", "blockquote", "iframe",
+      "del", "ins", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "colgroup",
+    ],
+    ADD_ATTR: [
+      "href", "src", "alt", "height", "width", "class", "allow", "title", "allowfullscreen", "frameborder",
+      "scrolling", "cite", "datetime", "name", "abbr", "target", "border",
+    ],
+  });
+
+  return sanitized;
+}
+
 export default defineComponent({
   components: {
     VueMarkdown,
@@ -19,32 +42,9 @@ export default defineComponent({
     },
   },
   setup() {
-    function sanitizeMarkdown(rawHtml: string | null | undefined): string {
-      if (!rawHtml) {
-        return "";
-      }
-
-      const sanitized = DOMPurify.sanitize(rawHtml, {
-        // List based on
-        // https://support.zendesk.com/hc/en-us/articles/4408824584602-Allowing-unsafe-HTML-in-help-center-articles
-        ALLOWED_TAGS: [
-                        "strong", "em", "b", "i", "u", "p", "code", "pre", "samp", "kbd", "var", "sub", "sup", "dfn", "cite",
-                        "small", "address", "hr", "br", "id", "div", "span", "h1", "h2", "h3", "h4", "h5", "h6",
-                        "ul", "ol", "li", "dl", "dt", "dd", "abbr", "a", "img", "blockquote", "iframe",
-                        "del", "ins", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "colgroup",
-                      ],
-        ADD_ATTR: [
-                    "href", "src", "alt", "height", "width", "class", "allow", "title", "allowfullscreen", "frameborder",
-                    "scrolling", "cite", "datetime", "name", "abbr", "target", "border",
-                  ],
-      });
-
-      return sanitized;
-    }
-
     return {
       sanitizeMarkdown,
     };
-  },
+  }
 });
 </script>

frontend/composables/recipe-page/use-extract-recipe-yield.test.ts

@@ -1,7 +1,20 @@
 import { describe, expect, test } from "vitest";
+import { getLowestFraction } from "../recipes/use-fraction";
 import { useExtractRecipeYield } from "./use-extract-recipe-yield";
 
 describe("test use extract recipe yield", () => {
+    test("useFraction", () => {
+        expect(getLowestFraction(0.5)).toStrictEqual([0, 1, 2]);
+        expect(getLowestFraction(1.5)).toStrictEqual([1, 1, 2]);
+        expect(getLowestFraction(3.25)).toStrictEqual([3, 1, 4]);
+        expect(getLowestFraction(93452.75)).toStrictEqual([93452, 3, 4]);
+        expect(getLowestFraction(0.125)).toStrictEqual([0, 1, 8]);
+        expect(getLowestFraction(1.0 / 3.0)).toStrictEqual([0, 1, 3]);
+        expect(getLowestFraction(0.142857)).toStrictEqual([0, 1, 7]);
+        expect(getLowestFraction(0.5)).toStrictEqual([0, 1, 2]);
+        expect(getLowestFraction(0.5)).toStrictEqual([0, 1, 2]);
+    });
+
     test("when text empty return empty", () => {
         const result = useExtractRecipeYield(null, 1);
         expect(result).toStrictEqual("");
@@ -18,54 +31,63 @@ describe("test use extract recipe yield", () => {
 
     test("when text matches a mixed fraction, return a scaled fraction", () => {
         const val = "10 1/2 units";
-        const result = useExtractRecipeYield(val, 1);
+        const result = useExtractRecipeYield(val, 1, false);
         expect(result).toStrictEqual(val);
 
-        const resultScaled = useExtractRecipeYield(val, 3);
+        const resultScaled = useExtractRecipeYield(val, 3, false);
         expect(resultScaled).toStrictEqual("31 1/2 units");
 
-        const resultScaledPartial = useExtractRecipeYield(val, 2.5);
+        const resultScaledPartial = useExtractRecipeYield(val, 2.5, false);
         expect(resultScaledPartial).toStrictEqual("26 1/4 units");
 
         const resultScaledInt = useExtractRecipeYield(val, 4);
         expect(resultScaledInt).toStrictEqual("42 units");
     });
 
+    test("when unit precedes number, have correct formatting", () => {
+        const val = "serves 3";
+        const result = useExtractRecipeYield(val, 1, false);
+        expect(result).toStrictEqual(val)
+
+        const resultScaled = useExtractRecipeYield(val, 2.5, false);
+        expect(resultScaled).toStrictEqual("serves 7 1/2")
+    });
+
     test("when text matches a fraction, return a scaled fraction", () => {
         const val = "1/3 plates";
-        const result = useExtractRecipeYield(val, 1);
+        const result = useExtractRecipeYield(val, 1, false);
         expect(result).toStrictEqual(val);
 
-        const resultScaled = useExtractRecipeYield(val, 2);
+        const resultScaled = useExtractRecipeYield(val, 2, false);
         expect(resultScaled).toStrictEqual("2/3 plates");
 
         const resultScaledInt = useExtractRecipeYield(val, 3);
         expect(resultScaledInt).toStrictEqual("1 plates");
 
-        const resultScaledPartial = useExtractRecipeYield(val, 2.5);
+        const resultScaledPartial = useExtractRecipeYield(val, 2.5, false);
         expect(resultScaledPartial).toStrictEqual("5/6 plates");
 
-        const resultScaledMixed = useExtractRecipeYield(val, 4);
+        const resultScaledMixed = useExtractRecipeYield(val, 4, false);
         expect(resultScaledMixed).toStrictEqual("1 1/3 plates");
     });
 
     test("when text matches a decimal, return a scaled, rounded decimal", () => {
         const val = "1.25 parts";
         const result = useExtractRecipeYield(val, 1);
-        expect(result).toStrictEqual(val);
+        expect(result).toStrictEqual("1<sup>1</sup><span>&frasl;</span><sub>4</sub> parts");
 
         const resultScaled = useExtractRecipeYield(val, 2);
-        expect(resultScaled).toStrictEqual("2.5 parts");
+        expect(resultScaled).toStrictEqual("2<sup>1</sup><span>&frasl;</span><sub>2</sub> parts");
 
         const resultScaledInt = useExtractRecipeYield(val, 4);
         expect(resultScaledInt).toStrictEqual("5 parts");
 
         const resultScaledPartial = useExtractRecipeYield(val, 2.5);
-        expect(resultScaledPartial).toStrictEqual("3.125 parts");
+        expect(resultScaledPartial).toStrictEqual("3<sup>1</sup><span>&frasl;</span><sub>8</sub> parts");
 
         const roundedVal = "1.33333333333333333333 parts";
         const resultScaledRounded = useExtractRecipeYield(roundedVal, 2);
-        expect(resultScaledRounded).toStrictEqual("2.667 parts");
+        expect(resultScaledRounded).toStrictEqual("2<sup>2</sup><span>&frasl;</span><sub>3</sub> parts");
     });
 
     test("when text matches an int, return a scaled int", () => {
@@ -77,7 +99,7 @@ describe("test use extract recipe yield", () => {
         expect(resultScaled).toStrictEqual("10 bowls");
 
         const resultScaledPartial = useExtractRecipeYield(val, 2.5);
-        expect(resultScaledPartial).toStrictEqual("12.5 bowls");
+        expect(resultScaledPartial).toStrictEqual("12<sup>1</sup><span>&frasl;</span><sub>2</sub> bowls");
 
         const resultScaledLarge = useExtractRecipeYield(val, 10);
         expect(resultScaledLarge).toStrictEqual("50 bowls");
@@ -93,13 +115,13 @@ describe("test use extract recipe yield", () => {
         expect(resultDivZeroMixed).toStrictEqual(valDivZeroMixed);
     });
 
-    test("when text contains a weird or small fraction, return the original string", () => {
+    test("use an approximation for very weird fractions", () => {
         const valWeird = "2323231239087/134527431962272135 servings";
-        const resultWeird = useExtractRecipeYield(valWeird, 5);
-        expect(resultWeird).toStrictEqual(valWeird);
+        const resultWeird = useExtractRecipeYield(valWeird, 5, false);
+        expect(resultWeird).toStrictEqual("1/11581 servings");
 
         const valSmall = "1/20230225 lovable servings";
-        const resultSmall = useExtractRecipeYield(valSmall, 12);
+        const resultSmall = useExtractRecipeYield(valSmall, 12, false);
         expect(resultSmall).toStrictEqual(valSmall);
     });
 

frontend/composables/recipe-page/use-extract-recipe-yield.ts

@@ -1,4 +1,5 @@
-import { useFraction } from "~/composables/recipes";
+import { getLowestFraction } from "../recipes/use-fraction";
+import { formatFraction } from "../recipes/use-recipe-ingredients";
 
 const matchMixedFraction = /(?:\d*\s\d*\d*|0)\/\d*\d*/;
 const matchFraction = /(?:\d*\d*|0)\/\d*\d*/;
@@ -37,9 +38,7 @@ function extractServingsFromFraction(fractionString: string): number | undefined
     }
 }
 
-
-
-function findMatch(yieldString: string): [matchString: string, servings: number, isFraction: boolean] | null {
+function findMatch(yieldString: string): [matchString: string, servings: number] | null {
     if (!yieldString) {
         return null;
     }
@@ -53,7 +52,7 @@ function findMatch(yieldString: string): [matchString: string, servings: number,
         if (servings === undefined) {
             return null;
         } else {
-            return [match, servings, true];
+            return [match, servings];
         }
     }
 
@@ -66,52 +65,39 @@ function findMatch(yieldString: string): [matchString: string, servings: number,
         if (servings === undefined) {
             return null;
         } else {
-            return [match, servings, true];
+            return [match, servings];
         }
     }
 
     const decimalMatch = yieldString.match(matchDecimal);
     if (decimalMatch?.length) {
         const match = decimalMatch[0];
-        return [match, parseFloat(match), false];
+        return [match, parseFloat(match)];
     }
 
     const intMatch = yieldString.match(matchInt);
     if (intMatch?.length) {
         const match = intMatch[0];
-        return [match, parseInt(match), false];
+        return [match, parseInt(match)];
     }
 
     return null;
 }
 
-function formatServings(servings: number, scale: number, isFraction: boolean): string {
+function formatServings(servings: number, scale: number, includeFormating: boolean): string {
     const val = servings * scale;
     if (Number.isInteger(val)) {
         return val.toString();
-    } else if (!isFraction) {
-        return (Math.round(val * 1000) / 1000).toString();
     }
 
     // convert val into a fraction string
-    const { frac } = useFraction();
-
-    let valString = "";
-    const fraction = frac(val, 10, true);
-
-    if (fraction[0] !== undefined && fraction[0] > 0) {
-        valString += fraction[0];
-    }
-
-    if (fraction[1] > 0) {
-        valString += ` ${fraction[1]}/${fraction[2]}`;
-    }
+    const fraction = getLowestFraction(val);
 
-    return valString.trim();
+    return formatFraction(fraction, includeFormating)
 }
 
 
-export function useExtractRecipeYield(yieldString: string | null, scale: number): string {
+export function useExtractRecipeYield(yieldString: string | null, scale: number, includeFormating = true): string {
     if (!yieldString) {
         return "";
     }
@@ -121,12 +107,12 @@ export function useExtractRecipeYield(yieldString: string | null, scale: number)
         return yieldString;
     }
 
-    const [matchString, servings, isFraction] = match;
+    const [matchString, servings] = match;
 
-    const formattedServings = formatServings(servings, scale, isFraction);
+    const formattedServings = formatServings(servings, scale, includeFormating);
     if (!formattedServings) {
         return yieldString  // this only happens with very weird or small fractions
     } else {
-        return yieldString.replace(matchString, formatServings(servings, scale, isFraction));
+        return yieldString.replace(matchString, " " + formattedServings + " ").replace(/\s\s+/g, " ").trim();
     }
 }

frontend/composables/recipes/index.ts

@@ -1,4 +1,3 @@
-export { useFraction } from "./use-fraction";
 export { useRecipe } from "./use-recipe";
 export { useRecipes, recentRecipes, allRecipes, useLazyRecipes } from "./use-recipes";
 export { parseIngredientText, useParsedIngredientText } from "./use-recipe-ingredients";