From 3f2efaa40e955dd0953861e8acf5b56e077b9b50 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 6 Oct 2023 12:56:48 +0000
Subject: [PATCH] fix: pagination on previos page load

---
 .../smartsheet/expanded-form/index.vue         | 10 +++++++++-
 .../components/smartsheet/grid/index.vue       | 18 ++++++++++++++++--
 .../nc-gui/composables/useExpandedFormStore.ts |  5 +++++
 packages/nc-gui/composables/useViewData.ts     |  6 ++++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 3dc425b7c1..96d9128b2b 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -69,6 +69,8 @@ const meta = toRef(props, 'meta')
 
 const islastRow = toRef(props, 'lastRow')
 
+const isFirstRow = toRef(props,'firstRow')
+
 const route = useRoute()
 
 const router = useRouter()
@@ -122,6 +124,7 @@ const {
   syncLTARRefs,
   save: _save,
   loadCommentsAndLogs,
+  clearColumns,
 } = useProvideExpandedFormStore(meta, row)
 
 const duplicatingRowInProgress = ref(false)
@@ -189,15 +192,20 @@ const isPreventChangeModalOpen = ref(false)
 const isCloseModalOpen = ref(false)
 
 const discardPreventModal = () => {
+  // when user click on next or previous button
   if (isPreventChangeModalOpen.value) {
     emits('next')
+    if (_row.value?.rowMeta?.new) emits('cancel')
     isPreventChangeModalOpen.value = false
   }
+  // when user click on close button
   if (isCloseModalOpen.value) {
     isCloseModalOpen.value = false
     if (_row.value?.rowMeta?.new) emits('cancel')
     isExpanded.value = false
   }
+  // clearing all new modifed change on close
+  clearColumns()
 }
 
 const onNext = async () => {
@@ -419,7 +427,7 @@ export default {
             <div class="flex gap-2">
               <NcButton
                 v-if="props.showNextPrevIcons"
-                :disabled="props.firstRow"
+                :disabled="isFirstRow"
                 type="secondary"
                 class="nc-prev-arrow !w-10"
                 @click="$emit('prev')"
diff --git a/packages/nc-gui/components/smartsheet/grid/index.vue b/packages/nc-gui/components/smartsheet/grid/index.vue
index edce3f220f..e08136f78b 100644
--- a/packages/nc-gui/components/smartsheet/grid/index.vue
+++ b/packages/nc-gui/components/smartsheet/grid/index.vue
@@ -69,6 +69,7 @@ const {
   bulkUpdateView,
   optimisedQuery,
   islastRow,
+  isFirstRow,
 } = useViewData(meta, view, xWhere)
 
 const rowHeight = computed(() => {
@@ -195,6 +196,19 @@ const goToNextRow = () => {
 
   navigateToSiblingRow(NavigateDir.NEXT)
 }
+
+const goToPreviousRow = () => {
+  const currentIndex = getExpandedRowIndex()
+  /* when first index of current page is reached and then clicked back 
+    previos page should be loaded
+  */
+  if (!paginationData.value.isFirstPage && currentIndex === 1) {
+    const nextPage = paginationData.value?.page ? paginationData.value?.page - 1 : 1
+    changePage(nextPage)
+  }
+
+  navigateToSiblingRow(NavigateDir.PREV)
+}
 </script>
 
 <template>
@@ -258,10 +272,10 @@ const goToNextRow = () => {
       :row-id="routeQuery.rowId"
       :view="view"
       show-next-prev-icons
-      :first-row="getExpandedRowIndex() === 0"
+      :first-row="isFirstRow"
       :last-row="islastRow"
       @next="goToNextRow()"
-      @prev="navigateToSiblingRow(NavigateDir.PREV)"
+      @prev="goToPreviousRow()"
     />
 
     <Suspense>
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 0395aef888..31ea5bee56 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -279,6 +279,10 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     return data
   }
 
+  const clearColumns = () => {
+    changedColumns.value = new Set()
+  }
+
   const loadRow = async (rowId?: string) => {
     const record = await $api.dbTableRow.read(
       NOCO,
@@ -344,6 +348,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     primaryKey,
     saveRowAndStay,
     updateComment,
+    clearColumns,
   }
 }, 'expanded-form-store')
 
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 69176d9546..71a2431824 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -104,6 +104,11 @@ export function useViewData(
     return paginationData.value?.isLastPage && currentIndex === formattedData.value.length - 1
   })
 
+  const isFirstRow = computed(() => {
+    const currentIndex = getExpandedRowIndex()
+    return paginationData.value?.isFirstPage && currentIndex === 1
+  })
+
   const queryParams = computed(() => ({
     offset: ((paginationData.value.page ?? 0) - 1) * (paginationData.value.pageSize ?? appInfoDefaultLimit),
     limit: paginationData.value.pageSize ?? appInfoDefaultLimit,
@@ -386,5 +391,6 @@ export function useViewData(
     getExpandedRowIndex,
     optimisedQuery,
     islastRow,
+    isFirstRow,
   }
 }