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

158
src/components/UserDetail.svelte
View File

@ -2,26 +2,56 @@
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 { import { UserService, UserGroupService } from "@odit/lfk-client-js";
UserService,
UserGroupService,
PermissionService,
} from "@odit/lfk-client-js";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import PromiseError from "./PromiseError.svelte"; import PromiseError from "./PromiseError.svelte";
export let params; export let params;
const user_promise = UserService.userControllerGetOne(params.userid); const user_promise = UserService.userControllerGetOne(params.userid);
let data_loaded = false; let data_loaded = false;
let usergroups_array_original = []; 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; $: delete_triggered = false;
$: original_data = {}; $: original_data = {};
$: editable_userdata = {}; $: editable_userdata = {};
$: allpermissions = [];
$: allgroups = []; $: allgroups = [];
$: allgroups_ids = []; $: allgroups_ids = [];
$: usergroups_array = []; $: usergroups_array = [];
$: search_permission = "";
user_promise.then((data) => { 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; data_loaded = true;
original_data = Object.assign(original_data, data); original_data = Object.assign(original_data, data);
editable_userdata = data; editable_userdata = data;
@ -36,35 +66,12 @@
UserGroupService.userGroupControllerGetAll().then((data) => { UserGroupService.userGroupControllerGetAll().then((data) => {
allgroups = 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); $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
$: groups_changed = $: groups_changed =
JSON.stringify(usergroups_array) === JSON.stringify(usergroups_array) ===
JSON.stringify(usergroups_array_original); JSON.stringify(usergroups_array_original);
$: save_enabled = changes_performed || !groups_changed; $: save_enabled = changes_performed || !groups_changed;
function submit() { function submit() {
if (
!lodashIsEqual(original_data.permissions, editable_userdata.permissions)
) {
// TODO: add+delete permissions
}
if (data_loaded === true && save_enabled) { if (data_loaded === true && save_enabled) {
editable_userdata.groups = usergroups_array; editable_userdata.groups = usergroups_array;
Toastify({ Toastify({
@ -84,7 +91,6 @@
}).showToast(); }).showToast();
}) })
.catch((err) => {}); .catch((err) => {});
} else {
} }
} }
function deleteUser() { function deleteUser() {
@ -142,7 +148,7 @@
</nav> </nav>
</div> </div>
</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.firstname}
{original_data.middlename || ''} {original_data.middlename || ''}
{original_data.lastname} {original_data.lastname}
@ -284,75 +290,25 @@
</select> </select>
</div> </div>
<div class="text-sm w-full"> <div class="text-sm w-full">
<span class="font-medium">Permissions</span> <p class="font-medium mb-4">Permissions</p>
<div class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"> <a
<!-- --> href="/users/{params.userid}/permissions/"
<div class="flex flex-wrap -mx-1 overflow-hidden"> 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
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3"> Permissions</a>
verfügbare <input
</div> autocomplete="off"
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">erteilte</div> placeholder="Search for permission"
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">vererbte</div> type="text"
</div> 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" />
<div class="flex flex-wrap -mx-1 overflow-hidden"> {#each original_data.permissions as p}
{#if allpermissions.length > 0} {#if p.toLowerCase().includes(search_permission.toLowerCase())}
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/3"> <span
<div style="background:{matched_colors[p.split(':')[0]][0]};color:{matched_colors[p.split(':')[0]][1]};"
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"> 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>
{#each allpermissions as p} <!-- -->
{#if !editable_userdata.permissions.includes(p)} {/if}
<div {/each}
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> </div>
</section> </section>
{:catch error} {:catch error}