diff --git a/frontend/src/lib/components/advanced-table.svelte b/frontend/src/lib/components/advanced-table.svelte index 3ae35911..573fcf88 100644 --- a/frontend/src/lib/components/advanced-table.svelte +++ b/frontend/src/lib/components/advanced-table.svelte @@ -18,35 +18,21 @@ selectedIds = $bindable(), withoutSearch = false, selectionDisabled = false, - defaultSort, onRefresh, columns, rows }: { items: Paginated; - requestOptions?: SearchPaginationSortRequest; + requestOptions: SearchPaginationSortRequest; selectedIds?: string[]; withoutSearch?: boolean; selectionDisabled?: boolean; - defaultSort?: { column: string; direction: 'asc' | 'desc' }; onRefresh: (requestOptions: SearchPaginationSortRequest) => Promise>; columns: { label: string; hidden?: boolean; sortColumn?: string }[]; rows: Snippet<[{ item: T }]>; } = $props(); let searchValue = $state(''); - - if (!requestOptions) { - requestOptions = { - search: '', - sort: defaultSort, - pagination: { - page: items.pagination.currentPage, - limit: items.pagination.itemsPerPage - } - }; - } - let availablePageSizes: number[] = [10, 20, 50, 100]; let allChecked = $derived.by(() => { @@ -83,20 +69,20 @@ } async function onPageChange(page: number) { - requestOptions!.pagination = { limit: items.pagination.itemsPerPage, page }; - onRefresh(requestOptions!); + requestOptions.pagination = { limit: items.pagination.itemsPerPage, page }; + onRefresh(requestOptions); } async function onPageSizeChange(size: number) { - requestOptions!.pagination = { limit: size, page: 1 }; - onRefresh(requestOptions!); + requestOptions.pagination = { limit: size, page: 1 }; + onRefresh(requestOptions); } async function onSort(column?: string, direction: 'asc' | 'desc' = 'asc') { if (!column) return; - requestOptions!.sort = { column, direction }; - onRefresh(requestOptions!); + requestOptions.sort = { column, direction }; + onRefresh(requestOptions); } diff --git a/frontend/src/lib/components/user-group-selection.svelte b/frontend/src/lib/components/user-group-selection.svelte index 0a68a88c..6befbb3d 100644 --- a/frontend/src/lib/components/user-group-selection.svelte +++ b/frontend/src/lib/components/user-group-selection.svelte @@ -2,32 +2,44 @@ import AdvancedTable from '$lib/components/advanced-table.svelte'; 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 { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type'; import type { UserGroup } from '$lib/types/user-group.type'; + import { onMount } from 'svelte'; let { - groups: initialGroups, selectionDisabled = false, selectedGroupIds = $bindable() }: { - groups: Paginated; selectionDisabled?: boolean; selectedGroupIds: string[]; } = $props(); const userGroupService = new UserGroupService(); - let groups = $state(initialGroups); + let groups: Paginated | undefined = $state(); + let requestOptions: SearchPaginationSortRequest = $state({ + sort: { + column: 'friendlyName', + direction: 'asc' + } + }); + + onMount(async () => { + groups = await userGroupService.list(requestOptions); + }); - (groups = await userGroupService.list(o))} - columns={[{ label: 'Name', sortColumn: 'name' }]} - bind:selectedIds={selectedGroupIds} - {selectionDisabled} -> - {#snippet rows({ item })} - {item.name} - {/snippet} - +{#if groups} + (groups = await userGroupService.list(o))} + columns={[{ label: 'Name', sortColumn: 'friendlyName' }]} + bind:selectedIds={selectedGroupIds} + {selectionDisabled} + > + {#snippet rows({ item })} + {item.name} + {/snippet} + +{/if} diff --git a/frontend/src/routes/settings/admin/oidc-clients/+page.server.ts b/frontend/src/routes/settings/admin/oidc-clients/+page.server.ts index a5f4d84f..1b2fd774 100644 --- a/frontend/src/routes/settings/admin/oidc-clients/+page.server.ts +++ b/frontend/src/routes/settings/admin/oidc-clients/+page.server.ts @@ -6,19 +6,14 @@ import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ cookies }) => { const oidcService = new OIDCService(cookies.get(ACCESS_TOKEN_COOKIE_NAME)); - // Create request options with default sorting - const requestOptions: SearchPaginationSortRequest = { + const clientsRequestOptions: SearchPaginationSortRequest = { sort: { column: 'name', direction: 'asc' - }, - pagination: { - page: 1, - limit: 10 } }; - const clients = await oidcService.listClients(requestOptions); + const clients = await oidcService.listClients(clientsRequestOptions); - return clients; + return { clients, clientsRequestOptions }; }; diff --git a/frontend/src/routes/settings/admin/oidc-clients/+page.svelte b/frontend/src/routes/settings/admin/oidc-clients/+page.svelte index 269390f0..333739a1 100644 --- a/frontend/src/routes/settings/admin/oidc-clients/+page.svelte +++ b/frontend/src/routes/settings/admin/oidc-clients/+page.svelte @@ -14,7 +14,8 @@ import OIDCClientList from './oidc-client-list.svelte'; let { data } = $props(); - let clients = $state(data); + let clients = $state(data.clients); + let clientsRequestOptions = $state(data.clientsRequestOptions); let expandAddClient = $state(false); const oidcService = new OIDCService(); @@ -71,6 +72,6 @@ Manage OIDC Clients - + diff --git a/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte b/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte index 001c3434..d7780361 100644 --- a/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte +++ b/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte @@ -9,7 +9,6 @@ import Label from '$lib/components/ui/label/label.svelte'; import UserGroupSelection from '$lib/components/user-group-selection.svelte'; import OidcService from '$lib/services/oidc-service'; - import UserGroupService from '$lib/services/user-group-service'; import clientSecretStore from '$lib/stores/client-secret-store'; import type { OidcClientCreateWithLogo } from '$lib/types/oidc.type'; import { axiosErrorToast } from '$lib/utils/error-util'; @@ -26,7 +25,6 @@ let showAllDetails = $state(false); const oidcService = new OidcService(); - const userGroupService = new UserGroupService(); const setupDetails = $state({ 'Authorization URL': `https://${$page.url.hostname}/authorize`, @@ -177,9 +175,7 @@ title="Allowed User Groups" description="Add user groups to this client to restrict access to users in these groups. If no user groups are selected, all users will have access to this client." > - {#await userGroupService.list() then groups} - - {/await} +
diff --git a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte index cb7ca9d1..d637a78f 100644 --- a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte +++ b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte @@ -12,23 +12,14 @@ import OneTimeLinkModal from './client-secret.svelte'; let { - clients: initialClients + clients = $bindable(), + requestOptions }: { clients: Paginated; + requestOptions: SearchPaginationSortRequest; } = $props(); - let clients = $state>(initialClients); - let oneTimeLink = $state(null); - let requestOptions: SearchPaginationSortRequest | undefined = $state({ - sort: { column: 'name', direction: 'asc' }, - pagination: { - page: initialClients.pagination.currentPage, - limit: initialClients.pagination.itemsPerPage - } - }); - $effect(() => { - clients = initialClients; - }); + let oneTimeLink = $state(null); const oidcService = new OIDCService(); @@ -56,7 +47,6 @@ (clients = await oidcService.listClients(o))} columns={[ { label: 'Logo' }, diff --git a/frontend/src/routes/settings/admin/user-groups/+page.server.ts b/frontend/src/routes/settings/admin/user-groups/+page.server.ts index 9a600339..9ed42505 100644 --- a/frontend/src/routes/settings/admin/user-groups/+page.server.ts +++ b/frontend/src/routes/settings/admin/user-groups/+page.server.ts @@ -6,18 +6,13 @@ import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ cookies }) => { const userGroupService = new UserGroupService(cookies.get(ACCESS_TOKEN_COOKIE_NAME)); - // Create request options with default sorting - const requestOptions: SearchPaginationSortRequest = { + const userGroupsRequestOptions: SearchPaginationSortRequest = { sort: { column: 'friendlyName', direction: 'asc' }, - pagination: { - page: 1, - limit: 10 - } }; - const userGroups = await userGroupService.list(requestOptions); - return userGroups; + const userGroups = await userGroupService.list(userGroupsRequestOptions); + return {userGroups, userGroupsRequestOptions}; }; diff --git a/frontend/src/routes/settings/admin/user-groups/+page.svelte b/frontend/src/routes/settings/admin/user-groups/+page.svelte index a1956e89..797ed21d 100644 --- a/frontend/src/routes/settings/admin/user-groups/+page.svelte +++ b/frontend/src/routes/settings/admin/user-groups/+page.svelte @@ -13,7 +13,8 @@ import UserGroupList from './user-group-list.svelte'; let { data } = $props(); - let userGroups: Paginated = $state(data); + let userGroups = $state(data.userGroups); + let userGroupsRequestOptions = $state(data.userGroupsRequestOptions); let expandAddUserGroup = $state(false); const userGroupService = new UserGroupService(); @@ -68,6 +69,6 @@ Manage User Groups - + diff --git a/frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte b/frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte index 7a03217a..d06ff69d 100644 --- a/frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte +++ b/frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte @@ -6,14 +6,13 @@ import * as Card from '$lib/components/ui/card'; import CustomClaimService from '$lib/services/custom-claim-service'; import UserGroupService from '$lib/services/user-group-service'; - import UserService from '$lib/services/user-service'; + import appConfigStore from '$lib/stores/application-configuration-store'; import type { UserGroupCreate } from '$lib/types/user-group.type'; import { axiosErrorToast } from '$lib/utils/error-util'; import { LucideChevronLeft } from 'lucide-svelte'; import { toast } from 'svelte-sonner'; import UserGroupForm from '../user-group-form.svelte'; import UserSelection from '../user-selection.svelte'; - import appConfigStore from '$lib/stores/application-configuration-store'; let { data } = $props(); let userGroup = $state({ @@ -22,7 +21,6 @@ }); const userGroupService = new UserGroupService(); - const userService = new UserService(); const customClaimService = new CustomClaimService(); async function updateUserGroup(updatedUserGroup: UserGroupCreate) { @@ -86,16 +84,14 @@ - {#await userService.list() then users} - - {/await} +
- updateUserGroupUsers(userGroup.userIds)}>Save
diff --git a/frontend/src/routes/settings/admin/user-groups/user-group-list.svelte b/frontend/src/routes/settings/admin/user-groups/user-group-list.svelte index ccf2e58c..f8a514d8 100644 --- a/frontend/src/routes/settings/admin/user-groups/user-group-list.svelte +++ b/frontend/src/routes/settings/admin/user-groups/user-group-list.svelte @@ -14,17 +14,13 @@ import Ellipsis from 'lucide-svelte/icons/ellipsis'; import { toast } from 'svelte-sonner'; - let { userGroups: initialUserGroups }: { userGroups: Paginated } = - $props(); - - let userGroups = $state>(initialUserGroups); - let requestOptions: SearchPaginationSortRequest | undefined = $state({ - sort: { column: 'friendlyName', direction: 'asc' }, - pagination: { - page: initialUserGroups.pagination.currentPage, - limit: initialUserGroups.pagination.itemsPerPage - } - }); + let { + userGroups, + requestOptions + }: { + userGroups: Paginated; + requestOptions: SearchPaginationSortRequest; + } = $props(); const userGroupService = new UserGroupService(); @@ -53,7 +49,6 @@ items={userGroups} onRefresh={async (o) => (userGroups = await userGroupService.list(o))} {requestOptions} - defaultSort={{ column: 'friendlyName', direction: 'asc' }} columns={[ { label: 'Friendly Name', sortColumn: 'friendlyName' }, { label: 'Name', sortColumn: 'name' }, diff --git a/frontend/src/routes/settings/admin/user-groups/user-selection.svelte b/frontend/src/routes/settings/admin/user-groups/user-selection.svelte index 2cadd3b2..98b318b2 100644 --- a/frontend/src/routes/settings/admin/user-groups/user-selection.svelte +++ b/frontend/src/routes/settings/admin/user-groups/user-selection.svelte @@ -4,39 +4,46 @@ import UserService from '$lib/services/user-service'; import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type'; import type { User } from '$lib/types/user.type'; + import { onMount } from 'svelte'; let { - users: initialUsers, selectionDisabled = false, selectedUserIds = $bindable() - }: { users: Paginated; selectionDisabled?: boolean; selectedUserIds: string[] } = $props(); - let requestOptions: SearchPaginationSortRequest | undefined = $state({ - sort: { column: 'friendlyName', direction: 'asc' }, - pagination: { - page: initialUsers.pagination.currentPage, - limit: initialUsers.pagination.itemsPerPage + }: { + selectionDisabled?: boolean; + selectedUserIds: string[]; + } = $props(); + + const userService = new UserService(); + + let users: Paginated | undefined = $state(); + let requestOptions: SearchPaginationSortRequest = $state({ + sort: { + column: 'firstName', + direction: 'asc' } }); - let users = $state>(initialUsers); - - const userService = new UserService(); + onMount(async () => { + users = await userService.list(requestOptions); + }); - (users = await userService.list(o))} - {requestOptions} - defaultSort={{ column: 'name', direction: 'asc' }} - columns={[ - { label: 'Name', sortColumn: 'name' }, - { label: 'Email', sortColumn: 'email' } - ]} - bind:selectedIds={selectedUserIds} - {selectionDisabled} -> - {#snippet rows({ item })} - {item.firstName} {item.lastName} - {item.email} - {/snippet} - +{#if users} + (users = await userService.list(o))} + {requestOptions} + columns={[ + { label: 'Name', sortColumn: 'firstName' }, + { label: 'Email', sortColumn: 'email' } + ]} + bind:selectedIds={selectedUserIds} + {selectionDisabled} + > + {#snippet rows({ item })} + {item.firstName} {item.lastName} + {item.email} + {/snippet} + +{/if} diff --git a/frontend/src/routes/settings/admin/users/+page.server.ts b/frontend/src/routes/settings/admin/users/+page.server.ts index 093cecef..b1bd0618 100644 --- a/frontend/src/routes/settings/admin/users/+page.server.ts +++ b/frontend/src/routes/settings/admin/users/+page.server.ts @@ -6,18 +6,13 @@ import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ cookies }) => { const userService = new UserService(cookies.get(ACCESS_TOKEN_COOKIE_NAME)); - // Create request options with default sorting - const requestOptions: SearchPaginationSortRequest = { + const usersRequestOptions: SearchPaginationSortRequest = { sort: { column: 'firstName', direction: 'asc' - }, - pagination: { - page: 1, - limit: 10 } }; - const users = await userService.list(requestOptions); - return users; + const users = await userService.list(usersRequestOptions); + return {users, usersRequestOptions}; }; diff --git a/frontend/src/routes/settings/admin/users/+page.svelte b/frontend/src/routes/settings/admin/users/+page.svelte index 45cf64ce..77498074 100644 --- a/frontend/src/routes/settings/admin/users/+page.svelte +++ b/frontend/src/routes/settings/admin/users/+page.svelte @@ -3,8 +3,7 @@ import * as Card from '$lib/components/ui/card'; import UserService from '$lib/services/user-service'; import appConfigStore from '$lib/stores/application-configuration-store'; - import type { Paginated } from '$lib/types/pagination.type'; - import type { User, UserCreate } from '$lib/types/user.type'; + import type { UserCreate } from '$lib/types/user.type'; import { axiosErrorToast } from '$lib/utils/error-util'; import { LucideMinus } from 'lucide-svelte'; import { toast } from 'svelte-sonner'; @@ -13,7 +12,9 @@ import UserList from './user-list.svelte'; let { data } = $props(); - let users: Paginated = $state(data); + let users = $state(data.users); + let usersRequestOptions = $state(data.usersRequestOptions); + let expandAddUser = $state(false); const userService = new UserService(); @@ -28,7 +29,7 @@ success = false; }); - users = await userService.list(); + users = await userService.list(usersRequestOptions); return success; } @@ -67,6 +68,6 @@ Manage Users - + diff --git a/frontend/src/routes/settings/admin/users/[id]/+page.svelte b/frontend/src/routes/settings/admin/users/[id]/+page.svelte index 4ca7cbcf..0484069c 100644 --- a/frontend/src/routes/settings/admin/users/[id]/+page.svelte +++ b/frontend/src/routes/settings/admin/users/[id]/+page.svelte @@ -5,15 +5,14 @@ import Badge from '$lib/components/ui/badge/badge.svelte'; import { Button } from '$lib/components/ui/button'; import * as Card from '$lib/components/ui/card'; + import UserGroupSelection from '$lib/components/user-group-selection.svelte'; import CustomClaimService from '$lib/services/custom-claim-service'; - import UserGroupService from '$lib/services/user-group-service'; import UserService from '$lib/services/user-service'; import appConfigStore from '$lib/stores/application-configuration-store'; import type { UserCreate } from '$lib/types/user.type'; import { axiosErrorToast } from '$lib/utils/error-util'; import { LucideChevronLeft } from 'lucide-svelte'; import { toast } from 'svelte-sonner'; - import UserGroupSelection from '$lib/components/user-group-selection.svelte'; import UserForm from '../user-form.svelte'; let { data } = $props(); @@ -24,7 +23,6 @@ const userService = new UserService(); const customClaimService = new CustomClaimService(); - const userGroupService = new UserGroupService(); async function updateUserGroups(userIds: string[]) { await userService @@ -101,14 +99,10 @@ title="User Groups" description="Manage which groups this user belongs to." > - {#await userGroupService.list() then groups} - - {/await} - +