feat: add custom scaling option (#1345)

* Added custom scaling option

* Allow custom scaling with no yield set

* Made edit-scale translated

* fixed merge conflict

* Refactored scale editor to use menu

* replaced vslot with #

* linter issues

* fixed linter issues

* fixed one more linter issue

* format files + minor UI changes

* remove console.log

* move buttons into component and setup v-model

* drop servings text

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeScaleEditButton.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div class="text-center d-flex align-center">
+      <div>
+        <v-menu v-model="menu" 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>
+              <span v-if="!recipeYield"> x {{ scale }} </span>
+            </v-card>
+          </template>
+          <v-card min-width="300px">
+            <v-card-title class="mb-0">
+              {{ $t("recipe.edit-scale") }}
+            </v-card-title>
+            <v-card-text class="mt-n5">
+              <div class="mt-4 d-flex align-center">
+                <v-text-field v-model.number="scale" type="number" :min="0" :label="$t('recipe.edit-scale')" />
+                <v-tooltip right color="secondary darken-1">
+                  <template #activator="{ on, attrs }">
+                    <v-btn v-bind="attrs" icon class="mx-1" small v-on="on" @click="scale = 1">
+                      <v-icon>
+                        {{ $globals.icons.undo }}
+                      </v-icon>
+                    </v-btn>
+                  </template>
+                  <span> Reset Scale </span>
+                </v-tooltip>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-menu>
+      </div>
+      <BaseButtonGroup
+        class="pl-2"
+        :large="false"
+        :buttons="[
+          {
+            icon: $globals.icons.minus,
+            text: 'Decrease Scale by 1',
+            event: 'decrement',
+          },
+          {
+            icon: $globals.icons.createAlt,
+            text: 'Increase Scale by 1',
+            event: 'increment',
+          },
+        ]"
+        @decrement="scale > 1 ? scale-- : null"
+        @increment="scale++"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, computed } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  props: {
+    recipeYield: {
+      type: String,
+      default: null,
+    },
+    basicYield: {
+      type: String,
+      default: null,
+    },
+    scaledYield: {
+      type: String,
+      default: null,
+    },
+    editScale: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const state = reactive({
+      tempScale: 1,
+      menu: false,
+    });
+
+    const scale = computed({
+      get: () => props.value,
+      set: (value) => {
+        const newScaleNumber = parseFloat(`${value}`);
+        emit("input", isNaN(newScaleNumber) ? 0 : newScaleNumber);
+      },
+    });
+
+    return {
+      scale,
+      ...toRefs(state),
+    };
+  },
+});
+</script>

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

@@ -23,7 +23,6 @@ export function parseIngredientText(ingredient: RecipeIngredient, disableAmount:
 
   // casting to number is required as sometimes quantity is a string
   if (quantity && Number(quantity) !== 0) {
-    console.log("Using Quantity", quantity, typeof quantity);
     if (unit?.fraction) {
       const fraction = frac(quantity * scale, 10, true);
       if (fraction[0] !== undefined && fraction[0] > 0) {

frontend/lang/messages/de-DE.json

@@ -248,6 +248,7 @@
     "description": "Beschreibung",
     "disable-amount": "Zutatenmenge deaktivieren",
     "disable-comments": "Kommentare deaktivieren",
+    "edit-scale": "Skalierung bearbeiten",
     "fat-content": "Fett",
     "fiber-content": "Ballaststoffe",
     "grams": "g",

frontend/lang/messages/en-US.json

@@ -248,6 +248,7 @@
     "description": "Description",
     "disable-amount": "Disable Ingredient Amounts",
     "disable-comments": "Disable Comments",
+    "edit-scale": "Edit Scale",
     "fat-content": "Fat",
     "fiber-content": "Fiber",
     "grams": "grams",

frontend/pages/recipe/_slug/index.vue

@@ -178,38 +178,18 @@
           <div class="d-flex justify-space-between align-center pt-2 pb-3">
             <v-tooltip v-if="!form" small top color="secondary darken-1">
               <template #activator="{ on, attrs }">
-                <v-btn
+                <RecipeScaleEditButton
-                  v-if="recipe.recipeYield"
+                  v-model.number="scale"
-                  dense
-                  small
-                  :hover="false"
-                  type="label"
-                  :ripple="false"
-                  elevation="0"
-                  color="secondary darken-1"
-                  class="rounded-sm static"
                   v-bind="attrs"
-                  @click="scale = 1"
+                  :recipe-yield="recipe.recipeYield"
+                  :basic-yield="basicYield"
+                  :scaled-yield="scaledYield"
+                  :edit-scale="!recipe.settings.disableAmount && !form"
                   v-on="on"
-                >
+                />
-                  {{ scaledYield }}
-                </v-btn>
               </template>
-              <span> Reset Scale </span>
+              <span> {{ $t("recipe.edit-scale") }} </span>
             </v-tooltip>
-
-            <template v-if="!recipe.settings.disableAmount && !form">
-              <v-btn color="secondary darken-1" class="mx-1" small @click="scale > 1 ? scale-- : null">
-                <v-icon>
-                  {{ $globals.icons.minus }}
-                </v-icon>
-              </v-btn>
-              <v-btn color="secondary darken-1" small @click="scale++">
-                <v-icon>
-                  {{ $globals.icons.createAlt }}
-                </v-icon>
-              </v-btn>
-            </template>
             <v-spacer></v-spacer>
 
             <RecipeRating
@@ -500,6 +480,7 @@ import RecipeNutrition from "~/components/Domain/Recipe/RecipeNutrition.vue";
 import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
 import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
 import RecipeImageUploadBtn from "~/components/Domain/Recipe/RecipeImageUploadBtn.vue";
+import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue";
 import RecipeSettingsMenu from "~/components/Domain/Recipe/RecipeSettingsMenu.vue";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
@@ -534,6 +515,7 @@ export default defineComponent({
     RecipeSettingsMenu,
     RecipeTimeCard,
     RecipeTools,
+    RecipeScaleEditButton,
     VueMarkdown,
   },
   async beforeRouteLeave(_to, _from, next) {
@@ -610,6 +592,8 @@ export default defineComponent({
     const state = reactive({
       form: false,
       scale: 1,
+      scaleTemp: 1,
+      scaleDialog: false,
       hideImage: false,
       imageKey: 1,
       skeleton: false,
@@ -701,6 +685,19 @@ export default defineComponent({
       return recipe.value?.recipeYield;
     });
 
+    const basicYield = computed(() => {
+      const regMatchNum = /\d+/;
+      const yieldString = recipe.value?.recipeYield;
+      const num = yieldString?.match(regMatchNum);
+
+      if (num && num?.length > 0) {
+        const yieldAsInt = parseInt(num[0]);
+        return yieldString?.replace(num[0], String(yieldAsInt));
+      }
+
+      return recipe.value?.recipeYield;
+    });
+
     async function uploadImage(fileObject: File) {
       if (!recipe.value || !recipe.value.slug) {
         return;
@@ -830,6 +827,13 @@ export default defineComponent({
 
     const drag = ref(false);
 
+    // ===============================================================
+    // Scale
+
+    const setScale = (newScale: number) => {
+      state.scale = newScale;
+    };
+
     return {
       // Wake Lock
       drag,
@@ -847,12 +851,14 @@ export default defineComponent({
       enableLandscape,
       imageHeight,
       scaledYield,
+      basicYield,
       toggleJson,
       ...toRefs(state),
       recipe,
       api,
       loading,
       addStep,
+      setScale,
       deleteRecipe,
       printRecipe,
       closeEditor,

frontend/utils/icons/icon-type.ts

@@ -90,6 +90,7 @@ export interface Icon {
   webhook: string;
   windowClose: string;
   zip: string;
+  undo: string;
 
   // Crud
   backArrow: string;

frontend/utils/icons/icons.ts

@@ -109,6 +109,7 @@ import {
   mdiChartLine,
   mdiHelpCircleOutline,
   mdiDocker,
+  mdiUndo,
 } from "@mdi/js";
 
 export const icons = {
@@ -206,6 +207,7 @@ export const icons = {
   webhook: mdiWebhook,
   windowClose: mdiWindowClose,
   zip: mdiFolderZipOutline,
+  undo: mdiUndo,
 
   // Crud
   backArrow: mdiArrowLeftBoldOutline,