1 |
|
import { Button, Checkbox, List, Modal } from 'antd';
|
|
1 |
import { Badge, Button, Checkbox, Dropdown, List, Modal, Space, Table } from 'antd';
|
2 |
2 |
import 'antd/dist/antd.css';
|
3 |
3 |
import React, { useContext, useEffect, useState } from 'react';
|
4 |
|
import { UserInfo } from '../../api';
|
5 |
|
import { annotationController, userController } from '../../controllers';
|
|
4 |
import { DocumentListInfo, UserInfo } from '../../api';
|
|
5 |
import {
|
|
6 |
annotationController,
|
|
7 |
documentController,
|
|
8 |
userController,
|
|
9 |
} from '../../controllers';
|
6 |
10 |
import { useUnauthRedirect } from '../../hooks';
|
7 |
11 |
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
|
8 |
12 |
import { ShowToast } from '../../utils/alerts';
|
|
13 |
import { getColumnSearchProps, getLocaleProps } from '../../utils/tableUtils';
|
|
14 |
import { TableUserInfo } from '../types/TableUserInfo';
|
|
15 |
import { TableDocInfo } from '../types/TableDocInfo';
|
9 |
16 |
|
10 |
17 |
interface ModalProps {
|
11 |
18 |
onCancel: () => void;
|
... | ... | |
15 |
22 |
function AssignDocumentModal({ onCancel, documentsIds }: ModalProps) {
|
16 |
23 |
const redirecting = useUnauthRedirect('/login');
|
17 |
24 |
const { role } = useContext(LoggedUserContext);
|
18 |
|
const [users, setUsers] = useState<UserInfo[]>([]);
|
|
25 |
const [users, setUsers] = useState<TableUserInfo[]>([]);
|
19 |
26 |
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
20 |
27 |
|
21 |
28 |
const handleOk = () => {
|
... | ... | |
26 |
33 |
onCancel();
|
27 |
34 |
};
|
28 |
35 |
|
29 |
|
useEffect(() => {
|
30 |
|
console.log(documentsIds);
|
|
36 |
async function fetchData() {
|
31 |
37 |
if (!redirecting && role === 'ADMINISTRATOR') {
|
32 |
|
userController.usersGet().then(({ data: { users } }) => {
|
33 |
|
setUsers(users || []);
|
|
38 |
const usrs = (await userController.usersGet()).data.users;
|
|
39 |
// @ts-ignore
|
|
40 |
const tableUsers: TableUserInfo[] = usrs?.map((usr, index) => {
|
|
41 |
return { key: index, ...usr };
|
34 |
42 |
});
|
|
43 |
setUsers(tableUsers || []);
|
35 |
44 |
}
|
36 |
|
}, [documentsIds, redirecting, role]);
|
|
45 |
}
|
|
46 |
|
|
47 |
useEffect(() => {
|
|
48 |
fetchData();
|
|
49 |
}, [documentsIds, fetchData, redirecting, role]);
|
37 |
50 |
|
38 |
51 |
const handleUpload = async () => {
|
39 |
52 |
// console.log(documentsIds, selectedUsers);
|
... | ... | |
56 |
69 |
}
|
57 |
70 |
};
|
58 |
71 |
|
59 |
|
function onChange(event: any) {
|
60 |
|
if (event.target.checked) {
|
61 |
|
selectedUsers.push(event.target.value);
|
62 |
|
} else {
|
63 |
|
setSelectedUsers(selectedUsers.filter((usr) => usr !== event.target.value));
|
64 |
|
}
|
65 |
|
}
|
|
72 |
const rowSelection = {
|
|
73 |
onChange: (selectedRowKeys: React.Key[], selectedRows: UserInfo[]) => {
|
|
74 |
// @ts-ignore
|
|
75 |
setSelectedUsers(selectedRows.map((row) => row.id));
|
|
76 |
},
|
|
77 |
};
|
|
78 |
|
|
79 |
const columns = [
|
|
80 |
{
|
|
81 |
title: 'Jméno',
|
|
82 |
dataIndex: 'name',
|
|
83 |
key: 'name',
|
|
84 |
...getColumnSearchProps('name', 'jméno'),
|
|
85 |
// @ts-ignore
|
|
86 |
sorter: (a, b) => a.name.localeCompare(b.name),
|
|
87 |
},
|
|
88 |
{
|
|
89 |
title: 'Příjmení',
|
|
90 |
dataIndex: 'surname',
|
|
91 |
key: 'surname',
|
|
92 |
...getColumnSearchProps('surname', 'příjmení'),
|
|
93 |
// @ts-ignore
|
|
94 |
sorter: (a, b) => a.surname.localeCompare(b.surname),
|
|
95 |
},
|
|
96 |
{
|
|
97 |
title: 'Uživatelské jméno',
|
|
98 |
dataIndex: 'username',
|
|
99 |
key: 'username',
|
|
100 |
...getColumnSearchProps('username', 'uživatelské jméno'),
|
|
101 |
// @ts-ignore
|
|
102 |
sorter: (a, b) => a.username.localeCompare(b.username),
|
|
103 |
},
|
|
104 |
{
|
|
105 |
title: 'Role',
|
|
106 |
dataIndex: 'role',
|
|
107 |
key: 'role',
|
|
108 |
filters: [
|
|
109 |
{
|
|
110 |
text: 'Administrátor',
|
|
111 |
value: 'ADMINISTRATOR',
|
|
112 |
},
|
|
113 |
{
|
|
114 |
text: 'Anotátor',
|
|
115 |
value: 'ANNOTATOR',
|
|
116 |
},
|
|
117 |
],
|
|
118 |
// @ts-ignore
|
|
119 |
onFilter: (value, record) => record.role.indexOf(value) === 0,
|
|
120 |
// @ts-ignore
|
|
121 |
sorter: (a, b) => a.username.localeCompare(b.username),
|
|
122 |
render: (role: string) => {
|
|
123 |
let label = '';
|
|
124 |
if (role === 'ANNOTATOR') {
|
|
125 |
label = 'Anotátor';
|
|
126 |
}
|
|
127 |
if (role === 'ADMINISTRATOR') {
|
|
128 |
label = 'Administrátor';
|
|
129 |
}
|
|
130 |
return label;
|
|
131 |
},
|
|
132 |
},
|
|
133 |
{
|
|
134 |
title: 'Přiřazeno dokumentů',
|
|
135 |
key: 'docCounts',
|
|
136 |
align: 'center' as 'center',
|
|
137 |
dataIndex: 'assignedDocumentsCount',
|
|
138 |
// @ts-ignore
|
|
139 |
render: (assignedDocumentsCount) => (
|
|
140 |
<div>
|
|
141 |
<Space size={'middle'}>
|
|
142 |
<Badge count={assignedDocumentsCount} />
|
|
143 |
</Space>
|
|
144 |
</div>
|
|
145 |
),
|
|
146 |
// @ts-ignore
|
|
147 |
sorter: (a, b) => a.assignedDocumentsCount - b.assignedDocumentsCount,
|
|
148 |
},
|
|
149 |
];
|
66 |
150 |
|
67 |
151 |
return (
|
68 |
152 |
<Modal
|
... | ... | |
70 |
154 |
onOk={handleOk}
|
71 |
155 |
visible={true}
|
72 |
156 |
onCancel={handleCancel}
|
|
157 |
width={1000}
|
73 |
158 |
footer={[
|
74 |
159 |
<Button key="back" onClick={handleCancel}>
|
75 |
160 |
Storno
|
... | ... | |
79 |
164 |
</Button>,
|
80 |
165 |
]}
|
81 |
166 |
>
|
82 |
|
<List
|
|
167 |
<Table
|
|
168 |
locale={{ ...getLocaleProps() }}
|
|
169 |
rowSelection={{
|
|
170 |
type: 'checkbox',
|
|
171 |
...rowSelection,
|
|
172 |
}}
|
|
173 |
// @ts-ignore
|
|
174 |
columns={columns}
|
83 |
175 |
dataSource={users}
|
84 |
|
size={'small'}
|
85 |
|
grid={{ gutter: 10, column: 1 }}
|
86 |
|
style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
|
87 |
|
renderItem={(item) => (
|
88 |
|
<List.Item key={item.id}>
|
89 |
|
<List.Item.Meta
|
90 |
|
title={
|
91 |
|
<Checkbox onChange={onChange} value={item.id}>
|
92 |
|
{item.name + ' ' + item.surname}
|
93 |
|
</Checkbox>
|
94 |
|
}
|
95 |
|
/>
|
96 |
|
</List.Item>
|
97 |
|
)}
|
|
176 |
pagination={false}
|
|
177 |
scroll={{ y: 400 }}
|
98 |
178 |
/>
|
99 |
179 |
</Modal>
|
100 |
180 |
);
|
document assigning modal window improved - table instead of list