aswi20220x00-gitlab/webapp/components/modals/CategoryModal.tsx @ d1bca09c

import React from 'react';
import { Form, Input, Modal, Switch } from 'antd';

/**
 * All values that the modal window can show.
 */
export interface CategoryModalValues {
    name?: string;
    color?: string;
    description?: string;
    disabledForAnnotators?: boolean;
}

/**
 * Creates a modal window that works with properties of a category.
 * @param props Contains arguments of the modal window.
 * @returns The modal window.
 */
function CategoryModal(props: {
    title: string; // Title of the modal
    submitText: string; // Text of submit button
    onCancel: () => void; // Method called when the modal is closed without submit
    onSubmit: (val: CategoryModalValues) => void; // Method called when the modal is submitted
    defaultValues?: CategoryModalValues; // Default values of a form that contains properties of the category.
}) {
    /*
     * Initialize default values if they were not set in props.
     */
    let values: CategoryModalValues;

    if (props.defaultValues) {
        values = {
            name: props.defaultValues.name ?? '',
            color: props.defaultValues.color ?? 'black',
            description: props.defaultValues.description ?? '',
            disabledForAnnotators: props.defaultValues.disabledForAnnotators ?? false,
        };
    } else {
        values = {
            name: '',
            color: 'black',
            description: '',
            disabledForAnnotators: false,
        };
    }

    /**
     * The form.
     */
    const [form] = Form.useForm();

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

    /**
     * Handles submitting of the model window.
     * @param values Form values.
     */
    const handleOk = (values: any) => {
        props.onSubmit({
            name: values.name,
            color: values.color,
            description: values.description,
            disabledForAnnotators: values.disabledForAnnotators,
        });
    };

    return (
        <Modal
            title={props.title}
            visible={true}
            okText={props.submitText}
            cancelText="Zrušit"
            maskClosable={false}
            onCancel={handleCancel}
            onOk={() => {
                // Custom form validation when the modal is submitted.
                // Validates form and if all fields are valid it calls handleOk method.
                form.validateFields()
                    .then((values) => {
                        form.resetFields();
                        handleOk(values);
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
                initialValues={values}
            >
                <Form.Item
                    label="Název"
                    name="name"
                    rules={[{ required: true, message: 'Prosím zadejte název' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="Barva"
                    name="color"
                    rules={[{ required: true, message: 'Prosím zadejte barvu' }]}
                >
                    <Input type="color" />
                </Form.Item>
                <Form.Item label="Popis" name="description">
                    <Input.TextArea />
                </Form.Item>
                <Form.Item
                    label="Skrýt pro anotátory"
                    name="disabledForAnnotators"
                    valuePropName="checked"
                    rules={[
                        {
                            required: true,
                            message:
                                'Prosím zadejte zda má být kategorie viditelná pro anotátory',
                        },
                    ]}
                >
                    <Switch />
                </Form.Item>
            </Form>
        </Modal>
    );
}

export default CategoryModal;