feat: shipping warehouse and cost

src/components/Dnd/CreateDealForm/CreateDealFrom.tsx

@@ -5,19 +5,22 @@ import {useForm} from "@mantine/form";
 import styles from './CreateDealForm.module.css';
 import ClientAutocomplete from "../../Selects/ClientAutocomplete/ClientAutocomplete.tsx";
 import {DateTimePicker} from "@mantine/dates";
+import ShippingWarehouseAutocomplete
+    from "../../Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
 
 type Props = {
     onSubmit: (quickDeal: QuickDeal) => void
     onCancel: () => void;
 }
 const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
-    const form = useForm({
+    const form = useForm<QuickDeal>({
         initialValues: {
             name: '',
             clientName: '',
             clientAddress: '',
             comment: '',
-            acceptanceDate: new Date()
+            acceptanceDate: new Date(),
+            shippingWarehouse: ''
         }
     });
     return (
@@ -25,7 +28,6 @@ const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
             style={{width: '100%'}}
             onSubmit={form.onSubmit((values) => onSubmit(values))}
         >
-
             <div style={{
                 display: 'flex',
                 flexDirection: 'column',
@@ -43,6 +45,10 @@ const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
                     <ClientAutocomplete
                         nameRestProps={form.getInputProps('clientName')}
                     />
+                    <ShippingWarehouseAutocomplete
+                        {...form.getInputProps('shippingWarehouse')}
+                        placeholder={'Склад отгрузки'}
+                    />
                 </div>
 
                 <div className={styles['inputs']}>

src/components/ObjectAutocomplete/ObjectAutocomplete.tsx

@@ -0,0 +1,65 @@
+import {Autocomplete, AutocompleteProps} from "@mantine/core";
+import {useEffect, useMemo, useState} from "react";
+import {ObjectWithNameAndId} from "../../types/utils.ts";
+import {omit} from "lodash";
+
+
+export type AutocompleteObjectType<T extends ObjectWithNameAndId> = T;
+
+type ControlledValueProps<T extends ObjectWithNameAndId> = {
+    value: AutocompleteObjectType<T>,
+    onChange: (value: string) => void;
+}
+
+type RestProps<T extends ObjectWithNameAndId> = {
+    defaultValue?: AutocompleteObjectType<T>
+    onChange: (value: string) => void;
+    data: AutocompleteObjectType<T>[];
+    filterBy?: (item: AutocompleteObjectType<T>) => boolean;
+}
+
+export type ObjectAutocompleteProps<T extends ObjectWithNameAndId> =
+    (RestProps<T> & Partial<ControlledValueProps<T>>)
+    & Omit<AutocompleteProps, 'value' | 'onChange' | 'data'>;
+
+const ObjectAutocomplete = <T extends ObjectWithNameAndId, >(props: ObjectAutocompleteProps<T>) => {
+
+    const isControlled = 'value' in props;
+    const [internalValue, setInternalValue] = useState<undefined | string>(props.defaultValue);
+
+    const value = isControlled ? props.value?.name : internalValue;
+
+    const data = useMemo(() => {
+        const propsData = props.filterBy ? props.data.filter(props.filterBy) : props.data;
+
+        return propsData.map(item => ({
+            label: item.name,
+            value: item.id.toString()
+        }));
+    }, [props.data]);
+
+    const handleOnChange = (event: string | null) => {
+        if (!event) return;
+        if (isControlled) {
+            props.onChange(event);
+            return;
+        }
+        setInternalValue(event);
+    }
+
+    useEffect(() => {
+        if (isControlled || !internalValue) return;
+        props.onChange(internalValue);
+    }, [internalValue]);
+    const restProps = omit(props, ['filterBy', 'groupBy']);
+    return (
+        <Autocomplete
+            {...restProps}
+            value={value?.toString()}
+            onChange={handleOnChange}
+            data={data}
+        />
+    )
+}
+
+export default ObjectAutocomplete;

src/components/Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx

@@ -0,0 +1,17 @@
+import ObjectAutocomplete, {ObjectAutocompleteProps} from "../../ObjectAutocomplete/ObjectAutocomplete.tsx";
+import useShippingWarehousesList from "./hooks/useShippingWarehousesList.tsx";
+import {FC} from "react";
+import {ShippingWarehouseSchema} from "../../../client";
+
+type Props = Omit<ObjectAutocompleteProps<ShippingWarehouseSchema>, 'data'>;
+const ShippingWarehouseAutocomplete: FC<Props> = (props) => {
+    const {shippingWarehouses} = useShippingWarehousesList();
+    return (
+        <ObjectAutocomplete
+            {...props}
+            data={shippingWarehouses}
+        />
+    )
+}
+
+export default ShippingWarehouseAutocomplete;

src/components/Selects/ShippingWarehouseAutocomplete/hooks/useShippingWarehousesList.tsx

@@ -0,0 +1,13 @@
+import {useQuery} from "@tanstack/react-query";
+import {ShippingWarehouseService} from "../../../../client";
+
+const useShippingWarehousesList = () => {
+    const {isPending, error, data, refetch} = useQuery({
+        queryKey: ['getAllShippingWarehouses'],
+        queryFn: ShippingWarehouseService.getAllShippingWarehouses
+    });
+    const shippingWarehouses = isPending || error || !data ? [] : data.shippingWarehouses;
+
+    return {shippingWarehouses, refetch}
+}
+export default useShippingWarehousesList;