⚡ shared state reactivity - AddUserModal-Users-UsersOverview

ref #12

src/components/AddUserModal.svelte

@@ -2,11 +2,11 @@
   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";
   export let modal_open;
+  export let current_users;
   let firstname_input;
   let lastname_input;
   let middlename_input;
@@ -50,14 +50,19 @@
         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,
-        username: username_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 = "";
@@ -71,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) => {
           //

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,8 +29,8 @@
       <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}
@@ -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