improve pagination

This commit is contained in:
vinchent 2024-08-23 10:51:20 +02:00
parent 0f0c896065
commit 0e7b9d8c20
6 changed files with 79 additions and 61 deletions

View File

@ -403,6 +403,7 @@ func (app *application) VirtualTerminalPaymentSucceeded(w http.ResponseWriter, r
_, err = app.SaveTransaction(txn) _, err = app.SaveTransaction(txn)
if err != nil { if err != nil {
app.badRequest(w, r, err) app.badRequest(w, r, err)
return
} }
app.writeJSON(w, http.StatusOK, txn) 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) order, err := app.DB.GetOrderByID(orderID)
if err != nil { if err != nil {
app.badRequest(w, r, err) app.badRequest(w, r, err)
return
} }
app.writeJSON(w, http.StatusOK, order) app.writeJSON(w, http.StatusOK, order)
} }

View File

@ -25,7 +25,14 @@ All Sales
{{ end }} {{ end }}
{{ define "js" }} {{ define "js" }}
<script type="module"> <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> </script>
{{ end }} {{ end }}

View File

@ -28,7 +28,14 @@ All Subscriptions
{{define "js"}} {{define "js"}}
<script type="module"> <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> </script>
{{end}} {{end}}

View File

@ -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 let currentPage = 1;
export function showTable(api, ps, cp) { export function showTable(api, ps, cp) {
@ -33,7 +34,14 @@ export function showTable(api, ps, cp) {
let newRow = tbody.insertRow(); let newRow = tbody.insertRow();
let newCell = newRow.insertCell(); 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(); newCell = newRow.insertCell();
let item = document.createTextNode(i.customer.last_name + ", " + i.customer.first_name); let item = document.createTextNode(i.customer.last_name + ", " + i.customer.first_name);
@ -54,7 +62,7 @@ export function showTable(api, ps, cp) {
} else { } else {
newCell.innerHTML = `<span class="badge bg-success">Charged</span>` 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 { } else {
let newRow = tbody.insertRow(); 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
}
})
}
}

View File

@ -1,6 +1,5 @@
import { formatCurrency } from "./common.js" import { formatCurrency, paginator } from "./common.js"
export let pageSize = 2;
export let currentPage = 1; export let currentPage = 1;
export function showTable(api, ps, cp) { export function showTable(api, ps, cp) {
@ -33,7 +32,14 @@ export function showTable(api, ps, cp) {
let newRow = tbody.insertRow(); let newRow = tbody.insertRow();
let newCell = newRow.insertCell(); 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(); newCell = newRow.insertCell();
let item = document.createTextNode(i.customer.last_name + ", " + i.customer.first_name); let item = document.createTextNode(i.customer.last_name + ", " + i.customer.first_name);
@ -54,7 +60,7 @@ export function showTable(api, ps, cp) {
} else { } else {
newCell.innerHTML = `<span class="badge bg-success">Charged</span>` 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 { } else {
let newRow = tbody.insertRow(); 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
}
})
}
}

View File

@ -3,6 +3,8 @@ export let stripe;
const payButton = document.getElementById("pay-button"); const payButton = document.getElementById("pay-button");
export const processing = document.getElementById("processing-payment"); export const processing = document.getElementById("processing-payment");
export let pageSize = 2;
export function hidePayButton() { export function hidePayButton() {
payButton.classList.add("d-none"); payButton.classList.add("d-none");
processing.classList.remove("d-none"); processing.classList.remove("d-none");
@ -98,3 +100,38 @@ export function formatCurrency(amount) {
currency: "EUR", 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);
}
})
}
}