aswi20220x00-gitlab/webapp/components/modals/SetRequiredAnnotationsCountModal.tsx @ e97fc3e6

import { Button, Form, Input, Modal } from 'antd';
import 'antd/dist/antd.css';
import React from 'react';
import { SetRequiredAnnotationsRequest } from '../../api';
import { documentController } from '../../controllers';
import { ShowToast } from '../../utils/alerts';

interface ModalProps {
    onCancel: (ok: boolean) => void;
    documentsIds: string[];
}

function SetRequiredAnnotationsCountModal({ onCancel, documentsIds }: ModalProps) {
    const handleOk = () => {
        onCancel(true);
    };

    const handleCancel = () => {
        onCancel(false);
    };

    const onFinish = async (values: any) => {
        if (documentsIds && documentsIds.length !== 0) {
            const req: SetRequiredAnnotationsRequest = {
                requiredAnnotations: values.annotationsCount,
                documentIds: documentsIds,
            };

            await documentController.documentsRequiredAnnotationsPost(req);

            ShowToast(
                'Požadovaný počet anotací úspěšně nastaven',
                'success',
                3000,
                'top-end'
            );
        }

        handleOk();
    };

    const onFinishFailed = (errorInfo: any) => {
        ShowToast('Zadané údaje nejsou validní', 'error', 3000, 'top-end');
    };

    return (
        <Modal
            title={'Nastavit požadovaný počet anotací'}
            onOk={handleOk}
            visible={true}
            onCancel={handleCancel}
            footer={null}
            width={400}
            centered
        >
            <Form
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                labelCol={{ span: 4 }}
                layout="horizontal"
            >
                Požadovaný počet anotací:
                <Form.Item
                    name="annotationsCount"
                    rules={[
                        {
                            required: true,
                            message: 'Zadejte počet anotací',
                        },
                    ]}
                >
                    <Input placeholder="Počet anotací" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="w-100">
                        Změnit
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
}

export default SetRequiredAnnotationsCountModal;