feat: add pagination to point history overview

src/routes/admin/points.ts

@@ -1,13 +1,24 @@
 import { Express } from 'express';
 import { CodamCoalitionScore, PrismaClient } from '@prisma/client';
 import fs from 'fs';
-import { fetchSingleApiPage, getAPIClient } from '../../utils';
+import { fetchSingleApiPage, getAPIClient, getPageNav } from '../../utils';
 import { ExpressIntraUser } from '../../sync/oauth';
 import { createScore, handleFixedPointScore, shiftScore } from '../../handlers/points';
 
+const SCORES_PER_PAGE = 100;
+
 export const setupAdminPointsRoutes = function(app: Express, prisma: PrismaClient): void {
 	app.get('/admin/points/history', async (req, res) => {
-		// Retrieve all scores
+		// Calculate the total amount of pages
+		const totalScores = await prisma.codamCoalitionScore.count();
+		const totalPages = Math.ceil(totalScores / SCORES_PER_PAGE);
+		const pageNum = (req.query.page ? parseInt(req.query.page as string) : 1);
+		if (isNaN(pageNum) || pageNum < 1 || pageNum > totalPages) {
+			return res.status(404).send('Page not found');
+		}
+		const offset = (pageNum - 1) * SCORES_PER_PAGE;
+
+		// Retrieve the scores to be displayed on the page
 		const scores = await prisma.codamCoalitionScore.findMany({
 			select: {
 				id: true,
@@ -33,6 +44,8 @@ export const setupAdminPointsRoutes = function(app: Express, prisma: PrismaClien
 			orderBy: {
 				created_at: 'desc',
 			},
+			take: SCORES_PER_PAGE,
+			skip: offset,
 		});
 
 		// Retrieve all coalitions
@@ -48,9 +61,15 @@ export const setupAdminPointsRoutes = function(app: Express, prisma: PrismaClien
 			coalitions[row.intra_coalition.id] = row;
 		}
 
+		// Create a list of pages for the pagination nav
+		const pageNav = getPageNav(pageNum, totalPages);
+
 		return res.render('admin/points/history.njk', {
 			scores,
 			coalitions,
+			pageNum,
+			totalPages,
+			pageNav,
 		});
 	});
 

src/utils.ts

@@ -70,6 +70,60 @@ export const getCoalitionIds = async function(prisma: PrismaClient): Promise<any
 	return returnable;
 };
 
+export interface PageNav {
+	num: number;
+	active: boolean;
+	text: string;
+};
+
+export const getPageNav = function(currentPage: number, totalPages: number, maxPages: number = 7): PageNav[] {
+	const pageNav: { num: number, active: boolean, text: string }[] = [];
+	const halfMaxPages = Math.floor(maxPages / 2);
+	let startPage = Math.max(1, currentPage - halfMaxPages);
+	let endPage = Math.min(totalPages, startPage + maxPages - 1);
+	if (endPage - startPage < maxPages - 1) {
+		startPage = Math.max(1, endPage - maxPages + 1);
+	}
+	if (endPage - startPage < maxPages - 1) {
+		endPage = Math.min(totalPages, startPage + maxPages - 1);
+	}
+	if (endPage - startPage < maxPages - 1) {
+		startPage = Math.max(1, endPage - maxPages + 1);
+	}
+	if (startPage > 1) {
+		pageNav.push({
+			num: 1,
+			active: false,
+			text: 'First',
+		});
+		pageNav.push({
+			num: currentPage - 1,
+			active: false,
+			text: '<',
+		});
+	}
+	for (let i = startPage; i <= endPage; i++) {
+		pageNav.push({
+			num: i,
+			active: i === currentPage,
+			text: i.toString(),
+		});
+	}
+	if (endPage < totalPages) {
+		pageNav.push({
+			num: currentPage + 1,
+			active: false,
+			text: '>',
+		});
+		pageNav.push({
+			num: totalPages,
+			active: false,
+			text: 'Last',
+		});
+	}
+	return pageNav;
+};
+
 export const parseTeamInAPISearcher = async function(prisma: PrismaClient, teams: any): Promise<any> {
 	const projects = await prisma.intraProject.findMany({
 		select: {

templates/admin/points/history.njk

@@ -9,6 +9,8 @@
 	</ol>
 </nav>
 
+{{ pagination(pageNav) }}
+
 <table class="table coalition-colored">
 	<thead>
 		<th scope="col">Date</th>
@@ -41,6 +43,9 @@
 		{% endfor %}
 	</tbody>
 </table>
+
+{{ pagination(pageNav) }}
+
 <script src="/js/reactive-button.js"></script>
 <script>
 function buttonHandler(event) {

templates/base.njk

@@ -1,3 +1,13 @@
+{% macro pagination(pageNav) %}
+{# Refer to interface PageNav in utils.ts for an overview of what a PageNav item contains #}
+<nav aria-label="Page navigation" class="d-flex justify-content-center">
+	<ul class="pagination">
+		{% for pageNavItem in pageNav %}
+			<li class="page-item{{ ' active' if pageNavItem.active }}" {{ 'aria-current="page"' if pageNavItem.active }}><a class="page-link" href="/admin/points/history?page={{ pageNavItem.num }}">{{ pageNavItem.text }}</a></li>
+		{% endfor %}
+	</ul>
+</nav>
+{% endmacro %}
 <!DOCTYPE html>
 <html lang="en" data-bs-theme="dark">
 <head>