Files
pocket-id/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
2025-07-11 22:46:40 -05:00

87 lines
2.7 KiB
Svelte

<script lang="ts">
import AdvancedTable from '$lib/components/advanced-table.svelte';
import { openConfirmDialog } from '$lib/components/confirm-dialog/';
import ImageBox from '$lib/components/image-box.svelte';
import { Button } from '$lib/components/ui/button';
import * as Table from '$lib/components/ui/table';
import { m } from '$lib/paraglide/messages';
import OIDCService from '$lib/services/oidc-service';
import type { OidcClient, OidcClientWithAllowedUserGroupsCount } from '$lib/types/oidc.type';
import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
import { cachedOidcClientLogo } from '$lib/utils/cached-image-util';
import { axiosErrorToast } from '$lib/utils/error-util';
import { LucidePencil, LucideTrash } from '@lucide/svelte';
import { toast } from 'svelte-sonner';
let {
clients = $bindable(),
requestOptions
}: {
clients: Paginated<OidcClientWithAllowedUserGroupsCount>;
requestOptions: SearchPaginationSortRequest;
} = $props();
const oidcService = new OIDCService();
async function deleteClient(client: OidcClient) {
openConfirmDialog({
title: m.delete_name({ name: client.name }),
message: m.are_you_sure_you_want_to_delete_this_oidc_client(),
confirm: {
label: m.delete(),
destructive: true,
action: async () => {
try {
await oidcService.removeClient(client.id);
clients = await oidcService.listClients(requestOptions!);
toast.success(m.oidc_client_deleted_successfully());
} catch (e) {
axiosErrorToast(e);
}
}
}
});
}
</script>
<AdvancedTable
items={clients}
{requestOptions}
onRefresh={async (o) => (clients = await oidcService.listClients(o))}
columns={[
{ label: m.logo() },
{ label: m.name(), sortColumn: 'name' },
{ label: m.oidc_allowed_group_count(), sortColumn: 'allowedUserGroupsCount' },
{ label: m.actions(), hidden: true }
]}
>
{#snippet rows({ item })}
<Table.Cell class="w-8 font-medium">
{#if item.hasLogo}
<ImageBox
class="min-h-8 min-w-8 object-contain"
src={cachedOidcClientLogo.getUrl(item.id)}
alt={m.name_logo({ name: item.name })}
/>
{/if}
</Table.Cell>
<Table.Cell class="font-medium">{item.name}</Table.Cell>
<Table.Cell class="font-medium"
>{item.allowedUserGroupsCount > 0
? item.allowedUserGroupsCount
: m.unrestricted()}</Table.Cell
>
<Table.Cell class="flex justify-end gap-1">
<Button
href="/settings/admin/oidc-clients/{item.id}"
size="sm"
variant="outline"
aria-label={m.edit()}><LucidePencil class="size-3 " /></Button
>
<Button onclick={() => deleteClient(item)} size="sm" variant="outline" aria-label={m.delete()}
><LucideTrash class="size-3 text-red-500" /></Button
>
</Table.Cell>
{/snippet}
</AdvancedTable>