From 36a084eab6bd0c922da29ebb2d260ba803bf9675 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 12 Jan 2021 21:04:12 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=20UserDetail=20-=20WIP=20on=20Perm?=
 =?UTF-8?q?issions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 101 +++++++++++++++++++------------
 1 file changed, 61 insertions(+), 40 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 43197b5e..a9c77d80 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -2,7 +2,11 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import { UserService, UserGroupService } from "@odit/lfk-client-js";
+  import {
+    UserService,
+    UserGroupService,
+    PermissionService,
+  } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
@@ -11,7 +15,8 @@
   let data_loaded = false;
   $: delete_triggered = false;
   $: original_data = {};
-  $: editable_userdata = undefined;
+  $: editable_userdata = {};
+  $: allpermissions = [];
   $: allgroups = [];
   $: allgroups_ids = [];
   $: usergroups_array = [];
@@ -29,6 +34,12 @@
     console.log(data);
     allgroups = data;
   });
+  const permissions_promise = PermissionService.permissionControllerGetAll();
+  permissions_promise.then((data) => {
+    data.forEach((p) => {
+      allpermissions.push(p.target + ":" + p.action);
+    });
+  });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
   function updateGroups() {
     console.log("updating groups...");
@@ -53,6 +64,11 @@
     console.log(editable_userdata.groups);
   }
   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);
@@ -276,7 +292,7 @@
         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>
         {#each allgroups as g}
-          {#if editable_userdata.groups.some((obj) => obj.id === g.id)}
+          {#if usergroups_array.includes(g.id)}
             <option selected value={g.id}>{g.name}</option>
           {:else}
             <option value={g.id}>{g.name}</option>
@@ -286,53 +302,58 @@
     </div>
     <div class="text-sm w-full">
       <span class="font-medium">Permissions</span>
-      <div
-        class="border-4 border-dashed rounded h-96 mb-4 p-5 text-lg text-center">
+      <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">
-            <button
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&gt;</button>
-          </div>
-
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-            <button
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&lt;</button>
+            verfügbare
           </div>
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
         </div>
         <!--  -->
         <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="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-              <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">
-                DEMO_PERMISSION
-              </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">
-                DEMO_PERMISSION
-              </p>
+          {#if allpermissions.length > 0}
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+              <div
+                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
+                        on:click={() => {
+                          editable_userdata.permissions.push(p);
+                          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>
+                  {/if}
+                {/each}
+              </div>
             </div>
-          </div>
-
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-            <div
-              class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-              <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">
-                DEMO_PERMISSION
-              </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">
-                DEMO_PERMISSION
-              </p>
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+              <div
+                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
+                        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>
+                  {/if}
+                {/each}
+              </div>
             </div>
-          </div>
+          {/if}
         </div>
-        TODO: permission picker 🔒
       </div>
     </div>
   </section>