From 65b36f8e695479809566213ebcb64d51a7c6a52e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Thu, 14 Jan 2021 18:56:28 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=99=8B=E2=80=8D=E2=99=82=EF=B8=8F?=
 =?UTF-8?q?=F0=9F=94=92=20UserDetail=20-=20permission=20layout=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 34 ++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index ac28a1e3..a8fd61ab 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -43,6 +43,20 @@
       allpermissions=allpermissions.concat([p.target + ":" + p.action])
     });
   });
+  // editable_userdata.permissions=[];
+  const user_permissions = UserService.userControllerGetPermissions(params.userid).then((val) => {
+  // console.log(val);
+  editable_userdata.permissions=[]
+  val.directlyGranted.forEach(p => {
+    editable_userdata.permissions=editable_userdata.permissions.concat([p.target + ":" + p.action])
+  });
+  val.inherited.forEach(p => {
+    editable_userdata.permissions=editable_userdata.permissions.concat([p.target + ":" + p.action])
+  });
+  // editable_userdata.permissions.push()
+  // console.log(val.directlyGranted);
+  // console.log(val.inherited);
+  })
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
   $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
   $: save_enabled = changes_performed||!groups_changed;
@@ -293,8 +307,8 @@
                 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">
+                    <div
+                      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 text-right">
                       {p}
                       <button
                         on:click={() => {
@@ -302,8 +316,8 @@
                           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>
+                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 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>
+                    </div>
                   {/if}
                 {/each}
               </div>
@@ -313,16 +327,16 @@
                 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
+                    <div
+                      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 text-left">
+                        <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>
+                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-400 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}
+                    </div>
                   {/if}
                 {/each}
               </div>