refac
This commit is contained in:
Timothy Jaeryang Baek
@@ -6,15 +6,10 @@
|
||||
import { user } from '$lib/stores';
|
||||
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import UsersSolid from '$lib/components/icons/UsersSolid.svelte';
|
||||
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
|
||||
import Search from '$lib/components/icons/Search.svelte';
|
||||
import EditGroupModal from './Groups/EditGroupModal.svelte';
|
||||
import GroupItem from './Groups/GroupItem.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import Check from '$lib/components/icons/Check.svelte';
|
||||
import Select from '$lib/components/common/Select.svelte';
|
||||
import { createNewGroup, getGroups } from '$lib/apis/groups';
|
||||
import { getUserDefaultPermissions, updateUserDefaultPermissions } from '$lib/apis/users';
|
||||
|
||||
@@ -25,12 +20,6 @@
|
||||
let groups = [];
|
||||
|
||||
let query = '';
|
||||
let sortBy = 'members';
|
||||
|
||||
const sortItems = [
|
||||
{ value: 'name', label: $i18n.t('Name') },
|
||||
{ value: 'members', label: $i18n.t('Members') }
|
||||
];
|
||||
|
||||
$: filteredGroups = groups
|
||||
.filter((group) => {
|
||||
@@ -43,12 +32,7 @@
|
||||
}
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (sortBy === 'name') {
|
||||
return a.name.localeCompare(b.name);
|
||||
} else if (sortBy === 'members') {
|
||||
return (b.member_count ?? 0) - (a.member_count ?? 0);
|
||||
}
|
||||
return 0;
|
||||
return (b.member_count ?? 0) - (a.member_count ?? 0) || a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
let defaultPermissions = {};
|
||||
@@ -122,6 +106,18 @@
|
||||
</div>
|
||||
|
||||
<div class="flex w-full justify-end gap-1.5">
|
||||
<button
|
||||
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
|
||||
aria-haspopup="dialog"
|
||||
on:click={() => {
|
||||
showDefaultPermissionsModal = true;
|
||||
}}
|
||||
>
|
||||
<div class="self-center font-normal line-clamp-1">
|
||||
{$i18n.t('Default permissions')}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
|
||||
on:click={() => {
|
||||
@@ -162,36 +158,10 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Select
|
||||
bind:value={sortBy}
|
||||
items={sortItems}
|
||||
placeholder={$i18n.t('Sort by')}
|
||||
triggerClass="relative flex items-center gap-0.5 px-2.5 py-1.5 text-sm bg-gray-50 dark:bg-gray-850 rounded-xl shrink-0"
|
||||
align="end"
|
||||
>
|
||||
<svelte:fragment slot="trigger" let:selectedLabel>
|
||||
<span
|
||||
class="inline-flex h-input px-0.5 outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
|
||||
>
|
||||
{selectedLabel}
|
||||
</span>
|
||||
<ChevronDown className="size-3.5" strokeWidth="2.5" />
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="item" let:item let:selected>
|
||||
{item.label}
|
||||
{#if selected}
|
||||
<div class="ml-auto">
|
||||
<Check />
|
||||
</div>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{#if filteredGroups.length !== 0}
|
||||
<div class="my-1 gap-x-2 gap-y-0.5 grid lg:grid-cols-2">
|
||||
<div class="my-1 grid grid-cols-1 gap-y-0.5">
|
||||
{#each filteredGroups as group}
|
||||
<GroupItem {group} {setGroups} {defaultPermissions} />
|
||||
{/each}
|
||||
@@ -218,30 +188,4 @@
|
||||
onSubmit={updateDefaultPermissionsHandler}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="flex items-center justify-between rounded-2xl w-full transition mt-2 px-2.5 py-2 hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
|
||||
aria-haspopup="dialog"
|
||||
on:click={() => {
|
||||
showDefaultPermissionsModal = true;
|
||||
}}
|
||||
>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="p-1.5 bg-black/5 dark:bg-white/10 rounded-full">
|
||||
<UsersSolid className="size-4" />
|
||||
</div>
|
||||
|
||||
<div class="text-left">
|
||||
<div class=" text-sm font-normal">{$i18n.t('Default permissions')}</div>
|
||||
|
||||
<div class="flex text-xs mt-0.5">
|
||||
{$i18n.t('applies to all users with the "user" role')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ChevronRight strokeWidth="2.5" />
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@@ -19,6 +19,9 @@
|
||||
export let setGroups = () => {};
|
||||
|
||||
let showEdit = false;
|
||||
$: hasCustomPermissions =
|
||||
group?.permissions &&
|
||||
Object.keys(group.permissions).some((key) => group.permissions[key] !== undefined);
|
||||
|
||||
const updateHandler = async (_group) => {
|
||||
const res = await updateGroupById(localStorage.token, group.id, _group).catch((error) => {
|
||||
@@ -63,33 +66,58 @@
|
||||
/>
|
||||
|
||||
<button
|
||||
class="flex space-x-4 cursor-pointer text-left w-full px-2.5 py-1.5 rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50 transition"
|
||||
class="group flex cursor-pointer text-left w-full px-2.5 py-2.5 rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50 transition"
|
||||
on:click={() => {
|
||||
showEdit = true;
|
||||
}}
|
||||
>
|
||||
<div class="w-full">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0 pl-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="text-sm font-normal line-clamp-1">{group.name}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1.5 px-1 line-clamp-1">
|
||||
<div class="text-xs text-gray-500 shrink-0">
|
||||
{$i18n.t('{{COUNT}} members', { COUNT: group?.member_count ?? 0 })}
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-0.5 pl-1">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<div class="text-sm font-normal line-clamp-1 text-gray-900 dark:text-gray-100">
|
||||
{group.name}
|
||||
</div>
|
||||
|
||||
{#if group?.description}
|
||||
<div class="text-xs overflow-hidden text-ellipsis line-clamp-1">
|
||||
<div
|
||||
class="shrink-0 rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[11px] font-normal leading-none text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{$i18n.t('{{COUNT}} members', { COUNT: group?.member_count ?? 0 })}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex min-w-0 items-center gap-1.5 px-1 text-xs text-gray-500">
|
||||
<div class="line-clamp-1 min-w-0">
|
||||
{#if group?.description}
|
||||
{group.description}
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
{$i18n.t('No description')}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 text-gray-300 dark:text-gray-700">/</div>
|
||||
|
||||
<div class="shrink-0">
|
||||
{#if hasCustomPermissions}
|
||||
{$i18n.t('Custom permissions')}
|
||||
{:else}
|
||||
{$i18n.t('Default permissions')}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex self-center ml-2 p-1.5 dark:text-gray-300">
|
||||
<Pencil className="size-3.5" />
|
||||
<div class="flex shrink-0 items-center gap-1.5">
|
||||
<div
|
||||
class="hidden text-xs text-gray-500 transition group-hover:text-gray-700 dark:group-hover:text-gray-300 sm:block"
|
||||
>
|
||||
{$i18n.t('Edit')}
|
||||
</div>
|
||||
<div
|
||||
class="flex self-center p-1.5 text-gray-500 transition group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100"
|
||||
>
|
||||
<Pencil className="size-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user