diff --git a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue index b9e2ad52b8b6..f1e8e54f830e 100644 --- a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue +++ b/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) { diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue index 6b4bd9da957e..489eafc30fbc 100644 --- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue +++ b/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)" /> @@ -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, }; }, }); diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue index 9abae6687358..1ab9f88609a4 100644 --- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue +++ b/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([]); function togglePreviewState(index: number) { @@ -681,6 +695,7 @@ export default defineComponent({ showCookMode, isCookMode, isEditForm, + insert, }; }, }); diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json index 967248ca9375..b54967c30a40 100644 --- a/frontend/lang/messages/en-US.json +++ b/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",