pagination all-subscriptions

cmd/api/handlers-api.go

@@ -556,11 +556,43 @@ func (app *application) AllSales(w http.ResponseWriter, r *http.Request) {
 }
 
 func (app *application) AllSubscriptions(w http.ResponseWriter, r *http.Request) {
-	allSubscriptions, err := app.DB.GetAllOrders(true)
+	var payload struct {
-	if err != nil {
+		PageSize    int `json:"page_size"`
-		app.badRequest(w, r, err)
+		CurrentPage int `json:"page"`
 	}
-	app.writeJSON(w, http.StatusOK, allSubscriptions)
+	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(
+		true,
+		payload.PageSize,
+		payload.CurrentPage,
+	)
+	if err != nil {
+		app.errorLog.Println(err)
+		app.badRequest(w, r, err)
+		return
+	}
+
+	var resp struct {
+		CurrentPage  int             `json:"current_page"`
+		PageSize     int             `json:"page_size"`
+		LastPage     int             `json:"last_page"`
+		TotalRecords int             `json:"total_records"`
+		Orders       []*models.Order `json:"orders"`
+	}
+
+	resp.CurrentPage = payload.CurrentPage
+	resp.PageSize = payload.PageSize
+	resp.LastPage = lastPage
+	resp.TotalRecords = totalRecords
+	resp.Orders = allSales
+
+	app.writeJSON(w, http.StatusOK, resp)
 }
 
 func (app *application) GetSale(w http.ResponseWriter, r *http.Request) {

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

@@ -20,11 +20,15 @@ All Subscriptions
     <tbody>
     </tbody>
 </table>
+<nav>
+    <ul id="paginator" class="pagination">
+    </ul>
+</nav>
 {{end}}
 
 {{define "js"}}
 <script type="module">
-    import {showTable} from "/static/js/all-subscriptions.js"
+    import {showTable, pageSize, currentPage} from "/static/js/all-subscriptions.js"
-    showTable({{.API}});
+    showTable({{.API}}, pageSize, currentPage);
 </script>
 {{end}}

internal/models/models.go

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

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) {
+            if (data.orders) {
-                data.forEach(function (i) {
+                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
+            }
+        })
+    }
+}