Files
Fulfillment-Frontend/src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx

48 lines
1.7 KiB
TypeScript

import { FC } from "react";
import ObjectSelect, {
ObjectSelectProps,
} from "../../ObjectSelect/ObjectSelect.tsx";
import { ServiceSchema } from "../../../client";
import useServicesList from "../../../pages/ServicesPage/hooks/useServicesList.tsx";
import { omit } from "lodash";
import { ServiceType } from "../../../shared/enums/ServiceType.ts";
import { ComboboxItem, OptionsFilter } from "@mantine/core";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import { ComboboxParsedItemGroup } from "@mantine/core/lib/components/Combobox/Combobox.types";
type RestProps = {
filterType?: ServiceType;
};
type Props = Omit<ObjectSelectProps<ServiceSchema>, "data"> & RestProps;
const ServiceSelectNew: FC<Props> = (props: Props) => {
const { services } = useServicesList({ withPlaceholders: false });
const data = props.filterType
? services.filter(service => service.serviceType === props.filterType)
: services;
const restProps = omit(props, ["filterType"]);
const optionsFilter: OptionsFilter = ({ options, search }) => {
return (options as ComboboxParsedItemGroup<ComboboxItem>[]).map(
option => {
return {
...option,
items: option.items.filter((item: ComboboxItem) =>
item.label.toLowerCase().includes(search.toLowerCase()),
),
};
},
);
};
return (
<ObjectSelect
searchable
{...restProps}
data={data}
groupBy={item => item.category.name}
filter={optionsFilter}
/>
);
};
export default ServiceSelectNew;