🙋‍♂️ UserDetails - group updating

ref #12

src/components/UserDetail.svelte

@@ -19,55 +19,52 @@
   $: allpermissions = [];
   $: allgroups = [];
   $: allgroups_ids = [];
+  $: usergroups_array_objects = [];
   $: usergroups_array = [];
+  let usergroups_array_original = [];
   user_promise.then((data) => {
-    console.log(data);
     data_loaded = true;
     original_data = Object.assign(original_data, data);
     editable_userdata = data;
-    usergroups_array = [];
     data.groups.forEach((g) => {
-      usergroups_array.push(g.id);
+      usergroups_array=usergroups_array.concat([g.id]);
     });
+    usergroups_array_original = usergroups_array;
     allgroups.forEach((g) => {
       allgroups_ids.push(g.id);
     });
   });
   UserGroupService.userGroupControllerGetAll().then((data) => {
-    console.log(data);
     allgroups = data;
   });
   const permissions_promise = PermissionService.permissionControllerGetAll();
   permissions_promise.then((data) => {
     data.forEach((p) => {
-      allpermissions.push(p.target + ":" + p.action);
+      allpermissions=allpermissions.concat([p.target + ":" + p.action])
     });
-    allpermissions=allpermissions;
   });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
-  function updateGroups() {
+  $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
-    usergroups_array.forEach((id) => {
+  $: save_enabled = changes_performed||!groups_changed;
-      const group = allgroups.find((e) => e.id === id);
-      editable_userdata.groups.push(group);
-    });
-    editable_userdata.groups = editable_userdata.groups;
-  }
   function submit() {
     if (
       !lodashIsEqual(original_data.permissions, editable_userdata.permissions)
     ) {
       // TODO: add+delete permissions
     }
-    if (data_loaded === true && changes_performed === true) {
+    if (data_loaded === true && save_enabled) {
-      console.log("ok, submitting...");
+      let tmp=[];
-      console.log(editable_userdata);
+      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);
@@ -79,20 +76,16 @@
           }).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>
@@ -170,27 +163,19 @@
         {/if}
         {#if !delete_triggered}
           <button
-            disabled={!changes_performed}
+            disabled={!save_enabled}
-            class:opacity-50={!changes_performed}
+            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">
       <img
         alt={$_('profile-picture')}
         class="inline-block 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
         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>
@@ -276,7 +261,6 @@
       <span class="font-medium">{$_('groups')}</span>
       <!-- svelte-ignore a11y-no-onchange -->
       <select
-        on:change={updateGroups}
         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>