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

🙋‍♂️🔒 UserDetail - permission layout ui

Browse Source 
ref #12
This commit is contained in:
Philipp Dormann 2021-01-14 18:56:28 +01:00
parent 87387a54f2
commit 65b36f8e69
1 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/UserDetail.svelte
View File

@ -43,6 +43,20 @@
allpermissions=allpermissions.concat([p.target + ":" + p.action])
});
});
// editable_userdata.permissions=[];
const user_permissions = 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 => {
editable_userdata.permissions=editable_userdata.permissions.concat([p.target + ":" + p.action])
});
// editable_userdata.permissions.push()
// console.log(val.directlyGranted);
// console.log(val.inherited);
})
$: changes_performed = !lodashIsEqual(original_data, editable_userdata);
$: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
$: save_enabled = changes_performed||!groups_changed;
@ -293,8 +307,8 @@
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">
<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={() => {
@ -302,8 +316,8 @@
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>
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>
@ -313,16 +327,16 @@
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
<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 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>
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>