diff --git a/apps/console2/src/components/form/MeasureSelectField.tsx b/apps/console2/src/components/form/MeasureSelectField.tsx new file mode 100644 index 000000000..c7c370e90 --- /dev/null +++ b/apps/console2/src/components/form/MeasureSelectField.tsx @@ -0,0 +1,90 @@ +import { Field, Option, Select } from "@probo/ui"; +import { Suspense, useMemo, useState, type ComponentProps } from "react"; +import { useTranslate } from "@probo/i18n"; +import { type Control, Controller } from "react-hook-form"; +import { usePaginatedMeasures } from "/hooks/graph/usePaginatedMeasures"; + +type Props = { + organizationId: string; + control: Control; + name: string; + label?: string; + error?: string; + disabled?: boolean; +} & ComponentProps; + +export function MeasureSelectField({ + organizationId, + control, + disabled, + ...props +}: Props) { + return ( + + } + > + + + + ); +} + +function MeasureSelectWithQuery( + props: Pick +) { + const { __ } = useTranslate(); + const { name, organizationId, control, disabled } = props; + const { data } = usePaginatedMeasures(organizationId); + const [search, setSearch] = useState(""); + const measures = useMemo(() => { + return ( + data?.measures.edges + ?.filter( + (edge) => + edge.node.name.toLowerCase().includes(search.toLowerCase()) || + edge.node.description?.toLowerCase().includes(search.toLowerCase()) + ) + .map((edge) => edge.node) ?? [] + ); + }, [data?.measures.edges, search]); + + return ( +
+ ( + + )} + /> +
+ ); +} diff --git a/apps/console2/src/components/form/PeopleSelectField.tsx b/apps/console2/src/components/form/PeopleSelectField.tsx index 5f704f559..c98cf8ea9 100644 --- a/apps/console2/src/components/form/PeopleSelectField.tsx +++ b/apps/console2/src/components/form/PeopleSelectField.tsx @@ -1,5 +1,5 @@ import { Avatar, Field, Option, Select } from "@probo/ui"; -import { Suspense } from "react"; +import { Suspense, type ComponentProps } from "react"; import { useTranslate } from "@probo/i18n"; import { type Control, Controller } from "react-hook-form"; import { usePeople } from "/hooks/graph/PeopleGraph.ts"; @@ -10,7 +10,7 @@ type Props = { name: string; label?: string; error?: string; -}; +} & ComponentProps; export function PeopleSelectField({ organizationId, @@ -26,6 +26,7 @@ export function PeopleSelectField({ organizationId={organizationId} control={control} name={props.name} + disabled={props.disabled} /> @@ -33,7 +34,7 @@ export function PeopleSelectField({ } function PeopleSelectWithQuery( - props: Pick + props: Pick ) { const { __ } = useTranslate(); const { name, organizationId, control } = props; @@ -46,6 +47,7 @@ function PeopleSelectWithQuery( name={name} render={({ field }) => ( +