add report pagination

src/routes/admin/reports/+page.server.ts

@@ -1,18 +1,15 @@
 import type { PageServerLoad } from './$types';
 import { redirect } from '@sveltejs/kit';
 import { env } from '$env/dynamic/public';
-import { getSession } from '$lib/server/session';
-import { Permissions } from '$lib/permissions';
 import { StrikeReason } from '$lib/server/database';
 
-export const load: PageServerLoad = async ({ parent, cookies }) => {
+export const load: PageServerLoad = async ({ parent }) => {
 	const { reportCount } = await parent();
 	if (reportCount == null) throw redirect(302, `${env.PUBLIC_BASE_PATH}/admin`);
 
 	const { self } = await parent();
 
 	return {
-		count: getSession(cookies, { permissions: [Permissions.UserRead] }) != null ? reportCount : 0,
 		strike_reasons: JSON.parse(JSON.stringify(await StrikeReason.findAll())),
 		self: self
 	};

src/routes/admin/reports/+page.svelte

@@ -20,6 +20,7 @@
 	export let data: PageData;
 
 	let currentPageReports: (typeof Report.prototype.dataValues)[] = [];
+	let currentPageTotal = 0;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	let currentPageReportsRequest: Promise<any> = Promise.resolve();
 	let reportsPerPage = 50;
@@ -30,12 +31,16 @@
 	async function fetchPageReports(
 		page: number,
 		filter: typeof reportFilter | { hash: string }
-	): Promise<typeof currentPageReports> {
+	): Promise<{ reports: typeof currentPageReports; count: number }> {
-		if (!browser) return [];
+		if (!browser) return { reports: [], count: 0 };
 
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/reports`, {
 			method: 'POST',
-			body: JSON.stringify({ ...filter, limit: reportsPerPage, from: reportPage * page })
+			body: JSON.stringify({
+				...filter,
+				limit: reportsPerPage,
+				from: reportsPerPage * page
+			})
 		});
 
 		if (activeReport) {
@@ -47,7 +52,8 @@
 	}
 
 	$: currentPageReportsRequest = fetchPageReports(reportPage, reportFilter).then((r) => {
-		currentPageReports = r;
+		currentPageReports = r.reports;
+		currentPageTotal = r.count;
 	});
 
 	async function openHashReport() {
@@ -56,7 +62,7 @@
 		const requestedHash = window.location.hash.substring(1);
 		let report = currentPageReports.find((r) => r.url_hash === requestedHash);
 		if (!report) {
-			const hashReport = (await fetchPageReports(0, { hash: requestedHash }))[0];
+			const hashReport = (await fetchPageReports(0, { hash: requestedHash })).reports[0];
 			if (hashReport) {
 				currentPageReports = [hashReport, ...currentPageReports];
 				report = hashReport;
@@ -191,6 +197,20 @@
 				</tr>
 			</tbody>
 		</table>
+		<div class="flex justify-center items-center mb-2 mt-4 w-full">
+			<div class="join">
+				<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+				{#each Array(currentPageReports.length === reportsPerPage || reportPage > 0 ? Math.ceil(currentPageTotal / reportsPerPage) || 1 : 1) as _, i}
+					<button
+						class="join-item btn"
+						class:btn-active={i === reportPage}
+						on:click={() => {
+							reportPage = i;
+						}}>{i + 1}</button
+					>
+				{/each}
+			</div>
+		</div>
 	</div>
 	{#if activeReport}
 		<div

src/routes/admin/reports/+server.ts

@@ -85,7 +85,9 @@ export const POST = (async ({ request, cookies }) => {
 		return r;
 	});
 
-	return new Response(JSON.stringify(reports));
+	return new Response(
+		JSON.stringify({ reports: reports, count: await Report.count({ where: reportFindOptions }) })
+	);
 }) satisfies RequestHandler;
 
 export const PATCH = (async ({ request, cookies }) => {