vinchent/udemy-go-web-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve pagination

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

41
static/js/all-sales.js
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 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
}
})
}
}

38
static/js/all-subscriptions.js
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 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
}
})
}
}

37
static/js/common.js
View File

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