aswi20220x00-gitlab/webapp/components/modals/AddDocumentModal.tsx @ bb91c23f

import { Button, Modal, Upload } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
import React from 'react';
import { DocumentAddInfo, EAddDocumentFormat } from '../../api';
import { documentController } from '../../controllers';
import { ShowToast } from '../../utils/alerts';

const { Dragger } = Upload;

interface ModalProps {
    onCancel: () => void;
}

/**
 * Creates a modal window that loads documents to the app.
 * @returns The modal window.
 */
const AddDocumentModal: React.FC<ModalProps> = ({ onCancel }) => {
    /**
     * Handles successful closing of the modal window.
     */
    const handleOk = () => {
        onCancel();
    };

    /**
     * Handles cancelling of the model window.
     */
    const handleCancel = () => {
        onCancel();
    };

    const [upload, setUpload] = React.useState(false);
    const [tempDocs, setTempDocs] = React.useState<DocumentAddInfo[]>([]);

    const handleUpload = () => {
        if (tempDocs.length !== 0) {
            setUpload(true);
            documentController.documentsPost({ documents: tempDocs }).then((r) => {
                ShowToast(
                    'Nahrávání souborů proběhlo úspěšně',
                    'success',
                    3000,
                    'top-end'
                );
                setUpload(false);
                onCancel();
            });
        }
    };
    /**
     * Settings of a file loader.
     */
    const props = {
        name: 'file',
        multiple: true,
        directory: false,
        onRemove: (file: any) => {
            let docInfo = tempDocs.find((doc) => {
                return doc.name === file.name;
            });
            if (docInfo) {
                const index = tempDocs.indexOf(docInfo);
                const newFileList = tempDocs.slice();
                newFileList.splice(index, 1);
                setTempDocs(newFileList);
            }
        },
        beforeUpload: (file: any) => {
            let docInfo: DocumentAddInfo = { name: file.name };
            if ('application/x-zip-compressed' === file.type) {
                docInfo.format = EAddDocumentFormat.Zip;
            } else if ('text/html' === file.type || 'text/plain' === file.type) {
                docInfo.format = EAddDocumentFormat.Textfile;
            }

            const reader = new FileReader();
            reader.onload = (e) => {
                if (e.target && e.target.result) {
                    let content = e.target.result.toString();
                    docInfo.content = content.split('base64,').pop();
                }
            };
            reader.readAsDataURL(file);
            tempDocs.push(docInfo);
        },
    };

    return (
        <Modal
            title="Nový dokument"
            onOk={handleOk}
            visible={true}
            onCancel={handleCancel}
            footer={[
                <Button key="back" onClick={handleCancel}>
                    Storno
                </Button>,
                <Button
                    key="submit"
                    type="primary"
                    onClick={handleUpload}
                    loading={upload}
                >
                    Nahrát
                </Button>,
            ]}
        >
            <Dragger {...props} accept={'.txt, .zip, .html'} maxCount={10}>
                <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>
            <p>
                Aplikace podporuje textové soubory (ve formátu .txt a .html), případně
                .zip obsahující takovéto soubory v <b>kořenovém</b> adresáři
            </p>
        </Modal>
    );
};

export default AddDocumentModal;