Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 23:59:45 +02:00
Code Issues Releases Activity

Add extra button "Next step" to ingredient linker dialog (#2920)

Browse source 
* Add "next step" button to ingredient linker dialog

clicking button will save current step ingredient links and show the next step in the dialog

* unload ingredient linker dialog to reset scroll position

* cleanup forward button in linking ingredients dialog

* add vertical spacing between buttons on smaller screens - recipe linker dialog

* align buttons equally to match alignment of `cancel`

---------

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
RealFoxie 2024-01-13 16:45:59 +01:00 • committed by GitHub
parent 631500a574
commit 4357c37d22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
View file

@ -1,7 +1,7 @@
<template>
<section @keyup.ctrl.90="undoMerge">
<!-- Ingredient Link Editor -->
<v-dialog v-model="dialog" width="600">
<v-dialog v-if="dialog" v-model="dialog" width="600">
<v-card :ripple="false">
<v-app-bar dark color="primary" class="mt-n1 mb-3">
<v-icon large left>
@ -50,11 +50,15 @@
<BaseButton cancel @click="dialog = false"> </BaseButton>
<v-spacer></v-spacer>
<div class="d-flex flex-wrap justify-end">
<BaseButton color="info" @click="autoSetReferences">
<BaseButton class="my-1" color="info" @click="autoSetReferences">
<template #icon> {{ $globals.icons.robot }}</template>
{{ $t("recipe.auto") }}
</BaseButton>
<BaseButton class="ml-2" save @click="setIngredientIds"> </BaseButton>
<BaseButton class="ml-2 my-1" save @click="setIngredientIds"> </BaseButton>
<BaseButton v-if="availableNextStep" class="ml-2 my-1" @click="saveAndOpenNextLinkIngredients">
<template #icon> {{ $globals.icons.forward }}</template>
{{ $t("recipe.nextStep") }}
</BaseButton>
</div>
</v-card-actions>
</v-card>
@ -236,6 +240,7 @@ import {
onMounted,
useContext,
computed,
nextTick,
} from "@nuxtjs/composition-api";
import RecipeIngredientHtml from "../../RecipeIngredientHtml.vue";
import { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset, Recipe } from "~/lib/api/types/recipe";
@ -399,6 +404,8 @@ export default defineComponent({
activeRefs.value = refs.map((ref) => ref.referenceId ?? "");
}
const availableNextStep = computed(() => activeIndex.value < props.value.length - 1);
function setIngredientIds() {
const instruction = props.value[activeIndex.value];
instruction.ingredientReferences = activeRefs.value.map((ref) => {
@ -417,6 +424,20 @@ export default defineComponent({
state.dialog = false;
}
function saveAndOpenNextLinkIngredients() {
const currentStepIndex = activeIndex.value;
if(!availableNextStep.value) {
return; // no next step, the button calling this function should not be shown
}
setIngredientIds();
const nextStep = props.value[currentStepIndex + 1];
// close dialog before opening to reset the scroll position
nextTick(() => openDialog(currentStepIndex + 1, nextStep.text, nextStep.ingredientReferences));
}
function setUsedIngredients() {
const usedRefs: { [key: string]: boolean } = {};
@ -627,6 +648,8 @@ export default defineComponent({
mergeAbove,
openDialog,
setIngredientIds,
availableNextStep,
saveAndOpenNextLinkIngredients,
undoMerge,
toggleDisabled,
isChecked,