From 369385424fa501e40e3a5b937fc8b54b257a4ccf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 21 Feb 2023 13:14:37 +0100
Subject: [PATCH] Adjust record page pagination logic

---
 .../src/components/Common/RecordToolbar.vue   | 19 ++---
 .../components/PageBlocks/RecordListBase.vue  | 23 ++----
 .../PageBlocks/RecordListConfigurator.vue     | 11 +--
 .../src/components/Public/Record/Modal.vue    | 44 ++++++++----
 client/web/compose/src/store/ui.js            | 70 +++++++------------
 .../src/views/Admin/Modules/Records/List.vue  | 11 +++
 .../src/views/Admin/Modules/Records/View.vue  | 37 ++--------
 .../src/views/Public/Pages/Records/View.vue   | 43 ++++--------
 .../compose/src/views/Public/Pages/View.vue   | 20 +++++-
 9 files changed, 128 insertions(+), 150 deletions(-)

diff --git a/client/web/compose/src/components/Common/RecordToolbar.vue b/client/web/compose/src/components/Common/RecordToolbar.vue
index 871b7d63f..8c1d17414 100644
--- a/client/web/compose/src/components/Common/RecordToolbar.vue
+++ b/client/web/compose/src/components/Common/RecordToolbar.vue
@@ -33,28 +33,24 @@
       >
         <b-button-group v-if="recordNavigation.prev || recordNavigation.next">
           <b-button
-            id="tooltip-target-prev-page"
-            v-b-tooltip.hover
             pill
             size="lg"
             variant="outline-primary"
             class="mr-2"
-            :disabled="!recordNavigation.prev"
+            :disabled="!record || processing || !recordNavigation.prev"
             :title="$t('recordNavigation.prev')"
-            @click="$emit('update-navigation', recordNavigation.prev)"
+            @click="navigateToRecord(recordNavigation.prev)"
           >
             <font-awesome-icon :icon="['fas', 'angle-left']" />
           </b-button>
 
           <b-button
-            id="tooltip-target-next-page"
-            v-b-tooltip.hover
             size="lg"
             pill
             variant="outline-primary"
-            :disabled="!recordNavigation.next"
+            :disabled="!record || processing || !recordNavigation.next"
             :title="$t('recordNavigation.next')"
-            @click="$emit('update-navigation', recordNavigation.next)"
+            @click="navigateToRecord(recordNavigation.next)"
           >
             <font-awesome-icon :icon="['fas', 'angle-right']" />
           </b-button>
@@ -175,6 +171,7 @@
 
 <script>
 import { compose, NoID } from '@cortezaproject/corteza-js'
+import { throttle } from 'lodash'
 
 export default {
   i18nOptions: {
@@ -285,6 +282,12 @@ export default {
       return this.isDeleted && this.record.canUndeleteRecord && !this.processing && this.record.recordID !== NoID
     },
   },
+
+  methods: {
+    navigateToRecord: throttle(function (recordID) {
+      this.$emit('update-navigation', recordID)
+    }, 500),
+  },
 }
 </script>
 <style lang="scss" scoped>
diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
index b079edd70..ed4a8d396 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
@@ -1217,31 +1217,20 @@ export default {
       this.processing = false
     },
 
-    handleRowClicked ({ r: { recordID } }) {
-      const { moduleID, namespaceID } = this.recordListModule
+    async handleRowClicked ({ r: { recordID } }) {
+      if ((this.options.editable && this.editing) || (!this.recordPageID && !this.options.rowViewUrl)) {
+        return
+      }
 
-      if (this.block.options.enableRecordPageNavigation) {
-        const { pageCursor, nextPage, prevPage } = this.filter
-
-        this.loadPaginationRecords({
-          recordListModule: this.recordListModule,
-          moduleID,
-          namespaceID,
-          filterCursors: [prevPage, pageCursor, nextPage],
+      if (this.options.enableRecordPageNavigation) {
+        await this.loadPaginationRecords({
           filter: {
             ...this.filter,
             limit: Math.min(this.pagination.count, 100),
           },
-          options: {
-            showRecordNavigationTooltip: this.block.options.showRecordNavigationTooltip,
-          },
         })
       }
 
-      if ((this.options.editable && this.editing) || (!this.recordPageID && !this.options.rowViewUrl)) {
-        return
-      }
-
       const pageID = this.recordPageID
       const route = {
         name: this.options.rowViewUrl || 'page.record',
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index 884ff7c2c..ff3a918a7 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -252,10 +252,16 @@
         breakpoint="md"
         class="mt-4"
       >
+        <b-form-checkbox
+          v-model="options.enableRecordPageNavigation"
+        >
+          {{ $t('recordList.enableRecordPageNavigation') }}
+        </b-form-checkbox>
         <b-form-checkbox v-model="options.allowExport">
           {{ $t('recordList.export.allow') }}
         </b-form-checkbox>
       </b-form-group>
+
       <b-form-group
         horizontal
         :label-cols="3"
@@ -306,11 +312,6 @@
         >
           {{ $t('recordList.hideRecordPermissionsButton') }}
         </b-form-checkbox>
-        <b-form-checkbox
-          v-model="options.enableRecordPageNavigation"
-        >
-          {{ $t('recordList.enableRecordPageNavigation') }}
-        </b-form-checkbox>
       </b-form-group>
     </b-tab>
 
diff --git a/client/web/compose/src/components/Public/Record/Modal.vue b/client/web/compose/src/components/Public/Record/Modal.vue
index 1be609d6e..9cbf58137 100644
--- a/client/web/compose/src/components/Public/Record/Modal.vue
+++ b/client/web/compose/src/components/Public/Record/Modal.vue
@@ -35,10 +35,10 @@
 </template>
 
 <script>
-import record from 'corteza-webapp-compose/src/mixins/record'
 import { compose } from '@cortezaproject/corteza-js'
+import { mapGetters, mapActions } from 'vuex'
+import record from 'corteza-webapp-compose/src/mixins/record'
 import ViewRecord from 'corteza-webapp-compose/src/views/Public/Pages/Records/View'
-import { mapGetters } from 'vuex'
 
 export default {
   i18nOptions: {
@@ -75,6 +75,7 @@ export default {
     ...mapGetters({
       getModuleByID: 'module/getByID',
       getPageByID: 'page/getByID',
+      recordPaginationUsable: 'ui/recordPaginationUsable',
     }),
   },
 
@@ -83,26 +84,36 @@ export default {
       immediate: true,
       handler (recordID, oldRecordID) {
         const { recordPageID } = this.$route.query
+        const { pageID: oldrecordPageID } = this.page || {}
 
         if (!recordID) {
           this.showModal = false
           return
         }
 
-        if (this.showModal && (recordID !== oldRecordID)) {
-          this.showModal = false
+        if (recordPageID !== oldrecordPageID) {
+          // If the page changed we need to clear the record pagination since its not relevant anymore
+          if (this.recordPaginationUsable) {
+            this.setRecordPaginationUsable(false)
+          } else {
+            this.clearRecordIDs()
+          }
 
-          setTimeout(() => {
-            this.$router.push({
-              query: {
-                ...this.$route.query,
-                recordID,
-                recordPageID,
-              },
-            })
-          }, 300)
+          if (this.showModal && (recordID !== oldRecordID)) {
+            this.showModal = false
 
-          return
+            setTimeout(() => {
+              this.$router.push({
+                query: {
+                  ...this.$route.query,
+                  recordID,
+                  recordPageID,
+                },
+              })
+            }, 300)
+
+            return
+          }
         }
 
         setTimeout(() => {
@@ -129,6 +140,11 @@ export default {
   },
 
   methods: {
+    ...mapActions({
+      setRecordPaginationUsable: 'ui/setRecordPaginationUsable',
+      clearRecordIDs: 'ui/clearRecordIDs',
+    }),
+
     loadModal ({ recordID, recordPageID }) {
       if (recordID && recordPageID) {
         this.recordID = recordID
diff --git a/client/web/compose/src/store/ui.js b/client/web/compose/src/store/ui.js
index 5d00f4419..7600b83de 100644
--- a/client/web/compose/src/store/ui.js
+++ b/client/web/compose/src/store/ui.js
@@ -5,8 +5,8 @@ const types = {
   completed: 'completed',
   setRecordPagination: 'setRecordPagination',
   clearRecordPagination: 'clearRecordPagination',
-  clearRecordPageNavigation: 'clearRecordPageNavigation',
-  setClearRecordPageNavigation: 'setClearRecordPageNavigation',
+  recordPaginationUsable: 'recordPaginationUsable',
+  setRecordPaginationUsable: 'setRecordPaginationUsable',
 }
 
 export default function (ComposeAPI) {
@@ -16,9 +16,8 @@ export default function (ComposeAPI) {
     state: {
       loading: false,
       pending: false,
-      recordPaginationIds: [],
-      recordPageVisited: null,
-      clearRecordPageNavigation: true,
+      recordPaginationIDs: [],
+      recordPaginationUsable: false,
     },
 
     getters: {
@@ -26,59 +25,42 @@ export default function (ComposeAPI) {
 
       pending: (state) => state.pending,
 
-      clearRecordPageNavigation: (state) => state.clearRecordPageNavigation,
+      recordPaginationUsable: (state) => state.recordPaginationUsable,
 
-      getRecordNavigationIndex: (state) => (recordID) => {
-        return state.recordPaginationIds.indexOf(recordID)
-      },
+      getNextAndPrevRecord: ({ recordPaginationIDs }) => (recordID) => {
+        const recordIndex = recordPaginationIDs.indexOf(recordID)
+        const prev = recordIndex >= 0 ? recordPaginationIDs[recordIndex - 1] : undefined
+        const next = recordIndex >= 0 ? recordPaginationIDs[recordIndex + 1] : undefined
 
-      nextRecordNavigation: ({ recordPaginationIds }, { getRecordNavigationIndex }) => (recordID) => {
-        const recordIndex = getRecordNavigationIndex(recordID)
-        const index = recordIndex !== undefined ? recordIndex : 1
-
-        return recordPaginationIds[index - 1]
-      },
-
-      prevRecordNavigation: ({ recordPaginationIds }, { getRecordNavigationIndex }) => (recordID) => {
-        const recordIndex = getRecordNavigationIndex(recordID)
-        const index = recordIndex !== undefined ? recordIndex : 1
-
-        return recordPaginationIds[index + 1]
-      },
-
-      getNextAndPrevRecord: (_, { nextRecordNavigation, prevRecordNavigation }) => (recordID) => {
-        return {
-          next: prevRecordNavigation(recordID),
-          prev: nextRecordNavigation(recordID),
-        }
+        return { next, prev }
       },
     },
 
     actions: {
-      loadPaginationRecords ({ commit }, { filter, moduleID, namespaceID, filterCursors, incTotal, incPageNavigation, options } = {}) {
+      async loadPaginationRecords ({ commit }, { filter } = {}) {
         commit(types.pending)
-        commit(types.setClearRecordPageNavigation, true)
+        commit(types.recordPaginationUsable, true)
 
-        return Promise.all(filterCursors.map((cursor) => {
-          filter.pageCursor = cursor
+        const { pageCursor, prevPage } = filter
 
-          return ComposeAPI.recordList({ ...filter, moduleID, namespaceID, incTotal, incPageNavigation })
+        return Promise.all([prevPage, pageCursor].map(pageCursor => {
+          return ComposeAPI.recordList({ ...filter, pageCursor })
             .then(({ set }) => {
               return set.map(({ recordID }) => recordID)
             })
-        })).finally(() => {
-          commit(types.completed)
-        }).then(([prevRecords, nextRecords]) => {
+        })).then(([prevRecords, nextRecords]) => {
           commit(types.setRecordPagination, [...new Set([...prevRecords, ...nextRecords])])
+        }).finally(() => {
+          commit(types.completed)
         })
       },
 
-      clearRecordIds ({ commit }) {
+      clearRecordIDs ({ commit }) {
         commit(types.clearRecordPagination)
       },
 
-      setClearRecordPageNavigation ({ commit }, value) {
-        commit(types.setClearRecordPageNavigation, value)
+      setRecordPaginationUsable ({ commit }, value) {
+        commit(types.recordPaginationUsable, value)
       },
     },
 
@@ -99,16 +81,16 @@ export default function (ComposeAPI) {
         state.pending = false
       },
 
-      [types.setRecordPagination] (state, recordIds) {
-        state.recordPaginationIds = recordIds
+      [types.setRecordPagination] (state, recordIDs) {
+        state.recordPaginationIDs = recordIDs
       },
 
       [types.clearRecordPagination] (state) {
-        state.recordPaginationIds = []
+        state.recordPaginationIDs = []
       },
 
-      [types.setClearRecordPageNavigation] (state, value) {
-        state.clearRecordPageNavigation = value
+      [types.recordPaginationUsable] (state, value) {
+        state.recordPaginationUsable = value
       },
     },
   }
diff --git a/client/web/compose/src/views/Admin/Modules/Records/List.vue b/client/web/compose/src/views/Admin/Modules/Records/List.vue
index 290bd8ea5..8bd68be5d 100644
--- a/client/web/compose/src/views/Admin/Modules/Records/List.vue
+++ b/client/web/compose/src/views/Admin/Modules/Records/List.vue
@@ -67,6 +67,7 @@ export default {
   computed: {
     ...mapGetters({
       getModuleByID: 'module/getByID',
+      recordPaginationUsable: 'ui/recordPaginationUsable',
     }),
 
     title () {
@@ -124,6 +125,7 @@ export default {
         showTotalCount: true,
         showDeletedRecordsOption: true,
         presort: 'createdAt DESC',
+        enableRecordPageNavigation: true,
         // Set allrecords configuration
         allRecords: true,
         hideConfigureFieldsButton: false,
@@ -132,11 +134,20 @@ export default {
         rowCreateUrl: 'admin.modules.record.create',
       },
     })
+
+    // If the page changed we need to clear the record pagination since its not relevant anymore
+    if (this.recordPaginationUsable) {
+      this.setRecordPaginationUsable(false)
+    } else {
+      this.clearRecordIDs()
+    }
   },
 
   methods: {
     ...mapActions({
       updateModule: 'module/update',
+      setRecordPaginationUsable: 'ui/setRecordPaginationUsable',
+      clearRecordIDs: 'ui/clearRecordIDs',
     }),
 
     handleFieldsSave (fields = []) {
diff --git a/client/web/compose/src/views/Admin/Modules/Records/View.vue b/client/web/compose/src/views/Admin/Modules/Records/View.vue
index 7fc36c007..afb2151f3 100644
--- a/client/web/compose/src/views/Admin/Modules/Records/View.vue
+++ b/client/web/compose/src/views/Admin/Modules/Records/View.vue
@@ -93,7 +93,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
 import RecordToolbar from 'corteza-webapp-compose/src/components/Common/RecordToolbar'
 import users from 'corteza-webapp-compose/src/mixins/users'
 import record from 'corteza-webapp-compose/src/mixins/record'
@@ -136,7 +136,6 @@ export default {
 
   computed: {
     ...mapGetters({
-      clearRecordPageNavigation: 'ui/clearRecordPageNavigation',
       getNextAndPrevRecord: 'ui/getNextAndPrevRecord',
     }),
 
@@ -198,9 +197,8 @@ export default {
     },
 
     recordNavigation () {
-      if (!this.record) return
-
-      return this.getNextAndPrevRecord(this.record.recordID)
+      const { recordID } = this.record || {}
+      return this.getNextAndPrevRecord(recordID)
     },
   },
 
@@ -215,21 +213,9 @@ export default {
 
   created () {
     this.createBlocks()
-
-    if (this.clearRecordPageNavigation) {
-      this.setClearRecordPageNavigation(false)
-      this.clearRecordIds()
-    } else {
-      this.clearRecordIds()
-    }
   },
 
   methods: {
-    ...mapActions({
-      setClearRecordPageNavigation: 'ui/setClearRecordPageNavigation',
-      clearRecordIds: 'ui/clearRecordIds',
-    }),
-
     createBlocks () {
       this.fields.forEach(f => {
         const block = new compose.PageBlockRecord()
@@ -273,21 +259,12 @@ export default {
       this.$router.push({ name: 'admin.modules.record.edit', params: this.$route.params })
     },
 
-    handleRedirectToPrevOrNext (value) {
-      const recordID = value
-
+    handleRedirectToPrevOrNext (recordID) {
       if (!recordID) return
 
-      const route = {
-        name: 'admin.modules.record.view',
-        params: {
-          moduleID: this.$route.params.moduleID,
-          recordID,
-        },
-        query: null,
-      }
-
-      this.$router.push(route)
+      this.$router.push({
+        params: { ...this.$route.params, recordID },
+      })
     },
   },
 }
diff --git a/client/web/compose/src/views/Public/Pages/Records/View.vue b/client/web/compose/src/views/Public/Pages/Records/View.vue
index 84a9f88f6..33fff050a 100644
--- a/client/web/compose/src/views/Public/Pages/Records/View.vue
+++ b/client/web/compose/src/views/Public/Pages/Records/View.vue
@@ -52,7 +52,7 @@
   </div>
 </template>
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
 import Grid from 'corteza-webapp-compose/src/components/Public/Page/Grid'
 import RecordToolbar from 'corteza-webapp-compose/src/components/Common/RecordToolbar'
 import record from 'corteza-webapp-compose/src/mixins/record'
@@ -113,7 +113,6 @@ export default {
 
   computed: {
     ...mapGetters({
-      clearRecordPageNavigation: 'ui/clearRecordPageNavigation',
       getNextAndPrevRecord: 'ui/getNextAndPrevRecord',
     }),
 
@@ -153,7 +152,8 @@ export default {
     },
 
     recordNavigation () {
-      return this.getNextAndPrevRecord(this.recordID)
+      const { recordID } = this.record || {}
+      return this.getNextAndPrevRecord(recordID)
     },
   },
 
@@ -178,13 +178,6 @@ export default {
       this.loadRecord()
       this.$root.$emit(`refetch-non-record-blocks:${this.page.pageID}`)
     })
-
-    if (this.clearRecordPageNavigation) {
-      this.setClearRecordPageNavigation(false)
-      this.clearRecordIds()
-    } else {
-      this.clearRecordIds()
-    }
   },
 
   // Destroy event before route leave to ensure it doesn't destroy the newly created one
@@ -194,11 +187,6 @@ export default {
   },
 
   methods: {
-    ...mapActions({
-      setClearRecordPageNavigation: 'ui/setClearRecordPageNavigation',
-      clearRecordIds: 'ui/clearRecordIds',
-    }),
-
     async loadRecord () {
       this.record = undefined
 
@@ -215,7 +203,9 @@ export default {
           await this.$ComposeAPI
             .recordRead({ namespaceID, moduleID, recordID: this.recordID })
             .then(record => {
-              this.record = new compose.Record(module, record)
+              setTimeout(() => {
+                this.record = new compose.Record(module, record)
+              }, 300)
             })
             .catch(this.toastErrorHandler(this.$t('notification:record.loadFailed')))
         } else {
@@ -267,26 +257,17 @@ export default {
       }
     },
 
-    handleRedirectToPrevOrNext (value) {
-      const recordID = value
-
+    handleRedirectToPrevOrNext (recordID) {
       if (!recordID) return
 
       if (this.showRecordModal) {
-        this.$router.replace({
-          query: { recordID, recordPageID: this.$route.query.recordPageID },
+        this.$router.push({
+          query: { ...this.$route.query, recordID },
         })
       } else {
-        const route = {
-          name: 'page.record',
-          params: {
-            pageID: this.page.pageID,
-            recordID,
-          },
-          query: null,
-        }
-
-        this.$router.push(route)
+        this.$router.push({
+          params: { ...this.$route.params, recordID },
+        })
       }
     },
   },
diff --git a/client/web/compose/src/views/Public/Pages/View.vue b/client/web/compose/src/views/Public/Pages/View.vue
index 44fe27c7d..825eeb348 100644
--- a/client/web/compose/src/views/Public/Pages/View.vue
+++ b/client/web/compose/src/views/Public/Pages/View.vue
@@ -76,7 +76,7 @@
   </div>
 </template>
 <script>
-import { mapActions } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import Grid from 'corteza-webapp-compose/src/components/Public/Page/Grid'
 import RecordModal from 'corteza-webapp-compose/src/components/Public/Record/Modal'
 import MagnificationModal from 'corteza-webapp-compose/src/components/Public/Page/Block/Modal'
@@ -114,6 +114,10 @@ export default {
   },
 
   computed: {
+    ...mapGetters({
+      recordPaginationUsable: 'ui/recordPaginationUsable',
+    }),
+
     isRecordCreatePage () {
       return this.$route.name === 'page.record.create'
     },
@@ -160,6 +164,18 @@ export default {
         document.title = [title, this.namespace.name, this.$t('general:label.app-name.public')].filter(v => v).join(' | ')
       },
     },
+
+    'page.pageID': {
+      immediate: true,
+      handler () {
+        // If the page changed we need to clear the record pagination since its not relevant anymore
+        if (this.recordPaginationUsable) {
+          this.setRecordPaginationUsable(false)
+        } else {
+          this.clearRecordIDs()
+        }
+      },
+    },
   },
 
   created () {
@@ -176,6 +192,8 @@ export default {
   methods: {
     ...mapActions({
       updatePageSet: 'page/updateSet',
+      setRecordPaginationUsable: 'ui/setRecordPaginationUsable',
+      clearRecordIDs: 'ui/clearRecordIDs',
     }),
   },
 }