From 6ef9571360e4722273492dabb5c81f30ae7b8fa0 Mon Sep 17 00:00:00 2001
From: bachrc <yohann.bacha@bachrc.net>
Date: Wed, 23 Oct 2024 06:12:29 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20une=20extraction=20peut=20=C3=AAtre=20s?=
 =?UTF-8?q?upprim=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GrosBouton.svelte         | 39 ++++++++++++++++++------
 src/routes/+page.svelte                  |  8 +++--
 src/routes/extractions/[id]/+page.svelte | 15 +++++++++
 src/routes/new/+page.svelte              |  8 ++++-
 4 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/components/GrosBouton.svelte b/src/components/GrosBouton.svelte
index 26f3357..d8729a8 100644
--- a/src/components/GrosBouton.svelte
+++ b/src/components/GrosBouton.svelte
@@ -1,20 +1,33 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import { createRawSnippet, type Snippet } from 'svelte';
   import Loader from './Loader.svelte';
 
-  type Props = {
+  let confirmationApparente = $state(false);
+
+  let props: {
     children: Snippet;
     loading?: boolean;
-    onclick?: () => void;
-  };
+    customClass?: string;
+    confirmation?: string;
+    onclick: () => void;
+  } = $props();
+
+  function clic() {
+    if (!props.confirmation) {
+      return props.onclick();
+    }
 
-  let props: Props = $props();
+    if (!confirmationApparente) {
+      confirmationApparente = true;
+      return;
+    }
+
+    props.onclick();
+  }
 </script>
 
 <button
   class="w-full
-        bg-green-300
-        disabled:bg-green-100
         py-3
         rounded-lg
         hover:shadow-md
@@ -24,12 +37,18 @@
         gap-2
         justify-center
         items-center
-        h-12"
+        h-12
+        {props.customClass}
+        "
   disabled={props.loading}
-  onclick={props.onclick}
+  onclick={clic}
 >
   {#if props.loading}
     <Loader />
   {/if}
-  <span>{@render props.children()}</span>
+  {#if confirmationApparente}
+    <span>{props.confirmation}</span>
+  {:else}
+    <span>{@render props.children()}</span>
+  {/if}
 </button>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6b01224..d725622 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import { currentUser } from '$lib/login.svelte';
   import GrosBouton from '../components/GrosBouton.svelte';
   import ListeExtractions from '../components/ListeExtractions.svelte';
@@ -6,9 +7,10 @@
 
 <div class="p-2 flex flex-col">
   {#if currentUser.value != null}
-    <a href="/new">
-      <GrosBouton>➕ Nouvelle extraction</GrosBouton>
-    </a>
+    <GrosBouton customClass="bg-green-300 disabled:bg-green-100" onclick={() => goto('/new')}>
+      ➕ Nouvelle extraction
+    </GrosBouton>
+
     <ListeExtractions />
   {:else}
     <span>Salut ! Ici on fait du café !</span>
diff --git a/src/routes/extractions/[id]/+page.svelte b/src/routes/extractions/[id]/+page.svelte
index 6a71d9c..c548b44 100644
--- a/src/routes/extractions/[id]/+page.svelte
+++ b/src/routes/extractions/[id]/+page.svelte
@@ -7,6 +7,8 @@
   import { pb } from '$lib/database';
   import { toPrettyDateTime } from '$lib/time';
   import ChampEditable from '../../../components/ChampEditable.svelte';
+  import GrosBouton from '../../../components/GrosBouton.svelte';
+  import { goto } from '$app/navigation';
 
   const id = $page.params.id;
 
@@ -32,6 +34,11 @@
       notes: notes
     });
   }
+
+  async function suppression() {
+    await pb.collection('extractions').delete(id);
+    goto('/');
+  }
 </script>
 
 {#if extraction}
@@ -54,6 +61,14 @@
         onupdate={majNotes}
       />
     </div>
+    <hr class="my-4" />
+    <div>
+      <GrosBouton
+        customClass="bg-red-600 text-white"
+        confirmation="Êtes-vous sûr•e ?"
+        onclick={suppression}>Supprimer l'extraction (définitif)</GrosBouton
+      >
+    </div>
   </div>
 {:else}
   <Loader />
diff --git a/src/routes/new/+page.svelte b/src/routes/new/+page.svelte
index 15db77e..8c28c27 100644
--- a/src/routes/new/+page.svelte
+++ b/src/routes/new/+page.svelte
@@ -35,7 +35,13 @@
   />
 
   <div class="mt-4">
-    <GrosBouton loading={creationEnCours} onclick={creationExtraction}>Faisons du café</GrosBouton>
+    <GrosBouton
+      customClass="bg-green-300 disabled:bg-green-100"
+      loading={creationEnCours}
+      onclick={creationExtraction}
+    >
+      Faisons du café
+    </GrosBouton>
   </div>
 
   {#if erreurCreation}