aswi20220x00-gitlab/webapp/pages/users/index.tsx @ 343aa66b

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

import { useUnauthRedirect } from '../../hooks';
import { useRouter } from 'next/router';
import { Button, 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 } from '../../utils/alerts';
import EditUserModal from '../../components/modals/EditUserModal';

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 [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(() => fetchData());
        }, 'uživatele');
    };

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

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

    const columns = [
        { title: 'Jméno', dataIndex: 'name', key: 'name' },
        { title: 'Příjmení', dataIndex: 'surname', key: 'surname' },
        { title: 'Uživatelské jméno', dataIndex: 'username', key: 'username' },
        {
            title: '',
            key: 'operation',
            dataIndex: 'id',
            render: (id: string) => (
                <div>
                    <Space size={'middle'}>
                        <Button onClick={() => showDocsModal(id)}>Dokumenty</Button>
                        <Button onClick={() => showEditModal(id)}>Upravit</Button>
                        <Button onClick={() => deleteUser(id)}>Smazat</Button>
                    </Space>
                </div>
            ),
        },
    ];

    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} />}
            {docsVisible && <UserDocumentsModal userId={user.id} onCancel={hideModals} />}

            <Table
                columns={columns}
                dataSource={users}
                size="small"
                scroll={{ y: 500 }}
            />
        </MainLayout>
    );
}

export default UsersPage;