improve pagination

cmd/api/handlers-api.go

@@ -403,6 +403,7 @@ func (app *application) VirtualTerminalPaymentSucceeded(w http.ResponseWriter, r
 	_, err = app.SaveTransaction(txn)
 	if err != nil {
 		app.badRequest(w, r, err)
+		return
 	}
 
 	app.writeJSON(w, http.StatusOK, txn)
@@ -602,6 +603,7 @@ func (app *application) GetSale(w http.ResponseWriter, r *http.Request) {
 	order, err := app.DB.GetOrderByID(orderID)
 	if err != nil {
 		app.badRequest(w, r, err)
+		return
 	}
 	app.writeJSON(w, http.StatusOK, order)
 }

cmd/web/templates/all-sales.page.gohtml

@@ -25,7 +25,14 @@ All Sales
 {{ end }}
 {{ define "js" }}
 <script type="module">
-    import {showTable, pageSize, currentPage} from "/static/js/all-sales.js"
+    import {pageSize} from "/static/js/common.js"
-    showTable({{.API}}, pageSize, currentPage);
+    import {showTable, currentPage} from "/static/js/all-sales.js"
+
+    let curPage = currentPage;
+    if (localStorage.getItem("cur-page") !== null) {
+        curPage = localStorage.getItem("cur-page");
+        localStorage.removeItem("cur-page");
+    }
+    showTable({{.API}}, pageSize, curPage);
 </script>
 {{ end }}

cmd/web/templates/all-subscriptions.page.gohtml

@@ -28,7 +28,14 @@ All Subscriptions
 
 {{define "js"}}
 <script type="module">
-    import {showTable, pageSize, currentPage} from "/static/js/all-subscriptions.js"
+    import {pageSize} from "/static/js/common.js"
-    showTable({{.API}}, pageSize, currentPage);
+    import {showTable, currentPage} from "/static/js/all-subscriptions.js"
+
+    let curPage = currentPage;
+    if (localStorage.getItem("cur-page") !== null) {
+        curPage = localStorage.getItem("cur-page");
+        localStorage.removeItem("cur-page");
+    }
+    showTable({{.API}}, pageSize, curPage);
 </script>
 {{end}}

static/js/all-sales.js

@@ -1,6 +1,7 @@
-import { formatCurrency } from "./common.js"
+import { formatCurrency, paginator } from "./common.js"
 
-export let pageSize = 2;
+//TODO: This should be put into the localStorage if we click into a sale and
+//get back, we may want to stay at the same page before.
 export let currentPage = 1;
 
 export function showTable(api, ps, cp) {
@@ -33,7 +34,14 @@ export function showTable(api, ps, cp) {
                     let newRow = tbody.insertRow();
                     let newCell = newRow.insertCell();
 
-                    newCell.innerHTML = `<a href="/admin/sales/${i.id}">Order ${i.id}</a>`;
+                    newCell.innerHTML = `<a href="#!">Order ${i.id}</a>`;
+                    newCell.addEventListener("click", function (evt) {
+                        // put the current_page into localStorage
+                        localStorage.setItem("cur-page", data.current_page);
+
+                        // redirect
+                        location.href = `/admin/sales/${i.id}`;
+                    });
 
                     newCell = newRow.insertCell();
                     let item = document.createTextNode(i.customer.last_name + ", " + i.customer.first_name);
@@ -54,7 +62,7 @@ export function showTable(api, ps, cp) {
                     } else {
                         newCell.innerHTML = `<span class="badge bg-success">Charged</span>`
                     }
-                    paginator(api, data.last_page, data.current_page)
+                    paginator(api, data.last_page, data.current_page, showTable)
                 });
             } else {
                 let newRow = tbody.insertRow();
@@ -65,28 +73,3 @@ export function showTable(api, ps, cp) {
         });
 }
 
-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
-            }
-        })
-    }
-}
-

static/js/all-subscriptions.js

@@ -1,6 +1,5 @@
-import { formatCurrency } from "./common.js"
+import { formatCurrency, paginator } from "./common.js"
 
-export let pageSize = 2;
 export let currentPage = 1;
 
 export function showTable(api, ps, cp) {
@@ -33,7 +32,14 @@ export function showTable(api, ps, cp) {
                     let newRow = tbody.insertRow();
                     let newCell = newRow.insertCell();
 
-                    newCell.innerHTML = `<a href="/admin/subscriptions/${i.id}">Order ${i.id}</a>`;
+                    newCell.innerHTML = `<a href="#!">Order ${i.id}</a>`;
+                    newCell.addEventListener("click", function (evt) {
+                        // put the current_page into localStorage
+                        localStorage.setItem("cur-page", data.current_page);
+
+                        // redirect
+                        location.href = `/admin/subscriptions/${i.id}`;
+                    });
 
                     newCell = newRow.insertCell();
                     let item = document.createTextNode(i.customer.last_name + ", " + i.customer.first_name);
@@ -54,7 +60,7 @@ export function showTable(api, ps, cp) {
                     } else {
                         newCell.innerHTML = `<span class="badge bg-success">Charged</span>`
                     }
-                    paginator(api, data.last_page, data.current_page)
+                    paginator(api, data.last_page, data.current_page, showTable)
                 });
             } else {
                 let newRow = tbody.insertRow();
@@ -65,27 +71,3 @@ export function showTable(api, ps, cp) {
         });
 }
 
-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
-            }
-        })
-    }
-}

static/js/common.js

@@ -3,6 +3,8 @@ export let stripe;
 const payButton = document.getElementById("pay-button");
 export const processing = document.getElementById("processing-payment");
 
+export let pageSize = 2;
+
 export function hidePayButton() {
     payButton.classList.add("d-none");
     processing.classList.remove("d-none");
@@ -98,3 +100,38 @@ export function formatCurrency(amount) {
         currency: "EUR",
     });
 }
+
+export function paginator(api, pages, curPage, showTable) {
+    // Check the border case
+    if (curPage >= pages) {
+        curPage = pages
+    }
+
+    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++) {
+        if (i + 1 == curPage) {
+            html += `<li class="page-item"><a href="#!" class="page-link pager active" data-page="${i + 1}">${i + 1}</a></li>`;
+
+        } else {
+
+            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);
+            }
+        })
+    }
+}