mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-02-11 21:04:00 +00:00
82 lines
2.4 KiB
Svelte
82 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import AdvancedTable from '$lib/components/table/advanced-table.svelte';
|
|
import * as Avatar from '$lib/components/ui/avatar/index';
|
|
import { Badge } from '$lib/components/ui/badge';
|
|
import { m } from '$lib/paraglide/messages';
|
|
import UserService from '$lib/services/user-service';
|
|
import type { AdvancedTableColumn } from '$lib/types/advanced-table.type';
|
|
import type { User } from '$lib/types/user.type';
|
|
import { cachedProfilePicture } from '$lib/utils/cached-image-util';
|
|
|
|
let {
|
|
selectionDisabled = false,
|
|
selectedUserIds = $bindable()
|
|
}: {
|
|
selectionDisabled?: boolean;
|
|
selectedUserIds: string[];
|
|
} = $props();
|
|
|
|
const userService = new UserService();
|
|
|
|
const columns: AdvancedTableColumn<User>[] = [
|
|
{ label: 'ID', column: 'id', hidden: true },
|
|
{ label: m.profile_picture(), key: 'profilePicture', cell: ProfilePictureCell },
|
|
{ label: m.first_name(), column: 'firstName', sortable: true, hidden: true },
|
|
{ label: m.last_name(), column: 'lastName', sortable: true, hidden: true },
|
|
{ label: m.display_name(), column: 'displayName', sortable: true },
|
|
{ label: m.email(), column: 'email', sortable: true, hidden: true },
|
|
{ label: m.username(), column: 'username', sortable: true },
|
|
{
|
|
label: m.role(),
|
|
column: 'isAdmin',
|
|
sortable: true,
|
|
filterableValues: [
|
|
{ label: m.admin(), value: true },
|
|
{ label: m.user(), value: false }
|
|
],
|
|
value: (item) => (item.isAdmin ? m.admin() : m.user()),
|
|
hidden: true
|
|
},
|
|
{
|
|
label: m.status(),
|
|
column: 'disabled',
|
|
cell: StatusCell,
|
|
sortable: true,
|
|
value: (item) => (item.disabled ? m.disabled() : m.enabled()),
|
|
filterableValues: [
|
|
{
|
|
label: m.enabled(),
|
|
value: false
|
|
},
|
|
{
|
|
label: m.disabled(),
|
|
value: true
|
|
}
|
|
]
|
|
},
|
|
{ label: m.ldap_id(), column: 'ldapId', hidden: true },
|
|
{ label: m.locale(), column: 'locale', hidden: true }
|
|
];
|
|
</script>
|
|
|
|
{#snippet ProfilePictureCell({ item }: { item: User })}
|
|
<Avatar.Root class="size-8">
|
|
<Avatar.Image class="object-cover" src={cachedProfilePicture.getUrl(item.id)} />
|
|
</Avatar.Root>
|
|
{/snippet}
|
|
|
|
{#snippet StatusCell({ item }: { item: User })}
|
|
<Badge class="rounded-full" variant={item.disabled ? 'destructive' : 'default'}>
|
|
{item.disabled ? m.disabled() : m.enabled()}
|
|
</Badge>
|
|
{/snippet}
|
|
|
|
<AdvancedTable
|
|
id="user-selection"
|
|
fetchCallback={userService.list}
|
|
defaultSort={{ column: 'firstName', direction: 'asc' }}
|
|
bind:selectedIds={selectedUserIds}
|
|
{selectionDisabled}
|
|
{columns}
|
|
/>
|