Feature/recipe instructions improvements (#785)

* feat(frontend): ✨ split paragraph by 1. 1) or 1: regex matches

* feat(frontend): ✨ Update frontend to support ingredient To step refs

* feat(backend): ✨ Update backend to support ingredient to step refs

* fix title editor

* move about info to site-settings

* update change-log

Co-authored-by: Hayden K <hay-kot@pm.me>

frontend/pages/recipe/_slug/cook.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-container
+    v-if="recipe"
+    :class="{
+      'pa-0': $vuetify.breakpoint.smAndDown,
+    }"
+  >
+    <v-card-title>
+      <h1 class="headline">{{ recipe.name }}</h1>
+    </v-card-title>
+    <v-stepper v-model="activeStep" flat>
+      <v-toolbar class="ma-1 elevation-2 rounded">
+        <v-toolbar-title class="headline">
+          Step {{ activeStep }} of {{ recipe.recipeInstructions.length }}</v-toolbar-title
+        >
+      </v-toolbar>
+      <v-stepper-items>
+        <template v-for="(step, index) in recipe.recipeInstructions">
+          <v-stepper-content :key="index + 1 + '-content'" :step="index + 1" class="pa-0 mt-2 elevation-0">
+            <v-card class="ma-2">
+              <v-card-text>
+                <h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
+                <VueMarkdown :source="step.text"> </VueMarkdown>
+                <v-divider></v-divider>
+                <h2 class="mb-4 mt-4">{{ $t("recipe.ingredients") }}</h2>
+                <div v-for="ing in step.ingredientReferences" :key="ing.referenceId">
+                  {{ getIngredientByRefId(ing.referenceId).note }}
+                </div>
+              </v-card-text>
+            </v-card>
+            <v-card-actions class="justify-center">
+              <BaseButton color="primary" :disabled="index == 0" @click="activeStep = activeStep - 1">
+                <template #icon> {{ $globals.icons.arrowLeftBold }}</template>
+                Back
+              </BaseButton>
+              <BaseButton
+                icon-right
+                :disabled="index + 1 == recipe.recipeInstructions.length"
+                color="primary"
+                @click="activeStep = activeStep + 1"
+              >
+                <template #icon> {{ $globals.icons.arrowRightBold }}</template>
+                Next
+              </BaseButton>
+            </v-card-actions>
+          </v-stepper-content>
+        </template>
+      </v-stepper-items>
+    </v-stepper>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, useRoute, ref } from "@nuxtjs/composition-api";
+// @ts-ignore
+import VueMarkdown from "@adapttive/vue-markdown";
+import { useStaticRoutes } from "~/composables/api";
+import { useRecipeContext } from "~/composables/use-recipe-context";
+export default defineComponent({
+  components: { VueMarkdown },
+  setup() {
+    const route = useRoute();
+    const slug = route.value.params.slug;
+    const activeStep = ref(1);
+
+    const { getBySlug } = useRecipeContext();
+
+    const { recipeImage } = useStaticRoutes();
+
+    const recipe = getBySlug(slug);
+
+    function getIngredientByRefId(refId: String) {
+      return recipe.value?.recipeIngredient.find((ing) => ing.referenceId === refId) || "";
+    }
+
+    return {
+      getIngredientByRefId,
+      activeStep,
+      slug,
+      recipe,
+      recipeImage,
+    };
+  },
+});
+</script>

frontend/pages/recipe/_slug/index.vue

@@ -112,7 +112,7 @@
             <draggable v-model="recipe.recipeIngredient" handle=".handle">
               <RecipeIngredientEditor
                 v-for="(ingredient, index) in recipe.recipeIngredient"
-                :key="ingredient.ref"
+                :key="ingredient.referenceId"
                 v-model="recipe.recipeIngredient[index]"
                 :disable-amount="recipe.settings.disableAmount"
                 @delete="recipe.recipeIngredient.splice(index, 1)"
@@ -229,7 +229,11 @@
             <v-divider v-if="$vuetify.breakpoint.mdAndUp" class="my-divider" :vertical="true"></v-divider>
 
             <v-col cols="12" sm="12" md="8" lg="8">
-              <RecipeInstructions v-model="recipe.recipeInstructions" :edit="form" />
+              <RecipeInstructions
+                v-model="recipe.recipeInstructions"
+                :ingredients="recipe.recipeIngredient"
+                :edit="form"
+              />
               <div v-if="form" class="d-flex">
                 <RecipeDialogBulkAdd class="ml-auto my-2 mr-1" @bulk-data="addStep" />
                 <BaseButton class="my-2" @click="addStep()"> {{ $t("general.new") }}</BaseButton>
@@ -431,12 +435,12 @@ export default defineComponent({
 
       if (steps) {
         const cleanedSteps = steps.map((step) => {
-          return { text: step, title: "" };
+          return { text: step, title: "", ingredientReferences: [] };
         });
 
         recipe.value.recipeInstructions.push(...cleanedSteps);
       } else {
-        recipe.value.recipeInstructions.push({ text: "", title: "" });
+        recipe.value.recipeInstructions.push({ text: "", title: "", ingredientReferences: [] });
       }
     }
 
@@ -444,7 +448,7 @@ export default defineComponent({
       if (ingredients?.length) {
         const newIngredients = ingredients.map((x) => {
           return {
-            ref: uuid4(),
+            referenceId: uuid4(),
             title: "",
             note: x,
             unit: null,
@@ -459,7 +463,7 @@ export default defineComponent({
         }
       } else {
         recipe?.value?.recipeIngredient?.push({
-          ref: uuid4(),
+          referenceId: uuid4(),
           title: "",
           note: "",
           unit: null,

frontend/pages/recipe/create.vue

@@ -9,7 +9,7 @@
         Select one of the various ways to create a recipe
         <template #content>
           <div class="ml-auto">
-            <BaseOverflowButton v-model="tab" rounded outlined :items="tabs"> </BaseOverflowButton>
+            <BaseOverflowButton v-model="tab" rounded :items="tabs"> </BaseOverflowButton>
           </div>
         </template>
       </BasePageTitle>