Revize 428b6f89

Created a document adding modal

Created a modal that adds new documents and when API is implemented it will send documents to a server.

webapp/components/modals/addDocument.tsx

@@ +1 @@
+import { message, Button, Modal, Upload } from 'antd';
+import { useState } from 'react';
+import { InboxOutlined } from '@ant-design/icons';
+import 'antd/dist/antd.css';
+
+const { Dragger } = Upload;
+
+/**
+ * Creates a modal window that loads documents to the app.
+ * @returns The modal window.
+ */
+function AddDocument() {
+    const [visible, setVisible] = useState(true);
+
+    /**
+     * Settings of a file loader.
+     */
+    const props = {
+        name: 'file',
+        multiple: true,
+        directory: true,
+        /**
+            @todo: Probably will be needed to change the uploading URL
+        **/
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+        onChange(info: any) {
+            const { status } = info.file;
+
+            if (status !== 'uploading') {
+                console.log(info.file, info.fileList);
+            }
+
+            if (status === 'done') {
+                message.success(`${info.file.name} file uploaded successfully.`);
+            } else if (status === 'error') {
+                message.error(`${info.file.name} file upload failed.`);
+            }
+        },
+        onDrop(e: any) {
+            console.log('Dropped files', e.dataTransfer.files);
+        },
+    };
+
+    /**
+     * Handles successfull closing of the modal window.
+     */
+    const handleOk = () => {
+        setVisible(false);
+        /**
+            @todo: Send documents to a server when all files are loaded
+        **/
+        console.log('Document is loaded');
+    };
+
+    /**
+     * Handles cancelling of the model window.
+     */
+    const handleCancel = () => {
+        setVisible(false);
+        console.log('Loading of documents is cancelled.');
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            title="Nový dokument"
+            onOk={handleOk}
+            onCancel={handleCancel}
+            footer={[
+                <Button key="back" onClick={handleCancel}>
+                    Storno
+                </Button>,
+                <Button key="submit" type="primary" onClick={handleOk}>
+                    Nahrát
+                </Button>,
+            ]}
+        >
+            <Dragger>
+                <p className="ant-upload-drag-icon">
+                    <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">
+                    Soubory lze nahrát stisknutím nebo přetažením...
+                </p>
+            </Dragger>
+        </Modal>
+    );
+}
+
+export default AddDocument;