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

Added permissions list to usergroup detail

Browse Source 
ref #48
This commit is contained in:
Nicolai Ort 2021-02-26 17:58:57 +01:00
parent 937486a66b
commit 05099d066b
1 changed files with 59 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/groups/GroupDetail.svelte
View File

@ -10,7 +10,26 @@
let data_loaded = false;
export let params;
const promise = UserGroupService.userGroupControllerGetOne(params.groupid);
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;
$: search_permission = "";
$: original_data = {};
$: editable = {};
$: changes_performed = !lodashIsEqual(original_data, editable);
@ -18,7 +37,23 @@
$: save_enabled =
changes_performed && isGroupnameValid
promise.then((data) => {
console.log(data);
let current_target = "";
let colorindex = -1;
data.permissions = data.permissions.sort();
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 = Object.assign(editable, original_data);
@ -156,9 +191,29 @@
name="firstname"
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 rounded-md p-2" />
</div>
<div class="text-sm w-full">
<div class="text-sm w-full mt-8">
<p class="font-medium mb-4">
{$_('permissions')}
<a
class="px-4 py-2 bg-gray-500 rounded-md text-white"
href="/groups/{params.groupid}/permissions/">{$_('edit-permissions')}</a>
</p>
<div class="w-full sm:my-px sm:px-px sm:w-1/2">
<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" />
</div>
{#each original_data.permissions as p}
{#if p.toLowerCase().includes(search_permission.toLowerCase())}
<span
class="font-medium text-gray-700">{$_('permissions')}</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>
<!-- -->
{/if}
{/each}
</div>
</section>
{:catch error}