feat: la pagination fonctionne

il ne reste plus qu'à styliser un peu tout

Dockerfile

@@ -21,7 +21,7 @@ RUN unzip /tmp/pb.zip -d /pb/
 # download deno
 RUN mkdir -p /home/wizou/.local/bin
 ENV PATH=$PATH:/home/wizou/.local/bin
-COPY --from=denoland/deno:bin-2.0.2 --chown=wizou:wizou /deno /home/wizou/.local/bin
+COPY --from=denoland/deno:bin-2.0.6 --chown=wizou:wizou /deno /home/wizou/.local/bin
 
 
 FROM base AS build

src/components/ListeExtractions.svelte

@@ -1,18 +1,33 @@
 <script lang="ts">
-  import { pb } from '$lib/database';
   import { getExtractions, type Extraction } from '$lib/extractions';
-  import Loader from './Loader.svelte';
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import Pagination from './Pagination.svelte';
   import ResumeExtraction from './ResumeExtraction.svelte';
 
-  let data = getExtractions(1, 20);
+  let extractions: Extraction[] = $state([]);
+  let pageEnCours = $derived(parseInt($page.url.searchParams.get('page') ?? '1'));
+  let elementsParPage = $derived(parseInt($page.url.searchParams.get('elementsParPage') ?? '3'));
+  let totalPages = $state(0);
+
+  $effect(() => {
+    getExtractions(pageEnCours, elementsParPage).then((data) => {
+      extractions = data.items as Extraction[];
+      totalPages = data.totalPages;
+    });
+  });
 </script>
 
 <div class="w-full flex flex-col">
-  {#await data}
-    <Loader />
-  {:then extractions}
-    {#each extractions.items as extraction}
-      <ResumeExtraction extraction={extraction as Extraction} />
-    {/each}
-  {/await}
+  <div class="flex flex-row items-center h-12 rounded-3xl bg-white border">
+    <input type="text" class="grow h-full rounded-l-3xl px-4 border-r" />
+    <span class="px-2">🔍</span>
+  </div>
+  {#each extractions as extraction}
+    <ResumeExtraction extraction={extraction as Extraction} />
+  {/each}
+
+  <div>
+    <Pagination page={pageEnCours} {totalPages} />
+  </div>
 </div>

src/components/Pagination.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  let props: {
+    page: number;
+    totalPages: number;
+  } = $props();
+
+  function currentUrlWithPage(pageNumber: number): string {
+    let params = new URLSearchParams($page.url.searchParams.toString());
+    params.set('page', pageNumber.toString());
+
+    return `?${params.toString()}`;
+  }
+
+  let pagePrecedente = $derived(props.page - 1);
+  let pageSuivante = $derived(props.page + 1);
+</script>
+
+<div class="flex flex-row">
+  {#if props.page > 1}
+    <a href={currentUrlWithPage(pagePrecedente)}><span>⬅️ Page précédente</span></a>
+  {/if}
+
+  {#if props.page < props.totalPages}
+    <a href={currentUrlWithPage(pageSuivante)}><span>Page suivante ➡️</span></a>
+  {/if}
+</div>

src/lib/schemas.ts

@@ -6,7 +6,7 @@ export const loginSchema = z.object({
 });
 
 export const creationExtractionSchema = z.object({
-  nom: z.string().min(5).max(50),
+  nom: z.string().min(5).max(100),
   poids_cafe: z.number().positive(),
   poids_boisson: z.number().positive(),
   utilisateur: z.string(),

src/routes/+page.svelte

@@ -3,14 +3,15 @@
   import { currentUser } from '$lib/login.svelte';
   import GrosBouton from '../components/GrosBouton.svelte';
   import ListeExtractions from '../components/ListeExtractions.svelte';
+  import Recherche from '../components/Recherche.svelte';
 </script>
 
-<div class="p-2 flex flex-col">
+<div class="p-2 flex flex-col gap-2">
   {#if currentUser.value != null}
     <GrosBouton customClass="bg-green-300 disabled:bg-green-100" onclick={() => goto('/new')}>
       ➕ Nouvelle extraction
     </GrosBouton>
-
+    <Recherche />
     <ListeExtractions />
   {:else}
     <span>Salut ! Ici on fait du café !</span>