aswi20220x00-gitlab/webapp/pages/documents/admin/index.tsx @ 937bfbee

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

import { useUnauthRedirect } from '../../../hooks';
import { useRouter } from 'next/router';
import { Button, Dropdown, Input, Menu, Row, Space, Table, Tag, Typography } from 'antd';
import { faArrowsRotate, 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 {
    DeleteDocumentsRequest,
    DocumentListInfo,
    DocumentListResponse,
    DocumentUserInfo,
    EState,
    ExportRequest,
} from '../../../api';
import { documentController, userController } from '../../../controllers';
import AssignDocumentModal from '../../../components/modals/AssignDocumentModal';
import { ShowConfirm, ShowConfirmDelete, ShowToast } from '../../../utils/alerts';
import { TableDocInfo } from '../../../components/types/TableDocInfo';
import {
    getAnnotationStateColor,
    getAnnotationStateString,
    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 { SweetAlertIcon } from 'sweetalert2';
import { Stack } from 'react-bootstrap';

import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
import styles from '/styles/Icon.module.scss';
import { FileSearchOutlined, UserDeleteOutlined } from '@ant-design/icons';

function AdminDocumentPage() {
    const redirecting = useUnauthRedirect('/login');
    const { logout, role } = useContext(LoggedUserContext);
    const [finalizing, setFinalizing] = React.useState(false);
    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()).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.surname + ' ' + user.name,
                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 finalizeDocumentConfirm = async (
        document: DocumentListInfo,
        recreate: boolean
    ) => {
        let desc = recreate ? 'Dosavadní změny finální verze budou smazány' : '';
        let icon: SweetAlertIcon = recreate ? 'warning' : 'question';

        const doneAnnotations = document.annotatingUsers?.filter(
            (usr) => usr.state === EState.Done
        ).length;

        if (
            doneAnnotations !== undefined &&
            document.requiredAnnotations !== undefined &&
            doneAnnotations < document.requiredAnnotations
        ) {
            icon = 'warning';
            desc =
                'Není dokončen požadovaný počet anotací <br /> (dokončeno ' +
                doneAnnotations +
                ' z ' +
                document.requiredAnnotations +
                ')';
        }
        recreate
            ? ShowConfirm(
                  () => finalizeDocument(document.id),
                  'vytvořit novou finální verzi dokumentu',
                  desc,
                  icon
              )
            : ShowConfirm(
                  () => finalizeDocument(document.id),
                  'vytvořit finální verzi dokumentu',
                  desc,
                  icon
              );
    };

    const finalizeDocument = async (documentId: string | undefined) => {
        setFinalizing(true);
        const finalAnnotationId = (
            await documentController.documentDocumentIdFinalPost(
                documentId ? documentId : ''
            )
        ).data.finalAnnotationId;
        if (!finalAnnotationId) {
            ShowToast('Finální verzi se nepovedlo vytvořit', 'error');
        } else {
            router.push({
                pathname: '/annotation/[annotationId]',
                query: { annotationId: finalAnnotationId, final: true },
            });
        }
        setFinalizing(false);
    };

    const editFinalizedDocument = async (finalAnnotationId: string) => {
        setFinalizing(true);
        if (!finalAnnotationId) {
            ShowToast('Finální verze dosud neexistuje', 'warning');
        } else {
            router.push({
                pathname: '/annotation/[annotationId]',
                query: { annotationId: finalAnnotationId, final: true },
            });
        }
        setFinalizing(false);
    };

    async function removeUserFromDocument(documentID: string, annotatorID: string) {
        const res =
            await documentController.documentsDocumentIdAnnotatorsAnnotatorIdDelete(
                documentID,
                annotatorID
            );

        if (res.status === 200) {
            ShowToast('Uživatel byl úspěšně odebrán z dokumentu');
        }
        await fetchData();
    }

    const getFinalizationStateIcon = (state: EState) => {
        const color = getAnnotationStateColor(state);
        const label = getAnnotationStateString(state);
        let icon = <FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />;
        if (state === 'NEW') {
            icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
        }
        if (state === 'IN_PROGRESS') {
            icon = <FontAwesomeIcon icon={faArrowsRotate} className={styles.iconLeft} />;
        }

        return (
            <Tag icon={icon} color={color} key={label}>
                {label.toUpperCase()}
            </Tag>
        );
    };

    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 deleteDocuments = () => {
        const req: DeleteDocumentsRequest = { documentIds: selectedDocs };

        ShowConfirmDelete(() => {
            documentController.documentsDelete(req).then(() => {
                ShowToast('Dokumenty byly úspěšně odstraněny');
                fetchData();
            });
        }, 'dokumenty');
    };

    const exportDocuments = async () => {
        const req: ExportRequest = { documentIds: selectedDocs };
        const res = await documentController.documentsExportPost(req);
        if (res?.data) {
            download(res.data, 'export.zip');
        }
    };

    function download(baseData: string, filename: string) {
        if (!baseData) {
            console.log('base data null');
            return;
        }

        const linkSource = `data:application/zip;base64,${baseData}`;
        const downloadLink = document.createElement('a');

        downloadLink.href = linkSource;
        downloadLink.download = filename;
        downloadLink.click();

        // Clean up and remove the link
        // downloadLink.parentNode.removeChild(downloadLink);
    }

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

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

    const removeUserDocument = (user: DocumentUserInfo, record: DocumentListInfo) => {
        ShowConfirm(
            async () => {
                if (!record.id || !user?.id) {
                    return;
                }
                await removeUserFromDocument(record.id, user.id);
            },
            'odebrat uživatele ' +
                user.name +
                ' ' +
                user.surname +
                ' (' +
                user.username +
                ') z tohoto dokumentu',
            'Dosavadní postup tohoto anotátora na daném dokumentu bude nenávratně smazán'
        );
    };

    const menu = (user: DocumentUserInfo, record: DocumentListInfo) => {
        return (
            <Menu>
                <Menu.ItemGroup title={getNameTruncated(user)}>
                    <Menu.Item
                        icon={<FileSearchOutlined />}
                        onClick={() =>
                            router.push({
                                pathname: '/annotation/[annotationId]',
                                query: { annotationId: user.annotationId, final: false },
                            })
                        }
                    >
                        Zobrazit anotaci
                    </Menu.Item>
                    <Menu.Item
                        icon={<UserDeleteOutlined />}
                        onClick={() => removeUserDocument(user, record)}
                    >
                        Odebrat
                    </Menu.Item>
                </Menu.ItemGroup>
            </Menu>
        );
    };

    function getUserTag(user: DocumentUserInfo, record: DocumentListInfo) {
        return (
            <Dropdown overlay={menu(user, record)}>
                <Space
                    size={2}
                    style={{
                        paddingRight: 10,
                        color: getAnnotationStateColor(user.state),
                    }}
                >
                    <FontAwesomeIcon
                        icon={faUser}
                        title={getUserInfoAlt(user)}
                        className={'me-2'}
                    />
                    {record.finalAnnotations?.some(
                        (annot) => annot.userId === user.id
                    ) ? (
                        <u>{getNameTruncated(user)}</u>
                    ) : (
                        getNameTruncated(user)
                    )}
                </Space>
            </Dropdown>
        );
    }

    const columns = [
        {
            title: 'Název dokumentu',
            dataIndex: 'name',
            key: 'name',
            width: '30%',
            ...getColumnSearchProps('name', 'název'),
            sorter: {
                // @ts-ignore
                compare: (a, b) => a.name.localeCompare(b.name),
                multiple: 2,
            },
        },
        {
            title: 'Délka',
            dataIndex: 'length',
            key: 'length',
            width: '5%',
            align: 'center' as 'center',
            sorter: {
                // @ts-ignore
                compare: (a, b) => a.length - b.length,
                multiple: 1,
            },
        },
        {
            title: 'Dokončeno | přiřazeno | vyžadováno',
            key: 'annotationCounts',
            width: '15%',
            align: 'center' as 'center',
            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',
            width: '20%',
            render: (
                columnData: DocumentUserInfo[],
                record: DocumentListInfo,
                index: number
            ) => {
                return <div>{columnData.map((e) => getUserTag(e, record))}</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'],
            align: 'center' as 'center',
            width: '10%',
            // @ts-ignore
            render: (text, row) => (
                <Button
                    style={{ width: '80px' }}
                    key={row.id}
                    onClick={() => showPreviewModal(row.id, row.name)}
                >
                    Náhled
                </Button>
            ),
        },
        {
            title: 'Finální verze dokumentu',
            key: 'final',
            dataIndex: ['id', 'finalizedExists'],
            width: '20%',
            // @ts-ignore
            render: (text, row) =>
                row.finalizedExists ? (
                    <>
                        <Row>
                            <Space>
                                <Button
                                    disabled={finalizing}
                                    onClick={() => finalizeDocumentConfirm(row.id, true)}
                                >
                                    Znovu vytvořit
                                </Button>
                            </Space>
                        </Row>
                        <Row style={{ marginTop: '5px' }}>
                            <Space>
                                <Button
                                    disabled={finalizing}
                                    onClick={() =>
                                        editFinalizedDocument(row.finalizedAnnotationId)
                                    }
                                >
                                    Upravit
                                </Button>
                                {getFinalizationStateIcon(row.finalizedState)}
                            </Space>
                        </Row>
                    </>
                ) : (
                    <Button
                        disabled={finalizing}
                        onClick={() => finalizeDocumentConfirm(row, false)}
                    >
                        Finalizovat
                    </Button>
                ),
            filters: [
                {
                    text: 'Nefinalizováno',
                    value: null,
                },
                {
                    text: 'Nový',
                    value: 'NEW',
                },
                {
                    text: 'Rozpracováno',
                    value: 'IN_PROGRESS',
                },
                {
                    text: 'Hotovo',
                    value: 'DONE',
                },
            ],
            // @ts-ignore
            onFilter: (value, record) => record.finalizedState === value,
        },
    ];

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

    return redirecting || role !== 'ADMINISTRATOR' ? null : (
        <MainLayout>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',
                }}
            >
                <Typography.Title level={2}>
                    <FontAwesomeIcon icon={faFileLines} /> Dokumenty
                </Typography.Title>

                <Stack
                    style={{
                        width: '400px',
                        border: '1px solid lightgray',
                        borderRadius: 3,
                        padding: 10,
                        marginBottom: 30,
                        display: 'flex',
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                    }}
                    direction="horizontal"
                    key={annotationCount}
                >
                    <span>Výchozí požadovaný počet anotací:</span>
                    <Input
                        style={{ width: '100px' }}
                        defaultValue={annotationCount}
                        onBlur={changeDefaultAnotationCount}
                    />
                </Stack>
            </div>

            <div
                style={{
                    padding: '10px',
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'flex-start',
                    gap: '20px',
                    marginBottom: '20px',
                }}
            >
                <Button type={'primary'} onClick={showAddModal}>
                    Nahrát dokument
                </Button>

                <div style={{ display: 'flex', gap: '3px', flexWrap: 'wrap' }}>
                    <Button
                        danger
                        disabled={!(selectedDocs?.length > 0)}
                        onClick={() => deleteDocuments()}
                    >
                        Smazat dokumenty
                    </Button>

                    <Button
                        disabled={!(selectedDocs?.length > 0)}
                        onClick={() => exportDocuments()}
                    >
                        Export
                    </Button>
                    <Button
                        onClick={showAssignModal}
                        disabled={!(selectedDocs?.length > 0)}
                    >
                        Přiřadit vybrané dokumenty uživatelům
                    </Button>
                    <Button
                        onClick={showRequiredAnnotationsCountModal}
                        disabled={!(selectedDocs?.length > 0)}
                    >
                        Nastavit požadovaný počet anotací vybraným dokumentům
                    </Button>
                </div>
            </div>

            {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: 'calc(65vh - 4em)' }}
                pagination={false}
            />
        </MainLayout>
    );
}

export default AdminDocumentPage;