diff --git a/src/components/multi-select/multi-select-content.tsx b/src/components/multi-select/multi-select-content.tsx index 0ea54d897..9f49b41ca 100644 --- a/src/components/multi-select/multi-select-content.tsx +++ b/src/components/multi-select/multi-select-content.tsx @@ -9,12 +9,13 @@ import { } from "../ui/command"; import { cn } from "@app/lib/cn"; import { CheckIcon } from "lucide-react"; +import { useTranslations } from "next-intl"; export type TagValue = { text: string; id: string }; export type MultiSelectTagsProps = { - emptyPlaceholder: string; - searchPlaceholder: string; + emptyPlaceholder?: string; + searchPlaceholder?: string; searchQuery?: string; options: Array; value: Array; @@ -33,16 +34,19 @@ export function MultiSelectContent({ onSearch, onChange }: MultiSelectTagsProps) { + const t = useTranslations(); const selectedValues = new Set(value.map((v) => v.id)); return ( - {emptyPlaceholder} + + {emptyPlaceholder ?? t("noResults")} + {options.map((option) => ( ({ const selectedValues = new Set(props.value.map((v) => v.id)); return ( - + { + if (!open) { + // clear input when popover is closed + props.onSearch(""); + } + }} + >
void; - disabled?: boolean + disabled?: boolean; + restrictAdminRole?: boolean; }; export function RolesSelector({ orgId, selectedRoles = [], onSelectRoles, - disabled + disabled, + restrictAdminRole }: RolesSelectorProps) { const t = useTranslations(); const [roleSearchQuery, setRoleSearchQuery] = useState(""); const [debouncedValue] = useDebounce(roleSearchQuery, 150); - const perPage = 7; - const { data: roles = [] } = useQuery( - orgQueries.roles({ orgId, perPage, query: debouncedValue }) + orgQueries.roles({ orgId, perPage: 7, query: debouncedValue }) ); // always include the selected roles in the list (if the user isn't searching) const rolesShown = useMemo(() => { - const allRoles: Array = roles.map((r) => ({ - id: r.roleId.toString(), - text: r.name - })); + let allRoles: Array = roles.map( + (r) => ({ + id: r.roleId.toString(), + text: r.name, + isAdmin: Boolean(r.isAdmin) + }) + ); + if (debouncedValue.trim().length === 0) { for (const role of selectedRoles) { if (!allRoles.find((r) => r.id === role.id)) { @@ -45,14 +49,17 @@ export function RolesSelector({ } } } + + if (restrictAdminRole) { + allRoles = allRoles.filter((role) => !role.isAdmin); + } + return allRoles; - }, [roles, selectedRoles, debouncedValue]); + }, [roles, selectedRoles, debouncedValue, restrictAdminRole]); return ( ) { return ( ); diff --git a/src/components/users-selector.tsx b/src/components/users-selector.tsx index a1ebb2ae9..844079e70 100644 --- a/src/components/users-selector.tsx +++ b/src/components/users-selector.tsx @@ -26,10 +26,8 @@ export function UsersSelector({ const [debouncedValue] = useDebounce(userSearchQuery, 150); - const perPage = 7; - const { data: users = [] } = useQuery( - orgQueries.users({ orgId, perPage, query: debouncedValue }) + orgQueries.users({ orgId, perPage: 7, query: debouncedValue }) ); // always include the selected users in the list (if the user isn't searching) @@ -50,9 +48,7 @@ export function UsersSelector({ return (