Projekt

Obecné

Profil

Stáhnout (4.85 KB) Statistiky
| Větev: | Tag: | Revize:
1
import 'antd/dist/antd.css';
2
import React, { useContext, useEffect, useState } from 'react';
3

    
4
import { useUnauthRedirect } from '../../../hooks';
5
import { useRouter } from 'next/router';
6
import { Button, Input, Space, Table, Tag, Typography } from 'antd';
7
import { faFileLines } from '@fortawesome/free-solid-svg-icons';
8
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
9
import { LoggedUserContext } from '../../../contexts/LoggedUserContext';
10
import { MainLayout } from '../../../layouts/MainLayout';
11
import { userController } from '../../../controllers';
12
import { AnnotationListInfo, EState } from '../../../api';
13
import {
14
    getAnnotationStateString,
15
    getAnnotationStateColor,
16
} from '../../../utils/strings';
17
import { getColumnSearchProps, getLocaleProps } from '../../../utils/tableUtils';
18
import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
19

    
20
import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
21
import styles from '/styles/Icon.module.scss';
22

    
23
function UserDocumentPage() {
24
    const redirecting = useUnauthRedirect('/login');
25
    const { logout, role } = useContext(LoggedUserContext);
26
    const [documents, setDocuments] = useState<AnnotationListInfo[]>([]);
27
    const router = useRouter();
28

    
29
    useEffect(() => {
30
        async function fetchData() {
31
            let docs = (await userController.userAnnotationsGet()).data.annotations;
32
            if (!docs) {
33
                setDocuments([]);
34
            } else {
35
                setDocuments(docs);
36
            }
37
        }
38

    
39
        if (!redirecting /* && role === 'ANNOTATOR'*/) {
40
            // admin can also fetch data if he likes so
41
            fetchData();
42
        }
43
    }, [logout, redirecting, role, router]);
44

    
45
    const columns = [
46
        {
47
            title: 'Název dokumentu',
48
            dataIndex: 'documentName',
49
            key: 'documentName',
50
            ...getColumnSearchProps('documentName', 'název'),
51
            // @ts-ignore
52
            sorter: (a, b) => a.documentName.localeCompare(b.documentName),
53
        },
54
        {
55
            title: 'Stav anotace',
56
            key: 'state',
57
            dataIndex: 'state',
58
            render: (state: EState) => {
59
                const color = getAnnotationStateColor(state);
60
                const label = getAnnotationStateString(state);
61
                let icon = (
62
                    <FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />
63
                );
64
                if (state === 'NEW') {
65
                    icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
66
                }
67
                if (state === 'IN_PROGRESS') {
68
                    icon = (
69
                        <FontAwesomeIcon
70
                            icon={faArrowsRotate}
71
                            className={styles.iconLeft}
72
                        />
73
                    );
74
                }
75

    
76
                return (
77
                    <Tag icon={icon} color={color} key={label}>
78
                        {label.toUpperCase()}
79
                    </Tag>
80
                );
81
            },
82
            filters: [
83
                {
84
                    text: 'Nový',
85
                    value: 'NEW',
86
                },
87
                {
88
                    text: 'Rozpracováno',
89
                    value: 'IN_PROGRESS',
90
                },
91
                {
92
                    text: 'Hotovo',
93
                    value: 'DONE',
94
                },
95
            ],
96
            // @ts-ignore
97
            onFilter: (value, record) => record.state.indexOf(value) === 0,
98
            // @ts-ignore
99
            sorter: (a, b) => a.state.length - b.state.length,
100
            sortDirections: ['descend', 'ascend'],
101
        },
102
        {
103
            title: '',
104
            key: 'action',
105
            dataIndex: 'annotationId',
106
            render: (anotationId: number) => (
107
                <Button
108
                    key={anotationId}
109
                    type={'primary'}
110
                    onClick={() =>
111
                        router.push({
112
                            pathname: '/annotation/[annotationId]',
113
                            query: { annotationId: anotationId, final: false },
114
                        })
115
                    }
116
                >
117
                    Anotovat
118
                </Button>
119
            ),
120
        },
121
    ];
122

    
123
    return redirecting /*|| role !== 'ANNOTATOR' */ ? null : (
124
        <MainLayout>
125
            <Typography.Title level={2}>
126
                <FontAwesomeIcon icon={faFileLines} /> Dokumenty
127
            </Typography.Title>
128
            <Table
129
                locale={{ ...getLocaleProps() }}
130
                // @ts-ignore
131
                columns={columns}
132
                // @ts-ignore
133
                dataSource={documents}
134
                size="small"
135
                scroll={{ y: 'calc(80vh - 4em)' }}
136
                pagination={false}
137
            />
138
        </MainLayout>
139
    );
140
}
141

    
142
export default UserDocumentPage;
    (1-1/1)