feat: liste des extractions

pb_migrations/1729501485_updated_extractions.js

@@ -0,0 +1,52 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("a3ohzxb6zpqym11")
+
+  collection.createRule = ""
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "tig9x7zm",
+    "name": "utilisateur",
+    "type": "relation",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "collectionId": "_pb_users_auth_",
+      "cascadeDelete": false,
+      "minSelect": null,
+      "maxSelect": 1,
+      "displayFields": null
+    }
+  }))
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("a3ohzxb6zpqym11")
+
+  collection.createRule = null
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "tig9x7zm",
+    "name": "utilisateur",
+    "type": "relation",
+    "required": false,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "collectionId": "_pb_users_auth_",
+      "cascadeDelete": false,
+      "minSelect": null,
+      "maxSelect": 1,
+      "displayFields": null
+    }
+  }))
+
+  return dao.saveCollection(collection)
+})

pb_migrations/1729502042_updated_extractions.js

@@ -0,0 +1,18 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("a3ohzxb6zpqym11")
+
+  collection.listRule = "@request.auth.id = utilisateur.id"
+  collection.createRule = "@request.data.utilisateur.id = @request.auth.id"
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("a3ohzxb6zpqym11")
+
+  collection.listRule = null
+  collection.createRule = ""
+
+  return dao.saveCollection(collection)
+})

pb_migrations/1729505120_updated_extractions.js

@@ -0,0 +1,16 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("a3ohzxb6zpqym11")
+
+  collection.viewRule = "@request.auth.id = utilisateur.id"
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("a3ohzxb6zpqym11")
+
+  collection.viewRule = null
+
+  return dao.saveCollection(collection)
+})

src/components/GrosBouton.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Loader from './Loader.svelte';
+
+  type Props = {
+    children: Snippet;
+    loading?: boolean;
+    onclick?: () => void;
+  };
+
+  let props: Props = $props();
+</script>
+
+<button
+  class="w-full
+        bg-green-300
+        disabled:bg-green-100
+        py-3
+        rounded-lg
+        hover:shadow-md
+        disabled:hover:shadow-none
+        flex
+        flex-row
+        gap-2
+        justify-center
+        items-center
+        h-12"
+  disabled={props.loading}
+  onclick={props.onclick}
+>
+  {#if props.loading}
+    <Loader />
+  {/if}
+  <span>{@render props.children()}</span>
+</button>

src/components/ListeExtractions.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { pb } from '$lib/database';
+  import { getExtractions, type Extraction } from '$lib/extractions';
+  import ResumeExtraction from './ResumeExtraction.svelte';
+
+  let data = getExtractions(1, 20);
+</script>
+
+<div class="w-full flex flex-col">
+  {#await data}
+    <span>Chargement des cafés...</span>
+  {:then extractions}
+    {#each extractions.items as extraction}
+      <ResumeExtraction extraction={extraction as Extraction} />
+    {/each}
+  {/await}
+</div>

src/components/Loader.svelte

@@ -0,0 +1,28 @@
+<script>
+  // Toute l'attribution de ces loaders revient à CSS Loaders
+  // https://css-loaders.com/hypnotic/
+</script>
+
+<div class="loader"></div>
+
+<style>
+  /* HTML: <div class="loader"></div> */
+  .loader {
+    display: inline-grid;
+    font-size: 30px;
+  }
+  .loader:before,
+  .loader:after {
+    content: '☕️';
+    grid-area: 1/1;
+  }
+  .loader:after {
+    animation: l10 1s infinite;
+  }
+  @keyframes l10 {
+    to {
+      transform: scale(1.8);
+      opacity: 0;
+    }
+  }
+</style>

src/components/MessageErreur.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  type Props = {
+    erreur: string;
+  };
+
+  let props: Props = $props();
+</script>
+
+<div class="p-4 my-2 w-full bg-red-300">
+  <span class="text-red-950">${props.erreur}</span>
+</div>

src/components/ResumeExtraction.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Extraction } from '$lib/extractions';
+
+  let props: {
+    extraction: Extraction;
+  } = $props();
+</script>
+
+<div class="w-full p-2 flex flex-col">
+  <a href="/extractions/{props.extraction.id}">
+    <h1 class="text-lg">{props.extraction.nom}</h1>
+  </a>
+  <span class="text-xs">Le {props.extraction.created}</span>
+</div>

src/lib/extractions.ts

@@ -0,0 +1,31 @@
+import { pb } from './database.ts';
+import { type RecordModel } from 'pocketbase';
+import { creationExtractionSchema } from './schemas.ts';
+import { currentUser } from './login.svelte.ts';
+
+export interface Extraction extends RecordModel {
+  nom: string;
+  poids_cafe: number;
+  releves_tds: number[];
+}
+
+export async function nouvelleExtraction(nom: string): Promise<Extraction> {
+  const creationExtraction = creationExtractionSchema.parse({
+    nom,
+    utilisateur: currentUser.value.id
+  });
+
+  const nouvelleExtraction: Extraction = await pb
+    .collection('extractions')
+    .create(creationExtraction);
+
+  return nouvelleExtraction;
+}
+
+export async function getExtractions(page: number, perPage: number) {
+  return await pb.collection('extractions').getList(page, perPage);
+}
+
+export async function getExtraction(id: string) {
+  return await pb.collection('extractions').getOne(id);
+}

src/lib/login.svelte.ts

@@ -2,6 +2,7 @@ import type { AuthModel, RecordModel } from 'pocketbase';
 import { pb } from './database';
 
 export type User = {
+  id: string;
   username: string;
   email: string;
   name: string;

src/lib/schemas.ts

@@ -3,4 +3,9 @@ import { z } from 'zod';
 export const loginSchema = z.object({
   email: z.string().email(),
   password: z.string()
-});
+});
+
+export const creationExtractionSchema = z.object({
+  nom: z.string().min(5).max(50),
+  utilisateur: z.string()
+});

src/routes/+page.svelte

@@ -1,3 +1,18 @@
-<div class="p-2">
-  <h1 class="text-lg">On fait du café</h1>
+<script lang="ts">
+  import { currentUser } from '$lib/login.svelte';
+  import GrosBouton from '../components/GrosBouton.svelte';
+  import BoutonNouvelleExtraction from '../components/GrosBouton.svelte';
+  import ListeExtractions from '../components/ListeExtractions.svelte';
+</script>
+
+<div class="p-2 flex flex-col">
+  {#if currentUser.value != null}
+    <a href="/new">
+      <GrosBouton>➕ Nouvelle extraction</GrosBouton>
+    </a>
+    <ListeExtractions />
+  {:else}
+    <span>Salut ! Ici on fait du café !</span>
+    <span>Mais d'abord faut se connecter.</span>
+  {/if}
 </div>

src/routes/extractions/+layout.ts

@@ -0,0 +1 @@
+export const prerender = false;

src/routes/extractions/[id]/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { page } from '$app/stores';
+  import { getExtraction } from '$lib/extractions';
+
+  const data = getExtraction($page.params.id);
+</script>
+
+{#await data}
+  <span>Bientôt le café</span>
+{:then extraction}
+  <span>Miam le café : {extraction.nom}</span>
+{/await}

src/routes/login/+page.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
   import { login } from '$lib/login.svelte';
-  import { pb } from '$lib/database';
-  import { loginSchema } from '$lib/schemas';
   import { enhance } from '$app/forms';
   import { goto } from '$app/navigation';
 
-  let mail: string;
-  let password: string;
+  let mail = $state('');
+  let password = $state('');
 
-  let connexionError: string;
+  let connexionError = $state('');
 
-  async function validate() {
+  async function validate(event: SubmitEvent) {
     try {
+      event.preventDefault();
       await login(mail, password);
 
       goto('/');
@@ -21,7 +20,7 @@
   }
 </script>
 
-<form method="POST" class="w-full max-w-sm p-4" on:submit|preventDefault={validate}>
+<form method="POST" class="w-full max-w-sm p-4" onsubmit={validate}>
   <div class="border p-4 rounded-xl">
     <div class="md:flex md:items-center mb-6">
       <div class="md:w-1/3">

src/routes/new/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { pb } from '$lib/database';
+  import { nouvelleExtraction } from '$lib/extractions';
+  import GrosBouton from '../../components/GrosBouton.svelte';
+  import MessageErreur from '../../components/MessageErreur.svelte';
+
+  let creationEnCours = $state(false);
+  let nom = $state('');
+
+  let erreurCreation = $state('');
+
+  async function creationExtraction() {
+    creationEnCours = true;
+
+    try {
+      let extraction = await nouvelleExtraction(nom);
+      goto(`/extractions/${extraction.id}`);
+    } catch (e: any) {
+      erreurCreation = 'Erreur lors de la création';
+    } finally {
+      creationEnCours = false;
+    }
+  }
+</script>
+
+<div class=" flex flex-col w-full p-2">
+  <h1 class="text-xl pb-2">Nouveau café !</h1>
+  <h2 class=" text-sm font-bold">Donnez-lui un nom</h2>
+  <input
+    type="text"
+    class="w-full rounded-xl border-orange-300 border-solid h-8 p-2"
+    placeholder="Pérou, batch d'hier..."
+    bind:value={nom}
+  />
+
+  <div class="mt-4">
+    <GrosBouton loading={creationEnCours} onclick={creationExtraction}>Faisons du café</GrosBouton>
+  </div>
+
+  {#if erreurCreation}
+    <MessageErreur erreur={erreurCreation} />
+  {/if}
+</div>

static/404.html

@@ -0,0 +1 @@
+<p>Non !</p>