CF2-38: Форма отправки документа вынесена в модальное окно

src/components/Documents.jsx

@@ -1,6 +1,7 @@
-import {Table, DatePicker, Form, Button, Upload, ConfigProvider} from 'antd'
+import {Table, DatePicker, Button, Modal, ConfigProvider} from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
 import MenuDocuments from "./MenuDocuments"
+import DocumentCreationForm from './modalWindows/DocumentCreationForm'
 import { FileService } from '../services/api'
 import {useState, useEffect} from "react"
 import {useParams} from 'react-router-dom'
@@ -20,11 +21,10 @@ export default function Documents({selectedFileCategory}) {
   const [range, setRange] = useState([])
   const [pagination, setPagination] = useState(null)
   const [files, setFiles] = useState([])
-  const [selectedFiles, setSelectedFiles] = useState([])
+  const [isModalVisible, setIsModalVisible] = useState(false)
   const [isTableUpdating, setTableUpdating] = useState(false)
 
   const [loader, setLoader] = useState(false)
-  const [form] = Form.useForm();
 
   const handleFileNameCLick = async (event, row) => {    
     const element = event.target
@@ -77,57 +77,18 @@ export default function Documents({selectedFileCategory}) {
     }
   ];
 
-  const submitFileFormProps = {
-    progress: {
-      strokeColor: {
-        '0%': '#108ee9',
-        '100%': '#87d068',
-      },
-      strokeWidth: 3,
-      format: percent => `${parseFloat(percent.toFixed(2))}%`,
-    },
-    onChange({ file, fileList }) {
-      if (file.status !== 'uploading') {
-        setSelectedFiles(fileList)
-      }
-    }
+  const openModal = () => {
+    setIsModalVisible(true)
+  }
+
+  const closeModal = () => {
+    setIsModalVisible(false)
   }
 
   const onChangeRange = (range) => {
     setRange(range)
   }
 
-  const onFinish = (values, form) => {
-    var fileList = values.fileInput.fileList
-
-    if (fileList.length > 0)
-    {
-      setLoader(true)
-      const formData = new FormData();
-
-      fileList.forEach(val => {
-        formData.append('files', val.originFileObj)
-      })
-
-      fetch(`/api/files/${id}/files?idCategory=${selectedFileCategory}&idUser=${localStorage['userId']}`, {
-        headers: {
-          Authorization: 'Bearer ' + localStorage['token']
-        },
-        method: 'POST',
-        body: formData
-      })
-      .then(async (response) => {
-        setLoader(false)
-        form.resetFields()
-        setTableUpdating(true)
-      });
-    }
-  }
-
-  const onFinishFailed = (errorInfo) => {
-    notify(`Не удалось отправить файлы по скважине "${id}".`, 'error')
-  }
-
   useEffect(() => {
     const GetDocuments = async () => {
       setLoader(true)
@@ -171,7 +132,7 @@ export default function Documents({selectedFileCategory}) {
       }
     }
     GetDocuments()
-  }, [id, range,page, selectedFileCategory, isTableUpdating])
+  }, [id, range, page, selectedFileCategory, isTableUpdating])
 
   return (
     <div>
@@ -187,31 +148,29 @@ export default function Documents({selectedFileCategory}) {
         </div>
         <LoaderPortal show={loader}></LoaderPortal>
         <div>&nbsp;</div>
-        <Form
-          form={form}
-          name="DocumentsUploadForm"
-          onFinish={(values) => onFinish(values, form)}
-          onFinishFailed={onFinishFailed}
-          style={{width: '300px'}}
+
+        <Button
+          icon={<UploadOutlined />} 
+          onClick={openModal}
+        >Загрузить файл</Button>
+        <Modal
+          title="Загрузить файл"
+          centered
+          visible={isModalVisible}
+          onCancel={closeModal}
+          width={500}
+          footer={null}
         >
-          <Form.Item
-            name="fileInput"
-            rules={[{ required: true, message: 'Выберите файл' }]}
-          >
-            <Upload {...submitFileFormProps}>
-              <Button icon={<UploadOutlined />}>Загрузить файл</Button>
-            </Upload>
-          </Form.Item>
-          <Form.Item>
-            <Button 
-              type="primary" 
-              htmlType="submit"
-              disabled={selectedFiles.length === 0}
-            >
-              Отправить
-            </Button>
-          </Form.Item>
-        </Form>
+          <div>
+            <DocumentCreationForm 
+              selectedFileCategory={selectedFileCategory} 
+              closeModalHandler = {() => {
+                setIsModalVisible(false)
+                setTableUpdating(true)
+              }}> 
+            </DocumentCreationForm>
+          </div>
+      </Modal>
       <div>&nbsp;</div>
       <Table
         columns={columns}

src/components/modalWindows/DocumentCreationForm.jsx

@@ -0,0 +1,108 @@
+import { Form, Upload, Button } from 'antd'
+import { InboxOutlined } from '@ant-design/icons'
+import {useState} from "react"
+import {useParams} from 'react-router-dom'
+
+const { Dragger } = Upload;
+
+export default function DocumentCreationForm({selectedFileCategory, closeModalHandler}){  
+
+    let {id} = useParams()
+
+    const [form] = Form.useForm();
+
+    const [selectedFiles, setSelectedFiles] = useState([])
+
+    const onFinish = (form) => {
+        form
+        .validateFields()
+        .then(values => {
+            var fileList = values.documentFile.fileList
+
+            if (fileList.length > 0) {
+                const formData = new FormData();
+            
+                fileList.forEach(val => {
+                    formData.append('files', val.originFileObj)
+                })
+            
+                fetch(`/api/files/${id}/files?idCategory=${selectedFileCategory}&idUser=${localStorage['userId']}`, {
+                    headers: {
+                        Authorization: 'Bearer ' + localStorage['token']
+                    },
+                    method: 'POST',
+                    body: formData
+                })
+
+                form.resetFields();
+                closeModalHandler()
+            }
+        }).catch(info => {
+            console.log('Validate Failed:', info);
+        });
+    }
+
+    const submitFileFormProps = {
+        progress: {
+          strokeColor: {
+            '0%': '#108ee9',
+            '100%': '#87d068',
+          },
+          strokeWidth: 3,
+          format: percent => `${parseFloat(percent.toFixed(2))}%`,
+        },
+        multiple: true,
+        onChange({ file, fileList }) {
+          if (file.status !== 'uploading') {
+            setSelectedFiles(fileList)
+          }
+        }
+      }
+
+    return (
+        <Form
+            form={form}
+            layout="vertical"
+            name="ImprovementCreationForm"
+            onFinish={(values) => onFinish(form)}
+        >
+            <Form.Item
+                name="documentFile" 
+                rules={[{ required: true, message: 'Выберите файл' }]}
+            >
+                <Dragger 
+                    name="documentFileInput"
+                    {...submitFileFormProps}
+                    listType="picture"
+                >
+                        <p className="ant-upload-drag-icon">
+                        <InboxOutlined />
+                        </p>
+                        <p className="ant-upload-text">Кликните или перенесите сюда файлы</p>
+                        <p className="ant-upload-hint">
+                            Возможна загрузка как одного файла, так и нескольких.
+                        </p>
+                </Dragger>
+            </Form.Item>
+            <Form.Item style={{marginBottom: 0}}>
+                <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+                    <Button 
+                        key="cancel"
+                        onClick={closeModalHandler}>
+                        Отмена
+                    </Button>
+
+                    <Button 
+                        key="submit" 
+                        type="primary"
+                        htmlType="submit" 
+                        disabled={selectedFiles.length === 0}
+                        style={{marginLeft: '10px'}}
+                    >
+                        Отправить
+                    </Button>
+                </div>
+            </Form.Item>
+        </Form>
+    )
+}