refactor: recipe-page (#1587)

Refactor recipe page to use break up the component and make it more usable across different pages. I've left the old route in as well in case there is some functional breaks, I plan to remove it before the official release once we've tested the new editor some more in production. For now there will just have to be some duplicate components and pages around.

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="d-flex justify-space-between align-center pt-2 pb-3">
+    <v-tooltip v-if="!isEditMode && recipe.recipeYield" small top color="secondary darken-1">
+      <template #activator="{ on, attrs }">
+        <RecipeScaleEditButton
+          v-model.number="scaleValue"
+          v-bind="attrs"
+          :recipe-yield="recipe.recipeYield"
+          :basic-yield="basicYield"
+          :scaled-yield="scaledYield"
+          :edit-scale="!recipe.settings.disableAmount && !isEditMode"
+          v-on="on"
+        />
+      </template>
+      <span> {{ $t("recipe.edit-scale") }} </span>
+    </v-tooltip>
+    <v-spacer></v-spacer>
+
+    <RecipeRating
+      v-if="landscape && $vuetify.breakpoint.smAndUp"
+      :key="recipe.slug"
+      :value="recipe.rating"
+      :name="recipe.name"
+      :slug="recipe.slug"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api";
+import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue";
+import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
+import { NoUndefinedField } from "~/types/api";
+import { Recipe } from "~/types/api-types/recipe";
+import { usePageState } from "~/composables/recipe-page/shared-state";
+export default defineComponent({
+  components: {
+    RecipeScaleEditButton,
+    RecipeRating,
+  },
+  props: {
+    recipe: {
+      type: Object as () => NoUndefinedField<Recipe>,
+      required: true,
+    },
+    landscape: {
+      type: Boolean,
+      default: false,
+    },
+    scale: {
+      type: Number,
+      default: 1,
+    },
+  },
+  setup(props, { emit }) {
+    const { isEditMode } = usePageState(props.recipe.slug);
+
+    const scaleValue = computed<number>({
+      get() {
+        return props.scale;
+      },
+      set(val) {
+        emit("update:scale", val);
+      },
+    });
+
+    const scaledYield = computed(() => {
+      const regMatchNum = /\d+/;
+      const yieldString = props.recipe.recipeYield;
+      const num = yieldString?.match(regMatchNum);
+
+      if (num && num?.length > 0) {
+        const yieldAsInt = parseInt(num[0]);
+        return yieldString?.replace(num[0], String(yieldAsInt * scaleValue.value));
+      }
+
+      return props.recipe.recipeYield;
+    });
+
+    const basicYield = computed(() => {
+      const regMatchNum = /\d+/;
+      const yieldString = props.recipe.recipeYield;
+      const num = yieldString?.match(regMatchNum);
+
+      if (num && num?.length > 0) {
+        const yieldAsInt = parseInt(num[0]);
+        return yieldString?.replace(num[0], String(yieldAsInt));
+      }
+
+      return props.recipe.recipeYield;
+    });
+
+    return {
+      scaleValue,
+      basicYield,
+      scaledYield,
+      isEditMode,
+    };
+  },
+});
+</script>