mirror of
https://github.com/nikdoof/pocket-id.git
synced 2025-12-14 15:22:18 +00:00
74 lines
2.7 KiB
Svelte
74 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import AdvancedTable from '$lib/components/advanced-table.svelte';
|
|
import { openConfirmDialog } from '$lib/components/confirm-dialog/';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
|
|
import * as Table from '$lib/components/ui/table';
|
|
import UserGroupService from '$lib/services/user-group-service';
|
|
import type { Paginated } from '$lib/types/pagination.type';
|
|
import type { UserGroup, UserGroupWithUserCount } from '$lib/types/user-group.type';
|
|
import { axiosErrorToast } from '$lib/utils/error-util';
|
|
import { LucidePencil, LucideTrash } from 'lucide-svelte';
|
|
import Ellipsis from 'lucide-svelte/icons/ellipsis';
|
|
import { toast } from 'svelte-sonner';
|
|
|
|
let { userGroups: initialUserGroups }: { userGroups: Paginated<UserGroupWithUserCount> } =
|
|
$props();
|
|
|
|
let userGroups = $state<Paginated<UserGroupWithUserCount>>(initialUserGroups);
|
|
|
|
const userGroupService = new UserGroupService();
|
|
|
|
async function deleteUserGroup(userGroup: UserGroup) {
|
|
openConfirmDialog({
|
|
title: `Delete ${userGroup.name}`,
|
|
message: 'Are you sure you want to delete this user group?',
|
|
confirm: {
|
|
label: 'Delete',
|
|
destructive: true,
|
|
action: async () => {
|
|
try {
|
|
await userGroupService.remove(userGroup.id);
|
|
userGroups = await userGroupService.list();
|
|
} catch (e) {
|
|
axiosErrorToast(e);
|
|
}
|
|
toast.success('User group deleted successfully');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async function fetchItems(search: string, page: number, limit: number) {
|
|
return userGroupService.list(search, { page, limit });
|
|
}
|
|
</script>
|
|
|
|
<AdvancedTable items={userGroups} {fetchItems} columns={['Friendly Name', 'Name', 'User Count', {label: "Actions", hidden: true}]}>
|
|
{#snippet rows({ item })}
|
|
<Table.Cell>{item.friendlyName}</Table.Cell>
|
|
<Table.Cell>{item.name}</Table.Cell>
|
|
<Table.Cell>{item.userCount}</Table.Cell>
|
|
<Table.Cell class="flex justify-end">
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger asChild let:builder>
|
|
<Button aria-haspopup="true" size="icon" variant="ghost" builders={[builder]}>
|
|
<Ellipsis class="h-4 w-4" />
|
|
<span class="sr-only">Toggle menu</span>
|
|
</Button>
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content align="end">
|
|
<DropdownMenu.Item href="/settings/admin/user-groups/{item.id}"
|
|
><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
|
|
>
|
|
<DropdownMenu.Item
|
|
class="text-red-500 focus:!text-red-700"
|
|
on:click={() => deleteUserGroup(item)}
|
|
><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
|
|
>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</Table.Cell>
|
|
{/snippet}
|
|
</AdvancedTable>
|