✨ UsersOverview - user delete

ref #12

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>
+                {#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>
-                  <span
+                    <button
+                      on:click={() => {
+                        active_deletes[u.id] = true;
+                      }}
                       tabindex="0"
-                    href="#"
+                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
-                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
                   </td>
+                {/if}
               </tr>
             {/if}
           {/each}