nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-14 07:12:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: debounce oidc client and user search

Browse Source
This commit is contained in:
Elias Schneider
2024-09-16 23:18:55 +02:00
parent 64cf56276a
commit 9c2848db1d
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
View File

@@ -7,6 +7,7 @@
import OIDCService from '$lib/services/oidc-service'; import OIDCService from '$lib/services/oidc-service';
import type { OidcClient } from '$lib/types/oidc.type'; import type { OidcClient } from '$lib/types/oidc.type';
import type { Paginated, PaginationRequest } from '$lib/types/pagination.type'; import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
import { debounced } from '$lib/utils/debounce-util';
import { axiosErrorToast } from '$lib/utils/error-util'; import { axiosErrorToast } from '$lib/utils/error-util';
import { LucidePencil, LucideTrash } from 'lucide-svelte'; import { LucidePencil, LucideTrash } from 'lucide-svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
@@ -28,6 +29,10 @@
}); });
let search = $state(''); let search = $state('');
const debouncedSearch = debounced(async (searchValue: string) => {
clients = await oidcService.listClients(searchValue, pagination);
}, 400);
async function deleteClient(client: OidcClient) { async function deleteClient(client: OidcClient) {
openConfirmDialog({ openConfirmDialog({
title: `Delete ${client.name}`, title: `Delete ${client.name}`,
@@ -53,8 +58,7 @@
type="search" type="search"
placeholder="Search clients" placeholder="Search clients"
bind:value={search} bind:value={search}
on:input={async (e) => on:input={(e) => debouncedSearch((e.target as HTMLInputElement).value)}
(clients = await oidcService.listClients((e.target as HTMLInputElement).value, pagination))}
/> />
<Table.Root> <Table.Root>
<Table.Header class="sr-only"> <Table.Header class="sr-only">

9
frontend/src/routes/settings/admin/users/user-list.svelte
View File

@@ -33,7 +33,9 @@
}); });
let search = $state(''); let search = $state('');
const debouncedFetchUsers = debounced(userService.list, 500); const debouncedSearch = debounced(async (searchValue: string) => {
users = await userService.list(searchValue, pagination);
}, 400);
async function deleteUser(user: User) { async function deleteUser(user: User) {
openConfirmDialog({ openConfirmDialog({
@@ -69,12 +71,11 @@
type="search" type="search"
placeholder="Search users" placeholder="Search users"
bind:value={search} bind:value={search}
on:input={async (e) => on:input={(e) => debouncedSearch((e.target as HTMLInputElement).value)}
(users = await userService.list((e.target as HTMLInputElement).value, pagination))}
/> />
<Table.Root> <Table.Root>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.Head class="hidden md:table-cell">First name</Table.Head> <Table.Head class="hidden md:table-cell">First name</Table.Head>
<Table.Head class="hidden md:table-cell">Last name</Table.Head> <Table.Head class="hidden md:table-cell">Last name</Table.Head>
<Table.Head>Email</Table.Head> <Table.Head>Email</Table.Head>