Revize bae9fbba

Table of annotator's documents implemented

webapp/pages/documents/admin/index.tsx

@@ -7 +7 @@
 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 { documentController } from '../../../controllers';
+import { MainLayout } from '../../../layouts/MainLayout';
 
 function AdminDocumentPage() {
     const redirecting = useUnauthRedirect('/login');
     const { logout, role } = useContext(LoggedUserContext);
     const router = useRouter();
     useEffect(() => {
+        console.log(role);
         if (role !== 'ADMINISTRATOR') {
             logout();
             router.push('/login');

webapp/pages/documents/annotator/index.tsx

@@ -1 +1 @@
 import 'antd/dist/antd.css';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { useUnauthRedirect } from '../../../hooks';
 import { useRouter } from 'next/router';
-import { Layout, Typography } from 'antd';
-import UserNavBar from '../../../components/navigation/UserNavBar';
+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 { 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) {
-            // TODO load documents
+            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>
     );
 }