src/components/TransactionSidebar.vue

@@ -41,7 +41,7 @@ function clearList() {
     <SidebarInset>
       <slot />
     </SidebarInset>
-    <Sidebar collapsible="offcanvas" side="right" style="--sidebar-width: 26rem;">
+    <Sidebar collapsible="offcanvas" side="right" style="--sidebar-width: 24rem;">
       <SidebarHeader mt-1 text-center>
         Planned Actions
       </SidebarHeader>
@@ -55,10 +55,10 @@ function clearList() {
         </SidebarGroup>
         <SidebarSeparator />
         <SidebarGroup class="m-b-2 m-t-2 flex flex-row justify-center">
-          <Button variant="outline" w="1/8" rounded-bl-lg rounded-br-none rounded-tl-lg rounded-tr-none>
+          <Button variant="outline" w="1/7" rounded-bl-lg rounded-br-none rounded-tl-lg rounded-tr-none>
             <IconTooling />
           </Button>
-          <Button variant="outline" w="1/8" rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
+          <Button variant="outline" w="1/7" rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
             <IconTooling />
           </Button>
         </SidebarGroup>
@@ -89,7 +89,11 @@ function clearList() {
         <SidebarSeparator />
         <SidebarGroup>
           <DragAndDrop :length="actions.length" :emptyListPhrase="emptyListPhrase">
-            <DragAndDropItem v-for="action in actions" :key="action.id" :item="action" :items="actions" />
+            <DragAndDropItem v-for="action in actions" :key="action.id" :item="action" :items="actions">
+              <div class="">
+                <h1>{{ action.title }}</h1>
+              </div>
+            </DragAndDropItem>
           </DragAndDrop>
         </SidebarGroup>
       </SidebarContent>

src/components/ui/drag-and-drop/DragAndDropItem.vue

@@ -32,24 +32,61 @@ const onDrop = (evt: DragEvent, anotherItem: Item) => {
             console.error("Item not found!")
             return
         }
-        const oldPosition = item.position
-        const newPosition = anotherItem.position
-        item.position = newPosition
-        anotherItem.position = oldPosition
-        props.items.sort((a, b) => a.position - b.position)
+        switchPositions(item, anotherItem)
     }
 }
 
+const switchPositions = (item: Item, anotherItem: Item) => {
+    const oldPosition = item.position
+    const newPosition = anotherItem.position
+    item.position = newPosition
+    anotherItem.position = oldPosition
+    props.items.sort((a, b) => a.position - b.position)
+}
+
+enum Direction {
+    Up,
+    Down
+}
+
+const onClick = (direction: Direction ) => {
+    if (direction == Direction.Up) {
+        const previousItem = props.items.find((item) => item.position == props.item.position - 1)
+        if (previousItem) {
+            switchPositions(props.item, previousItem)
+        }
+    } else {
+        const nextItem = props.items.find((item) => item.position == props.item.position + 1)
+        if (nextItem) {
+            switchPositions(props.item, nextItem)
+        }
+    }
+
+    
+}
+
 </script>
 <template>
-    <div @drop="onDrop($event, props.item)" @dragover.prevent @dragenter.prevent draggable="true" @dragstart="startDrag($event, props.item)"  
-    w-86 h-40 m-t-2 m-b-2 rounded-0.5rem flex flex-col items-center p-4 border-1.5 border-black-500 bg-background>
-        <div class="w-100% flex flex-row justify-between">
-            <div class=" w-60%  flex flex-row justify-between items-center">
-                <h1>{{ props.item.title }}</h1>
+    <div @drop="onDrop($event, props.item)" @dragover.prevent @dragenter.prevent draggable="true" @dragstart="startDrag($event, props.item)" class="flex flex-row w-95% m-t-2 m-b-2 rounded-0.5rem border-1.5 border-black-500 bg-background">
+        <div class="flex flex-col items-center justify-between p-b-3 bg-background invert w-15% h-100% rounded-tl-0.5rem rounded-bl-0.5rem" >
+            <h1>{{ props.item.position + 1 }}</h1>
+            <div class="flex flex-col">
+            <IconTooling @click="onClick(Direction.Up)"/>
+            <IconTooling @click="onClick(Direction.Down)"/>
             </div>
-            <div>
-                <IconTooling></IconTooling>
+        </div>
+        <div class="w-100% flex flex-col justify-between m-4">
+            <slot/>
+            <div class="flex flex-row w-100%">
+                    <Button variant="outline" class="w-50% rounded-tr-none rounded-br-none bg-background">
+                        Delete
+                        <IconTooling/>
+                    </Button>
+                    <Button variant="outline" class="w-50% rounded-tl-none rounded-bl-none bg-background">
+                        Edit
+                        <IconTooling/>
+                    </Button>
+
             </div>
         </div>
     </div>