aswi20220x00-gitlab/webapp/pages/documents/annotator/index.tsx @ bae9fbba

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 } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { LoggedUserContext } from '../../../contexts/LoggedUserContext';
import { MainLayout } from '../../../layouts/MainLayout';
import { userController } from '../../../controllers';
import { AnnotationListInfo } from '../../../api';

function UserDocumentPage() {
    const redirecting = useUnauthRedirect('/login');
    const { logout, role } = useContext(LoggedUserContext);
    const router = useRouter();
    const [documents, setDocuments] = useState<AnnotationListInfo[] | null | undefined>(
        []
    );

    useEffect(() => {
        console.log(role);
        if (role !== 'ANNOTATOR') {
            logout();
            router.push('/login');
        }

        async function fetchData() {
            let docs = (await userController.userAnnotationsGet()).data.annotations;
            console.log(docs);
            setDocuments(docs);
        }
        if (!redirecting) {
            fetchData();
        }
    }, [logout, redirecting, role, router]);

    const columns = [
        {
            title: 'Název dokumentu',
            dataIndex: 'documentName',
            key: 'documentName',
        },
        {
            title: 'Stav anotace',
            key: 'state',
            dataIndex: 'state',
            render: (state: string) => {
                let color = 'green';
                let label = 'Hotovo';
                if (state === 'NEW') {
                    color = 'volcano';
                    label = 'Nový';
                }
                if (state === 'IN_PROGRESS') {
                    color = 'orange';
                    label = 'Rozpracováno';
                }
                return (
                    <Tag color={color} key={label}>
                        {label.toUpperCase()}
                    </Tag>
                );
            },
        },
        {
            title: '',
            key: 'action',
            dataIndex: 'annotationId',
            render: (anotationId: number) => (
                <Button onClick={() => router.push('/annotation/' + anotationId)}>
                    Anotovat
                </Button>
            ),
        },
    ];

    // TODO switch to REAL data from Controller
    const data = [];
    for (let i = 0; i < 100; i++) {
        let state = 'DONE';
        if (i % 3 === 1) {
            state = 'IN_PROGRESS';
        }
        if (i % 3 === 2) {
            state = 'NEW';
        }

        data.push({
            key: i,
            documentName: `Dokument ${i}`,
            state: state,
            annotationId: i,
        });
    }

    return redirecting || role !== 'ANNOTATOR' ? null : (
        <MainLayout>
            <Typography.Title level={2}>
                <FontAwesomeIcon icon={faFileLines} /> Dokumenty
            </Typography.Title>
            <Table columns={columns} dataSource={data} size="small" scroll={{ y: 500 }} />
        </MainLayout>
    );
}

export default UserDocumentPage;