From 335b4a993ac40009d5e75e131bb1faae227d3b67 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 10 Sep 2022 11:44:28 +0530
Subject: [PATCH] fix(gui): maintain the pagination data on reload

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Row.vue             | 8 +++++---
 .../nc-gui/components/smartsheet/expanded-form/Header.vue | 4 ++--
 packages/nc-gui/components/virtual-cell/BelongsTo.vue     | 3 ++-
 packages/nc-gui/composables/useViewData.ts                | 4 +++-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Row.vue b/packages/nc-gui/components/smartsheet/Row.vue
index e4c575d44b..7703ea531b 100644
--- a/packages/nc-gui/components/smartsheet/Row.vue
+++ b/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)
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index cf42db3df6..4014b82c05 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/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) {
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index 3679c7d2ab..42df1a15bb 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/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))
 
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 05b86d81e8..2b5c3f43a8 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/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) }),