Revize 29867307

Added category modal

Modal with properties of a category

webapp/components/modals/CategoryModal.tsx

@@ +1 @@
+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.
+     */
+    const values = props.defaultValues ?? {
+        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"
+            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;