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

* 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 <[email protected]>
mealie-recipes · Jan 13, 2024 · 4357c37 · 4357c37
1 parent 631500a
commit 4357c37
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -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,

diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
@@ -557,7 +557,8 @@
     "unit": "Unit",
     "upload-image": "Upload image",
     "screen-awake": "Keep Screen Awake",
-    "remove-image": "Remove image"
+    "remove-image": "Remove image",
+    "nextStep": "Next step"
   },
   "search": {
     "advanced-search": "Advanced Search",