From 0151e5aee6f10285ffea6a24ab5d2a3c2b17e109 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 15 Sep 2022 13:56:13 +0800
Subject: [PATCH] feat(nc-gui): add countByStack logic

---
 .../nc-gui/components/smartsheet/Kanban.vue   | 10 ++++--
 .../nc-gui/composables/useKanbanViewData.ts   | 33 ++++++++++++-------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 7be67fc4d7..a8dbe2affa 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -43,6 +43,7 @@ const {
   groupingFieldColOptions,
   groupingField,
   groupingFieldColumn,
+  countByStack,
 } = useKanbanViewData(meta, view as any)
 
 const { isUIAllowed } = useUIPermission()
@@ -143,7 +144,10 @@ async function onMove(event: any, stackKey: string) {
   if (event.added) {
     const ele = event.added.element
     ele.row[groupingField.value] = stackKey === 'Uncategorized' ? null : stackKey
+    countByStack.value[stackKey] += 1
     await updateOrSaveRow(ele)
+  } else if (event.removed) {
+    countByStack.value[stackKey] -= 1
   }
 }
 
@@ -282,11 +286,11 @@ openNewRecordFormHook?.on(async () => {
                 </div>
               </a-layout-content>
               <a-layout-footer>
-                <div v-if="formattedData[stack.title]" class="mt-5 text-center">
+                <div v-if="formattedData[stack.title] && countByStack[stack.title] >= 0" 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.title].length }}
-                    {{ formattedData[stack.title].length !== 1 ? $t('objects.records') : $t('objects.record') }}
+                    {{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
+                    {{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
                   </div>
                 </div>
               </a-layout-footer>
diff --git a/packages/nc-gui/composables/useKanbanViewData.ts b/packages/nc-gui/composables/useKanbanViewData.ts
index 6201983ebe..1260e7181b 100644
--- a/packages/nc-gui/composables/useKanbanViewData.ts
+++ b/packages/nc-gui/composables/useKanbanViewData.ts
@@ -33,6 +33,7 @@ export function useKanbanViewData(
   //   ],
   // }
   const formattedData = useState<Record<string, Row[]>>('KanbanFormattedData', () => ({}))
+  const countByStack = useState<Record<string, Row[]>>('KanbanCountByStack', () => ({}))
   const groupingField = useState<string>('KanbanGroupingField', () => '')
   const groupingFieldColumn = useState<Record<string, any>>('KanbanGroupingFieldColumn', () => ({}))
 
@@ -46,21 +47,30 @@ export function useKanbanViewData(
   async function loadKanbanData() {
     if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
 
-    // reset formattedData to avoid storing previous data after changing grouping field
+    // reset formattedData & countByStack to avoid storing previous data after changing grouping field
     formattedData.value = {}
+    countByStack.value = {}
 
     await Promise.all(
       groupingFieldColOptions.value.map(async (option) => {
-        let where = `(${groupingField.value},eq,${option.title})`
-        if (option.title === 'Uncategorized') {
-          where = `(${groupingField.value},is,null)`
-        }
-        const response = await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
-          ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
-          ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
-          where,
-        })
-        formattedData.value[option.title] = formatData(response.list)
+        const where =
+          option.title === 'Uncategorized' ? `(${groupingField.value},is,null)` : `(${groupingField.value},eq,${option.title})`
+
+        formattedData.value[option.title] = formatData(
+          (
+            await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
+              ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
+              ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
+              where,
+            })
+          ).list,
+        )
+        countByStack.value[option.title] =
+          (
+            await api.dbViewRow.count('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
+              where,
+            })
+          ).count || 0
       }),
     )
   }
@@ -230,6 +240,7 @@ export function useKanbanViewData(
     updateKanbanMeta,
     kanbanMetaData,
     formattedData,
+    countByStack,
     groupingField,
     groupingFieldColOptions,
     groupingFieldColumn,