crap

src/components/Dnd/Board/Board.tsx

@@ -2,7 +2,7 @@ import {FC} from "react";
 import styles from './Board.module.css';
 import {Divider, Text, Title} from '@mantine/core';
 import {Draggable, Droppable} from "@hello-pangea/dnd";
-import CreateLeadButton from "../CreateLeadButton/CreateLeadButton.tsx";
+import CreateDealButton from "../CreateDealButton/CreateDealButton.tsx";
 
 type Props = {
     droppableId: string;
@@ -21,16 +21,16 @@ export const Board: FC<Props> = ({droppableId, title, withCreateButton = false})
                 <Divider size={"xl"} my={10} color={"blue"}/>
             </div>
             <Droppable droppableId={droppableId}>
-                {(provided, snapshot) => (
+                {(provided) => (
                     <div ref={provided.innerRef} className={styles["items-list"]}>
                         {withCreateButton &&
-                            <CreateLeadButton
+                            <CreateDealButton
 
                                 onClick={() => {
                                 }}
                             />}
                         <Draggable draggableId={droppableId + '1'} index={1}>
-                            {(provided, snapshot) => (
+                            {(provided) => (
                                 <div            {...provided.draggableProps}
                                                 {...provided.dragHandleProps}
                                                 ref={provided.innerRef}

src/components/Dnd/CreateDealButton/CreateDealButton.tsx

@@ -0,0 +1,31 @@
+import {FC, useState} from "react";
+
+import styles from './CreateDealButton.module.css';
+import {Button, rem, Text, TextInput, Transition} from '@mantine/core';
+import CreateDealFrom from "../CreateDealForm/CreateDealFrom.tsx";
+
+type Props = {
+    onClick: () => void;
+}
+const CreateDealButton: FC<Props> = ({onClick}) => {
+    const [isCreating, setIsCreating] = useState(false);
+
+    return (
+        <div className={styles['container']}
+             onClick={() => {
+                 if (isCreating) return;
+                 setIsCreating(prevState => !prevState)
+             }}
+        >
+
+            <Text>Быстрое добавление</Text>
+            <CreateDealFrom
+                onCancel={() => {
+                }}
+                onSubmit={() => {
+                }}
+            />
+        </div>
+    )
+}
+export default CreateDealButton;

src/components/Dnd/CreateDealForm/CreateDealForm.module.css

@@ -0,0 +1,15 @@
+.inputs {
+    display: flex;
+    flex-direction: column;
+    width: 100%
+}
+
+.inputs * {
+    width: 100%;
+}
+
+.buttons {
+    display: flex;
+    gap: rem(10);
+}
+

src/components/Dnd/CreateDealForm/CreateDealFrom.tsx

@@ -0,0 +1,83 @@
+import {Button, rem, Textarea, TextInput} from "@mantine/core";
+import {QuickDeal} from "../../../types/QuickDeal.ts";
+import {FC} from "react";
+import {useForm} from "@mantine/form";
+import styles from './CreateDealForm.module.css';
+import ClientSelect from "../../Selects/ClientSelect/ClientSelect.tsx";
+import {DateTimePicker} from "@mantine/dates";
+
+type Props = {
+    onSubmit: (quickDeal: QuickDeal) => void
+    onCancel: () => void;
+}
+const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
+    const form = useForm({
+        initialValues: {
+            name: '',
+            clientName: '',
+            clientAddress: '',
+            comment: '',
+            acceptance_date: new Date()
+        }
+    });
+    return (
+        <form
+            style={{width: '100%'}}
+            onSubmit={form.onSubmit((values) => console.log(values))}
+        >
+
+            <div style={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                gap: rem(10),
+                padding: rem(10)
+            }}>
+                <div className={styles['inputs']}>
+                    <TextInput
+                        placeholder={'Название'}
+                        {...form.getInputProps('name')}
+                    />
+                </div>
+
+                <div className={styles['inputs']}>
+                    <ClientSelect
+                        withAddress
+                        nameRestProps={form.getInputProps('clientName')}
+                        addressRestProps={form.getInputProps('clientAddress')}
+                        onSelect={() => {
+                        }}/>
+                </div>
+
+                <div className={styles['inputs']}>
+                    <Textarea
+                        autosize
+                        placeholder={'Комментарий'}
+                        minRows={2}
+                        maxRows={4}
+                        {...form.getInputProps('comment')}
+                    />
+                </div>
+                <div className={styles['inputs']}>
+                    <DateTimePicker
+                        placeholder={'Дата приемки'}
+                    />
+                </div>
+
+
+                <div className={styles['buttons']}>
+                    <Button
+                        type={'submit'}
+                    >Добавить</Button>
+                    <Button
+                        variant={'outline'}
+                        onClick={() => onCancel()}
+                    >Отменить</Button>
+                </div>
+            </div>
+        </form>
+
+    )
+}
+
+export default CreateDealFrom;

src/components/Dnd/CreateLeadButton/CreateLeadButton.tsx

@@ -1,60 +0,0 @@
-import React, {FC, useState} from "react";
-
-import styles from './CreateLeadButton.module.css';
-import {Button, Center, rem, Text, TextInput, Transition} from '@mantine/core';
-
-type Props = {
-    onClick: () => void;
-}
-const CreateLeadButton: FC<Props> = ({onClick}) => {
-    const [isCreating, setIsCreating] = useState(false);
-    const [showButton, setShowButton] = useState(true);
-    console.log(`isCreating: ${isCreating}`)
-    console.log(`showButton: ${showButton}`)
-    return (
-        <div className={styles['container']}
-             onClick={() => {
-                 if (isCreating) return;
-                 setIsCreating(prevState => !prevState)
-                 setShowButton(false);
-             }}
-        >
-
-            {(!isCreating && showButton) &&
-                <Text>Быстрое добавление</Text>
-            }
-            <Transition
-                mounted={isCreating}
-                transition={'scale-y'}
-                duration={300}
-                // onExited={()=>setShowButton(true)}
-                keepMounted
-            >
-                {(styles) => <div style={{...styles, width: '100%'}}>
-                    <div style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        width: '100%',
-                        gap: rem(10),
-                        padding: rem(10)
-                    }}>
-                        <div style={{display: "flex", flexDirection: "column", width: '100%'}}>
-                            <TextInput placeholder={'Название'} w={'100%'}/>
-
-                        </div>
-
-                        <div style={{display: "flex", flexDirection: "column", width: '100%'}}>
-                            <TextInput placeholder={'Компания: название'} w={'100%'}/>
-                            <TextInput placeholder={'Компания: адрес'} w={'100%'}/>
-                        </div>
-                        <div style={{gap:rem(10), display:"flex"}}>
-                            <Button>Добавить</Button>
-                            <Button variant={'outline'} onClick={()=>setIsCreating(false)}>Отменить</Button>
-                        </div>
-                    </div>
-                </div>}
-            </Transition>
-        </div>
-    )
-}
-export default CreateLeadButton;