fix: Record count pagination. (#1285)

adempiere · Oct 14, 2021 · 63b1c8e · 63b1c8e
1 parent aff4526
commit 63b1c8e
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 15 deletions.
diff --git a/src/api/ADempiere/user-interface/persistence.js b/src/api/ADempiere/user-interface/persistence.js
@@ -56,6 +56,7 @@ export function getEntities({
       }
     })
   }
+
   let sortingDefinition
   if (sorting) {
     sortingDefinition = sorting.map(sortValue => {
@@ -78,8 +79,8 @@ export function getEntities({
       attributes: attributesValues,
       sorting: sortingDefinition,
       // Page Data
-      pageToken,
-      pageSize
+      page_token: pageToken,
+      page_size: pageSize
     }
   })
     .then(response => {

diff --git a/src/components/ADempiere/DefaultTable/CellInfo.vue b/src/components/ADempiere/DefaultTable/CellInfo.vue
@@ -9,7 +9,7 @@
   </el-tag>
 
   <span v-else key="info-value">
-    <p v-if="displayedValue.length >= 23" style="max-height: 40px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
+    <p v-if="!isEmptyValue(displayedValue) && displayedValue.length >= 23" style="max-height: 40px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
       <el-popover
         placement="top-start"
         width="300"
@@ -28,6 +28,7 @@
         </el-row>
       </el-popover>
     </p>
+
     <p v-else>
       {{ displayedValue }}
     </p>

diff --git a/src/components/ADempiere/DefaultTable/index.vue b/src/components/ADempiere/DefaultTable/index.vue
@@ -86,7 +86,7 @@
 
     <!-- pagination table, set custom or use default change page method -->
     <custom-pagination
-      :total="recordsWithFilter.length"
+      :total="recordCount"
       :current-page="1"
       :selection="0"
       :handle-change-page="handleChangePage"
@@ -139,6 +139,10 @@ export default defineComponent({
       type: Array,
       required: true,
       default: () => []
+    },
+    recordCount: {
+      type: Number,
+      default: 0
     }
   },
 
@@ -202,8 +206,12 @@ export default defineComponent({
     /**
      * custom method to handle change page
      */
-    const handleChangePage = () => {
-      return
+    const handleChangePage = (pageNumber) => {
+      props.containerManager.setPage({
+        parentUuid: props.parentUuid,
+        containerUuid: props.containerUuid,
+        pageNumber
+      })
     }
 
     // get table data

diff --git a/src/components/ADempiere/RecordNavigation/index.vue b/src/components/ADempiere/RecordNavigation/index.vue
@@ -26,6 +26,7 @@
       :panel-metadata="panelMetadata"
       :header="tableheaders"
       :data-table="recordsList"
+      :record-count="recordCount"
     />
   </el-container>
 </template>
@@ -88,6 +89,7 @@ export default defineComponent({
     const panelMetadata = computed(() => {
       return props.currentTab
     })
+
     // create the table header
     const tableheaders = computed(() => {
       const panel = panelMetadata.value
@@ -110,6 +112,17 @@ export default defineComponent({
       }
       return []
     })
+
+    const recordCount = computed(() => {
+      const data = root.$store.getters[vuexStore + '/getContainerData']({
+        containerUuid: props.containerUuid
+      })
+      if (data && data.recordCount) {
+        return data.recordCount
+      }
+      return 0
+    })
+
     const actionAdvancedQuery = () => {
       const activeNames = []
       if (!activeName.value.length) {
@@ -125,6 +138,7 @@ export default defineComponent({
       activeName,
       // computeds
       recordsList,
+      recordCount,
       recordNavigationManager,
       isLoadedPanel,
       panelMetadata,

diff --git a/src/store/modules/ADempiere/dataManager.js b/src/store/modules/ADempiere/dataManager.js
@@ -22,7 +22,7 @@ import {
   deleteEntity
 } from '@/api/ADempiere/common/persistence'
 import router from '@/router'
-import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+import { isEmptyValue, generatePageToken } from '@/utils/ADempiere/valueUtils'
 
 const dataManager = {
   namespaced: true,
@@ -142,29 +142,37 @@ const dataManager = {
     },
 
     getEntities({
-      commit
+      commit,
+      getters
     }, {
       parentUuid,
       containerUuid,
-      pageToken,
-      pageSize
+      pageNumber
     }) {
+      let pageToken
+      if (!isEmptyValue(pageNumber)) {
+        pageNumber-- // TODO: Remove with fix in backend
+        const token = getters.getPageToken({ containerUuid })
+        pageToken = generatePageToken({ pageNumber, token })
+      }
+
       return new Promise(resolve => {
         getEntities({
           windowUuid: parentUuid,
           tabUuid: containerUuid,
-          pageToken,
-          pageSize
+          pageToken
         })
-          .then(data => {
-            const dataToStored = data.recordsList.map(record => {
+          .then(dataResponse => {
+            const dataToStored = dataResponse.recordsList.map(record => {
               return record.attributes
             })
 
             commit('setContainerData', {
               parentUuid,
               containerUuid,
-              recordsList: dataToStored
+              recordsList: dataToStored,
+              nextPageToken: dataResponse.nextPageToken,
+              recordCount: dataResponse.recordCount
             })
 
             resolve(dataToStored)
@@ -234,6 +242,17 @@ const dataManager = {
       return state.containerData.find(dataStored => {
         return dataStored.containerUuid === containerUuid
       })
+    },
+
+    getPageToken: (state, getters) => ({
+      containerUuid
+    }) => {
+      const dataAll = getters.getContainerData({ containerUuid })
+      if (!isEmptyValue(dataAll)) {
+        return dataAll.nextPageToken
+      }
+
+      return undefined
     }
   }
 }

diff --git a/src/utils/ADempiere/valueUtils.js b/src/utils/ADempiere/valueUtils.js
@@ -147,13 +147,31 @@ export function castValueWithType({
  * @returns {string}
  */
 export function extractPagingToken(token) {
+  if (isEmptyValue(token)) {
+    return ''
+  }
+
   let onlyToken = token.slice(0, -2)
   if (onlyToken.substr(-1, 1) === '-') {
+    // removes end hyphen
     onlyToken = onlyToken.slice(0, -1)
   }
   return onlyToken
 }
 
+export function generatePageToken({ pageNumber = 1, token }) {
+  if (pageNumber < 1) {
+    pageNumber = 1
+  }
+
+  const onlyToken = extractPagingToken(token)
+  if (isEmptyValue(onlyToken)) {
+    return ''
+  }
+
+  return onlyToken + '-' + pageNumber
+}
+
 /**
  * @param {number} number
  */

diff --git a/src/views/ADempiere/Window/MultiTabWindow.vue b/src/views/ADempiere/Window/MultiTabWindow.vue
@@ -143,6 +143,17 @@ export default defineComponent({
       },
 
       // To Default Table
+      setPage: ({
+        parentUuid,
+        containerUuid,
+        pageNumber = 0
+      }) => {
+        root.$store.dispatch('dataManager/getEntities', {
+          parentUuid,
+          containerUuid,
+          pageNumber
+        })
+      },
       setSelection: ({ containerUuid, recordsSelected }) => {
         console.info('setSelection callback', containerUuid, recordsSelected)
       },