From 041c24a837d58ff46362699b54e8088f22ba2daa Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Wed, 13 Jan 2021 21:05:03 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=99=8B=E2=80=8D=E2=99=82=EF=B8=8F=20UserD?=
 =?UTF-8?q?etails=20-=20group=20updating?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 48 +++++++++++---------------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 0a07e966..fbe7687b 100644
--- a/src/components/UserDetail.svelte
+++ b/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() {
-    usergroups_array.forEach((id) => {
-      const group = allgroups.find((e) => e.id === id);
-      editable_userdata.groups.push(group);
-    });
-    editable_userdata.groups = editable_userdata.groups;
-  }
+  $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
+  $: save_enabled = changes_performed||!groups_changed;
   function submit() {
     if (
       !lodashIsEqual(original_data.permissions, editable_userdata.permissions)
     ) {
       // TODO: add+delete permissions
     }
-    if (data_loaded === true && changes_performed === true) {
-      console.log("ok, submitting...");
-      console.log(editable_userdata);
+    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);
@@ -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}
-            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">
       <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>