Projekt

Obecné

Profil

Stáhnout (6.8 KB) Statistiky
| Větev: | Tag: | Revize:
1 8c45ccb0 hrubyjar
import 'antd/dist/antd.css';
2 c6109e2d Lukáš Vlček
import React, { useContext, useEffect, useState } from 'react';
3 8c45ccb0 hrubyjar
4
import { useUnauthRedirect } from '../../../hooks';
5
import { useRouter } from 'next/router';
6 87a3d8d1 Lukáš Vlček
import { Button, Table, Typography } from 'antd';
7 c6109e2d Lukáš Vlček
import { faFileLines, faUser } from '@fortawesome/free-solid-svg-icons';
8 8c45ccb0 hrubyjar
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
9
import { LoggedUserContext } from '../../../contexts/LoggedUserContext';
10 bae9fbba Jaroslav Hrubý
import { MainLayout } from '../../../layouts/MainLayout';
11 4a7bae81 Jaroslav Hrubý
import AddDocumentModal from '../../../components/modals/AddDocumentModal';
12 ff61085f Lukáš Vlček
import {
13
    DocumentListInfo,
14 87a3d8d1 Lukáš Vlček
    DocumentListResponse,
15 ff61085f Lukáš Vlček
    DocumentUserInfo,
16
    EState,
17
} from '../../../api';
18 87a3d8d1 Lukáš Vlček
import { documentController } from '../../../controllers';
19 9bfa1e39 Jaroslav Hrubý
import AssignDocumentModal from '../../../components/modals/AssignDocumentModal';
20
import { ShowToast } from '../../../utils/alerts';
21 43d49a98 Jaroslav Hrubý
import { TableDocInfo } from '../../../components/types/TableDocInfo';
22 ff61085f Lukáš Vlček
import {
23
    getAnnotationStateColor,
24
    getNameTruncated,
25
    getUserInfoAlt,
26
} from '../../../utils/strings';
27 87a3d8d1 Lukáš Vlček
import { ABadge, BadgeStyle } from '../../../components/common/ABadge';
28 8c45ccb0 hrubyjar
29
function AdminDocumentPage() {
30
    const redirecting = useUnauthRedirect('/login');
31
    const { logout, role } = useContext(LoggedUserContext);
32 9bfa1e39 Jaroslav Hrubý
    const [visibleAdd, setVisibleAdd] = React.useState(false);
33
    const [visibleAssign, setVisibleAssign] = React.useState(false);
34 8c45ccb0 hrubyjar
    const router = useRouter();
35
36 43d49a98 Jaroslav Hrubý
    const [documents, setDocuments] = useState<TableDocInfo[]>([]);
37 9bfa1e39 Jaroslav Hrubý
    const [selectedDocs, setSelectedDocs] = useState<string[] | undefined[]>([]);
38 c6109e2d Lukáš Vlček
39 43d49a98 Jaroslav Hrubý
    async function fetchData() {
40
        const docs = (await documentController.documentsGet(0, 1000)).data.documents;
41
42
        // @ts-ignore
43
        const tableDocs: TableDocInfo[] = docs?.map((doc, index) => {
44
            return { key: index, ...doc };
45
        });
46 9bfa1e39 Jaroslav Hrubý
47 43d49a98 Jaroslav Hrubý
        if (!docs) {
48
            setDocuments([]);
49
        } else {
50
            setDocuments(tableDocs);
51 c6109e2d Lukáš Vlček
        }
52 43d49a98 Jaroslav Hrubý
    }
53 c6109e2d Lukáš Vlček
54 43d49a98 Jaroslav Hrubý
    useEffect(() => {
55 06d1aa21 Jaroslav Hrubý
        if (!redirecting && role === 'ADMINISTRATOR') {
56 c6109e2d Lukáš Vlček
            fetchData();
57 8c45ccb0 hrubyjar
        }
58
    }, [logout, redirecting, role, router]);
59
60 9bfa1e39 Jaroslav Hrubý
    const showAssignModal = () => {
61
        if (selectedDocs.length == 0) {
62
            ShowToast('Vyberte dokument pro přiřazení', 'warning', 3000, 'top-end');
63
        } else {
64
            setVisibleAssign(true);
65
        }
66
    };
67
68
    const showAddModal = () => {
69
        setVisibleAdd(true);
70 4a7bae81 Jaroslav Hrubý
    };
71
72
    const hideModal = () => {
73 43d49a98 Jaroslav Hrubý
        fetchData();
74 9bfa1e39 Jaroslav Hrubý
        setVisibleAdd(false);
75
        setVisibleAssign(false);
76 8c45ccb0 hrubyjar
    };
77
78 c6109e2d Lukáš Vlček
    const columns = [
79
        {
80
            title: 'Název dokumentu',
81
            dataIndex: 'name',
82
            key: 'name',
83
        },
84
        {
85
            title: 'Délka',
86
            dataIndex: 'length',
87
            key: 'length',
88
        },
89 87a3d8d1 Lukáš Vlček
        {
90
            title: 'Dokončeno | přiřazeno | vyžadováno',
91
            key: 'annotationCounts',
92
            render: (
93
                columnData: DocumentListResponse,
94
                record: DocumentListInfo,
95
                index: number
96
            ) => {
97
                const finished =
98
                    record.annotatingUsers?.filter((d) => d.state === EState.Done)
99
                        .length ?? 0;
100
101
                return (
102
                    <div>
103
                        <ABadge
104
                            style={
105
                                finished === record.annotatingUsers?.length
106
                                    ? BadgeStyle.SUCCESS
107
                                    : BadgeStyle.WARNING
108
                            }
109
                        >
110
                            {finished}
111
                        </ABadge>
112
                        {' | '}
113
                        <ABadge
114
                            style={
115 ef2143b8 Lukáš Vlček
                                (record.annotatingUsers?.length ?? 0) >=
116
                                (record.requiredAnnotations ?? 0)
117 87a3d8d1 Lukáš Vlček
                                    ? BadgeStyle.SUCCESS
118
                                    : BadgeStyle.WARNING
119
                            }
120
                        >
121
                            {record.annotatingUsers?.length}
122
                        </ABadge>
123
                        {' | '}
124
                        <ABadge style={BadgeStyle.GENERAL}>
125
                            {record.requiredAnnotations}
126
                        </ABadge>
127
                    </div>
128
                );
129
            },
130
        },
131 c6109e2d Lukáš Vlček
        {
132
            title: 'Anotátoři',
133
            dataIndex: 'annotatingUsers',
134
            key: 'annotatingUsers',
135 ff61085f Lukáš Vlček
            render: (
136
                columnData: DocumentUserInfo[],
137
                record: DocumentListInfo,
138
                index: number
139
            ) => {
140 c6109e2d Lukáš Vlček
                return (
141
                    <div>
142
                        {columnData.map((e) => (
143
                            <span
144
                                key={e.username + '.' + record.id}
145 ff61085f Lukáš Vlček
                                title={getUserInfoAlt(e) + '\nStav: ' + e.state}
146
                                style={{
147
                                    color: getAnnotationStateColor(e.state),
148
                                    padding: 3,
149
                                }}
150
                                className={'me-3'}
151 c6109e2d Lukáš Vlček
                            >
152
                                <FontAwesomeIcon
153
                                    icon={faUser}
154 ff61085f Lukáš Vlček
                                    title={getUserInfoAlt(e)}
155 c6109e2d Lukáš Vlček
                                    className={'me-2'}
156
                                />
157 ff61085f Lukáš Vlček
                                {getNameTruncated(e)}
158 c6109e2d Lukáš Vlček
                            </span>
159
                        ))}
160
                    </div>
161
                );
162
            },
163
        },
164
    ];
165
166 9bfa1e39 Jaroslav Hrubý
    const rowSelection = {
167
        onChange: (selectedRowKeys: React.Key[], selectedRows: DocumentListInfo[]) => {
168 43d49a98 Jaroslav Hrubý
            // @ts-ignore
169 9bfa1e39 Jaroslav Hrubý
            setSelectedDocs(selectedRows.map((row) => row.id));
170
        },
171
    };
172
173 8c45ccb0 hrubyjar
    return redirecting || role !== 'ADMINISTRATOR' ? null : (
174
        <MainLayout>
175
            <Typography.Title level={2}>
176
                <FontAwesomeIcon icon={faFileLines} /> Dokumenty
177
            </Typography.Title>
178 9bfa1e39 Jaroslav Hrubý
            <Button type={'primary'} onClick={showAddModal}>
179 8c45ccb0 hrubyjar
                Nahrát dokument
180
            </Button>
181 9bfa1e39 Jaroslav Hrubý
            <Button onClick={showAssignModal}>Přiřadit dokumenty</Button>
182
            {visibleAdd && <AddDocumentModal onCancel={hideModal} />}
183
            {visibleAssign && (
184
                <AssignDocumentModal documentsIds={selectedDocs} onCancel={hideModal} />
185
            )}
186 c6109e2d Lukáš Vlček
187
            <Table
188 9bfa1e39 Jaroslav Hrubý
                rowSelection={{
189
                    type: 'checkbox',
190
                    ...rowSelection,
191
                }}
192 c6109e2d Lukáš Vlček
                columns={columns}
193
                dataSource={documents}
194 9bfa1e39 Jaroslav Hrubý
                size="middle"
195
                scroll={{ y: 600 }}
196 c6109e2d Lukáš Vlček
            />
197 8c45ccb0 hrubyjar
        </MainLayout>
198
    );
199
}
200
201
export default AdminDocumentPage;