From ff34e3b925321c80e9d7d42d0fd50e397d198435 Mon Sep 17 00:00:00 2001 From: Kyle Mendell Date: Thu, 6 Mar 2025 10:42:31 -0600 Subject: [PATCH] fix: default sorting on tables (#299) Co-authored-by: Elias Schneider --- .../settings/admin/oidc-clients/+page.server.ts | 17 ++++++++++++++++- .../admin/oidc-clients/oidc-client-list.svelte | 15 +++++++++++++-- .../settings/admin/user-groups/+page.server.ts | 16 +++++++++++++++- .../admin/user-groups/user-group-list.svelte | 9 ++++++++- .../admin/user-groups/user-selection.svelte | 15 ++++++++++++--- .../routes/settings/admin/users/+page.server.ts | 16 +++++++++++++++- .../settings/admin/users/user-list.svelte | 10 +++++++++- 7 files changed, 88 insertions(+), 10 deletions(-) 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 20bf9757..a5f4d84f 100644 --- a/frontend/src/routes/settings/admin/oidc-clients/+page.server.ts +++ b/frontend/src/routes/settings/admin/oidc-clients/+page.server.ts @@ -1,9 +1,24 @@ import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants'; import OIDCService from '$lib/services/oidc-service'; +import type { SearchPaginationSortRequest } from '$lib/types/pagination.type'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ cookies }) => { const oidcService = new OIDCService(cookies.get(ACCESS_TOKEN_COOKIE_NAME)); - const clients = await oidcService.listClients(); + + // Create request options with default sorting + const requestOptions: SearchPaginationSortRequest = { + sort: { + column: 'name', + direction: 'asc' + }, + pagination: { + page: 1, + limit: 10 + } + }; + + const clients = await oidcService.listClients(requestOptions); + return clients; }; 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 2831690e..cb7ca9d1 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 @@ -11,10 +11,20 @@ import { toast } from 'svelte-sonner'; import OneTimeLinkModal from './client-secret.svelte'; - let { clients: initialClients }: { clients: Paginated } = $props(); + let { + clients: initialClients + }: { + clients: Paginated; + } = $props(); let clients = $state>(initialClients); let oneTimeLink = $state(null); - let requestOptions: SearchPaginationSortRequest | undefined = $state(); + let requestOptions: SearchPaginationSortRequest | undefined = $state({ + sort: { column: 'name', direction: 'asc' }, + pagination: { + page: initialClients.pagination.currentPage, + limit: initialClients.pagination.itemsPerPage + } + }); $effect(() => { clients = initialClients; @@ -46,6 +56,7 @@ (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 70ebb386..9a600339 100644 --- a/frontend/src/routes/settings/admin/user-groups/+page.server.ts +++ b/frontend/src/routes/settings/admin/user-groups/+page.server.ts @@ -1,9 +1,23 @@ import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants'; import UserGroupService from '$lib/services/user-group-service'; +import type { SearchPaginationSortRequest } from '$lib/types/pagination.type'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ cookies }) => { const userGroupService = new UserGroupService(cookies.get(ACCESS_TOKEN_COOKIE_NAME)); - const userGroups = await userGroupService.list(); + + // Create request options with default sorting + const requestOptions: SearchPaginationSortRequest = { + sort: { + column: 'friendlyName', + direction: 'asc' + }, + pagination: { + page: 1, + limit: 10 + } + }; + + const userGroups = await userGroupService.list(requestOptions); return userGroups; }; 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 88202481..ccf2e58c 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 @@ -18,7 +18,13 @@ $props(); let userGroups = $state>(initialUserGroups); - let requestOptions: SearchPaginationSortRequest | undefined = $state(); + let requestOptions: SearchPaginationSortRequest | undefined = $state({ + sort: { column: 'friendlyName', direction: 'asc' }, + pagination: { + page: initialUserGroups.pagination.currentPage, + limit: initialUserGroups.pagination.itemsPerPage + } + }); const userGroupService = new UserGroupService(); @@ -47,6 +53,7 @@ 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 c7adaf56..2cadd3b2 100644 --- a/frontend/src/routes/settings/admin/user-groups/user-selection.svelte +++ b/frontend/src/routes/settings/admin/user-groups/user-selection.svelte @@ -2,7 +2,7 @@ import AdvancedTable from '$lib/components/advanced-table.svelte'; import * as Table from '$lib/components/ui/table'; import UserService from '$lib/services/user-service'; - import type { Paginated } from '$lib/types/pagination.type'; + import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type'; import type { User } from '$lib/types/user.type'; let { @@ -10,15 +10,24 @@ 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 + } + }); + + let users = $state>(initialUsers); const userService = new UserService(); - - let users = $state(initialUsers); (users = await userService.list(o))} + {requestOptions} + defaultSort={{ column: 'name', direction: 'asc' }} columns={[ { label: 'Name', sortColumn: 'name' }, { label: 'Email', sortColumn: 'email' } diff --git a/frontend/src/routes/settings/admin/users/+page.server.ts b/frontend/src/routes/settings/admin/users/+page.server.ts index 15d419d3..093cecef 100644 --- a/frontend/src/routes/settings/admin/users/+page.server.ts +++ b/frontend/src/routes/settings/admin/users/+page.server.ts @@ -1,9 +1,23 @@ import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants'; import UserService from '$lib/services/user-service'; +import type { SearchPaginationSortRequest } from '$lib/types/pagination.type'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ cookies }) => { const userService = new UserService(cookies.get(ACCESS_TOKEN_COOKIE_NAME)); - const users = await userService.list(); + + // Create request options with default sorting + const requestOptions: SearchPaginationSortRequest = { + sort: { + column: 'firstName', + direction: 'asc' + }, + pagination: { + page: 1, + limit: 10 + } + }; + + const users = await userService.list(requestOptions); return users; }; diff --git a/frontend/src/routes/settings/admin/users/user-list.svelte b/frontend/src/routes/settings/admin/users/user-list.svelte index 7e0861c9..ee147cc4 100644 --- a/frontend/src/routes/settings/admin/users/user-list.svelte +++ b/frontend/src/routes/settings/admin/users/user-list.svelte @@ -17,10 +17,17 @@ import OneTimeLinkModal from './one-time-link-modal.svelte'; let { users = $bindable() }: { users: Paginated } = $props(); - let requestOptions: SearchPaginationSortRequest | undefined = $state(); let userIdToCreateOneTimeLink: string | null = $state(null); + let requestOptions: SearchPaginationSortRequest | undefined = $state({ + sort: { column: 'firstName', direction: 'asc' }, + pagination: { + page: users.pagination.currentPage, + limit: users.pagination.itemsPerPage + } + }); + const userService = new UserService(); async function deleteUser(user: User) { @@ -47,6 +54,7 @@ (users = await userService.list(options))} columns={[ { label: 'First name', sortColumn: 'firstName' },