diff --git a/web-app/src/lib/components/Pagination.svelte b/web-app/src/lib/components/Pagination.svelte new file mode 100644 index 0000000..a2237dd --- /dev/null +++ b/web-app/src/lib/components/Pagination.svelte @@ -0,0 +1,82 @@ + + + + + diff --git a/web-app/src/lib/utils.ts b/web-app/src/lib/utils.ts index edb07b3..76e697d 100644 --- a/web-app/src/lib/utils.ts +++ b/web-app/src/lib/utils.ts @@ -179,6 +179,8 @@ export const enhanceForm = (options?: { }; }; +export const PAGINATION_MAX_ITEMS = 20; + export const hexToHSL = (hex: string) => { const r = parseInt(hex.slice(1, 3), 16) / 255; const g = parseInt(hex.slice(3, 5), 16) / 255; diff --git a/web-app/src/routes/(authenticated)/manage/+page.server.ts b/web-app/src/routes/(authenticated)/manage/+page.server.ts index 3fb9be7..13da20e 100644 --- a/web-app/src/routes/(authenticated)/manage/+page.server.ts +++ b/web-app/src/routes/(authenticated)/manage/+page.server.ts @@ -1,13 +1,16 @@ import type { Actions, PageServerLoad } from "./$types"; -import { API_BASE_PREFIX } from "$lib/server/utils"; -import { apiRequest } from "$lib/server/utils"; +import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils"; import type { Website, User } from "$lib/db-schema"; +import { PAGINATION_MAX_ITEMS } from "$lib/utils"; + +export const load: PageServerLoad = async ({ fetch, url }) => { + const currentPage = Number.parseInt(url.searchParams.get("page") ?? "1"); + const resultOffset = (currentPage - 1) * PAGINATION_MAX_ITEMS; -export const load: PageServerLoad = async ({ fetch }) => { const usersWithWebsites: (User & { website: Website[] })[] = ( await apiRequest( fetch, - `${API_BASE_PREFIX}/user?select=*,website!user_id(*)&order=created_at`, + `${API_BASE_PREFIX}/user?select=*,website!user_id(*)&order=created_at&limit=${PAGINATION_MAX_ITEMS}&offset=${resultOffset}`, "GET", { returnData: true @@ -15,9 +18,19 @@ export const load: PageServerLoad = async ({ fetch }) => { ) ).data; + const resultUsers = await apiRequest(fetch, `${API_BASE_PREFIX}/user`, "HEAD", { + headers: { + Prefer: "count=exact" + }, + returnData: true + }); + + const resultUsersCount = Number(resultUsers.data.headers.get("content-range")?.split("/").at(-1)); + return { usersWithWebsites, - API_BASE_PREFIX + API_BASE_PREFIX, + resultUsersCount }; }; diff --git a/web-app/src/routes/(authenticated)/manage/+page.svelte b/web-app/src/routes/(authenticated)/manage/+page.svelte index c951d1a..c0d073c 100644 --- a/web-app/src/routes/(authenticated)/manage/+page.svelte +++ b/web-app/src/routes/(authenticated)/manage/+page.svelte @@ -7,6 +7,7 @@ import { enhanceForm } from "$lib/utils"; import { sending } from "$lib/runes.svelte"; import DateTime from "$lib/components/DateTime.svelte"; + import Pagination from "$lib/components/Pagination.svelte"; const { data, form }: { data: PageServerData; form: ActionData } = $props(); @@ -18,9 +19,15 @@ {/if}
-

- All users -

+
+

+ All users +

+

+ {data.resultUsersCount.toLocaleString("en", { useGrouping: true })} + result(s) +

+
@@ -117,6 +124,7 @@
+