From 47ccda1614ebdd891c8ff10e05fc311eb840f1e1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 14:05:41 +0530
Subject: [PATCH] fix(gui-v2): reload rows count on row insert/delete

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilterMenu.vue       | 11 +++++++++--
 packages/nc-gui-v2/composables/useViewData.ts     | 15 ++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 9ae67dd4e4..40b644614e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { watchEffect } from '@vue/runtime-core'
 import type ColumnFilter from './ColumnFilter.vue'
 import { useState } from '#app'
 import { ActiveViewInj, IsLockedInj } from '~/context'
@@ -17,8 +18,14 @@ const { filters, loadFilters } = useViewFilters(
   undefined,
   computed(() => false),
 )
-await loadFilters()
-const filtersLength = ref(filters?.value?.length ?? 0)
+
+const filtersLength = ref(0)
+watchEffect(async () => {
+  if (activeView?.value) {
+    await loadFilters()
+    filtersLength.value = filters?.value?.length ?? 0
+  }
+})
 const filterComp = ref<typeof ColumnFilter>()
 
 const applyChanges = async () => {
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 0fc55ae203..950833a1f1 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -39,6 +39,16 @@ export function useViewData(
     },
   })
 
+  const syncCount = async () => {
+    const { count } = await $api.dbViewRow.count(
+      NOCO,
+      project?.value?.title as string,
+      meta?.value?.id as string,
+      viewMeta?.value?.id as string,
+    )
+    paginationData.value.totalRows = count
+  }
+
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
     const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
@@ -70,6 +80,7 @@ export function useViewData(
         rowMeta: {},
         oldRow: { ...insertedData },
       })
+      syncCount()
     } catch (error: any) {
       notification.error({
         message: 'Row insert failed',
@@ -167,7 +178,6 @@ export function useViewData(
       })
       return false
     }
-
     return true
   }
 
@@ -186,6 +196,7 @@ export function useViewData(
         }
       }
       formattedData.value.splice(rowIndex, 1)
+      syncCount()
     } catch (e: any) {
       notification.error({
         message: 'Failed to delete row',
@@ -221,6 +232,7 @@ export function useViewData(
         })
       }
     }
+    syncCount()
   }
 
   return {
@@ -235,5 +247,6 @@ export function useViewData(
     deleteSelectedRows,
     updateOrSaveRow,
     selectedAllRecords,
+    syncCount,
   }
 }