feat/enh: user sharing perms
This commit is contained in:
Timothy Jaeryang Baek
@@ -15,17 +15,18 @@
|
||||
export let accessRoles = ['read'];
|
||||
export let accessControl = {};
|
||||
|
||||
export let allowPublic = true;
|
||||
export let share = true;
|
||||
export let sharePublic = true;
|
||||
|
||||
let selectedGroupId = '';
|
||||
let groups = [];
|
||||
|
||||
$: if (!allowPublic && accessControl === null) {
|
||||
$: if (!sharePublic && accessControl === null) {
|
||||
initPublicAccess();
|
||||
}
|
||||
|
||||
const initPublicAccess = () => {
|
||||
if (!allowPublic && accessControl === null) {
|
||||
if (!sharePublic && accessControl === null) {
|
||||
accessControl = {
|
||||
read: {
|
||||
group_ids: [],
|
||||
@@ -125,7 +126,7 @@
|
||||
}}
|
||||
>
|
||||
<option class=" text-gray-700" value="private" selected>{$i18n.t('Private')}</option>
|
||||
{#if allowPublic}
|
||||
{#if share && sharePublic}
|
||||
<option class=" text-gray-700" value="public" selected>{$i18n.t('Public')}</option>
|
||||
{/if}
|
||||
</select>
|
||||
@@ -140,48 +141,50 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if accessControl !== null}
|
||||
{@const accessGroups = groups.filter((group) =>
|
||||
(accessControl?.read?.group_ids ?? []).includes(group.id)
|
||||
)}
|
||||
<div>
|
||||
<div class="">
|
||||
<div class="flex justify-between mb-1.5">
|
||||
<div class="text-sm font-semibold">
|
||||
{$i18n.t('Groups')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
<div class="flex w-full">
|
||||
<div class="flex flex-1 items-center">
|
||||
<div class="w-full px-0.5">
|
||||
<select
|
||||
class="outline-hidden bg-transparent text-sm rounded-lg block w-full pr-10 max-w-full
|
||||
{#if share}
|
||||
{#if accessControl !== null}
|
||||
{@const accessGroups = groups.filter((group) =>
|
||||
(accessControl?.read?.group_ids ?? []).includes(group.id)
|
||||
)}
|
||||
<div>
|
||||
<div class="">
|
||||
<div class="flex justify-between mb-1.5">
|
||||
<div class="text-sm font-semibold">
|
||||
{$i18n.t('Groups')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
<div class="flex w-full">
|
||||
<div class="flex flex-1 items-center">
|
||||
<div class="w-full px-0.5">
|
||||
<select
|
||||
class="outline-hidden bg-transparent text-sm rounded-lg block w-full pr-10 max-w-full
|
||||
{selectedGroupId ? '' : 'text-gray-500'}
|
||||
dark:placeholder-gray-500"
|
||||
bind:value={selectedGroupId}
|
||||
on:change={() => {
|
||||
if (selectedGroupId !== '') {
|
||||
accessControl.read.group_ids = [
|
||||
...(accessControl?.read?.group_ids ?? []),
|
||||
selectedGroupId
|
||||
];
|
||||
bind:value={selectedGroupId}
|
||||
on:change={() => {
|
||||
if (selectedGroupId !== '') {
|
||||
accessControl.read.group_ids = [
|
||||
...(accessControl?.read?.group_ids ?? []),
|
||||
selectedGroupId
|
||||
];
|
||||
|
||||
selectedGroupId = '';
|
||||
onChange(accessControl);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option class=" text-gray-700" value="" disabled selected
|
||||
>{$i18n.t('Select a group')}</option
|
||||
selectedGroupId = '';
|
||||
onChange(accessControl);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#each groups.filter((group) => !(accessControl?.read?.group_ids ?? []).includes(group.id)) as group}
|
||||
<option class=" text-gray-700" value={group.id}>{group.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<option class=" text-gray-700" value="" disabled selected
|
||||
>{$i18n.t('Select a group')}</option
|
||||
>
|
||||
{#each groups.filter((group) => !(accessControl?.read?.group_ids ?? []).includes(group.id)) as group}
|
||||
<option class=" text-gray-700" value={group.id}>{group.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<Tooltip content={$i18n.t('Add Group')}>
|
||||
<button
|
||||
class=" p-1 rounded-xl bg-transparent dark:hover:bg-white/5 hover:bg-black/5 transition font-medium text-sm flex items-center space-x-1"
|
||||
@@ -192,80 +195,81 @@
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class=" border-gray-100 dark:border-gray-700/10 mt-1.5 mb-2.5 w-full" />
|
||||
<hr class=" border-gray-100 dark:border-gray-700/10 mt-1.5 mb-2.5 w-full" />
|
||||
|
||||
<div class="flex flex-col gap-2 mb-1 px-0.5">
|
||||
{#if accessGroups.length > 0}
|
||||
{#each accessGroups as group}
|
||||
<div class="flex items-center gap-3 justify-between text-xs w-full transition">
|
||||
<div class="flex items-center gap-1.5 w-full font-medium">
|
||||
<div>
|
||||
<UserCircleSolid className="size-4" />
|
||||
<div class="flex flex-col gap-2 mb-1 px-0.5">
|
||||
{#if accessGroups.length > 0}
|
||||
{#each accessGroups as group}
|
||||
<div class="flex items-center gap-3 justify-between text-xs w-full transition">
|
||||
<div class="flex items-center gap-1.5 w-full font-medium">
|
||||
<div>
|
||||
<UserCircleSolid className="size-4" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{group.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{group.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-end items-center gap-0.5">
|
||||
<button
|
||||
class=""
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if (accessRoles.includes('write')) {
|
||||
if ((accessControl?.write?.group_ids ?? []).includes(group.id)) {
|
||||
accessControl.write.group_ids = (
|
||||
accessControl?.write?.group_ids ?? []
|
||||
).filter((group_id) => group_id !== group.id);
|
||||
} else {
|
||||
accessControl.write.group_ids = [
|
||||
...(accessControl?.write?.group_ids ?? []),
|
||||
group.id
|
||||
];
|
||||
<div class="w-full flex justify-end items-center gap-0.5">
|
||||
<button
|
||||
class=""
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if (accessRoles.includes('write')) {
|
||||
if ((accessControl?.write?.group_ids ?? []).includes(group.id)) {
|
||||
accessControl.write.group_ids = (
|
||||
accessControl?.write?.group_ids ?? []
|
||||
).filter((group_id) => group_id !== group.id);
|
||||
} else {
|
||||
accessControl.write.group_ids = [
|
||||
...(accessControl?.write?.group_ids ?? []),
|
||||
group.id
|
||||
];
|
||||
}
|
||||
onChange(accessControl);
|
||||
}
|
||||
onChange(accessControl);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if (accessControl?.write?.group_ids ?? []).includes(group.id)}
|
||||
<Badge type={'success'} content={$i18n.t('Write')} />
|
||||
{:else}
|
||||
<Badge type={'info'} content={$i18n.t('Read')} />
|
||||
{/if}
|
||||
</button>
|
||||
}}
|
||||
>
|
||||
{#if (accessControl?.write?.group_ids ?? []).includes(group.id)}
|
||||
<Badge type={'success'} content={$i18n.t('Write')} />
|
||||
{:else}
|
||||
<Badge type={'info'} content={$i18n.t('Read')} />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class=" rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
accessControl.read.group_ids = (accessControl?.read?.group_ids ?? []).filter(
|
||||
(id) => id !== group.id
|
||||
);
|
||||
accessControl.write.group_ids = (
|
||||
accessControl?.write?.group_ids ?? []
|
||||
).filter((id) => id !== group.id);
|
||||
onChange(accessControl);
|
||||
}}
|
||||
>
|
||||
<XMark />
|
||||
</button>
|
||||
<button
|
||||
class=" rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
accessControl.read.group_ids = (
|
||||
accessControl?.read?.group_ids ?? []
|
||||
).filter((id) => id !== group.id);
|
||||
accessControl.write.group_ids = (
|
||||
accessControl?.write?.group_ids ?? []
|
||||
).filter((id) => id !== group.id);
|
||||
onChange(accessControl);
|
||||
}}
|
||||
>
|
||||
<XMark />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="text-gray-500 text-xs text-center py-2 px-10">
|
||||
{$i18n.t('No groups with access, add a group to grant access')}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="text-gray-500 text-xs text-center py-2 px-10">
|
||||
{$i18n.t('No groups with access, add a group to grant access')}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user