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

UserDetail - basic permission badges

Browse Source 
ref #12
This commit is contained in:
Philipp Dormann 2021-01-16 18:23:28 +01:00
parent d65b463547
commit 7d4e93912c
1 changed files with 57 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/components/UserDetail.svelte
View File

@ -2,26 +2,56 @@
import { _ } from "svelte-i18n";
import lodashIsEqual from "lodash.isequal";
import store from "../store";
import {
UserService,
UserGroupService,
PermissionService,
} from "@odit/lfk-client-js";
import { UserService, UserGroupService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import PromiseError from "./PromiseError.svelte";
export let params;
const user_promise = UserService.userControllerGetOne(params.userid);
let data_loaded = false;
let usergroups_array_original = [];
let vererbte = [];
const colors = [
"#f3558e",
"#17b978",
"#3498db",
"#3f3b3b",
"#775ada",
"#7ed6df_#000000",
"#000000",
"#21e6c1_#000000",
"#c0392b",
"#d35400",
"#7f8c8d",
"#6ab04c",
"#4834d4",
"#ff1f5a",
"#eac100",
];
let matched_colors = [];
$: delete_triggered = false;
$: original_data = {};
$: editable_userdata = {};
$: allpermissions = [];
$: allgroups = [];
$: allgroups_ids = [];
$: usergroups_array = [];
$: search_permission = "";
user_promise.then((data) => {
let current_target = "";
let colorindex = -1;
data.permissions.forEach((p) => {
const target = p.split(":")[0];
if (current_target !== p.split(":")[0]) {
colorindex++;
current_target = p.split(":")[0];
}
let background = colors[colorindex];
let foreground = "#fff";
if (background.includes("_")) {
foreground = background.split("_")[1];
background = background.split("_")[0];
}
matched_colors[target] = [background, foreground];
});
//
data_loaded = true;
original_data = Object.assign(original_data, data);
editable_userdata = data;
@ -36,35 +66,12 @@
UserGroupService.userGroupControllerGetAll().then((data) => {
allgroups = data;
});
const permissions_promise = PermissionService.permissionControllerGetAll();
permissions_promise.then((data) => {
data.forEach((p) => {
allpermissions = allpermissions.concat([p.target + ":" + p.action]);
});
});
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) => {
vererbte = vererbte.concat([p.target + ":" + p.action]);
});
});
$: changes_performed = !lodashIsEqual(original_data, editable_userdata);
$: 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 && save_enabled) {
editable_userdata.groups = usergroups_array;
Toastify({
@ -84,7 +91,6 @@
}).showToast();
})
.catch((err) => {});
} else {
}
}
function deleteUser() {
@ -142,7 +148,7 @@
</nav>
</div>
</div>
<div class="mb-8 text-3xl font-extrabold leading-tight">
<div class="mb-8 text-3xl font-extrabold">
{original_data.firstname}
{original_data.middlename || ''}
{original_data.lastname}
@ -284,76 +290,26 @@
</select>
</div>
<div class="text-sm w-full">
<span class="font-medium">Permissions</span>
<div class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
<p class="font-medium mb-4">Permissions</p>
<a
href="/users/{params.userid}/permissions/"
class="rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 font-medium text-black hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm">Edit
Permissions</a>
<input
autocomplete="off"
placeholder="Search for permission"
type="text"
bind:value={search_permission}
class="mt-4 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" />
{#each original_data.permissions as p}
{#if p.toLowerCase().includes(search_permission.toLowerCase())}
<span
style="background:{matched_colors[p.split(':')[0]][0]};color:{matched_colors[p.split(':')[0]][1]};"
class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded">{p}</span>
<!-- -->
<div class="flex flex-wrap -mx-1 overflow-hidden">
<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/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/3">
<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)}
<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={() => {
editable_userdata.permissions.push(p);
editable_userdata.permissions = editable_userdata.permissions;
}}
type="button"
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>
</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 allpermissions as p}
{#if editable_userdata.permissions.includes(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
on:click={() => {
editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
}}
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>
{/if}
{/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>
</div>
</section>
{:catch error}
<PromiseError {error} />