aswi20220x00-gitlab/webapp/components/modals/EditUserModal.tsx @ ceadebfe

import { Button, Form, Input, Modal, Radio } from 'antd';
import 'antd/dist/antd.css';
import React from 'react';
import { ChangeUserInfoRequest, ERole, UserInfo } from '../../api';
import { userController } from '../../controllers';
import { ShowToast } from '../../utils/alerts';

interface ModalProps {
    onCancel: () => void;
    userInfo: UserInfo;
}

/**
 * Creates a modal window that loads documents to the app.
 * @returns The modal window.
 */
const EditUserModal: React.FC<ModalProps> = ({ onCancel, userInfo }: ModalProps) => {
    /**
     * Handles successful closing of the modal window.
     */
    const handleOk = () => {
        onCancel();
    };

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

    const onFinish = async (values: any) => {
        const req: ChangeUserInfoRequest = {
            username: values.username,
            password: values.password,
            name: values.name,
            surname: values.surname,
            role: values.role,
        };
        if (userInfo.id) {
            userController.userUserIdPut(userInfo.id, req).then((r) => {
                ShowToast(
                    'Úprava uživatele proběhla úspěšně',
                    'success',
                    3000,
                    'top-end'
                );
                onCancel();
            });
        }
    };

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

    return (
        <Modal
            title="Upravit uživatele"
            onOk={handleOk}
            visible={true}
            onCancel={handleCancel}
            footer={null}
            centered
        >
            <Form
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                labelCol={{ span: 4 }}
                layout="horizontal"
            >
                <Form.Item label="" name="role">
                    <Radio.Group defaultValue={userInfo.role}>
                        <Radio.Button value={ERole.Annotator}>Anotátor</Radio.Button>
                        <Radio.Button value={ERole.Administrator}>Admin</Radio.Button>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    name="username"
                    initialValue={userInfo.username}
                    rules={[
                        {
                            required: true,
                            message: 'Prosím zadejte uživatelské jméno',
                        },
                    ]}
                >
                    <Input placeholder="Uživatelské jméno" />
                </Form.Item>
                <Form.Item
                    name="name"
                    initialValue={userInfo.name}
                    rules={[
                        {
                            required: true,
                            message: 'Prosím zadejte jméno',
                        },
                    ]}
                >
                    <Input placeholder="Jméno" />
                </Form.Item>

                <Form.Item
                    name="surname"
                    initialValue={userInfo.surname}
                    rules={[
                        {
                            required: true,
                            message: 'Prosím zadejte příjmení',
                        },
                    ]}
                >
                    <Input placeholder="Příjmení" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="w-100">
                        Upravit
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default EditUserModal;