Merge pull request #3039 from nocodb/fix/gui-v2-filter-n-total-count

fix(gui-v2): filter and row count

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -1,21 +1,33 @@
 <script setup lang="ts">
+import { watchEffect } from '@vue/runtime-core'
 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),
+)
 
+const filtersLength = ref(0)
+watchEffect(async () => {
+  if (activeView?.value) {
+    await loadFilters()
+    filtersLength.value = filters?.value?.length ?? 0
+  }
+})
 const filterComp = ref<typeof ColumnFilter>()
 
-// todo: implement
 const applyChanges = async () => {
   await filterComp?.value?.applyChanges()
 }

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,
   }
 }