mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 13:35:23 +02:00
Feature: Toggle display of ingredient references in recipe instructions (#1268)
* Better cooking mode * Fix wrong event sent * feat/cookmode recipe page integration * implement scaling in cook mode + minor padding Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
This commit is contained in:
Miroito
GitHub
parent
2809cef3b1
commit
c64da1fdb7
4 changed files with 95 additions and 142 deletions
|
|
@ -1,120 +0,0 @@
|
|||
<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>
|
||||
<div class="d-flex mt-3 px-2">
|
||||
<BaseButton color="primary" @click="$router.go(-1)">
|
||||
<template #icon> {{ $globals.icons.arrowLeftBold }}</template>
|
||||
To Recipe
|
||||
</BaseButton>
|
||||
<v-btn rounded icon color="primary" class="ml-auto" small @click="scale > 1 ? scale-- : null">
|
||||
<v-icon>
|
||||
{{ $globals.icons.minus }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<v-btn rounded color="primary" small> Scale: {{ scale }} </v-btn>
|
||||
<v-btn rounded icon color="primary" small @click="scale++">
|
||||
<v-icon>
|
||||
{{ $globals.icons.createAlt }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<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>
|
||||
<template v-if="step.ingredientReferences.length > 0">
|
||||
<v-divider></v-divider>
|
||||
<div>
|
||||
<h2 class="mb-4 mt-4">{{ $t("recipe.ingredients") }}</h2>
|
||||
<div
|
||||
v-for="ing in step.ingredientReferences"
|
||||
:key="ing.referenceId"
|
||||
v-html="getIngredientByRefId(ing.referenceId)"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
</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 vue-markdown has no types
|
||||
import VueMarkdown from "@adapttive/vue-markdown";
|
||||
import { useStaticRoutes } from "~/composables/api";
|
||||
import { parseIngredientText, useRecipe } from "~/composables/recipes";
|
||||
|
||||
export default defineComponent({
|
||||
components: { VueMarkdown },
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const slug = route.value.params.slug;
|
||||
const activeStep = ref(1);
|
||||
const scale = ref(1);
|
||||
|
||||
const { recipe } = useRecipe(slug);
|
||||
|
||||
const { recipeImage } = useStaticRoutes();
|
||||
|
||||
function getIngredientByRefId(refId: string) {
|
||||
if (!recipe.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const ing = recipe?.value.recipeIngredient?.find((ing) => ing.referenceId === refId) || "";
|
||||
if (ing === "") {
|
||||
return "";
|
||||
}
|
||||
|
||||
return parseIngredientText(ing, recipe?.value?.settings?.disableAmount || false, scale.value);
|
||||
}
|
||||
|
||||
return {
|
||||
scale,
|
||||
getIngredientByRefId,
|
||||
activeStep,
|
||||
slug,
|
||||
recipe,
|
||||
recipeImage,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -53,10 +53,7 @@
|
|||
class="ml-auto mt-n8 pb-4"
|
||||
@close="closeEditor"
|
||||
@json="toggleJson"
|
||||
@edit="
|
||||
jsonEditor = false;
|
||||
form = true;
|
||||
"
|
||||
@edit="toggleEdit"
|
||||
@save="updateRecipe(recipe.slug, recipe)"
|
||||
@delete="deleteRecipe(recipe.slug)"
|
||||
@print="printRecipe"
|
||||
|
|
@ -202,7 +199,7 @@
|
|||
</div>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="4" lg="4">
|
||||
<v-col v-if="!cookModeToggle || form" cols="12" sm="12" md="4" lg="4">
|
||||
<RecipeIngredients
|
||||
v-if="!form"
|
||||
:value="recipe.recipeIngredient"
|
||||
|
|
@ -291,17 +288,24 @@
|
|||
</client-only>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-divider v-if="$vuetify.breakpoint.mdAndUp" class="my-divider" :vertical="true"></v-divider>
|
||||
<v-divider
|
||||
v-if="$vuetify.breakpoint.mdAndUp && !cookModeToggle"
|
||||
class="my-divider"
|
||||
:vertical="true"
|
||||
></v-divider>
|
||||
|
||||
<v-col cols="12" sm="12" md="8" lg="8">
|
||||
<v-col cols="12" sm="12" :md="8 + (cookModeToggle ? 1 : 0) * 4" :lg="8 + (cookModeToggle ? 1 : 0) * 4">
|
||||
<RecipeInstructions
|
||||
v-model="recipe.recipeInstructions"
|
||||
:assets.sync="recipe.assets"
|
||||
:ingredients="recipe.recipeIngredient"
|
||||
:disable-amount="recipe.settings.disableAmount"
|
||||
:edit="form"
|
||||
:recipe-id="recipe.id"
|
||||
:recipe-slug="recipe.slug"
|
||||
:assets.sync="recipe.assets"
|
||||
:cook-mode="cookModeToggle"
|
||||
:scale="scale"
|
||||
@cookModeToggle="cookModeToggle = !cookModeToggle"
|
||||
/>
|
||||
<div v-if="form" class="d-flex">
|
||||
<RecipeDialogBulkAdd class="ml-auto my-2 mr-1" @bulk-data="addStep" />
|
||||
|
|
@ -357,14 +361,14 @@
|
|||
</v-card>
|
||||
|
||||
<RecipeNutrition
|
||||
v-if="recipe.settings.showNutrition"
|
||||
v-if="recipe.settings.showNutrition && !cookModeToggle"
|
||||
v-model="recipe.nutrition"
|
||||
class="mt-10"
|
||||
:edit="form"
|
||||
/>
|
||||
<client-only>
|
||||
<RecipeAssets
|
||||
v-if="recipe.settings.showAssets"
|
||||
v-if="recipe.settings.showAssets && !cookModeToggle"
|
||||
v-model="recipe.assets"
|
||||
:edit="form"
|
||||
:slug="recipe.slug"
|
||||
|
|
@ -373,7 +377,7 @@
|
|||
</client-only>
|
||||
</div>
|
||||
|
||||
<RecipeNotes v-model="recipe.notes" :edit="form" />
|
||||
<RecipeNotes v-if="!cookModeToggle" v-model="recipe.notes" :edit="form" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
|
@ -385,7 +389,7 @@
|
|||
:label="$t('recipe.original-url')"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
v-else-if="recipe.orgURL"
|
||||
v-else-if="recipe.orgURL && !cookModeToggle"
|
||||
dense
|
||||
small
|
||||
:hover="false"
|
||||
|
|
@ -438,7 +442,7 @@
|
|||
</div>
|
||||
|
||||
<RecipeComments
|
||||
v-if="recipe && !recipe.settings.disableComments && !form"
|
||||
v-if="recipe && !recipe.settings.disableComments && !form && !cookModeToggle"
|
||||
v-model="recipe.comments"
|
||||
:slug="recipe.slug"
|
||||
:recipe-id="recipe.id"
|
||||
|
|
@ -603,6 +607,7 @@ export default defineComponent({
|
|||
search: false,
|
||||
mainMenuBar: false,
|
||||
},
|
||||
cookModeToggle: false,
|
||||
});
|
||||
|
||||
const { recipe, loading, fetchRecipe } = useRecipe(slug);
|
||||
|
|
@ -642,6 +647,12 @@ export default defineComponent({
|
|||
// ===========================================================================
|
||||
// Button Click Event Handlers
|
||||
|
||||
function toggleEdit() {
|
||||
state.jsonEditor = false;
|
||||
state.cookModeToggle = false;
|
||||
state.form = true;
|
||||
}
|
||||
|
||||
async function updateRecipe(slug: string, recipe: Recipe) {
|
||||
const { data } = await api.recipes.updateOne(slug, recipe);
|
||||
state.form = false;
|
||||
|
|
@ -862,6 +873,7 @@ export default defineComponent({
|
|||
deleteRecipe,
|
||||
printRecipe,
|
||||
closeEditor,
|
||||
toggleEdit,
|
||||
updateRecipe,
|
||||
uploadImage,
|
||||
validators,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue