implemented pagination, header polish, and new display fixes

api/src/routes/loa.ts

@@ -66,9 +66,11 @@ router.get("/history", async (req: Request, res: Response) => {
     }
 })
 
-router.get('/all', [requireRole("17th Administrator")], async (req, res) => {
+router.get('/all', [requireRole("17th Administrator")], async (req: Request, res: Response) => {
     try {
-        const result = await getAllLOA();
+        const page = Number(req.query.page) || undefined;
+        const pageSize = Number(req.query.pageSize) || undefined;
+        const result = await getAllLOA(page, pageSize);
         res.status(200).json(result)
     } catch (error) {
         console.error(error);

api/src/services/loaService.ts

@@ -1,12 +1,13 @@
 import { toDateTime } from "@app/shared/utils/time";
 import pool from "../db";
 import { LOARequest, LOAType } from '@app/shared/types/loa'
+import { PagedData } from '@app/shared/types/pagination'
 
 export async function getLoaTypes(): Promise<LOAType[]> {
     return await pool.query('SELECT * FROM leave_of_absences_types;');
 }
 
-export async function getAllLOA(page = 1, pageSize = 10): Promise<LOARequest[]> {
+export async function getAllLOA(page = 1, pageSize = 10): Promise<PagedData<LOARequest>> {
     const offset = (page - 1) * pageSize;
 
     const sql = `
@@ -26,9 +27,13 @@ export async function getAllLOA(page = 1, pageSize = 10): Promise<LOARequest[]>
             loa.start_date DESC
         LIMIT ? OFFSET ?;
     `;
+    let loaList: LOARequest[] = await pool.query(sql, [pageSize, offset]) as LOARequest[];
 
-    let res: LOARequest[] = await pool.query(sql, [pageSize, offset]) as LOARequest[];
-    return res;
+    let loaCount = Number((await pool.query(`SELECT COUNT(*) as count FROM leave_of_absences;`))[0].count);
+    let pageCount = loaCount / pageSize;
+
+    let output: PagedData<LOARequest> = { data: loaList, pagination: { page: page, pageSize: pageSize, total: loaCount, totalPages: pageCount } }
+    return output;
 }
 
 export async function getUserLOA(userId: number): Promise<LOARequest[]> {