✨ UsersOverview - user delete

ref #12

src/components/About.svelte

@@ -50,14 +50,14 @@
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
               <svg
+                fill="currentColor"
                 class="h-6 w-6 text-blue-600"
-                fill="none"
-                width="24"
-                height="24"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"><path
-                  fill="currentColor"
-                  d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z" /></svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium">
@@ -79,7 +79,7 @@
             }}
             type="button"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            Close
+            {$_('close')}
           </button>
         </div>
       </div>
@@ -112,13 +112,12 @@
     <h2 class="text-4xl font-display font-semibold md:text-5xl">
       {$_('credits')}
     </h2>
-    <div
-      class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
+    <div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
       <p class="text-center">{$_('oss_credit_description')}</p>
     </div>
     <div class="w-screen leading-8 pl-5 mt-5">
       {#await license_promise}
-        <p class="text-center w-full">Licenses are being loaded...</p>
+        <p class="text-center w-full">{$_('licenses-are-being-loaded')}</p>
       {:then}
         <table>
           <thead>
@@ -164,9 +163,7 @@
         </div>
       {/await}
     </div>
-    <h2 class="text-4xl font-display font-semibold md:text-5xl">
-      Fragen
-    </h2>
+    <h2 class="text-4xl font-display font-semibold md:text-5xl">{$_('faq')}</h2>
     <div class="mt-6 border-t-2 border-gray-100 pt-10">
       <dl class="md:grid md:grid-cols-2 md:gap-8">
         <div>

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}

src/locales/en.json

@@ -10,6 +10,7 @@
     "cancel": "Cancel",
     "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
     "changelog": "Changelog",
+    "close": "Close",
     "confirm-delete": "Confirm Delete",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
@@ -55,6 +56,7 @@
     "last-name-is-required": "Last Name is required",
     "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
     "license": "License",
+    "licenses-are-being-loaded": "Licenses are being loaded...",
     "log_in": "Log in",
     "log_in_to_your_account": "Log in to your account",
     "login_is_checked": "Login is being checked...",