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/admin/about.vue

@@ -1,111 +0,0 @@
-<template>
-  <v-container fluid>
-    <v-card class="mt-3">
-      <v-card-title class="headline">
-        {{ $t("about.about-mealie") }}
-      </v-card-title>
-      <v-divider></v-divider>
-      <v-card-text>
-        <v-list-item-group color="primary">
-          <v-list-item v-for="property in appInfo" :key="property.name">
-            <v-list-item-icon>
-              <v-icon> {{ property.icon || $globals.icons.user }} </v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-item-title class="pl-4 flex row justify-space-between">
-                <div>{{ property.name }}</div>
-                <div>{{ property.value }}</div>
-              </v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list-item-group>
-      </v-card-text>
-    </v-card>
-  </v-container>
-</template>
-
-<script lang="ts">
-import { defineComponent, useAsync, useContext } from "@nuxtjs/composition-api";
-import { useAdminApi } from "~/composables/use-api";
-import { useAsyncKey } from "~/composables/use-utils";
-
-export default defineComponent({
-  layout: "admin",
-  setup() {
-    const adminApi = useAdminApi();
-    // @ts-ignore
-    const { $globals, i18n } = useContext();
-
-    function getAppInfo() {
-      const statistics = useAsync(async () => {
-        const { data } = await adminApi.about.about();
-
-        if (data) {
-          const prettyInfo = [
-            {
-              name: i18n.t("about.version"),
-              icon: $globals.icons.information,
-              value: data.version,
-            },
-            {
-              name: i18n.t("about.application-mode"),
-              icon: $globals.icons.devTo,
-              value: data.production ? i18n.t("about.production") : i18n.t("about.development"),
-            },
-            {
-              name: i18n.t("about.demo-status"),
-              icon: $globals.icons.testTube,
-              value: data.demoStatus ? i18n.t("about.demo") : i18n.t("about.not-demo"),
-            },
-            {
-              name: i18n.t("about.api-port"),
-              icon: $globals.icons.api,
-              value: data.apiPort,
-            },
-            {
-              name: i18n.t("about.api-docs"),
-              icon: $globals.icons.file,
-              value: data.apiDocs ? i18n.t("general.enabled") : i18n.t("general.disabled"),
-            },
-            {
-              name: i18n.t("about.database-type"),
-              icon: $globals.icons.database,
-              value: data.dbType,
-            },
-            {
-              name: i18n.t("about.database-url"),
-              icon: $globals.icons.database,
-              value: data.dbUrl,
-            },
-            {
-              name: i18n.t("about.default-group"),
-              icon: $globals.icons.group,
-              value: data.defaultGroup,
-            },
-          ];
-
-          return prettyInfo;
-        }
-
-        return data;
-      }, useAsyncKey());
-
-      return statistics;
-    }
-
-    const appInfo = getAppInfo();
-
-    return {
-      appInfo,
-    };
-  },
-  head() {
-    return {
-      title: this.$t("about.about") as string,
-    };
-  },
-});
-</script>
-
-<style scoped>
-</style>

frontend/pages/admin/site-settings.vue

@@ -69,14 +69,42 @@
         </template>
       </v-card>
     </section>
+    <section class="mt-4">
+      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" title="General About"> </BaseCardSectionTitle>
+      <v-card class="mb-4">
+        <v-list-item v-for="property in appInfo" :key="property.name">
+          <v-list-item-icon>
+            <v-icon> {{ property.icon || $globals.icons.user }} </v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>
+              <div>{{ property.name }}</div>
+            </v-list-item-title>
+            <v-list-item-subtitle class="text-end">
+              {{ property.value }}
+            </v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+      </v-card>
+    </section>
   </v-container>
 </template>
     
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive, toRefs, ref } from "@nuxtjs/composition-api";
+import {
+  computed,
+  onMounted,
+  reactive,
+  toRefs,
+  ref,
+  defineComponent,
+  useAsync,
+  useContext,
+} from "@nuxtjs/composition-api";
 import { CheckAppConfig } from "~/api/admin/admin-about";
 import { useAdminApi, useApiSingleton } from "~/composables/use-api";
 import { validators } from "~/composables/use-validators";
+import { useAsyncKey } from "~/composables/use-utils";
 
 interface SimpleCheck {
   status: boolean;
@@ -104,9 +132,9 @@ export default defineComponent({
 
     const api = useApiSingleton();
 
-    const adminAPI = useAdminApi();
+    const adminApi = useAdminApi();
     onMounted(async () => {
-      const { data } = await adminAPI.about.checkApp();
+      const { data } = await adminApi.about.checkApp();
 
       if (data) {
         appConfig.value = data;
@@ -173,6 +201,70 @@ export default defineComponent({
       return booly ? "success" : "error";
     }
 
+    // ============================================================
+    // General About Info
+    // @ts-ignore
+    const { $globals, i18n } = useContext();
+
+    function getAppInfo() {
+      const statistics = useAsync(async () => {
+        const { data } = await adminApi.about.about();
+
+        if (data) {
+          const prettyInfo = [
+            {
+              name: i18n.t("about.version"),
+              icon: $globals.icons.information,
+              value: data.version,
+            },
+            {
+              name: i18n.t("about.application-mode"),
+              icon: $globals.icons.devTo,
+              value: data.production ? i18n.t("about.production") : i18n.t("about.development"),
+            },
+            {
+              name: i18n.t("about.demo-status"),
+              icon: $globals.icons.testTube,
+              value: data.demoStatus ? i18n.t("about.demo") : i18n.t("about.not-demo"),
+            },
+            {
+              name: i18n.t("about.api-port"),
+              icon: $globals.icons.api,
+              value: data.apiPort,
+            },
+            {
+              name: i18n.t("about.api-docs"),
+              icon: $globals.icons.file,
+              value: data.apiDocs ? i18n.t("general.enabled") : i18n.t("general.disabled"),
+            },
+            {
+              name: i18n.t("about.database-type"),
+              icon: $globals.icons.database,
+              value: data.dbType,
+            },
+            {
+              name: i18n.t("about.database-url"),
+              icon: $globals.icons.database,
+              value: data.dbUrl,
+            },
+            {
+              name: i18n.t("about.default-group"),
+              icon: $globals.icons.group,
+              value: data.defaultGroup,
+            },
+          ];
+
+          return prettyInfo;
+        }
+
+        return data;
+      }, useAsyncKey());
+
+      return statistics;
+    }
+
+    const appInfo = getAppInfo();
+
     return {
       simpleChecks,
       getColor,
@@ -182,6 +274,7 @@ export default defineComponent({
       validators,
       ...toRefs(state),
       testEmail,
+      appInfo,
     };
   },
   head() {

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>