pagination all-sales

cmd/api/handlers-api.go

@@ -522,12 +522,20 @@ func (app *application) AllSales(w http.ResponseWriter, r *http.Request) {
 	}
 	err := app.readJSON(w, r, &payload)
 	if err != nil {
+		app.errorLog.Println(err)
 		app.badRequest(w, r, err)
+		return
 	}
 
-	allSales, lastPage, totalRecords, err := app.DB.GetAllOrdersPaginated(false, 2, 1)
+	allSales, lastPage, totalRecords, err := app.DB.GetAllOrdersPaginated(
+		false,
+		payload.PageSize,
+		payload.CurrentPage,
+	)
 	if err != nil {
+		app.errorLog.Println(err)
 		app.badRequest(w, r, err)
+		return
 	}
 
 	var resp struct {
@@ -538,7 +546,7 @@ func (app *application) AllSales(w http.ResponseWriter, r *http.Request) {
 		Orders       []*models.Order `json:"orders"`
 	}
 
-	resp.CurrentPage = 1
+	resp.CurrentPage = payload.CurrentPage
 	resp.PageSize = payload.PageSize
 	resp.LastPage = lastPage
 	resp.TotalRecords = totalRecords

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

@@ -18,10 +18,14 @@ All Sales
     <tbody>
     </tbody>
 </table>
+<nav>
+    <ul id="paginator" class="pagination">
+    </ul>
+</nav>
 {{ end }}
 {{ define "js" }}
 <script type="module">
-    import {showTable} from "/static/js/all-sales.js"
+    import {showTable, pageSize, currentPage} from "/static/js/all-sales.js"
-    showTable({{.API}});
+    showTable({{.API}}, pageSize, currentPage);
 </script>
 {{ end }}

internal/models/models.go

@@ -443,7 +443,7 @@ func (m *DBModel) GetAllOrdersPaginated(
 		return nil, 0, 0, err
 	}
 
-	lastPage := totalRecords / pageSize
+	lastPage := totalRecords/pageSize + 1
 
 	return orders, lastPage, totalRecords, nil
 }

static/js/all-sales.js

@@ -1,8 +1,19 @@
 import { formatCurrency } from "./common.js"
 
-export function showTable(api) {
+export let pageSize = 2;
-    let token = localStorage.getItem("token");
+export let currentPage = 1;
-    let tbody = document.getElementById("sales-table").getElementsByTagName("tbody")[0];
+
+export function showTable(api, ps, cp) {
+    const token = localStorage.getItem("token");
+    const tbody = document.getElementById("sales-table").getElementsByTagName("tbody")[0];
+
+    // reset tbody
+    tbody.innerHTML = ``
+
+    const body = {
+        page_size: parseInt(ps, 10),
+        page: parseInt(cp, 10),
+    };
 
     const requestOptions = {
         method: 'post',
@@ -11,13 +22,14 @@ export function showTable(api) {
             'Content-Type': 'application/json',
             'Authorization': 'Bearer ' + token,
         },
+        body: JSON.stringify(body),
     };
 
     fetch(api + "/api/admin/all-sales", requestOptions)
         .then(response => response.json())
         .then(function (data) {
-            if (data) {
+            if (data.orders) {
-                data.forEach(function (i) {
+                data.orders.forEach(function (i) {
                     let newRow = tbody.insertRow();
                     let newCell = newRow.insertCell();
 
@@ -42,12 +54,39 @@ 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();
                 let newCell = newRow.insertCell();
-                newCell.setAttribute("colspan", "4");
+                newCell.setAttribute("colspan", "5");
                 newCell.innerHTML = "No data available";
             }
         });
 }
+
+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
+            }
+        })
+    }
+}
+