fix(gui): maintain the pagination data on reload

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/smartsheet/Row.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Row } from '~/composables'
 import { useProvideSmartsheetRowStore, useSmartsheetStoreOrThrow } from '#imports'
-import { ReloadRowDataHookInj, ReloadViewDataHookInj } from '~/context'
+import { ReloadRowDataHookInj } from '~/context'
 
 interface Props {
   row: Row
@@ -11,7 +11,7 @@ const props = defineProps<Props>()
 const currentRow = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()
-const { isNew, state, syncLTARRefs, loadRow } = useProvideSmartsheetRowStore(meta, currentRow)
+const { isNew, state, syncLTARRefs } = useProvideSmartsheetRowStore(meta, currentRow)
 
 // on changing isNew(new record insert) status sync LTAR cell values
 watch(isNew, async (nextVal, prevVal) => {
@@ -23,12 +23,14 @@ watch(isNew, async (nextVal, prevVal) => {
   }
 })
 
+const reloadViewDataTrigger = inject(ReloadViewDataHookInj)!
+
 // override reload trigger and use it to reload row
 const reloadHook = createEventHook()
 
 reloadHook.on(() => {
   if (isNew.value) return
-  loadRow()
+  reloadViewDataTrigger?.trigger()
 })
 
 provide(ReloadRowDataHookInj, reloadHook)

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useExpandedFormStoreOrThrow, useSmartsheetRowStoreOrThrow, useSmartsheetStoreOrThrow, useUIPermission } from '#imports'
+import { useExpandedFormStoreOrThrow, useSmartsheetRowStoreOrThrow, useSmartsheetStoreOrThrow, useUIPermission, ReloadRowDataHookInj } from '#imports'
 
 const emit = defineEmits(['cancel'])
 
@@ -11,7 +11,7 @@ const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
 
 const { isUIAllowed } = useUIPermission()
 
-const reloadTrigger = inject(ReloadViewDataHookInj)!
+const reloadTrigger = inject(ReloadRowDataHookInj)!
 
 const save = async () => {
   if (isNew.value) {

packages/nc-gui/components/virtual-cell/BelongsTo.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { createHook } from 'async_hooks'
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import {
@@ -24,7 +25,7 @@ const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'
 
 const column = inject(ColumnInj)!
 
-const reloadRowTrigger = inject(ReloadRowDataHookInj)!
+const reloadRowTrigger = inject(ReloadRowDataHookInj, createEventHook())!
 
 const cellValue = inject(CellValueInj, ref<any>(null))
 

packages/nc-gui/composables/useViewData.ts

@@ -78,7 +78,7 @@ export function useViewData(
   })
 
   const queryParams = computed(() => ({
-    offset: (paginationData.value?.page ?? 0) - 1,
+    offset: ((paginationData.value?.page ?? 0) - 1) * (paginationData.value?.pageSize ?? 25),
     limit: paginationData.value?.pageSize ?? 25,
     where: where?.value ?? '',
   }))
@@ -162,9 +162,11 @@ export function useViewData(
   }
 
   async function loadData(params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
+    console.log(queryParams.value)
     if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
     const response = !isPublic.value
       ? await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
+          ...queryParams.value,
           ...params,
           ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
           ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),