"use client"; import { Text } from "@mantine/core"; import type { RouterOutputs } from "@homarr/api"; import { clientApi } from "@homarr/api/client"; import type { GroupPermissionKey } from "@homarr/definitions"; import { useI18n } from "@homarr/translation/client"; import type { AccessPickerOption, AccessPickerTriggerProps } from "./access-picker"; import { AccessPicker } from "./access-picker"; type SelectableGroup = RouterOutputs["group"]["selectable"][number]; interface GroupSelectProps { withPermissions?: boolean; presentGroupIds: string[]; onSelect: (group: { id: string; name: string; permissions?: GroupPermissionKey[] }) => void | Promise; triggerLabel?: string; triggerProps?: AccessPickerTriggerProps; } export const GroupSelect = ({ withPermissions, presentGroupIds, onSelect, triggerLabel, triggerProps, }: GroupSelectProps) => { const tGroup = useI18n("group.action.select"); const tCommon = useI18n("common"); const { data: groups, isPending } = clientApi.group.selectable.useQuery({ withPermissions }); const availableGroups = (groups ?? []).filter((group) => !presentGroupIds.includes(group.id)); const options: AccessPickerOption[] = availableGroups.map((group) => ({ value: group.id, label: group.name, keywords: getGroupPermissions(group) ?? [], item: group, content: {group.name}, })); const handleSelect = ({ item: group }: AccessPickerOption) => onSelect({ id: group.id, name: group.name, permissions: getGroupPermissions(group), }); return ( ); }; const getGroupPermissions = (group: SelectableGroup) => { if ("permissions" in group) return group.permissions as GroupPermissionKey[]; return undefined; };