From 61ff30fd0226b781f1540323e15b7c8021080760 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 19 Sep 2022 12:40:16 +0800
Subject: [PATCH] fix(nc-gui): incorrect Uncategorized counts when opening /
 closing expanded form

---
 packages/nc-gui/components/smartsheet/Kanban.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 0a7118622f..041d82bab1 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -159,12 +159,22 @@ const handleCollapseStack = async (stackIdx: number) => {
   await updateKanbanStackMeta()
 }
 
+const handleExpandedFormCancel = () => {
+  // remove the empty record
+  formattedData.value['Uncategorized'].pop()
+  // decrease total count by 1
+  countByStack.value['Uncategorized'] -= 1
+}
+
 openNewRecordFormHook?.on(async (stackTitle) => {
   const newRow = await addEmptyRow()
   // preset the grouping field value
   newRow.row = {
     [groupingField.value]: stackTitle,
   }
+  // increase total count by 1
+  countByStack.value['Uncategorized'] += 1
+  // open the expanded form
   expandForm(newRow)
 })
 </script>
@@ -299,7 +309,6 @@ openNewRecordFormHook?.on(async (stackTitle) => {
                       @click="openNewRecordFormHook.trigger(stack.title === 'Uncategorized' ? null : stack.title)"
                     />
                     <div class="nc-kanban-data-count">
-                      <!-- TODO: fix current count for Uncategorized -->
                       {{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
                       {{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
                     </div>
@@ -339,6 +348,7 @@ openNewRecordFormHook?.on(async (stackTitle) => {
     :row="expandedFormRow"
     :state="expandedFormRowState"
     :meta="meta"
+    @cancel="handleExpandedFormCancel"
   />
   <a-modal v-model:visible="deleteStackVModel" class="!top-[35%]" wrap-class-name="nc-modal-view-create">
     <template #title>