feat(nc-gui): add draggable for kanban stacks and cards

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import Draggable from 'vuedraggable'
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, provide, useViewData } from '#imports'
 import Row from '~/components/smartsheet/Row.vue'
@@ -85,6 +86,8 @@ const attachments = (record: any): Array<Attachment> => {
 
 const reloadAttachments = ref(false)
 
+const drag = ref(false)
+
 reloadViewDataHook?.on(async () => {
   await loadData()
   await loadKanbanData()
@@ -108,31 +111,48 @@ const expandFormClick = async (e: MouseEvent, row: RowType) => {
   }
 }
 
+function onMove(event: any) {
+  const { newIndex, element, oldIndex } = event.added || event.moved || event.removed
+  // TODO:
+}
+
 openNewRecordFormHook?.on(async () => {
   const newRow = await addEmptyRow()
   expandForm(newRow)
 })
+
+const stacks = ref<any[]>([])
+stacks.value = Object.keys(formattedKanbanData)
+watch(formattedKanbanData, (v) => {
+  if (v) {
+    stacks.value = Object.keys(v).map((o, idx) => ({ key: o, idx }))
+  }
+})
 </script>
 
 <template>
-  <div v-if="formattedKanbanData" class="flex h-full">
-    <div class="nc-kanban-container flex grid gap-2 my-4 px-3">
   <!-- TODO: add loading component when formattedKanbanData is not ready -->
-      <!-- TODO: the whole stack should be draggable -->
-      <a-card
-        v-for="kanbanDataKey in Object.keys(formattedKanbanData)"
-        :key="kanbanDataKey"
-        class="nc-kanban-stack"
-        head-style="padding-bottom: 0px;"
-        body-style="padding: 0px 20px;"
-      >
+  <div v-if="stacks && formattedKanbanData" class="flex h-full">
+    <div class="nc-kanban-container flex grid gap-2 my-4 px-3">
+      <Draggable v-model="stacks" class="flex gap-5" item-key="idx" group="kanban-stack" draggable=".nc-kanban-stack">
+        <template #item="{ element: stack }">
+          <a-card :key="stack.idx" class="nc-kanban-stack mx-4" head-style="padding-bottom: 0px;" body-style="padding: 0px 20px;">
             <template #title>
-          <div class="nc-kanban-stack-head">
-            {{ kanbanDataKey }}
-          </div>
+              <div class="nc-kanban-stack-head">{{ stack.key }}</div>
             </template>
             <div class="nc-kanban-list flex flex-col">
-          <div v-for="record in formattedKanbanData[kanbanDataKey]" :key="`record-${record.row.id}`" class="py-2">
+              <Draggable
+                v-model="formattedKanbanData[stack.key]"
+                item-key="row.Id"
+                draggable=".nc-kanban-item"
+                group="kanban-card"
+                class="h-full"
+                @change="onMove($event)"
+                @start="drag = true"
+                @end="drag = false"
+              >
+                <template #item="{ element: record, index }">
+                  <div class="nc-kanban-item py-2">
                     <Row :row="record">
                       <a-card
                         hoverable
@@ -140,7 +160,12 @@ openNewRecordFormHook?.on(async () => {
                         @click="expandFormClick($event, record)"
                       >
                         <template #cover>
-                  <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
+                          <a-carousel
+                            v-if="!reloadAttachments && attachments(record).length"
+                            autoplay
+                            class="gallery-carousel"
+                            arrows
+                          >
                             <template #customPaging>
                               <a>
                                 <div class="pt-[12px]"><div></div></div>
@@ -195,19 +220,23 @@ openNewRecordFormHook?.on(async () => {
                       </a-card>
                     </Row>
                   </div>
+                </template>
+              </Draggable>
             </div>
             <a-card-meta>
               <template #description>
                 <div class="mt-5 text-center">
                   <mdi-plus class="text-pint-500 text-lg text-primary cursor-pointer" @click="openNewRecordFormHook.trigger()" />
                   <div class="nc-kanban-data-count">
-                {{ formattedKanbanData[kanbanDataKey].length }}
-                {{ formattedKanbanData[kanbanDataKey].length !== 1 ? $t('objects.records') : $t('objects.record') }}
+                    {{ formattedKanbanData[stack.key].length }}
+                    {{ formattedKanbanData[stack.key].length !== 1 ? $t('objects.records') : $t('objects.record') }}
                   </div>
                 </div>
               </template>
             </a-card-meta>
           </a-card>
+        </template>
+      </Draggable>
     </div>
   </div>
   <div class="flex-1" />