thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 10:51:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Create pagination component and paginate manage page as well

Browse Source
This commit is contained in:
thiloho
2024-10-19 21:01:45 +02:00
parent b1a59e38c1
commit 4e98df5790
6 changed files with 121 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.server.ts
View File

@@ -2,13 +2,14 @@ import type { PageServerLoad, Actions } from "./$types";
import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils";
import type { ChangeLog, User, Collab } from "$lib/db-schema";
import DiffMatchPatch from "diff-match-patch";
import { PAGINATION_MAX_ITEMS } from "$lib/utils";
export const load: PageServerLoad = async ({ parent, fetch, params, url }) => {
const userFilter = url.searchParams.get("user");
const resourceFilter = url.searchParams.get("resource");
const operationFilter = url.searchParams.get("operation");
const currentPage = Number.parseInt(url.searchParams.get("page") ?? "1");
const resultOffset = (currentPage - 1) * 20;
const resultOffset = (currentPage - 1) * PAGINATION_MAX_ITEMS;
const searchParams = new URLSearchParams();
@@ -26,7 +27,7 @@ export const load: PageServerLoad = async ({ parent, fetch, params, url }) => {
searchParams.append("operation", `eq.${operationFilter.toUpperCase()}`);
}
const constructedFetchUrl = `${baseFetchUrl}&${searchParams.toString()}&limit=20&offset=${resultOffset}`;
const constructedFetchUrl = `${baseFetchUrl}&${searchParams.toString()}&limit=${PAGINATION_MAX_ITEMS}&offset=${resultOffset}`;
const changeLog: (ChangeLog & { user: { username: User["username"] } })[] = (
await apiRequest(fetch, constructedFetchUrl, "GET", {

79
web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte
View File

@@ -11,6 +11,7 @@
import { enhance } from "$app/forms";
import { sending } from "$lib/runes.svelte";
import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
import Pagination from "$lib/components/Pagination.svelte";
const { data, form }: { data: PageServerData; form: ActionData } = $props();
@@ -162,79 +163,9 @@
</tbody>
</table>
</div>
<div class="pagination">
{#snippet commonFilterInputs()}
<input type="hidden" name="user" value={$page.url.searchParams.get("user")} />
<input type="hidden" name="resource" value={$page.url.searchParams.get("resource")} />
<input type="hidden" name="operation" value={$page.url.searchParams.get("operation")} />
{/snippet}
<p>
{$page.url.searchParams.get("page") ?? 1} / {Math.max(
Math.ceil(data.resultChangeLogCount / 20),
1
)}
</p>
<form method="GET">
<input type="hidden" name="page" value={1} />
{@render commonFilterInputs()}
<button type="submit" disabled={($page.url.searchParams.get("page") ?? "1") === "1"}
>First</button
>
</form>
<form method="GET">
<input
type="hidden"
name="page"
value={Math.max(1, Number.parseInt($page.url.searchParams.get("page") ?? "1") - 1)}
/>
{@render commonFilterInputs()}
<button type="submit" disabled={($page.url.searchParams.get("page") ?? "1") === "1"}
>Previous</button
>
</form>
<form method="GET">
<input
type="hidden"
name="page"
value={Math.min(
Math.max(Math.ceil(data.resultChangeLogCount / 20), 1),
Number.parseInt($page.url.searchParams.get("page") ?? "1") + 1
)}
/>
{@render commonFilterInputs()}
<button
type="submit"
disabled={($page.url.searchParams.get("page") ?? "1") ===
Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Next</button
>
</form>
<form method="GET">
<input
type="hidden"
name="page"
value={Math.max(Math.ceil(data.resultChangeLogCount / 20), 1)}
/>
{@render commonFilterInputs()}
<button
type="submit"
disabled={($page.url.searchParams.get("page") ?? "1") ===
Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Last</button
>
</form>
</div>
<Pagination
commonFilters={["user", "resource", "operation"]}
resultCount={data.resultChangeLogCount}
/>
</section>
</WebsiteEditor>
<style>
.pagination {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-xs);
justify-content: end;
}
.pagination > form:first-of-type {
margin-inline-start: auto;
}
</style>