feat: refactor ClientSelect to use ObjectSelect for improved client selection
This commit is contained in:
@@ -1,75 +1,23 @@
|
||||
import { FC, ReactNode, useEffect, useState } from "react";
|
||||
import { Select, Text } from "@mantine/core";
|
||||
import { FC } from "react";
|
||||
import { ClientSchema } from "../../../client";
|
||||
import useClientsList from "../../../pages/ClientsPage/hooks/useClientsList.tsx";
|
||||
import ObjectSelect, { ObjectSelectProps } from "../../ObjectSelect/ObjectSelect.tsx";
|
||||
|
||||
type Props = {
|
||||
value?: ClientSchema;
|
||||
onChange: (client: ClientSchema) => void;
|
||||
withLabel?: boolean;
|
||||
error?: string;
|
||||
inputContainer?: (children: ReactNode) => ReactNode;
|
||||
disabled?: boolean;
|
||||
};
|
||||
type Props = Omit<
|
||||
ObjectSelectProps<ClientSchema>,
|
||||
"data" | "getLabelFn" | "getValueFn"
|
||||
>;
|
||||
|
||||
type Option = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
const ClientSelect: FC<Props> = ({ value, onChange, error, inputContainer, withLabel = false, disabled = false }) => {
|
||||
const ClientSelect: FC<Props> = (props: Props) => {
|
||||
const { clients } = useClientsList({ all: true });
|
||||
const [options, setOptions] = useState<Option[]>([]);
|
||||
const [deletedClientIds, setDeletedClientIds] = useState<Set<number>>(new Set());
|
||||
const [errorMsg, setErrorMsg] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const options = clients
|
||||
.filter(client => !client.isDeleted)
|
||||
.map(client => ({
|
||||
label: client.name,
|
||||
value: client.id.toString(),
|
||||
}));
|
||||
setOptions(options);
|
||||
|
||||
const deletedClientIds = clients.filter(client => client.isDeleted).map(client => client.id);
|
||||
setDeletedClientIds(new Set(deletedClientIds));
|
||||
}, [options]);
|
||||
|
||||
useEffect(() => {
|
||||
if (value && deletedClientIds.has(value.id)) {
|
||||
setErrorMsg("Выбран удаленный клиент");
|
||||
} else {
|
||||
setErrorMsg("");
|
||||
}
|
||||
}, [value, deletedClientIds]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
searchable
|
||||
placeholder={"Выберите клиента"}
|
||||
value={
|
||||
value &&
|
||||
options.find(client => client.value == value.id.toString())
|
||||
?.value
|
||||
}
|
||||
onChange={event => {
|
||||
if (!event) return;
|
||||
const client = clients.find(
|
||||
client => client.id == parseInt(event),
|
||||
);
|
||||
if (!client) return;
|
||||
onChange(client);
|
||||
}}
|
||||
data={options}
|
||||
label={withLabel && "Клиент"}
|
||||
error={error}
|
||||
inputContainer={inputContainer}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{errorMsg && <Text size={"sm"} c={"red"}>{errorMsg}</Text>}
|
||||
</>
|
||||
<ObjectSelect
|
||||
{...props}
|
||||
placeholder={"Выберите клиента"}
|
||||
data={clients.filter(cl => !cl.isDeleted)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export default ClientSelect;
|
||||
|
||||
@@ -149,7 +149,6 @@ const ClientTab = () => {
|
||||
<ClientSelect
|
||||
value={client}
|
||||
onChange={setClient}
|
||||
withLabel
|
||||
disabled={!isEqual(initialValues, form.values) || !!card?.chat}
|
||||
/>
|
||||
{!card?.chat && (
|
||||
|
||||
Reference in New Issue
Block a user