🙋‍♂️🔒 UserDetail - permission layout ui

ref #12
This commit is contained in:
Philipp Dormann 2021-01-14 18:56:28 +01:00
parent 87387a54f2
commit 65b36f8e69

View File

@ -43,6 +43,20 @@
allpermissions=allpermissions.concat([p.target + ":" + p.action]) 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); $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
$: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original); $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
$: save_enabled = changes_performed||!groups_changed; $: save_enabled = changes_performed||!groups_changed;
@ -293,8 +307,8 @@
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"> class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
{#each allpermissions as p} {#each allpermissions as p}
{#if !editable_userdata.permissions.includes(p)} {#if !editable_userdata.permissions.includes(p)}
<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"> 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} {p}
<button <button
on:click={() => { on:click={() => {
@ -302,8 +316,8 @@
editable_userdata.permissions = editable_userdata.permissions; editable_userdata.permissions = editable_userdata.permissions;
}} }}
type="button" 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> 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>
</p> </div>
{/if} {/if}
{/each} {/each}
</div> </div>
@ -313,16 +327,16 @@
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"> class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
{#each allpermissions as p} {#each allpermissions as p}
{#if editable_userdata.permissions.includes(p)} {#if editable_userdata.permissions.includes(p)}
<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"> 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">
{p} <button
<button
on:click={() => { on:click={() => {
editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p); editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
}} }}
type="button" 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> 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> {p}
</div>
{/if} {/if}
{/each} {/each}
</div> </div>