lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

🔒 UserDetail - WIP on Permissions

Browse Source 
ref #12
This commit is contained in:
Philipp Dormann 2021-01-12 21:04:12 +01:00
parent a9e319e0c0
commit 36a084eab6
1 changed files with 61 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/UserDetail.svelte
View File

@ -2,7 +2,11 @@
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import lodashIsEqual from "lodash.isequal"; import lodashIsEqual from "lodash.isequal";
import store from "../store"; 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 "gridjs/dist/theme/mermaid.css";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import PromiseError from "./PromiseError.svelte"; import PromiseError from "./PromiseError.svelte";
@ -11,7 +15,8 @@
let data_loaded = false; let data_loaded = false;
$: delete_triggered = false; $: delete_triggered = false;
$: original_data = {}; $: original_data = {};
$: editable_userdata = undefined; $: editable_userdata = {};
$: allpermissions = [];
$: allgroups = []; $: allgroups = [];
$: allgroups_ids = []; $: allgroups_ids = [];
$: usergroups_array = []; $: usergroups_array = [];
@ -29,6 +34,12 @@
console.log(data); console.log(data);
allgroups = 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); $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
function updateGroups() { function updateGroups() {
console.log("updating groups..."); console.log("updating groups...");
@ -53,6 +64,11 @@
console.log(editable_userdata.groups); console.log(editable_userdata.groups);
} }
function submit() { 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 && changes_performed === true) {
console.log("ok, submitting..."); console.log("ok, submitting...");
console.log(editable_userdata); 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" 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> multiple>
{#each allgroups as g} {#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> <option selected value={g.id}>{g.name}</option>
{:else} {:else}
<option value={g.id}>{g.name}</option> <option value={g.id}>{g.name}</option>
@ -286,53 +302,58 @@
</div> </div>
<div class="text-sm w-full"> <div class="text-sm w-full">
<span class="font-medium">Permissions</span> <span class="font-medium">Permissions</span>
<div <div class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
class="border-4 border-dashed rounded h-96 mb-4 p-5 text-lg text-center">
<!-- --> <!-- -->
<div class="flex flex-wrap -mx-1 overflow-hidden"> <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/2">
<button verfügbare
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>
</div> </div>
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
</div> </div>
<!-- --> <!-- -->
<div class="flex flex-wrap -mx-1 overflow-hidden"> <div class="flex flex-wrap -mx-1 overflow-hidden">
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2"> {#if allpermissions.length > 0}
<div <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"> <div
<p class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
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"> {#each allpermissions as p}
DEMO_PERMISSION {#if !editable_userdata.permissions.includes(p)}
</p> <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">
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}
DEMO_PERMISSION <button
</p> 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> <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
<div
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2"> class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
<div {#each allpermissions as p}
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"> {#if editable_userdata.permissions.includes(p)}
<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"> 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> <button
<p on:click={() => {
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"> editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
DEMO_PERMISSION }}
</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>
</div> {/if}
</div> </div>
TODO: permission picker 🔒
</div> </div>
</div> </div>
</section> </section>