From d65b463547a5cb4fb6f6de0f95795a66ebe92e31 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 16 Jan 2021 17:31:17 +0100
Subject: [PATCH] UserDetail - add permission layout

ref #12
---
 src/components/UserDetail.svelte | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index e3f8423c..2dc3e7d7 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -12,6 +12,8 @@
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
+  let usergroups_array_original = [];
+  let vererbte = [];
   $: delete_triggered = false;
   $: original_data = {};
   $: editable_userdata = {};
@@ -19,7 +21,6 @@
   $: allgroups = [];
   $: allgroups_ids = [];
   $: usergroups_array = [];
-  let usergroups_array_original = [];
   user_promise.then((data) => {
     data_loaded = true;
     original_data = Object.assign(original_data, data);
@@ -42,6 +43,7 @@
     });
   });
   UserService.userControllerGetPermissions(params.userid).then((val) => {
+    console.log(val);
     editable_userdata.permissions = [];
     val.directlyGranted.forEach((p) => {
       editable_userdata.permissions = editable_userdata.permissions.concat([
@@ -49,9 +51,7 @@
       ]);
     });
     val.inherited.forEach((p) => {
-      editable_userdata.permissions = editable_userdata.permissions.concat([
-        p.target + ":" + p.action,
-      ]);
+      vererbte = vererbte.concat([p.target + ":" + p.action]);
     });
   });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
@@ -288,15 +288,16 @@
       <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">
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
             verfügbare
           </div>
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">erteilte</div>
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">vererbte</div>
         </div>
         <!--  -->
         <div class="flex flex-wrap -mx-1 overflow-hidden">
           {#if allpermissions.length > 0}
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
               <div
                 class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
                 {#each allpermissions as p}
@@ -316,7 +317,7 @@
                 {/each}
               </div>
             </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
               <div
                 class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
                 {#each allpermissions as p}
@@ -335,6 +336,20 @@
                 {/each}
               </div>
             </div>
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
+              <div
+                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+                {#each vererbte as p}
+                  <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
+                      type="button"
+                      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>
+                {/each}
+              </div>
+            </div>
           {/if}
         </div>
       </div>