Revize bae9fbba
Přidáno uživatelem Jaroslav Hrubý před asi 2 roky(ů)
webapp/pages/documents/annotator/index.tsx | ||
---|---|---|
1 | 1 |
import 'antd/dist/antd.css'; |
2 |
import React, { useContext, useEffect } from 'react'; |
|
2 |
import React, { useContext, useEffect, useState } from 'react';
|
|
3 | 3 |
|
4 | 4 |
import { useUnauthRedirect } from '../../../hooks'; |
5 | 5 |
import { useRouter } from 'next/router'; |
6 |
import { Layout, Typography } from 'antd'; |
|
7 |
import UserNavBar from '../../../components/navigation/UserNavBar'; |
|
6 |
import { Button, Table, Tag, Typography } from 'antd'; |
|
8 | 7 |
import { faFileLines } from '@fortawesome/free-solid-svg-icons'; |
9 | 8 |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
10 | 9 |
import { LoggedUserContext } from '../../../contexts/LoggedUserContext'; |
11 |
import { MainLayout } from '../../../layouts/mainLayout'; |
|
10 |
import { MainLayout } from '../../../layouts/MainLayout'; |
|
11 |
import { userController } from '../../../controllers'; |
|
12 |
import { AnnotationListInfo } from '../../../api'; |
|
12 | 13 |
|
13 | 14 |
function UserDocumentPage() { |
14 | 15 |
const redirecting = useUnauthRedirect('/login'); |
15 | 16 |
const { logout, role } = useContext(LoggedUserContext); |
16 | 17 |
const router = useRouter(); |
18 |
const [documents, setDocuments] = useState<AnnotationListInfo[] | null | undefined>( |
|
19 |
[] |
|
20 |
); |
|
17 | 21 |
|
18 | 22 |
useEffect(() => { |
23 |
console.log(role); |
|
19 | 24 |
if (role !== 'ANNOTATOR') { |
20 | 25 |
logout(); |
21 | 26 |
router.push('/login'); |
22 | 27 |
} |
23 | 28 |
|
29 |
async function fetchData() { |
|
30 |
let docs = (await userController.userAnnotationsGet()).data.annotations; |
|
31 |
console.log(docs); |
|
32 |
setDocuments(docs); |
|
33 |
} |
|
24 | 34 |
if (!redirecting) { |
25 |
// TODO load documents
|
|
35 |
fetchData();
|
|
26 | 36 |
} |
27 | 37 |
}, [logout, redirecting, role, router]); |
28 | 38 |
|
39 |
const columns = [ |
|
40 |
{ |
|
41 |
title: 'Název dokumentu', |
|
42 |
dataIndex: 'documentName', |
|
43 |
key: 'documentName', |
|
44 |
}, |
|
45 |
{ |
|
46 |
title: 'Stav anotace', |
|
47 |
key: 'state', |
|
48 |
dataIndex: 'state', |
|
49 |
render: (state: string) => { |
|
50 |
let color = 'green'; |
|
51 |
let label = 'Hotovo'; |
|
52 |
if (state === 'NEW') { |
|
53 |
color = 'volcano'; |
|
54 |
label = 'Nový'; |
|
55 |
} |
|
56 |
if (state === 'IN_PROGRESS') { |
|
57 |
color = 'orange'; |
|
58 |
label = 'Rozpracováno'; |
|
59 |
} |
|
60 |
return ( |
|
61 |
<Tag color={color} key={label}> |
|
62 |
{label.toUpperCase()} |
|
63 |
</Tag> |
|
64 |
); |
|
65 |
}, |
|
66 |
}, |
|
67 |
{ |
|
68 |
title: '', |
|
69 |
key: 'action', |
|
70 |
dataIndex: 'annotationId', |
|
71 |
render: (anotationId: number) => ( |
|
72 |
<Button onClick={() => router.push('/annotation/' + anotationId)}> |
|
73 |
Anotovat |
|
74 |
</Button> |
|
75 |
), |
|
76 |
}, |
|
77 |
]; |
|
78 |
|
|
79 |
// TODO switch to REAL data from Controller |
|
80 |
const data = []; |
|
81 |
for (let i = 0; i < 100; i++) { |
|
82 |
let state = 'DONE'; |
|
83 |
if (i % 3 === 1) { |
|
84 |
state = 'IN_PROGRESS'; |
|
85 |
} |
|
86 |
if (i % 3 === 2) { |
|
87 |
state = 'NEW'; |
|
88 |
} |
|
89 |
|
|
90 |
data.push({ |
|
91 |
key: i, |
|
92 |
documentName: `Dokument ${i}`, |
|
93 |
state: state, |
|
94 |
annotationId: i, |
|
95 |
}); |
|
96 |
} |
|
97 |
|
|
29 | 98 |
return redirecting || role !== 'ANNOTATOR' ? null : ( |
30 | 99 |
<MainLayout> |
31 | 100 |
<Typography.Title level={2}> |
32 | 101 |
<FontAwesomeIcon icon={faFileLines} /> Dokumenty |
33 | 102 |
</Typography.Title> |
103 |
<Table columns={columns} dataSource={data} size="small" scroll={{ y: 500 }} /> |
|
34 | 104 |
</MainLayout> |
35 | 105 |
); |
36 | 106 |
} |
Také k dispozici: Unified diff
Table of annotator's documents implemented