Revize b49b834e

Added tag modal

Modal with properties of a tag

webapp/components/modals/TagModal.tsx

@@ +1 @@
+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;