crap

src/components/Selects/ClientAutocomplete/ClientAutocomplete.tsx

@@ -0,0 +1,93 @@
+import {useDebouncedValue} from "@mantine/hooks";
+import {Autocomplete, AutocompleteProps, TextInput, TextInputProps} from "@mantine/core";
+import {FC, useEffect, useState} from "react";
+import {Client} from "../../../types/Client.ts";
+import {ClientService} from "../../../client";
+
+type Props = {
+    onSelect?: (client: Client) => void;
+    withAddress?: boolean;
+    nameRestProps?: AutocompleteProps;
+    addressRestProps?: TextInputProps;
+}
+const ClientAutocomplete: FC<Props> = ({onSelect, addressRestProps, nameRestProps, withAddress = false}) => {
+    const [value, setValue] = useState('');
+    const [debouncedValue] = useDebouncedValue(value, 200);
+
+    // const [isLoading, setIsLoading] = useState(false);
+    const [clients, setClients] = useState<Client[]>([])
+    const [selectedClient, selectClient] = useState<Client>();
+
+    const handleChange = (value: string) => {
+        setClients([]);
+        setValue(value);
+    }
+    const handleDebouncedChange = () => {
+        if (!value.trim()) return;
+        // setIsLoading(true);
+        ClientService.searchClients({name: value}).then(({clients}) => {
+            setClients(clients);
+            // setIsLoading(false);
+        })
+    }
+
+    useEffect(() => {
+        handleDebouncedChange();
+    }, [debouncedValue]);
+
+    useEffect(() => {
+        selectClient(clients.find(client =>
+                client.name.toLowerCase().trim() == value.toLowerCase().trim())
+            ||
+            {
+                name: value,
+                id: -1,
+                address: ""
+            });
+    }, [value]);
+    useEffect(() => {
+        if (!selectedClient) return;
+        if (onSelect) onSelect(selectedClient);
+        if (nameRestProps?.onChange) nameRestProps.onChange(selectedClient.name);
+        if (addressRestProps?.onChange) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            addressRestProps.onChange(selectedClient.address);
+        }
+    }, [selectedClient]);
+    return (
+        <>
+            <Autocomplete
+                {...nameRestProps}
+                placeholder={'Клиент: название'}
+                onChange={handleChange}
+                value={value}
+                data={clients.map(client => client.name)}
+                styles={withAddress ? {
+                    input: {
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: 0
+                    }
+                } : {}}
+            />
+
+            {withAddress &&
+                <TextInput
+                    placeholder={'Клиент: адрес'}
+                    styles={{
+                        input: {
+                            borderTopLeftRadius: 0,
+                            borderTopRightRadius: 0,
+                        }
+                    }}
+                    value={selectedClient?.address || ''}
+                    onChange={event => {
+                        selectClient(prevState => prevState && {...prevState, address: event.target.value})
+                    }}
+                />
+            }
+        </>
+
+    )
+}
+export default ClientAutocomplete;

src/components/Selects/ClientSelect/ClientSelect.tsx

@@ -1,93 +1,31 @@
-import {useDebouncedValue} from "@mantine/hooks";
-import {Autocomplete, AutocompleteProps, TextInput, TextInputProps} from "@mantine/core";
-import {FC, useEffect, useState} from "react";
-import {Client} from "../../../types/Client.ts";
-import {ClientService} from "../../../client";
+import {FC} from "react";
+import {Select} from "@mantine/core";
+import {ClientSchema} from "../../../client";
+import useClientsList from "../../../pages/ClientsPage/hooks/useClientsList.tsx";
+
 
 type Props = {
-    onSelect?: (client: Client) => void;
-    withAddress?: boolean;
-    nameRestProps?: AutocompleteProps;
-    addressRestProps?: TextInputProps;
+    value?: ClientSchema;
+    onChange: (client: ClientSchema) => void;
+    withLabel?: boolean;
 }
-const ClientSelect: FC<Props> = ({onSelect, addressRestProps, nameRestProps, withAddress = false}) => {
-    const [value, setValue] = useState('');
-    const [debouncedValue] = useDebouncedValue(value, 200);
-
-    // const [isLoading, setIsLoading] = useState(false);
-    const [clients, setClients] = useState<Client[]>([])
-    const [selectedClient, selectClient] = useState<Client>();
-
-    const handleChange = (value: string) => {
-        setClients([]);
-        setValue(value);
-    }
-    const handleDebouncedChange = () => {
-        if (!value.trim()) return;
-        // setIsLoading(true);
-        ClientService.searchClients({name: value}).then(({clients}) => {
-            setClients(clients);
-            // setIsLoading(false);
-        })
-    }
-
-    useEffect(() => {
-        handleDebouncedChange();
-    }, [debouncedValue]);
-
-    useEffect(() => {
-        selectClient(clients.find(client =>
-                client.name.toLowerCase().trim() == value.toLowerCase().trim())
-            ||
-            {
-                name: value,
-                id: -1,
-                address: ""
-            });
-    }, [value]);
-    useEffect(() => {
-        if (!selectedClient) return;
-        if (onSelect) onSelect(selectedClient);
-        if (nameRestProps?.onChange) nameRestProps.onChange(selectedClient.name);
-        if (addressRestProps?.onChange) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            addressRestProps.onChange(selectedClient.address);
-        }
-    }, [selectedClient]);
+const ClientSelect: FC<Props> = ({value, onChange, withLabel = false}) => {
+    const {clients} = useClientsList();
+    const options = clients.map(client => ({label: client.name, value: client.id.toString()}))
     return (
-        <>
-            <Autocomplete
-                {...nameRestProps}
-                placeholder={'Клиент: название'}
-                onChange={handleChange}
-                value={value}
-                data={clients.map(client => client.name)}
-                styles={withAddress ? {
-                    input: {
-                        borderBottomLeftRadius: 0,
-                        borderBottomRightRadius: 0
-                    }
-                } : {}}
-            />
-
-            {withAddress &&
-                <TextInput
-                    placeholder={'Клиент: адрес'}
-                    styles={{
-                        input: {
-                            borderTopLeftRadius: 0,
-                            borderTopRightRadius: 0,
-                        }
-                    }}
-                    value={selectedClient?.address || ''}
-                    onChange={event => {
-                        selectClient(prevState => prevState && {...prevState, address: event.target.value})
-                    }}
-                />
-            }
-        </>
+        <Select
 
+            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 && "Клиент"}
+        />
     )
 }
 export default ClientSelect;