From 71960e073413de8d4c1373896cda97a9245e8474 Mon Sep 17 00:00:00 2001
From: Kworz <romain.sapet@metalizz.com>
Date: Tue, 19 Mar 2024 08:58:33 +0100
Subject: [PATCH] enhanced pagination on articles

---
 .../generics/table/TablePages.svelte          | 19 +++++++++++++------
 .../app/(scm)/scm/articles/+page.server.ts    |  6 ++++--
 .../app/(scm)/scm/articles/+page.svelte       | 11 ++++++++---
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/generics/table/TablePages.svelte b/src/lib/components/generics/table/TablePages.svelte
index 87d11e3e..ed0e7b75 100644
--- a/src/lib/components/generics/table/TablePages.svelte
+++ b/src/lib/components/generics/table/TablePages.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
     import Button from "$lib/components/generics/Button.svelte";
     import Flex from "$lib/components/generics/layout/flex.svelte";
+    import FormInput from "../inputs/FormInput.svelte";
 
+    export let itemsPerPage: number;
     export let totalPages: number;
     export let currentPage: number;
 
-    const dispatch = createEventDispatcher<{ change: number }>();
-
 </script>
 
 {#if totalPages > 1}
-    <Flex class="mt-6" items="center">
-        <span>Pages</span>
+    <Flex class="mt-6 {$$props.class}" items="center">
         {#each [...Array(totalPages).keys()] as number}
             {@const roleMinus = (currentPage <= 0) ? number + 1 === 1 : number + 1 === currentPage}
             {@const rolePlus = (currentPage > totalPages) ? number + 1 === totalPages : number + 1 === currentPage}
@@ -20,8 +18,17 @@
                 class="aspect-square w-8"
                 size="tiny"
                 role={(roleMinus || rolePlus) ? "primary" : "tertiary"}
-                on:click={() => { currentPage = (number+1); dispatch("change", currentPage); }}
+                on:click={() => currentPage = (number+1) }
             >{number + 1}</Button>
         {/each}
+
+        <span class="ml-2">Éléments par page</span>
+
+        <FormInput type="select" name="page-items-count" bind:value={itemsPerPage}>
+            <option value={50}>50</option>
+            <option value={100}>100</option>
+            <option value={200}>200</option>
+            <option value={500}>500</option>
+        </FormInput>
     </Flex>
 {/if}
\ No newline at end of file
diff --git a/src/routes/app/(scm)/scm/articles/+page.server.ts b/src/routes/app/(scm)/scm/articles/+page.server.ts
index 7d1f2d93..03db0b4f 100644
--- a/src/routes/app/(scm)/scm/articles/+page.server.ts
+++ b/src/routes/app/(scm)/scm/articles/+page.server.ts
@@ -8,11 +8,13 @@ export const load = (async ({ locals, url }) => {
     const filter = url.searchParams.has("filter") ? JSON.parse(decodeURIComponent(url.searchParams.get("filter") as string)) : undefined;
     const page = Number(url.searchParams.get("page")) || 1;
 
+    const itemsPerPage = Number(url.searchParams.get("itemsPerPage") || 50);
+
     const articles = await locals.prisma.scm_article.findMany({
         orderBy: sort,
         where: filter,
-        skip: (page - 1) * 50,
-        take: 50,
+        skip: (page - 1) * itemsPerPage,
+        take: itemsPerPage,
         include: articleIncludeQuery,
     });
 
diff --git a/src/routes/app/(scm)/scm/articles/+page.svelte b/src/routes/app/(scm)/scm/articles/+page.svelte
index fe5963a9..159fe528 100644
--- a/src/routes/app/(scm)/scm/articles/+page.svelte
+++ b/src/routes/app/(scm)/scm/articles/+page.svelte
@@ -32,6 +32,7 @@
     let filter = $page.url.searchParams.has("filter") ? JSON.parse(decodeURIComponent($page.url.searchParams.get("filter") as string)) : {};
     let sort = $page.url.searchParams.has("sort") ? JSON.parse(decodeURIComponent($page.url.searchParams.get("sort") as string)) : {};
     let tablePage = $page.url.searchParams.has("page") ? parseInt($page.url.searchParams.get("page") as string) : 0;
+    let itemsPerPage = $page.url.searchParams.has("itemsPerPage") ? parseInt($page.url.searchParams.get("itemsPerPage") as string) : 50;
     
     let selected: Array<string> = [];
 
@@ -39,9 +40,9 @@
     let deleteArticles = false;
     let deleteArticleSuspense = false;
 
-    const refresh = () => { if(browser) goto(`?filter=${encodeURIComponent(JSON.stringify(filter))}&sort=${encodeURIComponent(JSON.stringify(sort))}&page=${tablePage}`); }
+    const refresh = () => { if(browser) goto(`?filter=${encodeURIComponent(JSON.stringify(filter))}&sort=${encodeURIComponent(JSON.stringify(sort))}&page=${tablePage}&itemsPerPage=${itemsPerPage}`); }
 
-    $: filter, sort, tablePage, refresh();
+    $: filter, sort, tablePage, itemsPerPage, refresh();
 
     $: if(form?.delete) { deleteArticleSuspense = false; }
     $: if(form?.delete !== undefined && "success" in form.delete) { deleteArticles = false; selected = []; }
@@ -107,6 +108,10 @@
         { name: "consumable", type: "boolean" }]}
     />
 
+    {#if $page.data.userSettings?.app_pages_top_of_table}
+        <TablePages class="mb-6" totalPages={Math.floor(data.totalItems / itemsPerPage) + 1} bind:currentPage={tablePage} bind:itemsPerPage={itemsPerPage} />
+    {/if}
+
     <Table headers={[
         "selectAll", 
         { label: `${$_('app.generic.article')} (${data.totalItems})`, colname: "name" }, 
@@ -169,7 +174,7 @@
         {/each}
     </Table>
 
-    <TablePages totalPages={Math.floor(data.totalItems / 50) + 1} bind:currentPage={tablePage} />
+    <TablePages totalPages={Math.floor(data.totalItems / itemsPerPage) + 1} bind:currentPage={tablePage} bind:itemsPerPage={itemsPerPage} />
 {:else}
     <EmptyData on:click={() => createArticle = true } />
 {/if}