Merge branch 'feature/12-user-management' into dev

src/components/AddUserModal.svelte

@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import { tracks as tracksstore } from "../store.js";
+  import { tracks as usersstore } from "../store.js";
   import { UserService } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import Toastify from "toastify-js";
@@ -68,11 +68,11 @@
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
           let storeval = [];
-          tracksstore.subscribe((val) => {
+          usersstore.subscribe((val) => {
             storeval = val;
           });
           storeval.push(result);
-          tracksstore.set(storeval);
+          usersstore.set(storeval);
         })
         .catch((err) => {
           //

src/components/Footer.svelte

@@ -1,9 +1,12 @@
 <script>
   import { _ } from "svelte-i18n";
-  const releaseinfo = document
+  $: releaseinfo = "";
+  setTimeout(() => {
+    releaseinfo = document
       .getElementById("buildinfo")
       .textContent.replace("RELEASE_INFO-", "")
       .replace("-RELEASE_INFO", "");
+  }, 1500);
   const year = new Date().getFullYear();
 </script>
 

src/components/UserDetail.svelte

@@ -1,28 +1,50 @@
 <script>
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
+  import store from "../store";
   import { UserService } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
   import PromiseError from "./PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
-  let original_data = undefined;
+  $: delete_triggered = false;
+  $: original_data = {};
   $: editable_userdata = undefined;
   user_promise.then((data) => {
     data_loaded = true;
-    original_data = data;
+    original_data = Object.assign(original_data, data);
     editable_userdata = data;
   });
-  // $: changes_performed = lodashIsEqual(original_data, editable_userdata);
+  $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
-  $: changes_performed = !lodashIsEqual({ test: 1 }, { test: 1 });
   function submit() {
     if (data_loaded === true && changes_performed === true) {
       console.log("ok, submitting...");
+      console.log(editable_userdata);
+      UserService.userControllerPut(original_data.id, editable_userdata)
+        .then((resp) => {
+          console.log(resp);
+          Object.assign(original_data, editable_userdata);
+          original_data = editable_userdata;
+          Object.assign(original_data, editable_userdata);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     } else {
       console.log("no changes performed");
     }
   }
+  function deleteUser() {
+    UserService.userControllerRemove(original_data.id, true)
+      .then((resp) => {
+        console.log(resp);
+        location.replace("./");
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
 </script>
 
 {#await user_promise}
@@ -63,36 +85,47 @@
                 <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
-              <span class="mr-2">{user.firstname}
+              <span class="mr-2">{original_data.firstname}
-                {user.middlename || ''}
+                {original_data.middlename || ''}
-                {user.lastname}</span>
+                {original_data.lastname}</span>
             </li>
           </ol>
         </nav>
       </div>
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {user.firstname}
+      {original_data.firstname}
-      {user.middlename || ''}
+      {original_data.middlename || ''}
-      {user.lastname}
+      {original_data.lastname}
-      <span data-id="user_actions_${user.id}">
+      <span data-id="user_actions_${editable_userdata.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+          {#if delete_triggered}
             <button
-          class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+              on:click={deleteUser}
-          data-userid="${user.id}"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
-          onclick="user__delete_cancel()">{$_('cancel')}</button>
             <button
-          class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm"
+              on:click={() => {
-          data-userid="${user.id}"
+                delete_triggered = !delete_triggered;
-          onclick="user__delete_confirm()">{$_('confirm-delete')}</button>
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+          {/if}
+          {#if !delete_triggered}
             <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
               type="button"
               class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-user')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
           <button
             disabled={!changes_performed}
             class:opacity-50={!changes_performed}
             type="button"
             on:click={submit}
             class="w-full 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">{$_('save-changes')}</button>
+        {/if}
       </span>
     </div>
 
@@ -101,7 +134,7 @@
       <img
         alt={$_('profile-picture')}
         class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
-        src={user.profilePic} />
+        src={editable_userdata.profilePic} />
       <!-- <span
         class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
           class="h-full w-full text-gray-300"

src/components/Users.svelte

@@ -1,13 +1,16 @@
 <script>
   import { _ } from "svelte-i18n";
+  import store from "../store";
   import AddUserModal from "./AddUserModal.svelte";
   export let modal_open = false;
   import UsersOverview from "./UsersOverview.svelte";
+  console.log(store.state.jwtinfo.userdetails.permissions);
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
     {$_('users')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
       <button
         on:click={() => {
           modal_open = true;
@@ -16,8 +19,12 @@
         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">
         {$_('create-user')}
       </button>
+    {/if}
   </span>
   <p class="mb-8 text-lg text-gray-500">{$_('manage-admin-users')}</p>
   <UsersOverview />
 </section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
   <AddUserModal bind:modal_open />
+{/if}

src/components/UsersOverview.svelte

@@ -5,6 +5,7 @@
   const users_promise = UserService.userControllerGetAll();
   import "gridjs/dist/theme/mermaid.css";
   import { users as usersstore } from "../store.js";
+  import store from "../store";
   import UsersEmptyState from "./UsersEmptyState.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
@@ -19,6 +20,7 @@
   });
 </script>
 
+{#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
   {#await users_promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
@@ -156,12 +158,14 @@
                       <a
                         href="./{u.id}"
                         class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
                         <button
                           on:click={() => {
                             active_deletes[u.id] = true;
                           }}
                           tabindex="0"
                           class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                      {/if}
                     </td>
                   {/if}
                 </tr>
@@ -179,3 +183,4 @@
       </span>
     </div>
   {/await}
+{/if}