sveltekit: pagination

frontend/svelte-kit/.eslintrc.cjs

@@ -30,5 +30,14 @@ module.exports = {
       },
     },
   ],
-  rules: {},
+  rules: {
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
 };

frontend/svelte-kit/src/lib/components/shared/pagination.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  export let currentPage: number;
+  export let totalPages: number;
+  export let size: number;
+</script>
+
+<div class="join">
+  {#if currentPage > 1}
+    <a
+      class="btn btn-primary join-item"
+      href="{$page.url.pathname}?page={currentPage - 1}&size={size}"
+    >
+      Previous
+    </a>
+  {/if}
+  {#each [2, 1] as i}
+    {#if currentPage - i > 0}
+      <a
+        class="btn btn-primary join-item"
+        href="{$page.url.pathname}?page={currentPage - i}&size={size}"
+      >
+        {currentPage - i}
+      </a>
+    {/if}
+  {/each}
+  <span class="btn btn-primary join-item btn-active">{currentPage}</span>
+  {#each Array(2) as _, i}
+    {#if currentPage + (i + 1) <= totalPages}
+      <a
+        class="btn btn-primary join-item"
+        href="{$page.url.pathname}?page={currentPage + (i + 1)}&size={size}"
+      >
+        {currentPage + (i + 1)}
+      </a>
+    {/if}
+  {/each}
+  {#if currentPage < totalPages}
+    <a
+      class="btn btn-primary join-item"
+      href="{$page.url.pathname}?page={currentPage + 1}&size={size}">Next</a
+    >
+  {/if}
+</div>

frontend/svelte-kit/src/lib/models/shared/pageable.ts

@@ -0,0 +1,4 @@
+export interface Pageable<T> {
+  data: T[];
+  total: number;
+}

frontend/svelte-kit/src/routes/admin/+page.server.ts

@@ -1,22 +1,30 @@
+import type { Pageable } from '$lib/models/shared/pageable';
 import { RoleName } from '$lib/models/user/role';
 import type { User } from '$lib/models/user/user';
 import { makeRequest } from '$lib/server/apis/api';
 import { HttpRequest } from '$lib/server/utils/util';
 import { error, fail, type Cookies, type NumericRange } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 
-export const load = (async ({ cookies }) => {
+export const load = (async ({ cookies, url }) => {
+  let page = Number(url.searchParams.get('page')) || 1;
+  let size = Number(url.searchParams.get('size')) || 10;
+
+  if (page < 1) page = 1;
+  if (size < 1) size = 10;
+
   const response = await makeRequest({
     method: HttpRequest.GET,
-    path: '/admin/users',
+    path: `/admin/users?page=${page}&size=${size}`,
     auth: cookies.get('accessToken'),
   });
 
   if ('error' in response)
     error(response.status as NumericRange<400, 599>, { message: response.error });
 
   return {
-    users: response as User[],
+    users: response as Pageable<User>,
+    pageable: { page, size },
     roles: [{ name: RoleName.USER }, { name: RoleName.ADMIN }],
   };
 }) satisfies PageServerLoad;

frontend/svelte-kit/src/routes/admin/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Pagination from '$lib/components/shared/pagination.svelte';
   import CheckCircleIcon from '$lib/icons/check-circle.svelte';
   import CloseCircleIcon from '$lib/icons/close-circle.svelte';
   import LockCloseIcon from '$lib/icons/lock-close.svelte';
@@ -36,14 +37,17 @@
     dialog.showModal();
     selectedUser = user;
   };
+
+  $: totalPages = Math.ceil(data.users.total / data.pageable.size);
+  $: currentPage = data.pageable.page;
 </script>
 
 <section class="py-10 md:py-16">
   <div class="flex items-center justify-center">
-    <div class="card mx-auto w-auto bg-base-200 p-8 shadow-xl">
+    <div class="card bg-base-200 mx-auto w-auto p-8 shadow-xl 2xl:w-2/3">
       <div class="flex flex-col gap-8">
         <h1 class="text-center text-3xl font-bold">Users</h1>
-        <table class="table table-zebra">
+        <table class="table-zebra table">
           <thead>
             <tr>
               {#each tableFieldsLabels as label}
@@ -52,7 +56,7 @@
             </tr>
           </thead>
           <tbody>
-            {#each data.users as user}
+            {#each data.users.data as user}
               <tr>
                 <th>{user.id}</th>
                 <th>{user.firstName}</th>
@@ -115,6 +119,9 @@
             {/each}
           </tbody>
         </table>
+        <div class="flex items-end justify-end">
+          <Pagination {currentPage} {totalPages} size={data.pageable.size} />
+        </div>
       </div>
     </div>
   </div>