diff --git a/frontend/svelte-kit/.eslintrc.cjs b/frontend/svelte-kit/.eslintrc.cjs index 1e0814b5..b7a0a5ae 100644 --- a/frontend/svelte-kit/.eslintrc.cjs +++ b/frontend/svelte-kit/.eslintrc.cjs @@ -30,5 +30,14 @@ module.exports = { }, }, ], - rules: {}, + rules: { + '@typescript-eslint/no-unused-vars': [ + 'error', + { + argsIgnorePattern: '^_', + varsIgnorePattern: '^_', + caughtErrorsIgnorePattern: '^_', + }, + ], + }, }; diff --git a/frontend/svelte-kit/src/lib/components/shared/pagination.svelte b/frontend/svelte-kit/src/lib/components/shared/pagination.svelte new file mode 100644 index 00000000..bd5d7db0 --- /dev/null +++ b/frontend/svelte-kit/src/lib/components/shared/pagination.svelte @@ -0,0 +1,45 @@ + + +
+ {#if currentPage > 1} + + Previous + + {/if} + {#each [2, 1] as i} + {#if currentPage - i > 0} + + {currentPage - i} + + {/if} + {/each} + {currentPage} + {#each Array(2) as _, i} + {#if currentPage + (i + 1) <= totalPages} + + {currentPage + (i + 1)} + + {/if} + {/each} + {#if currentPage < totalPages} + Next + {/if} +
diff --git a/frontend/svelte-kit/src/lib/models/shared/pageable.ts b/frontend/svelte-kit/src/lib/models/shared/pageable.ts new file mode 100644 index 00000000..49a37c31 --- /dev/null +++ b/frontend/svelte-kit/src/lib/models/shared/pageable.ts @@ -0,0 +1,4 @@ +export interface Pageable { + data: T[]; + total: number; +} diff --git a/frontend/svelte-kit/src/routes/admin/+page.server.ts b/frontend/svelte-kit/src/routes/admin/+page.server.ts index 8f91644e..44d83715 100644 --- a/frontend/svelte-kit/src/routes/admin/+page.server.ts +++ b/frontend/svelte-kit/src/routes/admin/+page.server.ts @@ -1,3 +1,4 @@ +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'; @@ -5,10 +6,16 @@ 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'), }); @@ -16,7 +23,8 @@ export const load = (async ({ cookies }) => { error(response.status as NumericRange<400, 599>, { message: response.error }); return { - users: response as User[], + users: response as Pageable, + pageable: { page, size }, roles: [{ name: RoleName.USER }, { name: RoleName.ADMIN }], }; }) satisfies PageServerLoad; diff --git a/frontend/svelte-kit/src/routes/admin/+page.svelte b/frontend/svelte-kit/src/routes/admin/+page.svelte index 409bc3e2..1d6f8997 100644 --- a/frontend/svelte-kit/src/routes/admin/+page.svelte +++ b/frontend/svelte-kit/src/routes/admin/+page.svelte @@ -1,4 +1,5 @@
-
+

Users

- +
{#each tableFieldsLabels as label} @@ -52,7 +56,7 @@ - {#each data.users as user} + {#each data.users.data as user} @@ -115,6 +119,9 @@ {/each}
{user.id} {user.firstName}
+
+ +