Revize 6db8a3cb

Re #8706 - Pagination implemented

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;
     }
 });