aswi20220x00-gitlab/webapp/pages/users/index.tsx @ 9980241e

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

import { useUnauthRedirect } from '../../hooks';
import { useRouter } from 'next/router';
import { Badge, Button, Input, 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';
import { SearchOutlined } from '@ant-design/icons';

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 handleSearch = (
        selectedKeys: React.SetStateAction<string>[],
        confirm: () => void
    ) => {
        confirm();
    };

    const handleReset = (clearFilters: () => void) => {
        clearFilters();
    };

    const getColumnSearchProps = (dataIndex: string, searchLabel: string) => ({
        // @ts-ignore
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
            <div style={{ padding: 8 }}>
                <Input
                    placeholder={`Vyhledat ${searchLabel}`}
                    value={selectedKeys[0]}
                    onChange={(e) =>
                        setSelectedKeys(e.target.value ? [e.target.value] : [])
                    }
                    onPressEnter={() => handleSearch(selectedKeys, confirm)}
                    style={{ marginBottom: 8, display: 'block' }}
                />
                <Space>
                    <Button
                        type="primary"
                        onClick={() => handleSearch(selectedKeys, confirm)}
                        icon={<SearchOutlined />}
                        style={{ width: 90 }}
                    >
                        Hledat
                    </Button>
                    <Button
                        onClick={() => handleReset(clearFilters)}
                        style={{ width: 90 }}
                    >
                        Smazat
                    </Button>
                </Space>
            </div>
        ),
        filterIcon: (filtered: any) => (
            <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
        ),
        onFilter: (value: string, record: { [x: string]: { toString: () => string } }) =>
            record[dataIndex]
                ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
                : '',
    });

    const columns = [
        {
            title: 'Jméno',
            dataIndex: 'name',
            key: 'name',
            ...getColumnSearchProps('name', 'jméno'),
        },
        {
            title: 'Příjmení',
            dataIndex: 'surname',
            key: 'surname',
            ...getColumnSearchProps('surname', 'příjmení'),
        },
        {
            title: 'Uživatelské jméno',
            dataIndex: 'username',
            key: 'username',
            ...getColumnSearchProps('username', 'uživatelské jméno'),
        },
        {
            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.assignedDocumentsCount}>
                            <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: 'center' as 'center',
            // @ts-ignore
            render: (id) => (
                <div>
                    <Space size={'middle'}>
                        <Button onClick={() => showEditModal(id)}>Upravit</Button>
                        <Button onClick={() => deleteUser(id)}>Smazat</Button>
                    </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} />}
            {docsVisible && <UserDocumentsModal userId={user.id} onCancel={hideModals} />}

            <Table
                locale={{
                    triggerDesc: 'Seřadit sestupně',
                    triggerAsc: 'Seřadit vzestupně',
                    cancelSort: 'Vypnout řazení',
                }}
                // @ts-ignore
                columns={columns}
                dataSource={users}
                scroll={{ y: 500 }}
            />
        </MainLayout>
    );
}

export default UsersPage;