enhanced pagination on articles

src/lib/components/generics/table/TablePages.svelte

@@ -1,27 +1,34 @@
 <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}
             <Button 
                 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}

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,
     });
 

src/routes/app/(scm)/scm/articles/+page.svelte

@@ -32,16 +32,17 @@
     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> = [];
 
     let createArticle = false;
     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}