Revize 6db8a3cb

Re #8706 - Pagination implemented

static/index.html

@@ -122 +122 @@
                     </tr>
                 </tbody>
             </table>
-            <div>
+            <div v-if="hasNextPage || hasPreviousPage">
               <ul class="pagination justify-content-center">
-                    <li class="page-item"><a class="page-link" href="#"><<</a></li>
-                    <li class="page-item"><a class="page-link" href="#">current</a></li>
-                    <li class="page-item"><a class="page-link" href="#">>></a></li>
+                    <li class="page-item" v-bind:class="{disabled: !hasPreviousPage}">
+                        <button v-on:click="onPreviousPage" class="page-link"><<</button>
+                    </li>
+                    <li class="page-item"><button class="page-link">{{ currentPage }}</button></li>
+                    <li class="page-item" v-bind:class="{disabled: !hasNextPage}">
+                        <button v-on:click="onNextPage" class="page-link">>></button>
+                    </li>
               </ul>
             </div>
         </div>

static/js/index.js

@@ -5 +5 @@
 var certificateListingApp = new Vue({
     el: "#certificateListingPage",
     data: {
+        certificatesPerPage: 2,
+        hasNextPage: false,
+        hasPreviousPage: false,
+        currentPage: 1,
         loading: true,
         // list of all certificates to be displayed in the list
         certificates: [],
         successMessage: ''
     },
+    methods: {
+        onNextPage: async function () {
+            this.currentPage++;
+            await this.loadPage(this.currentPage, this.certificatesPerPage);
+        },
+        onPreviousPage: async function () {
+            this.currentPage--;
+            await this.loadPage(this.currentPage, this.certificatesPerPage);
+        },
+        loadPage: async function (page, perPage) {
+            // download a list of all available certificates and display them in the table
+            try {
+                const response = await axios.get(API_URL + "certificates", {
+                    params: {
+                        page: page - 1,
+                        per_page: perPage
+                    }
+                });
+                if (response.data["success"]) {
+                    this.certificates = [];
+                    response.data["data"].forEach(item => certificateListingApp.certificates.push(item));
+                    this.hasPreviousPage = page > 1;
+                    this.hasNextPage = await this.checkIfNextPage(page, this.certificatesPerPage);
+                }
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        checkIfNextPage: async function(page, perPage) {
+            try {
+                const response = await axios.get(API_URL + "certificates", {
+                    params: {
+                        page: page,
+                        per_page: perPage
+                    }
+                });
+                if (response.data["success"]) {
+                    return response.data["data"].length > 0;
+                }
+                return false;
+            } catch (error) {
+                return false;
+            }
+        }
+    },
     mounted: async function () {
         const params = window.location.search;
         if (params !== "") {
@@ -29 +78 @@
         }
 
         // download a list of all available certificates and display them in the table
-        try {
-            const response = await axios.get(API_URL + "certificates");
-            if (response.data["success"]) {
-                response.data["data"].forEach(item => certificateListingApp.certificates.push(item))
-            }
-            certificateListingApp.loading = false;
-        } catch (error) {
-            console.log(error);
-            certificateListingApp.loading = false;
-        }
+        await this.loadPage(1, this.certificatesPerPage);
+        this.loading = false;
     }
 });