feat: Recipe Instructions, add buttons for move to top or bottom (#3232)

* Add 'move to top' and 'move to bottom' to recipe steps

* Add divider functionality

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

@@ -148,10 +148,6 @@
                               text: $tc('recipe.link-ingredients'),
                               event: 'link-ingredients',
                             },
-                            {
-                              text: $tc('recipe.merge-above'),
-                              event: 'merge-above',
-                            },
                             {
                               text: $tc('recipe.upload-image'),
                               event: 'upload-image'
@@ -160,11 +156,26 @@
                               icon: previewStates[index] ? $globals.icons.edit : $globals.icons.eye,
                               text: previewStates[index] ? $tc('recipe.edit-markdown') : $tc('markdown-editor.preview-markdown-button-label'),
                               event: 'preview-step',
+                              divider: true,
+                            },
+                            {
+                              text: $tc('recipe.merge-above'),
+                              event: 'merge-above',
+                            },
+                            {
+                              text: $tc('recipe.move-to-top'),
+                              event: 'move-to-top',
+                            },
+                            {
+                              text: $tc('recipe.move-to-bottom'),
+                              event: 'move-to-bottom',
                             },
                           ],
                         },
                       ]"
                       @merge-above="mergeAbove(index - 1, index)"
+                      @move-to-top="moveTo('top', index)"
+                      @move-to-bottom="moveTo('bottom', index)"
                       @toggle-section="toggleShowTitle(step.id)"
                       @link-ingredients="openDialog(index, step.text, step.ingredientReferences)"
                       @preview-step="togglePreviewState(index)"
@@ -531,6 +542,14 @@ export default defineComponent({
       }
     }
 
+    function moveTo(dest: string, source: number) {
+      if (dest === "top") {
+        props.value.unshift(props.value.splice(source, 1)[0]);
+      } else {
+        props.value.push(props.value.splice(source, 1)[0]);
+      }
+    }
+
     const previewStates = ref<boolean[]>([]);
 
     function togglePreviewState(index: number) {
@@ -646,6 +665,7 @@ export default defineComponent({
       getIngredientByRefId,
       showTitleEditor,
       mergeAbove,
+      moveTo,
       openDialog,
       setIngredientIds,
       availableNextStep,

frontend/components/global/BaseButtonGroup.vue

@@ -10,9 +10,12 @@
           </v-btn>
         </template>
         <v-list dense>
-          <v-list-item v-for="(child, idx) in btn.children" :key="idx" dense @click="$emit(child.event)">
+          <template v-for="(child, idx) in btn.children">
+            <v-list-item :key="idx" dense @click="$emit(child.event)">
               <v-list-item-title>{{ child.text }}</v-list-item-title>
             </v-list-item>
+            <v-divider v-if="child.divider" :key="`divider-${idx}`" class="my-1"></v-divider>
+          </template>
         </v-list>
       </v-menu>
       <v-tooltip
@@ -55,6 +58,7 @@ export interface ButtonOption {
   event: string;
   children?: ButtonOption[];
   disabled?: boolean;
+  divider?: boolean;
 }
 
 export default defineComponent({

frontend/lang/messages/en-US.json

@@ -494,6 +494,8 @@
     "cook-mode": "Cook Mode",
     "link-ingredients": "Link Ingredients",
     "merge-above": "Merge Above",
+    "move-to-bottom": "Move To Bottom",
+    "move-to-top": "Move To Top",
     "reset-scale": "Reset Scale",
     "decrease-scale-label": "Decrease Scale by 1",
     "increase-scale-label": "Increase Scale by 1",