diff --git a/rsconcept/frontend/src/features/users/components/select-user.tsx b/rsconcept/frontend/src/features/users/components/select-user.tsx index 6abb3a28..d17e123c 100644 --- a/rsconcept/frontend/src/features/users/components/select-user.tsx +++ b/rsconcept/frontend/src/features/users/components/select-user.tsx @@ -5,6 +5,7 @@ import clsx from 'clsx'; import { SelectSingle } from '@/components/input'; import { type Styling } from '@/components/props'; +import { type IUserInfo } from '../backend/types'; import { useLabelUser } from '../backend/use-label-user'; import { useUsers } from '../backend/use-users'; import { matchUser } from '../models/user-api'; @@ -18,6 +19,19 @@ interface SelectUserProps extends Styling { noBorder?: boolean; } +function compareUsers(a: IUserInfo, b: IUserInfo) { + if (!a.last_name && !!b.last_name) { + return 1; + } else if (!!a.last_name && !b.last_name) { + return -1; + } else if (a.last_name !== b.last_name) { + return a.last_name.localeCompare(b.last_name); + } else if (a.first_name !== b.first_name) { + return a.first_name.localeCompare(b.first_name); + } + return a.id - b.id; +} + export function SelectUser({ className, filter, @@ -30,7 +44,11 @@ export function SelectUser({ const getUserLabel = useLabelUser(); const items = filter ? users.filter(user => filter(user.id)) : users; - const options = items.map(user => ({ + const sorted = [ + ...items.filter(user => !!user.first_name || !!user.last_name).sort(compareUsers), + ...items.filter(user => !user.first_name && !user.last_name) + ]; + const options = sorted.map(user => ({ value: user.id, label: getUserLabel(user.id) }));