github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-21 14:03:32 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Feature/recipe instructions improvements (#785)

Browse source 
* 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>
This commit is contained in:
Hayden 2021-11-05 15:48:10 -08:00 • committed by GitHub
commit 5cb4a1ade0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 621 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

85
frontend/pages/recipe/_slug/cook.vue Normal file
View file

@ -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>