pagination all-sales

This commit is contained in:
vinchent 2024-08-23 10:04:06 +02:00
parent 63585e31f6
commit c8b032236b
4 changed files with 62 additions and 11 deletions

View File

@ -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

View File

@ -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"
showTable({{.API}});
import {showTable, pageSize, currentPage} from "/static/js/all-sales.js"
showTable({{.API}}, pageSize, currentPage);
</script>
{{ end }}

View File

@ -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
}

View File

@ -1,8 +1,19 @@
import { formatCurrency } from "./common.js"
export function showTable(api) {
let token = localStorage.getItem("token");
let tbody = document.getElementById("sales-table").getElementsByTagName("tbody")[0];
export let pageSize = 2;
export let currentPage = 1;
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) {
data.forEach(function (i) {
if (data.orders) {
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
}
})
}
}