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

2
cmd/api/handlers-api.go
View File

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

11
cmd/web/templates/all-sales.page.gohtml
View File

@ -25,7 +25,14 @@ All Sales
{{ end }}
{{ define "js" }}
<script type="module">
import {showTable, pageSize, currentPage} from "/static/js/all-sales.js"
showTable({{.API}}, pageSize, currentPage);
import {pageSize} from "/static/js/common.js"
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>
{{ end }}

11
cmd/web/templates/all-subscriptions.page.gohtml
View File

@ -28,7 +28,14 @@ All Subscriptions
{{define "js"}}
<script type="module">
import {showTable, pageSize, currentPage} from "/static/js/all-subscriptions.js"
showTable({{.API}}, pageSize, currentPage);
import {pageSize} from "/static/js/common.js"
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>
{{end}}

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