fix: group by api calls

packages/nc-gui/components/shared-view/Grid.vue

@@ -23,7 +23,7 @@ const { signedIn } = useGlobal()
 
 const { loadProject } = useBase()
 
-const { isLocked } = useProvideSmartsheetStore(sharedView, meta, true, ref([]), nestedFilters)
+const { isLocked, xWhere } = useProvideSmartsheetStore(sharedView, meta, true, ref([]), nestedFilters)
 
 useProvideKanbanViewStore(meta, sharedView)
 useProvideCalendarViewStore(meta, sharedView)
@@ -41,6 +41,7 @@ provide(IsPublicInj, ref(true))
 provide(IsLockedInj, isLocked)
 
 useProvideViewColumns(sharedView, meta, () => reloadEventHook?.trigger(), true)
+useProvideViewGroupBy(sharedView, meta, xWhere, true)
 
 if (signedIn.value) {
   try {

packages/nc-gui/components/smartsheet/grid/GroupBy.vue

@@ -37,6 +37,16 @@ const { isViewDataLoading, isPaginationLoading } = storeToRefs(useViewsStore())
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 
+const _loadGroupData = async (group: Group, force?: boolean, params?: any) => {
+  isViewDataLoading.value = true
+  isPaginationLoading.value = true
+
+  await props.loadGroupData(group, force, params)
+
+  isViewDataLoading.value = false
+  isPaginationLoading.value = false
+}
+
 const _depth = props.depth ?? 0
 
 const wrapper = ref<HTMLElement | undefined>()
@@ -72,7 +82,7 @@ const findAndLoadSubGroup = (key: any) => {
         if (grp.nested) {
           if (!grp.children?.length) props.loadGroups({}, grp)
         } else {
-          if (!grp.rows?.length || grp.count !== grp.rows?.length) props.loadGroupData(grp)
+          if (!grp.rows?.length || grp.count !== grp.rows?.length) _loadGroupData(grp)
         }
       }
     }
@@ -84,36 +94,29 @@ const reloadViewDataHandler = (params: void | { shouldShowLoading?: boolean | un
   if (vGroup.value.nested) {
     props.loadGroups({ ...(params?.offset !== undefined ? { offset: params.offset } : {}) }, vGroup.value)
   } else {
-    props.loadGroupData(vGroup.value, true, {
+    _loadGroupData(vGroup.value, true, {
       ...(params?.offset !== undefined ? { offset: params.offset } : {}),
     })
   }
 }
 
+onMounted(async () => {
+  reloadViewDataHook?.on(reloadViewDataHandler)
+})
+
 onBeforeUnmount(async () => {
   reloadViewDataHook?.off(reloadViewDataHandler)
 })
 
-reloadViewDataHook?.on(reloadViewDataHandler)
-
 watch(
   [() => vGroup.value.key],
   async (n, o) => {
     if (n !== o) {
-      isViewDataLoading.value = true
+      if (!vGroup.value.nested) {
-      isPaginationLoading.value = true
+        await _loadGroupData(vGroup.value, true)
-
-      if (vGroup.value.nested) {
-        await props.loadGroups({}, vGroup.value)
-      } else {
-        await props.loadGroupData(vGroup.value, true)
       }
-
-      isViewDataLoading.value = false
-      isPaginationLoading.value = false
     }
   },
-  { immediate: true },
 )
 
 if (vGroup.value.root === true) provide(ScrollParentInj, wrapper)
@@ -328,7 +331,7 @@ const shouldRenderCell = (column) =>
                 v-if="!grp.nested && grp.rows"
                 :group="grp"
                 :load-groups="loadGroups"
-                :load-group-data="loadGroupData"
+                :load-group-data="_loadGroupData"
                 :load-group-page="loadGroupPage"
                 :group-wrapper-change-page="groupWrapperChangePage"
                 :row-height="rowHeight"
@@ -345,7 +348,7 @@ const shouldRenderCell = (column) =>
                 v-else
                 :group="grp"
                 :load-groups="loadGroups"
-                :load-group-data="loadGroupData"
+                :load-group-data="_loadGroupData"
                 :load-group-page="loadGroupPage"
                 :group-wrapper-change-page="groupWrapperChangePage"
                 :row-height="rowHeight"

packages/nc-gui/components/smartsheet/grid/index.vue

@@ -20,7 +20,7 @@ import {
   ref,
   useSmartsheetStoreOrThrow,
   useViewData,
-  useViewGroupBy,
+  useViewGroupByOrThrow,
 } from '#imports'
 import type { Row } from '#imports'
 
@@ -166,7 +166,7 @@ const toggleOptimisedQuery = () => {
 }
 
 const { rootGroup, groupBy, isGroupBy, loadGroups, loadGroupData, loadGroupPage, groupWrapperChangePage, redistributeRows } =
-  useViewGroupBy(view, xWhere)
+  useViewGroupByOrThrow()
 
 const coreWrapperRef = ref<HTMLElement>()
 

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -56,7 +56,7 @@ const showDeleteColumnModal = ref(false)
 
 const { gridViewCols } = useViewColumnsOrThrow()
 
-const { fieldsToGroupBy, groupByLimit } = useViewGroupBy(view)
+const { fieldsToGroupBy, groupByLimit } = useViewGroupByOrThrow(view)
 
 const setAsDisplayValue = async () => {
   try {

packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue

@@ -18,7 +18,7 @@ const meta = inject(MetaInj, ref())
 
 const { showSystemFields, metaColumnById } = useViewColumnsOrThrow()
 
-const { groupBy } = useViewGroupBy(activeView)
+const { groupBy } = useViewGroupByOrThrow()
 
 const options = computed<ColumnType[]>(
   () =>

packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue

@@ -22,7 +22,7 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const { gridViewCols, updateGridViewColumn, metaColumnById, showSystemFields } = useViewColumnsOrThrow()
 
-const { fieldsToGroupBy, groupByLimit } = useViewGroupBy(view)
+const { fieldsToGroupBy, groupByLimit } = useViewGroupByOrThrow()
 
 const { $e } = useNuxtApp()
 

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -54,7 +54,7 @@ const { handleSidebarOpenOnMobileForNonViews } = useConfigStore()
 const { activeTableId } = storeToRefs(useTablesStore())
 
 const { activeView, openedViewsTab, activeViewTitleOrId } = storeToRefs(useViewsStore())
-const { isGallery, isGrid, isForm, isKanban, isLocked, isMap, isCalendar } = useProvideSmartsheetStore(activeView, meta)
+const { isGallery, isGrid, isForm, isKanban, isLocked, isMap, isCalendar, xWhere } = useProvideSmartsheetStore(activeView, meta)
 
 useSqlEditor()
 
@@ -86,6 +86,7 @@ provide(
 )
 
 useProvideViewColumns(activeView, meta, () => reloadViewDataEventHook?.trigger())
+useProvideViewGroupBy(activeView, meta, xWhere)
 
 const grid = ref()
 

packages/nc-gui/composables/useViewGroupBy.ts

@@ -1,5 +1,5 @@
 import { UITypes } from 'nocodb-sdk'
-import type { ColumnType, LinkToAnotherRecordType, LookupType, SelectOptionsType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, LookupType, SelectOptionsType, ViewType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '../utils'
@@ -17,7 +17,13 @@ import type { Group, GroupNestedIn, Row } from '#imports'
 
 const excludedGroupingUidt = [UITypes.Attachment, UITypes.QrCode, UITypes.Barcode]
 
-export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: ComputedRef<string | undefined>) => {
+const [useProvideViewGroupBy, useViewGroupBy] = useInjectionState(
+  (
+    view: Ref<ViewType | undefined>,
+    meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
+    where?: ComputedRef<string | undefined>,
+    isPublic = false,
+  ) => {
     const groupByLimit: number = 3
 
     const { api } = useApi()
@@ -28,8 +34,6 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
   
     const { sharedView, fetchSharedViewData } = useSharedView()
   
-  const meta = inject(MetaInj)
-
     const { gridViewCols } = useViewColumnsOrThrow()
   
     const { getMeta } = useMetas()
@@ -60,8 +64,6 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
   
     const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
   
-  const isPublic = inject(IsPublicInj, ref(false))
-
     const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
   
     const groupByGroupLimit = computed(() => {
@@ -232,11 +234,11 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
         const nestedWhere = calculateNestedWhere(group.nestedIn, where?.value)
         if (!groupby || !groupby.column.title) return
   
-      if (isPublic.value && !sharedView.value?.uuid) {
+        if (isPublic && !sharedView.value?.uuid) {
           return
         }
   
-      const response = !isPublic.value
+        const response = !isPublic
           ? await api.dbViewRow.groupBy('noco', base.value.id, view.value.fk_model_id, view.value.id, {
               offset: ((group.paginationData.page ?? 0) - 1) * (group.paginationData.pageSize ?? groupByGroupLimit.value),
               limit: group.paginationData.pageSize ?? groupByGroupLimit.value,
@@ -361,7 +363,7 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
           where: `${nestedWhere}`,
         }
   
-      const response = !isPublic.value
+        const response = !isPublic
           ? await api.dbViewRow.list('noco', base.value.id, view.value.fk_model_id, view.value.id, {
               ...query,
               ...params,
@@ -561,4 +563,14 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
       groupWrapperChangePage,
       redistributeRows,
     }
+  },
+  'useViewGroupBy',
+)
+
+export { useProvideViewGroupBy }
+
+export function useViewGroupByOrThrow() {
+  const viewColumns = useViewGroupBy()
+  if (viewColumns == null) throw new Error('Please call `useProvideViewGroupBy` on the appropriate parent component')
+  return viewColumns
 }