pagination all-subscriptions

static/js/all-subscriptions.js

@@ -1,9 +1,20 @@
 import { formatCurrency } from "./common.js"
 
-export function showTable(api) {
+export let pageSize = 2;
+export let currentPage = 1;
+
+export function showTable(api, ps, cp) {
     let token = localStorage.getItem("token");
     let tbody = document.getElementById("subscriptions-table").getElementsByTagName("tbody")[0];
 
+    // reset tbody
+    tbody.innerHTML = ``
+
+    const body = {
+        page_size: parseInt(ps, 10),
+        page: parseInt(cp, 10),
+    };
+
     const requestOptions = {
         method: 'post',
         headers: {
@@ -11,13 +22,14 @@ export function showTable(api) {
             'Content-Type': 'application/json',
             'Authorization': 'Bearer ' + token,
         },
+        body: JSON.stringify(body),
     };
 
     fetch(api + "/api/admin/all-subscriptions", requestOptions)
         .then(response => response.json())
         .then(function (data) {
-            if (data) {
-                data.forEach(function (i) {
+            if (data.orders) {
+                data.orders.forEach(function (i) {
                     let newRow = tbody.insertRow();
                     let newCell = newRow.insertCell();
 
@@ -42,6 +54,7 @@ export function showTable(api) {
                     } else {
                         newCell.innerHTML = `<span class="badge bg-success">Charged</span>`
                     }
+                    paginator(api, data.last_page, data.current_page)
                 });
             } else {
                 let newRow = tbody.insertRow();
@@ -52,3 +65,27 @@ export function showTable(api) {
         });
 }
 
+function paginator(api, pages, curPage) {
+    const p = document.getElementById("paginator")
+    let html = `<li class="page-item"><a href="#!" class="page-link pager" data-page="${curPage - 1}">&lt;</a></li>`;
+
+    for (var i = 0; i < pages; i++) {
+        html += `<li class="page-item"><a href="#!" class="page-link pager" data-page="${i + 1}">${i + 1}</a></li>`;
+    }
+
+    html += `<li class="page-item"><a href="#!" class="page-link pager" data-page="${curPage + 1}">&gt;</a></li>`;
+
+    p.innerHTML = html;
+
+    let pageBtns = document.getElementsByClassName("pager");
+    for (var j = 0; j < pageBtns.length; j++) {
+        pageBtns[j].addEventListener("click", function(evt){
+            let desiredPage = evt.target.getAttribute("data-page");
+            if ((desiredPage > 0) && (desiredPage <= pages)) {
+                console.log("would go to page", desiredPage);
+                showTable(api, pageSize, desiredPage);
+                currentPage = desiredPage
+            }
+        })
+    }
+}