aswi20220x00-gitlab/webapp/pages/users/index.tsx @ fabfbe32

import 'antd/dist/antd.css';
import React, { useContext, useEffect, useState } from 'react';

import { useUnauthRedirect } from '../../hooks';
import { useRouter } from 'next/router';
import { Badge, Button, Dropdown, Menu, Space, Table, Typography } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUsers } from '@fortawesome/free-solid-svg-icons';
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
import { MainLayout } from '../../layouts/MainLayout';
import { UserInfo } from '../../api';
import { userController } from '../../controllers';
import AddUserModal from '../../components/modals/AddUserModal';
import UserDocumentsModal from '../../components/modals/UserDocumentsModal';
import { ShowConfirmDelete, ShowToast } from '../../utils/alerts';
import EditUserModal from '../../components/modals/EditUserModal';
import { DeleteOutlined, EditOutlined, LockOutlined } from '@ant-design/icons';
import { getColumnSearchProps, getLocaleProps } from '../../utils/tableUtils';
import EditUserPasswordModal from '../../components/modals/EditUserPasswordModal';

function UsersPage() {
    const redirecting = useUnauthRedirect('/login');
    const { logout, role } = useContext(LoggedUserContext);
    const router = useRouter();

    const [addVisible, setAddVisible] = React.useState(false);
    const [editVisible, setEditVisible] = React.useState(false);
    const [passwordEditVisible, setPasswordEditVisible] = React.useState(false);
    const [docsVisible, setDocsVisible] = React.useState(false);
    const [users, setUsers] = useState<UserInfo[]>([]);

    const [user, setUser] = useState<UserInfo>({});

    async function fetchData() {
        let usrs = (await userController.usersGet()).data.users;
        if (!usrs) {
            setUsers([]);
        } else {
            setUsers(usrs);
        }
    }

    useEffect(() => {
        if (!redirecting && role === 'ADMINISTRATOR') {
            fetchData();
        }
    }, [logout, redirecting, role, router]);

    const setUserInfo = (userId: string) => {
        const userInfo = users.find((user) => user.id === userId);
        if (userInfo) {
            setUser(userInfo);
        }
    };

    const deleteUser = (userId: string) => {
        ShowConfirmDelete(() => {
            userController.userUserIdDelete(userId).then(() => {
                ShowToast('Uživatel úspěšně odstraněn', 'success', 3000, 'top-end');
                fetchData();
            });
        }, 'uživatele');
    };

    const showAddModal = () => {
        setAddVisible(true);
    };
    const showEditModal = (userId: string) => {
        setUserInfo(userId);
        setEditVisible(true);
    };
    const showEditPasswordModal = (userId: string) => {
        setUserInfo(userId);
        setPasswordEditVisible(true);
    };
    const showDocsModal = (userId: string) => {
        setUserInfo(userId);
        setDocsVisible(true);
    };

    const hideModals = () => {
        fetchData();
        setAddVisible(false);
        setDocsVisible(false);
        setEditVisible(false);
        setPasswordEditVisible(false);
    };

    const menu = (id: string) => (
        <Menu>
            <Menu.Item
                icon={<EditOutlined />}
                key={'edit'}
                onClick={() => showEditModal(id)}
            >
                Upravit
            </Menu.Item>
            <Menu.Item icon={<LockOutlined />} onClick={() => showEditPasswordModal(id)}>
                Změnit Heslo
            </Menu.Item>
            <Menu.Item icon={<DeleteOutlined />} onClick={() => deleteUser(id)}>
                Smazat
            </Menu.Item>
        </Menu>
    );

    const columns = [
        {
            title: 'Jméno',
            dataIndex: 'name',
            key: 'name',
            ...getColumnSearchProps('name', 'jméno'),
            // @ts-ignore
            sorter: (a, b) => a.name.localeCompare(b.name),
        },
        {
            title: 'Příjmení',
            dataIndex: 'surname',
            key: 'surname',
            ...getColumnSearchProps('surname', 'příjmení'),
            // @ts-ignore
            sorter: (a, b) => a.surname.localeCompare(b.surname),
        },
        {
            title: 'Uživatelské jméno',
            dataIndex: 'username',
            key: 'username',
            ...getColumnSearchProps('username', 'uživatelské jméno'),
            // @ts-ignore
            sorter: (a, b) => a.username.localeCompare(b.username),
        },
        {
            title: 'Role',
            dataIndex: 'role',
            key: 'role',
            filters: [
                {
                    text: 'Administrátor',
                    value: 'ADMINISTRATOR',
                },
                {
                    text: 'Anotátor',
                    value: 'ANNOTATOR',
                },
            ],
            // @ts-ignore
            onFilter: (value, record) => record.role.indexOf(value) === 0,
            // @ts-ignore
            sorter: (a, b) => a.username.localeCompare(b.username),
            render: (role: string) => {
                let label = '';
                if (role === 'ANNOTATOR') {
                    label = 'Anotátor';
                }
                if (role === 'ADMINISTRATOR') {
                    label = 'Administrátor';
                }
                return label;
            },
        },
        {
            title: 'Přiřazeno dokumentů',
            key: 'docCounts',
            align: 'center' as 'center',
            dataIndex: ['id', 'assignedDocumentsCount'],
            // @ts-ignore
            render: (text, row) => (
                <div>
                    <Space size={'middle'}>
                        <Badge
                            count={
                                row.finalizedDocumentsCount +
                                row.inProgressDocumentsCount +
                                row.newDocumentsCount
                            }
                        >
                            <Button onClick={() => showDocsModal(row.id)}>
                                Dokumenty
                            </Button>
                        </Badge>
                    </Space>
                </div>
            ),
            // @ts-ignore
            sorter: (a, b) => a.assignedDocumentsCount - b.assignedDocumentsCount,
        },
        {
            title: '',
            key: 'operations',
            dataIndex: 'id',
            align: 'right' as 'right',
            width: '150px',
            // @ts-ignore
            render: (id) => (
                <div>
                    <Space size={'middle'}>
                        {/*{menu(id)}*/}
                        {<Dropdown.Button overlay={menu(id)} placement="bottom" />}
                    </Space>
                </div>
            ),
        },
    ];

    // @ts-ignore
    return redirecting || role !== 'ADMINISTRATOR' ? null : (
        <MainLayout>
            <Typography.Title level={2}>
                <FontAwesomeIcon icon={faUsers} /> Uživatelé
            </Typography.Title>
            <Button type={'primary'} onClick={showAddModal}>
                Přidat uživatele
            </Button>
            {addVisible && <AddUserModal onCancel={hideModals} />}
            {editVisible && <EditUserModal userInfo={user} onCancel={hideModals} />}
            {passwordEditVisible && (
                <EditUserPasswordModal userInfo={user} onCancel={hideModals} />
            )}
            {docsVisible && <UserDocumentsModal user={user} onCancel={hideModals} />}

            <Table
                locale={{ ...getLocaleProps() }}
                // @ts-ignore
                columns={columns}
                dataSource={users}
                scroll={{ y: 'calc(70vh - 4em)' }}
                pagination={false}
            />
        </MainLayout>
    );
}

export default UsersPage;