othr

src/components/Dnd/CreateDealButton/CreateDealButton.tsx

@@ -1,30 +1,53 @@
 import {FC, useState} from "react";
 
 import styles from './CreateDealButton.module.css';
-import {Button, rem, Text, TextInput, Transition} from '@mantine/core';
+import {Text, Transition} from '@mantine/core';
 import CreateDealFrom from "../CreateDealForm/CreateDealFrom.tsx";
+import {DealService} from "../../../client";
+import {dateWithoutTimezone} from "../../../shared/lib/utils.ts";
 
 type Props = {
     onClick: () => void;
 }
 const CreateDealButton: FC<Props> = ({onClick}) => {
     const [isCreating, setIsCreating] = useState(false);
-
+    const [isTransitionEnded, setIsTransitionEnded] = useState(true);
     return (
         <div className={styles['container']}
              onClick={() => {
                  if (isCreating) return;
                  setIsCreating(prevState => !prevState)
+                 setIsTransitionEnded(false);
              }}
         >
+            {(!isCreating && isTransitionEnded) &&
+                <Text>Быстрое добавление</Text>
+            }
+            <Transition
+                mounted={isCreating}
+                transition={"scale-y"}
+                onExited={() => setIsTransitionEnded(true)}
+            >
+                {(styles) => (
+                    <div style={styles}>
+                        <CreateDealFrom
+                            onCancel={() => {
+                                setIsCreating(false)
+                            }}
+                            onSubmit={(quickDeal) => {
+                                console.log(quickDeal);
+                                DealService.quickCreateDealQuickCreatePost({
+                                    requestBody: {
+                                        ...quickDeal,
+                                        acceptance_date: dateWithoutTimezone(quickDeal.acceptance_date)
+                                    }
+                                })
+                            }}
+                        />
+                    </div>
+                )}
+            </Transition>
 
-            <Text>Быстрое добавление</Text>
-            <CreateDealFrom
-                onCancel={() => {
-                }}
-                onSubmit={() => {
-                }}
-            />
         </div>
     )
 }

src/components/Dnd/CreateDealForm/CreateDealFrom.tsx

@@ -14,8 +14,8 @@ const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
     const form = useForm({
         initialValues: {
             name: '',
-            clientName: '',
-            clientAddress: '',
+            client_name: '',
+            client_address: '',
             comment: '',
             acceptance_date: new Date()
         }
@@ -23,7 +23,7 @@ const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
     return (
         <form
             style={{width: '100%'}}
-            onSubmit={form.onSubmit((values) => console.log(values))}
+            onSubmit={form.onSubmit((values) => onSubmit(values))}
         >
 
             <div style={{
@@ -43,10 +43,9 @@ const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
                 <div className={styles['inputs']}>
                     <ClientSelect
                         withAddress
-                        nameRestProps={form.getInputProps('clientName')}
-                        addressRestProps={form.getInputProps('clientAddress')}
-                        onSelect={() => {
-                        }}/>
+                        nameRestProps={form.getInputProps('client_name')}
+                        addressRestProps={form.getInputProps('client_address')}
+                    />
                 </div>
 
                 <div className={styles['inputs']}>
@@ -61,6 +60,7 @@ const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
                 <div className={styles['inputs']}>
                     <DateTimePicker
                         placeholder={'Дата приемки'}
+                        {...form.getInputProps('acceptance_date')}
                     />
                 </div>