feat: Insert instruction step above or below. #3731 (#3732)

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -104,6 +104,8 @@
             :buttons="btns"
             @toggle-section="toggleTitle"
             @toggle-original="toggleOriginalText"
+            @insert-above="$emit('insert-above')"
+            @insert-below="$emit('insert-below')"
             @insert-ingredient="$emit('insert-ingredient')"
             @delete="$emit('delete')"
           />
@@ -148,6 +150,14 @@ export default defineComponent({
           text: i18n.tc("recipe.toggle-section"),
           event: "toggle-section",
         },
+        {
+          text: i18n.tc("recipe.insert-above"),
+          event: "insert-above",
+        },
+        {
+          text: i18n.tc("recipe.insert-below"),
+          event: "insert-below",
+        },
       ];
 
       if (props.allowInsertIngredient) {

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -22,6 +22,8 @@
           class="list-group-item"
           :disable-amount="recipe.settings.disableAmount"
           @delete="recipe.recipeIngredient.splice(index, 1)"
+          @insert-above="insertNewIngredient(index)"
+          @insert-below="insertNewIngredient(index+1)"
         />
       </TransitionGroup>
     </draggable>
@@ -140,6 +142,20 @@ export default defineComponent({
       }
     }
 
+    function insertNewIngredient(dest: number) {
+      props.recipe.recipeIngredient.splice(dest, 0, {
+            referenceId: uuid4(),
+            title: "",
+            note: "",
+            // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
+            unit: undefined,
+            // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
+            food: undefined,
+            disableAmount: true,
+            quantity: 1,
+          });
+    }
+
     return {
       user,
       groupSlug,
@@ -148,6 +164,7 @@ export default defineComponent({
       hasFoodOrUnit,
       imageKey,
       drag,
+      insertNewIngredient,
     };
   },
 });

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -170,12 +170,22 @@
                               text: $tc('recipe.move-to-bottom'),
                               event: 'move-to-bottom',
                             },
+                            {
+                              text: $tc('recipe.insert-above'),
+                              event: 'insert-above'
+                            },
+                            {
+                              text: $tc('recipe.insert-below'),
+                              event: 'insert-below'
+                            },
                           ],
                         },
                       ]"
                       @merge-above="mergeAbove(index - 1, index)"
                       @move-to-top="moveTo('top', index)"
                       @move-to-bottom="moveTo('bottom', index)"
+                      @insert-above="insert(index)"
+                      @insert-below="insert(index+1)"
                       @toggle-section="toggleShowTitle(step.id)"
                       @link-ingredients="openDialog(index, step.text, step.ingredientReferences)"
                       @preview-step="togglePreviewState(index)"
@@ -550,6 +560,10 @@ export default defineComponent({
       }
     }
 
+    function insert(dest: number) {
+      props.value.splice(dest, 0, { id: uuid4(), text: "", title: "", ingredientReferences: [] });
+    }
+
     const previewStates = ref<boolean[]>([]);
 
     function togglePreviewState(index: number) {
@@ -681,6 +695,7 @@ export default defineComponent({
       showCookMode,
       isCookMode,
       isEditForm,
+      insert,
     };
   },
 });

frontend/lang/messages/en-US.json

@@ -448,6 +448,8 @@
     "ingredients": "Ingredients",
     "insert-ingredient": "Insert Ingredient",
     "insert-section": "Insert Section",
+    "insert-above": "Insert Above",
+    "insert-below": "Insert Below",
     "instructions": "Instructions",
     "key-name-required": "Key Name Required",
     "landscape-view-coming-soon": "Landscape View",