aswi20220x00-gitlab/webapp/pages/documents/admin/index.tsx @ 3396af93

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

import { useUnauthRedirect } from '../../../hooks';
import { useRouter } from 'next/router';
import { Button, Input, Space, Table, Typography } from 'antd';
import { faFileLines, faUser } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { LoggedUserContext } from '../../../contexts/LoggedUserContext';
import { MainLayout } from '../../../layouts/MainLayout';
import AddDocumentModal from '../../../components/modals/AddDocumentModal';
import {
    DocumentListInfo,
    DocumentListResponse,
    DocumentUserInfo,
    EState,
} from '../../../api';
import { documentController, userController } from '../../../controllers';
import AssignDocumentModal from '../../../components/modals/AssignDocumentModal';
import { ShowConfirmDelete, ShowToast } from '../../../utils/alerts';
import { TableDocInfo } from '../../../components/types/TableDocInfo';
import {
    getAnnotationStateColor,
    getNameTruncated,
    getUserInfoAlt,
} from '../../../utils/strings';
import { ABadge, BadgeStyle } from '../../../components/common/ABadge';
import SetRequiredAnnotationsCountModal from '../../../components/modals/SetRequiredAnnotationsCountModal';
import DocPreviewModal from '../../../components/modals/DocPreviewModal';
import { UserFilter } from '../../../components/types/UserFilter';
import { getColumnSearchProps, getLocaleProps } from '../../../utils/tableUtils';
import { UserOutlined } from '@ant-design/icons';
import Swal from 'sweetalert2';
import { Stack } from 'react-bootstrap';

function AdminDocumentPage() {
    const redirecting = useUnauthRedirect('/login');
    const { logout, role } = useContext(LoggedUserContext);
    const [visibleAdd, setVisibleAdd] = React.useState(false);
    const [visibleAssign, setVisibleAssign] = React.useState(false);
    const [visiblePreview, setVisiblePreview] = React.useState(false);
    const [visibleSetCount, setVisibleSetCount] = React.useState(false);

    const router = useRouter();

    const [documents, setDocuments] = useState<TableDocInfo[]>([]);
    const [userFilters, setUserFilters] = useState<UserFilter[]>([]);
    const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
    const [previewDocContent, setPreviewDocContent] = useState<string>();
    const [previewDocName, setPreviewDocName] = useState<string>();
    const [annotationCount, setAnnotationCount] = useState<number>();

    async function fetchData() {
        const docs = (await documentController.documentsGet(0, 1000)).data.documents;
        // @ts-ignore
        const tableDocs: TableDocInfo[] = docs?.map((doc, index) => {
            return { key: index, ...doc };
        });

        const users = (await userController.usersGet()).data.users;
        // @ts-ignore
        const filters: UserFilter[] = users?.map((user) => {
            return {
                text: user.name + ' ' + user.surname,
                value: user.username,
            };
        });
        setUserFilters(filters);

        let annotationCountRes =
            await documentController.documentsRequiredAnnotationsGlobalGet();
        setAnnotationCount(annotationCountRes.data.requiredAnnotationsGlobal);

        if (!docs) {
            setDocuments([]);
        } else {
            setDocuments(tableDocs);
        }
    }

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

    const showAssignModal = () => {
        if (selectedDocs.length == 0) {
            ShowToast('Vyberte dokument pro přiřazení', 'warning', 3000, 'top-end');
        } else {
            setVisibleAssign(true);
        }
    };
    const showRequiredAnnotationsCountModal = () => {
        if (selectedDocs.length == 0) {
            ShowToast(
                'Vyberte dokument, pro které chcete nastavit požadovaný počet anotací',
                'warning',
                3000,
                'top-end'
            );
        } else {
            setVisibleSetCount(true);
        }
    };
    const showAddModal = () => {
        setVisibleAdd(true);
    };

    const showPreviewModal = async (id: string, name: string) => {
        const documentContent = (await documentController.documentDocumentIdGet(id)).data
            .content;
        if (documentContent) {
            setPreviewDocName(name);
            setPreviewDocContent(documentContent);
            setVisiblePreview(true);
        }
    };

    const changeDefaultAnotationCount = (e: FocusEvent<HTMLInputElement>) => {
        documentController.documentsRequiredAnnotationsGlobalPost({
            requiredAnnotations: parseInt(e.currentTarget.value),
        });
    };

    const hideModal = () => {
        fetchData();
        setVisibleAdd(false);
        setVisibleAssign(false);
        setVisibleSetCount(false);
        setVisiblePreview(false);
    };

    const columns = [
        {
            title: 'Název dokumentu',
            dataIndex: 'name',
            key: 'name',
            ...getColumnSearchProps('name', 'název'),
            sorter: {
                // @ts-ignore
                compare: (a, b) => a.name.localeCompare(b.name),
                multiple: 2,
            },
        },
        {
            title: 'Délka',
            dataIndex: 'length',
            key: 'length',
            sorter: {
                // @ts-ignore
                compare: (a, b) => a.length - b.length,
                multiple: 1,
            },
        },
        {
            title: 'Dokončeno | přiřazeno | vyžadováno',
            key: 'annotationCounts',
            render: (
                columnData: DocumentListResponse,
                record: DocumentListInfo,
                index: number
            ) => {
                const finished =
                    record.annotatingUsers?.filter((d) => d.state === EState.Done)
                        .length ?? 0;

                return (
                    <div>
                        <ABadge
                            style={
                                finished === record.annotatingUsers?.length
                                    ? BadgeStyle.SUCCESS
                                    : BadgeStyle.WARNING
                            }
                        >
                            {finished}
                        </ABadge>
                        {' | '}
                        <ABadge
                            style={
                                (record.annotatingUsers?.length ?? 0) >=
                                (record.requiredAnnotations ?? 0)
                                    ? BadgeStyle.SUCCESS
                                    : BadgeStyle.WARNING
                            }
                        >
                            {record.annotatingUsers?.length}
                        </ABadge>
                        {' | '}
                        <ABadge style={BadgeStyle.GENERAL}>
                            {record.requiredAnnotations}
                        </ABadge>
                    </div>
                );
            },
        },
        {
            title: 'Anotátoři',
            dataIndex: 'annotatingUsers',
            key: 'annotatingUsers',
            render: (
                columnData: DocumentUserInfo[],
                record: DocumentListInfo,
                index: number
            ) => {
                return (
                    <div>
                        {columnData.map((e) => (
                            <span
                                key={e.username + '.' + record.id}
                                title={getUserInfoAlt(e) + '\nStav: ' + e.state}
                                style={{
                                    color: getAnnotationStateColor(e.state),
                                    padding: 3,
                                }}
                                className={'me-3'}
                            >
                                <FontAwesomeIcon
                                    icon={faUser}
                                    title={getUserInfoAlt(e)}
                                    className={'me-2'}
                                />
                                {getNameTruncated(e)}
                            </span>
                        ))}
                    </div>
                );
            },
            filters: userFilters,
            filterSearch: true,
            // @ts-ignore
            onFilter: (value, record) =>
                // @ts-ignore
                record.annotatingUsers.find((user) => user['username'] === value),
            sorter: {
                // @ts-ignore
                compare: (a, b) => a.annotatingUsers.length - b.annotatingUsers.length,
                multiple: 3,
            },
        },
        {
            title: '',
            key: 'action',
            dataIndex: ['id', 'name'],
            // @ts-ignore
            render: (text, row) => (
                <Button key={row.id} onClick={() => showPreviewModal(row.id, row.name)}>
                    Náhled
                </Button>
            ),
        },
    ];

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

    return redirecting || role !== 'ADMINISTRATOR' ? null : (
        <MainLayout>
            <Typography.Title level={2}>
                <FontAwesomeIcon icon={faFileLines} /> Dokumenty
            </Typography.Title>
            <Stack style={{ width: '30%' }} direction="horizontal" key={annotationCount}>
                <span style={{ width: '70%' }}>Výchozí počet anotací:</span>
                <Input
                    defaultValue={annotationCount}
                    onBlur={changeDefaultAnotationCount}
                />
            </Stack>

            <Button type={'primary'} onClick={showAddModal}>
                Nahrát dokument
            </Button>
            <Button onClick={showAssignModal}>Přiřadit dokumenty</Button>
            <Button onClick={showRequiredAnnotationsCountModal}>
                Nastavit požadovaný počet anotací
            </Button>
            {visibleAdd && <AddDocumentModal onCancel={hideModal} />}
            {visibleAssign && (
                <AssignDocumentModal documentsIds={selectedDocs} onCancel={hideModal} />
            )}
            {visiblePreview && (
                <DocPreviewModal
                    onCancel={hideModal}
                    documentName={previewDocName ?? ''}
                    content={
                        previewDocContent ?? 'Nastala chyba při načítání obsahu dokumentu'
                    }
                />
            )}
            {visibleSetCount && (
                <SetRequiredAnnotationsCountModal
                    documentsIds={selectedDocs}
                    onCancel={hideModal}
                />
            )}

            <Table
                locale={{ ...getLocaleProps() }}
                rowSelection={{
                    type: 'checkbox',
                    ...rowSelection,
                }}
                // @ts-ignore
                columns={columns}
                dataSource={documents}
                size="middle"
                scroll={{ y: 600 }}
            />
        </MainLayout>
    );
}

export default AdminDocumentPage;