aswi20220x00-gitlab/webapp/components/modals/AssignDocumentModal.tsx @ fabfbe32

import { Badge, Button, Checkbox, Dropdown, List, Modal, Space, Table } from 'antd';
import 'antd/dist/antd.css';
import React, { useContext, useEffect, useState } from 'react';
import { DocumentListInfo, UserInfo } from '../../api';
import {
    annotationController,
    documentController,
    userController,
} from '../../controllers';
import { useUnauthRedirect } from '../../hooks';
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
import { ShowToast } from '../../utils/alerts';
import { getColumnSearchProps, getLocaleProps } from '../../utils/tableUtils';
import { TableUserInfo } from '../types/TableUserInfo';
import { TableDocInfo } from '../types/TableDocInfo';
import { ABadge, BadgeStyle } from '../common/ABadge';
import { ok } from 'assert';

interface ModalProps {
    onCancel: (ok: boolean) => void;
    documentsIds: (string | undefined)[];
}

function AssignDocumentModal({ onCancel, documentsIds }: ModalProps) {
    const redirecting = useUnauthRedirect('/login');
    const { role } = useContext(LoggedUserContext);
    const [users, setUsers] = useState<TableUserInfo[]>([]);
    const [selectedUsers, setSelectedUsers] = useState<string[]>([]);

    const handleOk = () => {
        onCancel(true);
    };

    const handleCancel = () => {
        onCancel(false);
    };

    async function fetchData() {
        if (!redirecting && role === 'ADMINISTRATOR') {
            const usrs = (await userController.usersGet()).data.users;
            // @ts-ignore
            const tableUsers: TableUserInfo[] = usrs?.map((usr, index) => {
                return { key: index, ...usr };
            });
            setUsers(tableUsers || []);
        }
    }

    useEffect(() => {
        fetchData();
    }, [documentsIds, redirecting, role]);

    const handleUpload = async () => {
        // console.log(documentsIds, selectedUsers);
        if (documentsIds && documentsIds.length !== 0) {
            await annotationController
                .annotationsPost({
                    // @ts-ignore
                    documentIdList: documentsIds,
                    userIdList: selectedUsers,
                })
                .then((r) => {
                    ShowToast(
                        'Přiřazení dokumentů proběhlo úspěšně',
                        'success',
                        3000,
                        'top-end'
                    );
                    onCancel(true);
                });
        }
    };

    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: UserInfo[]) => {
            // @ts-ignore
            setSelectedUsers(selectedRows.map((row) => row.id));
        },
    };

    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: 'Aktivní | Hotovo | Celkem',
            key: 'docCounts',
            align: 'center' as 'center',
            dataIndex: 'assignedDocumentsCount',
            // @ts-ignore
            render: (text, row) => (
                <div>
                    <ABadge style={BadgeStyle.WARNING}>
                        {row.newDocumentsCount + row.inProgressDocumentsCount}
                    </ABadge>
                    {' | '}
                    <ABadge style={BadgeStyle.SUCCESS}>
                        {row.finalizedDocumentsCount}
                    </ABadge>
                    {' | '}
                    <ABadge style={BadgeStyle.GENERAL}>
                        {row.finalizedDocumentsCount +
                            row.newDocumentsCount +
                            row.inProgressDocumentsCount}
                    </ABadge>
                </div>
            ),
            // @ts-ignore
            sorter: (a, b) =>
                a.newDocumentsCount +
                a.inProgressDocumentsCount -
                (b.newDocumentsCount + b.inProgressDocumentsCount),
        },
    ];

    return (
        <Modal
            title="Přiřadit dokumenty"
            onOk={handleOk}
            visible={true}
            onCancel={handleCancel}
            width={1100}
            footer={[
                <Button key="back" onClick={handleCancel}>
                    Storno
                </Button>,
                <Button key="submit" type="primary" onClick={handleUpload}>
                    Přiřadit
                </Button>,
            ]}
        >
            <Table
                locale={{ ...getLocaleProps() }}
                rowSelection={{
                    type: 'checkbox',
                    ...rowSelection,
                }}
                // @ts-ignore
                columns={columns}
                dataSource={users}
                pagination={false}
                scroll={{ y: 400 }}
            />
        </Modal>
    );
}

export default AssignDocumentModal;