aswi20220x00-gitlab/webapp/components/modals/addDocument.tsx @ 6d10fe14

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.
 */
export 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>
    );
}