othr

src/modals/EnterDeadlineModal/EnterDeadlineModal.tsx

@@ -1,19 +1,69 @@
 import {ContextModalProps} from "@mantine/modals";
-import {Button, Text} from "@mantine/core";
+import {Button, Flex, rem, Textarea} from "@mantine/core";
+import {DateTimePicker, DateValue} from "@mantine/dates";
+import {useForm} from "@mantine/form";
+import {DealSummaryReorderRequest} from "../../client";
+
+type Deadline = {
+    datetime: DateValue,
+    comment: string
+}
+
+type Props = {
+    request:DealSummaryReorderRequest,
+    onSubmit: (
+        deadline: Deadline,
+        request: DealSummaryReorderRequest,
+    ) => void;
+}
 
 const EnterDeadlineModal = ({
                                 context,
                                 id,
                                 innerProps,
-                            }: ContextModalProps<{ modalBody: string }>) => {
-
+                            }: ContextModalProps<Props>) => {
+    const form = useForm<Deadline>({
+        initialValues: {
+            datetime: null,
+            comment: '',
+        },
+        validate: {
+            datetime: (datetime) => datetime !== null ? null : 'Необходимо ввести дедлайн',
+        }
+    })
+    const onCancelClick = () => {
+        context.closeModal(id);
+    }
+    const onSubmit = (values: Deadline) => {
+        innerProps.onSubmit(values, innerProps.request);
+    }
     return (
-        <>
-            <Text size="sm">{innerProps.modalBody}</Text>
-            <Button fullWidth mt="md" onClick={() => context.closeModal(id)}>
-                Close modal
-            </Button>
-        </>
+        <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
+            <Flex direction={'column'} gap={10}>
+                <Flex direction={'column'} gap={rem(10)}>
+                    <DateTimePicker
+                        required
+                        label={'Дата и время'}
+                        placeholder={'Введите дату и время'}
+                        {...form.getInputProps('date')}
+                    />
+                    <Textarea
+                        label={'Коментарий'}
+                        placeholder={'Введите коментарий'}
+                        {...form.getInputProps('comment')}
+                    />
+                </Flex>
+
+                <Flex justify={'flex-end'} gap={rem(10)}>
+                    <Button
+                        variant={'default'}
+                        onClick={onCancelClick}
+                    >Отменить</Button>
+                    <Button>Сохранить</Button>
+                </Flex>
+            </Flex>
+        </form>
+
     )
 };
 export default EnterDeadlineModal;