diff --git a/src/components/TransactionSidebar.vue b/src/components/TransactionSidebar.vue
index 087f0256b3d7565882c5145c5d54bd25e3ee205f..a6fd73e4f8037dd7cdff55074039487680546b4f 100644
--- a/src/components/TransactionSidebar.vue
+++ b/src/components/TransactionSidebar.vue
@@ -1,6 +1,38 @@
<script setup lang="ts">
const providerRef = useTemplateRef('providerRef')
defineExpose({ providerRef })
+const actions = ref([
+ {
+ id: 0,
+ title: 'Action 1',
+ description: 'to action 1',
+ position: 0,
+ },
+ {
+ id: 1,
+ title: 'Action 2',
+ description: 'to action 2',
+ position: 1,
+ },
+ {
+ id: 2,
+ title: 'Action 3',
+ description: 'to action 3',
+ position: 2,
+ },
+ {
+ id: 3,
+ title: 'Action 4',
+ description: 'to action 4',
+ position: 3,
+ },
+])
+
+const emptyListPhrase = 'No actions planned'
+
+function clearList() {
+ actions.value = []
+}
</script>
<template>
@@ -8,53 +40,50 @@ defineExpose({ providerRef })
<SidebarInset>
<slot />
</SidebarInset>
- <Sidebar collapsible="icon" side="right">
- <SidebarHeader mt-topbar>
- Placeholder
+ <Sidebar collapsible="offcanvas" side="right" style="--sidebar-width: 26rem">
+ <SidebarHeader mt-topbar text-center>
+ Planned Actions
</SidebarHeader>
+ <SidebarSeparator />
<SidebarContent>
- <SidebarGroup>
- <SidebarGroupLabel>Platform</SidebarGroupLabel>
- <SidebarMenu />
+ <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>
+ <IconTooling />
+ </Button>
+ <Button variant="outline" w="1/8" rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
+ <IconTooling />
+ </Button>
</SidebarGroup>
- <SidebarGroup class="group-data-[collapsible=icon]:hidden">
- <SidebarGroupLabel>Projects</SidebarGroupLabel>
- <SidebarMenu>
- <SidebarMenuItem>
- <SidebarMenuButton as-child>
- Sample Text
- </SidebarMenuButton>
- <DropdownMenu>
- <DropdownMenuTrigger as-child>
- <SidebarMenuAction show-on-hover>
- <MoreHorizontal />
- <span class="sr-only">More</span>
- </SidebarMenuAction>
- </DropdownMenuTrigger>
- <DropdownMenuContent class="w-48 rounded-lg" side="bottom" align="end">
- <DropdownMenuItem>
- <Folder class="text-muted-foreground" />
- <span>View Project</span>
- </DropdownMenuItem>
- <DropdownMenuItem>
- <Forward class="text-muted-foreground" />
- <span>Share Project</span>
- </DropdownMenuItem>
- <DropdownMenuSeparator />
- <DropdownMenuItem>
- <Trash2 class="text-muted-foreground" />
- <span>Delete Project</span>
- </DropdownMenuItem>
- </DropdownMenuContent>
- </DropdownMenu>
- </SidebarMenuItem>
- <SidebarMenuItem>
- <SidebarMenuButton class="text-sidebar-foreground/70">
- <MoreHorizontal class="text-sidebar-foreground/70" />
- <span>More</span>
- </SidebarMenuButton>
- </SidebarMenuItem>
- </SidebarMenu>
+ <SidebarSeparator/>
+ <SidebarGroup class="m-b-2 flex flex-row justify-center">
+ <div flex flex-row justify-center>
+ <Button variant="outline" w-8rem rounded-bl-lg rounded-br-none rounded-tl-lg rounded-tr-none @click="clearList()">
+ Clear List
+ </Button>
+ <Select>
+ <SelectTrigger rounded-none w="1/7">
+ <SelectValue placeholder="Test" />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectGroup class="max-h-35 overflow-y-scroll">
+ <SelectLabel>Actions to test</SelectLabel>
+ <SelectItem v-for="action in actions" :key="action.id" :value="action.title">
+ {{ action.title }}
+ </SelectItem>
+ </SelectGroup>
+ </SelectContent>
+ </Select>
+ <Button variant="outline" w-8rem rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
+ Apply
+ </Button>
+ </div>
+ </SidebarGroup>
+ <SidebarSeparator />
+ <SidebarGroup>
+ <DragAndDrop :length="actions.length" :emptyListPhrase="emptyListPhrase">
+ <DragAndDropItem v-for="action in actions" :key="action.id" :item="action" :items="actions">
+ </DragAndDropItem>
+ </DragAndDrop>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
diff --git a/src/components/ui/drag-and-drop/DragAndDrop.vue b/src/components/ui/drag-and-drop/DragAndDrop.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0c8891e576f80c2e4fe28944066ffc24904c3c6a
--- /dev/null
+++ b/src/components/ui/drag-and-drop/DragAndDrop.vue
@@ -0,0 +1,20 @@
+
+<script setup lang="ts">
+
+const props = defineProps({
+ length: Number,
+ emptyListPhrase: String
+})
+
+</script>
+<template>
+<div v-if="props.length" container flex flex-col items-center p-t-2 p-b-2>
+ <slot></slot>
+</div>
+<div v-else flex flex-row justify-center><p italic >{{ props.emptyListPhrase }}</p></div>
+</template>
+
+
+
+
+
diff --git a/src/components/ui/drag-and-drop/DragAndDropItem.vue b/src/components/ui/drag-and-drop/DragAndDropItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0f14101e9845ad8b3c2bb24b4b473b81757f66f
--- /dev/null
+++ b/src/components/ui/drag-and-drop/DragAndDropItem.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+
+
+interface Item {
+ id: number
+ [key: string]: any
+}
+const props = defineProps({
+ item: {
+ type: Object as PropType<Item>,
+ required: true
+ },
+ items: {
+ type: Array as PropType<Item[]>,
+ required: true
+}
+})
+
+const startDrag = (evt: DragEvent, item: Item) => {
+ if(evt.dataTransfer){
+ evt.dataTransfer.dropEffect = 'move'
+ evt.dataTransfer.effectAllowed = 'move'
+ evt.dataTransfer.setData('itemID', item.id.toString())
+ }
+}
+
+const onDrop = (evt: DragEvent, anotherItem: Item) => {
+ if (evt.dataTransfer){
+ const itemID = evt.dataTransfer.getData('itemID')
+ const item = props.items.find((item) => item.id == parseInt(itemID))
+ if (!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)
+ }
+}
+
+</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-white>
+ <div class="w-100% flex flex-row justify-between">
+ <div class=" w-60% flex flex-row justify-between items-center">
+ <Checkbox></Checkbox>
+ <h1>{{ props.item.title }}</h1>
+ </div>
+ <div>
+ <IconTooling></IconTooling>
+ </div>
+ </div>
+ </div>
+</template>
\ No newline at end of file