added pagination support for member LOA history

api/src/routes/loa.ts

@@ -56,9 +56,13 @@ router.get("/me", async (req: Request, res: Response) => {
 
 //get my LOA history
 router.get("/history", async (req: Request, res: Response) => {
-    const user = req.user.id;
     try {
-        const result = await getUserLOA(user);
+        const user = req.user.id;
+
+        const page = Number(req.query.page) || undefined;
+        const pageSize = Number(req.query.pageSize) || undefined;
+
+        const result = await getUserLOA(user, page, pageSize);
         res.status(200).json(result)
     } catch (error) {
         console.error(error);

api/src/services/loaService.ts

@@ -36,7 +36,10 @@ export async function getAllLOA(page = 1, pageSize = 10): Promise<PagedData<LOAR
     return output;
 }
 
-export async function getUserLOA(userId: number): Promise<LOARequest[]> {
+export async function getUserLOA(userId: number, page = 1, pageSize = 10): Promise<PagedData<LOARequest>> {
+
+    const offset = (page - 1) * pageSize;
+
     const result: LOARequest[] = await pool.query(`
         SELECT loa.*, members.name, t.name AS type_name
             FROM leave_of_absences AS loa
@@ -53,8 +56,12 @@ export async function getUserLOA(userId: number): Promise<LOARequest[]> {
                     WHEN loa.closed IS NOT NULL THEN 4
                 END,
                 loa.start_date DESC
-            `, [userId])
-    return result;
+                LIMIT ? OFFSET ?;`, [userId, pageSize, offset])
+
+    let loaCount = Number((await pool.query(`SELECT COUNT(*) as count FROM leave_of_absences WHERE member_id = ?;`, [userId]))[0].count);
+    let pageCount = loaCount / pageSize;
+    let output: PagedData<LOARequest> = { data: result, pagination: { page: page, pageSize: pageSize, total: loaCount, totalPages: pageCount } }
+    return output;
 }
 
 export async function getUserActiveLOA(userId: number): Promise<LOARequest[]> {

ui/src/api/loa.ts

@@ -85,8 +85,18 @@ export async function getAllLOAs(page?: number, pageSize?: number): Promise<Page
     });
 }
 
-export function getMyLOAs(): Promise<LOARequest[]> {
-    return fetch(`${addr}/loa/history`, {
+export function getMyLOAs(page?: number, pageSize?: number): Promise<PagedData<LOARequest>> {
+    const params = new URLSearchParams();
+
+    if (page !== undefined) {
+        params.set("page", page.toString());
+    }
+
+    if (pageSize !== undefined) {
+        params.set("pageSize", pageSize.toString());
+    }
+
+    return fetch(`${addr}/loa/history?${params}`, {
         method: "GET",
         credentials: 'include',
         headers: {

ui/src/components/loa/loaList.vue

@@ -59,7 +59,9 @@ async function loadLOAs() {
         LOAList.value = result.data;
         pageData.value = result.pagination;
     } else {
-        LOAList.value = await getMyLOAs();
+        let result = await getMyLOAs(pageNum.value, pageSize.value);
+        LOAList.value = result.data;
+        pageData.value = result.pagination;
     }
 }