From f0c100aee47d6a5aeb0995db79b268f33bf316e9 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sun, 10 Jan 2021 15:16:02 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20UsersOverview=20-=20user=20delete?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UsersOverview.svelte | 54 +++++++++++++++++++++++------
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/components/UsersOverview.svelte b/src/components/UsersOverview.svelte
index bd6ead27..72296940 100644
--- a/src/components/UsersOverview.svelte
+++ b/src/components/UsersOverview.svelte
@@ -7,6 +7,7 @@
   import { users as usersstore } from "../store.js";
   import UsersEmptyState from "./UsersEmptyState.svelte";
   $: searchvalue = "";
+  $: active_deletes = [];
   $: userscache = [];
   $: advanced_search = false;
   usersstore.subscribe((val) => {
@@ -120,16 +121,49 @@
                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
                   {/each}
                 </td>
-                <td
-                  class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                  <a
-                    href="./{u.id}"
-                    class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                  <span
-                    tabindex="0"
-                    href="#"
-                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
-                </td>
+                {#if active_deletes[u.id] === true}
+                  <td
+                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <button
+                      on:click={() => {
+                        active_deletes[u.id] = false;
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                      Delete</button>
+                    <button
+                      on:click={() => {
+                        UserService.userControllerRemove(u.id, true)
+                          .then((resp) => {
+                            console.log(resp);
+                            // user deleted
+                            users_promise.then((data) => {
+                              console.log(data);
+                              usersstore.set(data);
+                            });
+                          })
+                          .catch((err) => {
+                            // error deleting user
+                          });
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
+                      Delete</button>
+                  </td>
+                {:else}
+                  <td
+                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <a
+                      href="./{u.id}"
+                      class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                    <button
+                      on:click={() => {
+                        active_deletes[u.id] = true;
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                  </td>
+                {/if}
               </tr>
             {/if}
           {/each}