aswi20220x00-gitlab/webapp/pages/documents/admin/index.tsx @ 5004f8b6

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

import { useUnauthRedirect } from '../../../hooks';
import { useRouter } from 'next/router';
import { Button, Table, Tag, 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 { AnnotationListInfo, DocumentListInfo, UserInfo } from '../../../api';
import { documentController, userController } from '../../../controllers';

function AdminDocumentPage() {
    const redirecting = useUnauthRedirect('/login');
    const { logout, role } = useContext(LoggedUserContext);
    const [visible, setVisible] = React.useState(false);
    const router = useRouter();

    const [documents, setDocuments] = useState<DocumentListInfo[]>([]);

    useEffect(() => {
        async function fetchData() {
            let docs = (await documentController.documentsGet(0, 1000)).data.documents;
            if (!docs) {
                setDocuments([]);
            } else {
                setDocuments(docs);
            }
        }

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

    const showModal = () => {
        setVisible(true);
    };

    const hideModal = () => {
        setVisible(false);
    };

    const columns = [
        {
            title: 'Název dokumentu',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Délka',
            dataIndex: 'length',
            key: 'length',
        },
        {
            title: 'Anotátoři',
            dataIndex: 'annotatingUsers',
            key: 'annotatingUsers',
            render: (columnData: UserInfo[], record: DocumentListInfo, index: number) => {
                return (
                    <div>
                        {columnData.map((e) => (
                            <span
                                key={e.username + '.' + record.id}
                                title={e.username ?? ''}
                            >
                                <FontAwesomeIcon
                                    icon={faUser}
                                    title={e.username ?? ''}
                                    className={'me-2'}
                                />
                            </span>
                        ))}
                    </div>
                );
            },
        },
    ];

    return redirecting || role !== 'ADMINISTRATOR' ? null : (
        <MainLayout>
            <Typography.Title level={2}>
                <FontAwesomeIcon icon={faFileLines} /> Dokumenty
            </Typography.Title>
            <Button type={'primary'} onClick={showModal}>
                Nahrát dokument
            </Button>
            {visible && <AddDocumentModal onCancel={hideModal} />}

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

export default AdminDocumentPage;