From 60037b8baee2ac24bcd4921106f1e09ac5a22b25 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 13:41:18 +0530
Subject: [PATCH 1/2] fix(gui-v2): highlight filter button if at-least one
 filter present

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilterMenu.vue       | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 4264c42ddc..9ae67dd4e4 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,21 +1,26 @@
 <script setup lang="ts">
 import type ColumnFilter from './ColumnFilter.vue'
 import { useState } from '#app'
-import { IsLockedInj } from '~/context'
+import { ActiveViewInj, IsLockedInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
+const activeView = inject(ActiveViewInj)
 
 const { filterAutoSave } = useGlobal()
 
-// todo: emit from child
-const filtersLength = ref(0)
-
+// todo: avoid duplicate api call by keeping a filter store
+const { filters, loadFilters } = useViewFilters(
+  activeView,
+  undefined,
+  computed(() => false),
+)
+await loadFilters()
+const filtersLength = ref(filters?.value?.length ?? 0)
 const filterComp = ref<typeof ColumnFilter>()
 
-// todo: implement
 const applyChanges = async () => {
   await filterComp?.value?.applyChanges()
 }

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 2/2] 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,
   }
 }