fix(nc-gui): kanban saving / updating logic

#3834

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -44,7 +44,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const activeView = inject(ActiveViewInj, ref())
 
-  const { addRowToStack } = useKanbanViewStoreOrThrow()
+  const { addOrEditStackRow } = useKanbanViewStoreOrThrow()
 
   const { sharedView } = useSharedView()
 
@@ -140,7 +140,9 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         return obj
       }, {} as Record<string, any>)
 
-      if (row.value.rowMeta?.new) {
+      const isNewRow = row.value.rowMeta?.new ?? false
+
+      if (isNewRow) {
         data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
 
         Object.assign(row.value, {
@@ -180,7 +182,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       }
 
       if (activeView.value?.type === ViewTypes.KANBAN) {
-        addRowToStack(row.value)
+        addOrEditStackRow(row.value, isNewRow)
       }
 
       message.success(`${primaryValue.value || 'Row'} updated successfully.`)

packages/nc-gui/composables/useKanbanViewStore.ts

@@ -3,7 +3,7 @@ import type { Api, ColumnType, KanbanType, SelectOptionType, SelectOptionsType,
 import { useI18n } from 'vue-i18n'
 import { message } from 'ant-design-vue'
 import type { Row } from '~/lib'
-import { SharedViewPasswordInj, deepCompare, enumColor, useInjectionState, useNuxtApp } from '#imports'
+import { SharedViewPasswordInj, deepCompare, enumColor, extractPkFromRow, useInjectionState, useNuxtApp } from '#imports'
 
 type GroupingFieldColOptionsType = SelectOptionType & { collapsed: boolean }
 
@@ -402,8 +402,12 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
       return formattedData.value.uncategorized[addAfter]
     }
 
-    function addRowToStack(row: Row) {
+    function addOrEditStackRow(row: Row, isNewRow: boolean) {
       const stackTitle = row.row[groupingField.value] ?? 'uncategorized'
+      const oldStackTitle = row.oldRow[groupingField.value] ?? 'uncategorized'
+
+      if (isNewRow) {
+        // add a new record
         if (stackTitle) {
           // push the row to target stack
           formattedData.value[stackTitle].push(row)
@@ -411,6 +415,28 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
           countByStack.value[stackTitle] += 1
           // clear the one under uncategorized since we don't reload the view
           removeRowFromUncategorizedStack()
+        } else {
+          // data will be still in Uncategorized stack
+          // no action is required
+        }
+      } else {
+        // update existing record
+        const targetPrimaryKey = extractPkFromRow(row.row, meta!.value!.columns!)
+        const idxToUpdate = formattedData.value[stackTitle].findIndex(
+          (ele) => extractPkFromRow(ele.row, meta!.value!.columns!) === targetPrimaryKey,
+        )
+        if (idxToUpdate !== -1) {
+          // update the row in formattedData
+          formattedData.value[stackTitle][idxToUpdate] = row
+        }
+        if (stackTitle !== oldStackTitle) {
+          // remove old row from countByStack & formattedData
+          countByStack.value[oldStackTitle] -= 1
+          formattedData.value[oldStackTitle].pop()
+          // add new row to countByStack & formattedData
+          countByStack.value[stackTitle] += 1
+          formattedData.value[stackTitle].push(row)
+        }
       }
     }
 
@@ -434,7 +460,7 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
       groupingFieldColumn,
       updateOrSaveRow,
       addEmptyRow,
-      addRowToStack,
+      addOrEditStackRow,
       deleteStack,
       updateKanbanStackMeta,
       removeRowFromUncategorizedStack,