aswi20220x00-gitlab/webapp/components/modals/TagModal.tsx @ b49b834e

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

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

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

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

    return (
        <Modal
            title={props.title}
            visible={true}
            okText={props.submitText}
            cancelText="Zrušit"
            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: 4 }} 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>
        </Modal>
    );
}

export default TagModal;