From 8c0785a0f7719a1794386c820b667bc0b38c352e Mon Sep 17 00:00:00 2001
From: Progi1984 <franck.lefevre@prestashop.com>
Date: Tue, 14 Jan 2025 17:23:59 +0100
Subject: [PATCH] Server side pagination

---
 nuxt.config.js    |  2 +-
 package-lock.json | 42 +++------------------------------------
 pages/index.vue   | 50 +++++++++++++++++++++++++----------------------
 3 files changed, 31 insertions(+), 63 deletions(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index 3529d09..8cddc9b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -2,7 +2,7 @@
 const pkg = require('./package')
 
 module.exports = {
-  mode: 'universal',
+  ssr: true,
   env: {
     ga: process.env.QANB_GA || 'UA-XXXXXXXX-X',
     DOMAIN_URL: process.env.QANB_API_DOMAIN || 'http://www.qa.local/'
diff --git a/package-lock.json b/package-lock.json
index 62a9036..a3a32ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3105,12 +3105,6 @@
             "update-browserslist-db": "^1.0.10"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001452",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001452.tgz",
-          "integrity": "sha512-Lkp0vFjMkBB3GTpLR8zk4NwW5EdRdnitwYJHDOOKIU85x4ckYCPQ+9WlVvSVClHxVReefkUMtWZH2l9KGlD51w==",
-          "dev": true
-        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4163,12 +4157,6 @@
             "update-browserslist-db": "^1.0.10"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001452",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001452.tgz",
-          "integrity": "sha512-Lkp0vFjMkBB3GTpLR8zk4NwW5EdRdnitwYJHDOOKIU85x4ckYCPQ+9WlVvSVClHxVReefkUMtWZH2l9KGlD51w==",
-          "dev": true
-        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -8548,9 +8536,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001452",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001452.tgz",
-      "integrity": "sha512-Lkp0vFjMkBB3GTpLR8zk4NwW5EdRdnitwYJHDOOKIU85x4ckYCPQ+9WlVvSVClHxVReefkUMtWZH2l9KGlD51w=="
+      "version": "1.0.30001692",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz",
+      "integrity": "sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A=="
     },
     "capture-exit": {
       "version": "2.0.0",
@@ -13663,12 +13651,6 @@
             "update-browserslist-db": "^1.0.10"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001452",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001452.tgz",
-          "integrity": "sha512-Lkp0vFjMkBB3GTpLR8zk4NwW5EdRdnitwYJHDOOKIU85x4ckYCPQ+9WlVvSVClHxVReefkUMtWZH2l9KGlD51w==",
-          "dev": true
-        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -15917,12 +15899,6 @@
             "update-browserslist-db": "^1.0.10"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001452",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001452.tgz",
-          "integrity": "sha512-Lkp0vFjMkBB3GTpLR8zk4NwW5EdRdnitwYJHDOOKIU85x4ckYCPQ+9WlVvSVClHxVReefkUMtWZH2l9KGlD51w==",
-          "dev": true
-        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -16647,12 +16623,6 @@
           "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
           "dev": true
         },
-        "caniuse-lite": {
-          "version": "1.0.30001452",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001452.tgz",
-          "integrity": "sha512-Lkp0vFjMkBB3GTpLR8zk4NwW5EdRdnitwYJHDOOKIU85x4ckYCPQ+9WlVvSVClHxVReefkUMtWZH2l9KGlD51w==",
-          "dev": true
-        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -17460,12 +17430,6 @@
             "update-browserslist-db": "^1.0.10"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001452",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001452.tgz",
-          "integrity": "sha512-Lkp0vFjMkBB3GTpLR8zk4NwW5EdRdnitwYJHDOOKIU85x4ckYCPQ+9WlVvSVClHxVReefkUMtWZH2l9KGlD51w==",
-          "dev": true
-        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
diff --git a/pages/index.vue b/pages/index.vue
index eea18bf..f261c7b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -33,7 +33,16 @@
         <div class="select">
           <p class="select-label">Version</p>
           <v-select
-            :items="['All', 'develop', '9.0.x', '8.2.x', '8.1.x', '8.0.x', '1.7.8.x', '1.7.7.x']"
+            :items="[
+              'All',
+              'develop',
+              '9.0.x',
+              '8.2.x',
+              '8.1.x',
+              '8.0.x',
+              '1.7.8.x',
+              '1.7.7.x'
+            ]"
             label="All"
             :value="''"
             append-icon="keyboard_arrow_down"
@@ -50,7 +59,8 @@
           :items="files"
           :headers="isMobile ? [] : headers"
           :pagination.sync="pagination"
-          :rows-per-page-items="[20, 50, { text: 'All', value: -1 }]"
+          :rows-per-page-items="[20, 50, 100]"
+          :total-items="filesLength"
           :footer-props="{
             showFirstLastPage: true,
             firstIcon: 'mdi-arrow-collapse-left',
@@ -530,6 +540,7 @@
         data: {},
         isMobile: false,
         files: [],
+        filesLength: 0,
         loading: true,
         paramVersion: this.$route.query.version ?? 'All',
         paramPlatform: this.$route.query.platform ?? 'All',
@@ -617,10 +628,13 @@
       paramPlatform() {
         this.updateFilers()
       },
-      pagination() {
-        this.updatePagination()
+      pagination: {
+        handler() {
+          this.updatePagination()
+        },
+        deep: true
       },
-      '$route.query': function(query) {
+      '$route.query': function $routeQuery(query) {
         this.paramCampaign = query.campaign ?? 'All'
         this.paramVersion = query.version ?? 'All'
         this.paramPlatform = query.platform ?? 'All'
@@ -672,40 +686,29 @@
       },
       async getSuites() {
         this.loading = true
-        let url = `${this.$store.state.env.domain}${URLS.reports}`
-        let hasParams = false
+        let url = `${this.$store.state.env.domain}${URLS.reports}?page=${this.pagination.page}&limit=${this.pagination.rowsPerPage}`
 
         if (this.paramPlatform !== 'All') {
-          url = `${url}?filter_platform[0]=${this.paramPlatform}`
-          hasParams = true
+          url = `${url}&filter_platform[0]=${this.paramPlatform}`
         }
 
         if (this.paramCampaign !== 'All') {
-          if (hasParams) {
-            url = `${url}&filter_campaign[0]=${this.paramCampaign}`
-          } else {
-            url = `${url}?filter_campaign[0]=${this.paramCampaign}`
-          }
-
-          hasParams = true
+          url = `${url}&filter_campaign[0]=${this.paramCampaign}`
         }
 
         if (this.paramVersion !== 'All') {
-          if (hasParams) {
-            url = `${url}&filter_version[0]=${this.paramVersion}`
-          } else {
-            url = `${url}?filter_version[0]=${this.paramVersion}`
-          }
+          url = `${url}&filter_version[0]=${this.paramVersion}`
         }
 
         const { data } = await this.$axios.get(url, {
           crossdomain: true
         })
 
+        this.filesLength = data.count
         if (this.isMobile) {
-          this.files = data.filter(e => e.id)
+          this.files = data.reports.filter(e => e.id)
         } else {
-          this.files = data
+          this.files = data.reports
         }
 
         this.loading = false
@@ -741,6 +744,7 @@
               : this.pagination.sortBy
         }
         this.$router.push({ query: pagination })
+        this.getSuites()
       }
     }
   }