👀 UsersOverview - disable advanced search

ref #12

package.json

@@ -7,11 +7,10 @@
 		"build": "snowpack build",
 		"build:sw": "workbox generateSW workbox-config.js",
 		"release": "release-it",
-		"changelog": "npx auto-changelog --commit-limit false --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs",
 		"licenses:export": "license-exporter --json -o public"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "0.0.10",
+		"@odit/lfk-client-js": "0.0.11",
 		"filepond": "4.25.1",
 		"gridjs": "3.2.1",
 		"localforage": "1.9.0",
@@ -51,7 +50,7 @@
 			"publish": false
 		},
 		"hooks": {
-			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add public/index.html"
+			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add public/index.html && node order.js  && git add public/locales"
 		}
 	}
 }

src/components/AddUserModal.svelte

@@ -2,20 +2,21 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  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";
-  import "toastify-js/src/toastify.css";
   export let modal_open;
+  export let current_users;
   let firstname_input;
   let lastname_input;
   let middlename_input;
+  let username_input;
   let password_input;
   let email_input;
   function focus(el) {
     el.focus();
   }
+  $: username_input_value = "";
   $: middlename_input_value = "";
   $: password_input_value = "";
   $: email_input_value = "";
@@ -49,17 +50,25 @@
         text: "User is being added...",
         duration: -1,
       }).showToast();
-      UserService.userControllerPost({
+      let postdata={
         firstname: firstname_input_value,
         lastname: lastname_input_value,
         middlename: middlename_input_value,
-        email: email_input_value,
-        password: password_input_value,
-      })
+        password: password_input_value
+      };
+      if(email_input_value!==""){
+        postdata.email=email_input_value;
+      }
+      if(username_input_value!==""){
+        postdata.username=username_input_value;
+      }
+      UserService.userControllerPost(postdata)
         .then((result) => {
           firstname_input_value = "";
           lastname_input_value = "";
           middlename_input_value = "";
+          email_input_value = "";
+          username_input_value = "";
           modal_open = false;
           //
           Toastify({
@@ -67,12 +76,8 @@
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          let storeval = [];
-          usersstore.subscribe((val) => {
-            storeval = val;
-          });
-          storeval.push(result);
-          usersstore.set(storeval);
+          current_users.push(result);
+          current_users=current_users;
         })
         .catch((err) => {
           //
@@ -213,6 +218,19 @@
                     </span>
                   {/if}
                 </div>
+                <div class="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">{$_('username')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('username')}
+                    bind:value={username_input_value}
+                    bind:this={username_input}
+                    type="text"
+                    name="trackname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                </div>
                 <div class="col-span-6">
                   <label
                     for="email"

src/components/UserDetail.svelte

@@ -2,47 +2,90 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import { UserService } from "@odit/lfk-client-js";
+  import {
+    UserService,
+    UserGroupService,
+    PermissionService,
+  } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
+  import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
   $: delete_triggered = false;
   $: original_data = {};
-  $: editable_userdata = undefined;
+  $: editable_userdata = {};
+  $: allpermissions = [];
+  $: allgroups = [];
+  $: allgroups_ids = [];
+  $: usergroups_array_objects = [];
+  $: usergroups_array = [];
+  let usergroups_array_original = [];
   user_promise.then((data) => {
     data_loaded = true;
     original_data = Object.assign(original_data, data);
     editable_userdata = data;
+    data.groups.forEach((g) => {
+      usergroups_array=usergroups_array.concat([g.id]);
+    });
+    usergroups_array_original = usergroups_array;
+    allgroups.forEach((g) => {
+      allgroups_ids.push(g.id);
+    });
+  });
+  UserGroupService.userGroupControllerGetAll().then((data) => {
+    allgroups = data;
+  });
+  const permissions_promise = PermissionService.permissionControllerGetAll();
+  permissions_promise.then((data) => {
+    data.forEach((p) => {
+      allpermissions=allpermissions.concat([p.target + ":" + p.action])
+    });
   });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
+  $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
+  $: save_enabled = changes_performed||!groups_changed;
   function submit() {
-    if (data_loaded === true && changes_performed === true) {
-      console.log("ok, submitting...");
-      console.log(editable_userdata);
+    if (
+      !lodashIsEqual(original_data.permissions, editable_userdata.permissions)
+    ) {
+      // TODO: add+delete permissions
+    }
+    if (data_loaded === true && save_enabled) {
+      let tmp=[];
+      usergroups_array.forEach(g => {
+        const group=allgroups.find(obj=>obj.id===g);
+        tmp.push(group);
+      });
+      editable_userdata.groups=tmp;
+      Toastify({
+        text: $_("updating-user"),
+        duration: 2500,
+      }).showToast();
       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);
+          //
+          Toastify({
+            text: $_("user-updated"),
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
         })
         .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>
@@ -120,34 +163,32 @@
         {/if}
         {#if !delete_triggered}
           <button
-            disabled={!changes_performed}
-            class:opacity-50={!changes_performed}
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
             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>
-
-    <!--  -->
-    <div class="mt-2 flex items-center">
+    <div class="mt-3 text-sm w-full">
+      <p
+        class="ml-1 font-medium text-gray-700">Profile Picture</p>
       <img
         alt={$_('profile-picture')}
-        class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
+        class="h-20 w-20 rounded-full overflow-hidden bg-gray-100"
         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"
-          fill="currentColor"
-          viewBox="0 0 24 24"><path
-            d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /></svg></span> -->
-      <button
+      <!-- <button
         type="button"
-        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
+        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button> -->
     </div>
     <!--  -->
     <div class="mt-3 text-sm w-full">
-      <input
+      <label
+        for="enabled"
+        class="ml-1 font-medium text-gray-700">Active?</label>
+        <br>
+      <p class="text-gray-500"> <input
         id="enabled"
         on:change={() => {
           editable_userdata.enabled = !editable_userdata.enabled;
@@ -156,11 +197,7 @@
         name="enabled"
         type="checkbox"
         checked={editable_userdata.enabled}
-        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-      <label
-        for="enabled"
-        class="ml-1 font-medium text-gray-700">Active?</label>
-      <p class="text-gray-500">set the user active/ inactive</p>
+        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />  set the user active/ inactive</p>
     </div>
     <div class="text-sm w-full">
       <label
@@ -210,65 +247,88 @@
         name="email"
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
+    <div class="text-sm w-full">
+      <label
+        for="username"
+        class="font-medium text-gray-700">{$_('username')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('username')}
+        type="text"
+        bind:value={editable_userdata.username}
+        name="username"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+    </div>
     <div class="text-sm w-full">
       <span class="font-medium">{$_('groups')}</span>
+      <!-- svelte-ignore a11y-no-onchange -->
       <select
+        bind:value={usergroups_array}
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
         multiple>
-        <option>Admins</option>
-        <option>Finanzen</option>
-        <option>...</option>
+        {#each allgroups as g}
+          {#if usergroups_array.includes(g.id)}
+            <option selected value={g.id}>{g.name}</option>
+          {:else}
+            <option value={g.id}>{g.name}</option>
+          {/if}
+        {/each}
       </select>
     </div>
     <div class="text-sm w-full">
       <span class="font-medium">Permissions</span>
-      <div
-        class="border-4 border-dashed rounded h-96 mb-4 p-5 text-lg text-center">
+      <div class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
         <!--  -->
         <div class="flex flex-wrap -mx-1 overflow-hidden">
           <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-            <button
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&gt;</button>
-          </div>
-
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-            <button
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&lt;</button>
+            verfügbare
           </div>
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
         </div>
         <!--  -->
         <div class="flex flex-wrap -mx-1 overflow-hidden">
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-            <div
-              class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-              <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
-                DEMO_PERMISSION
-              </p>
-              <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
-                DEMO_PERMISSION
-              </p>
+          {#if allpermissions.length > 0}
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+              <div
+                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+                {#each allpermissions as p}
+                  {#if !editable_userdata.permissions.includes(p)}
+                    <p
+                      class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                      {p}
+                      <button
+                        on:click={() => {
+                          editable_userdata.permissions.push(p);
+                          editable_userdata.permissions = editable_userdata.permissions;
+                        }}
+                        type="button"
+                        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
+                    </p>
+                  {/if}
+                {/each}
+              </div>
             </div>
-          </div>
-
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-            <div
-              class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-              <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
-                DEMO_PERMISSION
-              </p>
-              <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
-                DEMO_PERMISSION
-              </p>
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+              <div
+                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+                {#each allpermissions as p}
+                  {#if editable_userdata.permissions.includes(p)}
+                    <p
+                      class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                      {p}
+                      <button
+                        on:click={() => {
+                          editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
+                        }}
+                        type="button"
+                        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
+                    </p>
+                  {/if}
+                {/each}
+              </div>
             </div>
-          </div>
+          {/if}
         </div>
-        TODO: permission picker 🔒
       </div>
     </div>
   </section>

src/components/Users.svelte

@@ -5,6 +5,7 @@
   export let modal_open = false;
   import UsersOverview from "./UsersOverview.svelte";
   console.log(store.state.jwtinfo.userdetails.permissions);
+  let current_users=[];
 </script>
 
 <section class="container p-5">
@@ -22,9 +23,9 @@
     {/if}
   </span>
   <p class="mb-8 text-lg text-gray-500">{$_('manage-admin-users')}</p>
-  <UsersOverview />
+  <UsersOverview bind:current_users />
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
-  <AddUserModal bind:modal_open />
+  <AddUserModal bind:current_users bind:modal_open />
 {/if}

src/components/UsersOverview.svelte

@@ -9,13 +9,14 @@
   import UsersEmptyState from "./UsersEmptyState.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
+  export let current_users=[];
   $: userscache = [];
   $: advanced_search = false;
   usersstore.subscribe((val) => {
     userscache = val;
+    current_users=val;
   });
   users_promise.then((data) => {
-    console.log(data);
     usersstore.set(data);
   });
 </script>
@@ -28,21 +29,21 @@
       <p class="font-bold">users are being loaded...</p>
       <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
-  {:then users}
-    {#if userscache.length === 0}
+  {:then}
+    {#if current_users.length === 0}
       <UsersEmptyState />
     {:else}
-      {#if advanced_search}
+      <!-- {#if advanced_search}
         advanced search
-      {:else}
+      {:else} -->
         <input
           type="search"
           bind:value={searchvalue}
           placeholder={$_('datatable.search')}
           aria-label={$_('datatable.search')}
           class="gridjs-input gridjs-search-input mb-4" />
-      {/if}
-      <button
+      <!-- {/if} -->
+      <!-- <button
         on:click={() => {
           advanced_search = !advanced_search;
         }}
@@ -51,7 +52,7 @@
         {#if advanced_search}
           toggle simple search
         {:else}toggle advanced search{/if}
-      </button>
+      </button> -->
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
@@ -78,12 +79,12 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            {#each users as u}
+            {#each current_users as u}
               {#if Object.values(u)
                 .toString()
                 .toLowerCase()
                 .includes(searchvalue)}
-                <tr>
+                <tr data-rowid="user_{u.id}">
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       {#if u.profilePic}
@@ -137,12 +138,7 @@
                         on:click={() => {
                           UserService.userControllerRemove(u.id, true)
                             .then((resp) => {
-                              console.log(resp);
-                              // user deleted
-                              users_promise.then((data) => {
-                                console.log(data);
-                                usersstore.set(data);
-                              });
+                              current_users=current_users.filter(obj=>obj.id!==u.id);
                             })
                             .catch((err) => {
                               // error deleting user

src/locales/en.json

@@ -117,6 +117,9 @@
     "track-length-in-m": "Track Length in m",
     "track-name": "Track name",
     "tracks": "Tracks",
+    "updating-user": "updating user...",
+    "user-updated": "User updated",
+    "username": "Username",
     "users": "Users",
     "valid-email-is-required": "valid email is required",
     "welcome_wavinghand": "Welcome 👋",