From 14ee96b7f80914d00bb65e09a9b1981631da2fa0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sun, 11 Sep 2022 00:46:35 +0800
Subject: [PATCH] feat(nc-gui): use title instead of id & use groupingField
 from useKanbanViewData

---
 .../nc-gui/components/smartsheet/Kanban.vue   | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 718ac828d8..bb4317648f 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -31,8 +31,16 @@ const expandedFormDlg = ref(false)
 const expandedFormRow = ref<RowType>()
 const expandedFormRowState = ref<Record<string, any>>()
 
-const { loadKanbanData, loadKanbanMeta, kanbanMetaData, formattedData, updateOrSaveRow, addEmptyRow, groupingFieldColOptions } =
-  useKanbanViewData(meta, view as any)
+const {
+  loadKanbanData,
+  loadKanbanMeta,
+  kanbanMetaData,
+  formattedData,
+  updateOrSaveRow,
+  addEmptyRow,
+  groupingFieldColOptions,
+  groupingField,
+} = useKanbanViewData(meta, view as any)
 
 const { isUIAllowed } = useUIPermission()
 
@@ -107,11 +115,9 @@ const expandFormClick = async (e: MouseEvent, row: RowType) => {
 
 async function onMove(event: any, stackKey: string) {
   if (event.added) {
-    // TODO: update groupingField
-    const groupingField = 'singleSelect2'
     const ele = event.added.element
     ele.row[groupingField] = stackKey === 'Uncategorized' ? null : stackKey
-    await updateOrSaveRow(ele, groupingField)
+    await updateOrSaveRow(ele)
   }
 }
 
@@ -144,7 +150,7 @@ openNewRecordFormHook?.on(async () => {
             </template>
             <div class="nc-kanban-list flex flex-col">
               <Draggable
-                v-model="formattedData[stack.id]"
+                v-model="formattedData[stack.title]"
                 item-key="row.Id"
                 draggable=".nc-kanban-item"
                 group="kanban-card"
@@ -156,7 +162,7 @@ openNewRecordFormHook?.on(async () => {
                     <Row :row="record">
                       <a-card
                         hoverable
-                        :data-stack="stack.id"
+                        :data-stack="stack.title"
                         class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
                         @click="expandFormClick($event, record)"
                       >
@@ -229,8 +235,8 @@ openNewRecordFormHook?.on(async () => {
                 <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">
-                    {{ formattedData[stack.id]?.length }}
-                    {{ formattedData[stack.id]?.length !== 1 ? $t('objects.records') : $t('objects.record') }}
+                    {{ formattedData[stack.title]?.length }}
+                    {{ formattedData[stack.title]?.length !== 1 ? $t('objects.records') : $t('objects.record') }}
                   </div>
                 </div>
               </template>