1 |
fabfbe32
|
Jaroslav Hrubý
|
import { List, Modal, Skeleton, Tag, Typography } from 'antd';
|
2 |
43d49a98
|
Jaroslav Hrubý
|
import 'antd/dist/antd.css';
|
3 |
|
|
import React, { useContext, useEffect, useState } from 'react';
|
4 |
fabfbe32
|
Jaroslav Hrubý
|
import { AnnotationListInfo, EState, UserInfo } from '../../api';
|
5 |
43d49a98
|
Jaroslav Hrubý
|
import { userController } from '../../controllers';
|
6 |
|
|
import { useUnauthRedirect } from '../../hooks';
|
7 |
|
|
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
|
8 |
fa93df26
|
Dominik Poch
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
9 |
|
|
import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
|
10 |
|
|
|
11 |
|
|
import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
|
12 |
|
|
import styles from '/styles/Icon.module.scss';
|
13 |
fabfbe32
|
Jaroslav Hrubý
|
import { Badge, Tab, TabPane, Tabs } from 'react-bootstrap';
|
14 |
43d49a98
|
Jaroslav Hrubý
|
|
15 |
|
|
interface ModalProps {
|
16 |
|
|
onCancel: () => void;
|
17 |
fabfbe32
|
Jaroslav Hrubý
|
user: UserInfo;
|
18 |
43d49a98
|
Jaroslav Hrubý
|
}
|
19 |
|
|
|
20 |
fabfbe32
|
Jaroslav Hrubý
|
function UserDocumentsModal({ onCancel, user }: ModalProps) {
|
21 |
43d49a98
|
Jaroslav Hrubý
|
const redirecting = useUnauthRedirect('/login');
|
22 |
|
|
const { role } = useContext(LoggedUserContext);
|
23 |
|
|
const [annotations, setAnnotations] = useState<AnnotationListInfo[]>([]);
|
24 |
fabfbe32
|
Jaroslav Hrubý
|
const [finished, setFinished] = useState(0);
|
25 |
|
|
const [inProgress, setInProgress] = useState(0);
|
26 |
43d49a98
|
Jaroslav Hrubý
|
|
27 |
|
|
const handleOk = () => {
|
28 |
|
|
onCancel();
|
29 |
|
|
};
|
30 |
|
|
|
31 |
|
|
const handleCancel = () => {
|
32 |
|
|
onCancel();
|
33 |
|
|
};
|
34 |
|
|
|
35 |
669ffe38
|
Jaroslav Hrubý
|
const getStateTag = (state: EState) => {
|
36 |
|
|
let color = 'green';
|
37 |
|
|
let label = 'Hotovo';
|
38 |
fa93df26
|
Dominik Poch
|
let icon = <FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />;
|
39 |
669ffe38
|
Jaroslav Hrubý
|
if (state === EState.New) {
|
40 |
|
|
color = 'volcano';
|
41 |
|
|
label = 'Nový';
|
42 |
fa93df26
|
Dominik Poch
|
icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
|
43 |
669ffe38
|
Jaroslav Hrubý
|
}
|
44 |
|
|
if (state === EState.InProgress) {
|
45 |
|
|
color = 'orange';
|
46 |
|
|
label = 'Rozpracováno';
|
47 |
fa93df26
|
Dominik Poch
|
icon = <FontAwesomeIcon icon={faArrowsRotate} className={styles.iconLeft} />;
|
48 |
669ffe38
|
Jaroslav Hrubý
|
}
|
49 |
|
|
return (
|
50 |
|
|
<Tag icon={icon} color={color} key={label}>
|
51 |
|
|
{label.toUpperCase()}
|
52 |
|
|
</Tag>
|
53 |
|
|
);
|
54 |
|
|
};
|
55 |
|
|
|
56 |
43d49a98
|
Jaroslav Hrubý
|
useEffect(() => {
|
57 |
fabfbe32
|
Jaroslav Hrubý
|
if (!redirecting && role === 'ADMINISTRATOR' && user.id) {
|
58 |
43d49a98
|
Jaroslav Hrubý
|
userController
|
59 |
fabfbe32
|
Jaroslav Hrubý
|
.userUserIdAnnotationsGet(user.id)
|
60 |
43d49a98
|
Jaroslav Hrubý
|
.then(({ data: { annotations } }) => {
|
61 |
|
|
setAnnotations(annotations || []);
|
62 |
|
|
});
|
63 |
fabfbe32
|
Jaroslav Hrubý
|
if (
|
64 |
|
|
user &&
|
65 |
|
|
user.finalizedDocumentsCount !== undefined &&
|
66 |
|
|
user.inProgressDocumentsCount !== undefined &&
|
67 |
|
|
user.newDocumentsCount !== undefined
|
68 |
|
|
) {
|
69 |
|
|
setFinished(user.finalizedDocumentsCount);
|
70 |
|
|
setInProgress(user.newDocumentsCount + user.inProgressDocumentsCount);
|
71 |
|
|
}
|
72 |
43d49a98
|
Jaroslav Hrubý
|
}
|
73 |
fabfbe32
|
Jaroslav Hrubý
|
}, [redirecting, role]);
|
74 |
43d49a98
|
Jaroslav Hrubý
|
|
75 |
|
|
return (
|
76 |
|
|
<Modal
|
77 |
|
|
title="Dokumenty uživatele"
|
78 |
|
|
onOk={handleOk}
|
79 |
|
|
visible={true}
|
80 |
|
|
onCancel={handleCancel}
|
81 |
|
|
footer={[null]}
|
82 |
|
|
>
|
83 |
fabfbe32
|
Jaroslav Hrubý
|
<Tabs defaultActiveKey="all" id="tabs" className="mb-3">
|
84 |
|
|
<Tab
|
85 |
|
|
eventKey="all"
|
86 |
|
|
title={
|
87 |
|
|
<div>
|
88 |
|
|
<Typography.Text>Vše </Typography.Text>
|
89 |
|
|
<Badge bg="info" pill>
|
90 |
|
|
{inProgress + finished}
|
91 |
|
|
</Badge>
|
92 |
|
|
</div>
|
93 |
|
|
}
|
94 |
|
|
>
|
95 |
|
|
<List
|
96 |
|
|
dataSource={annotations}
|
97 |
|
|
size={'small'}
|
98 |
|
|
grid={{ gutter: 10, column: 1 }}
|
99 |
|
|
style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
|
100 |
|
|
renderItem={(item) => (
|
101 |
|
|
<List.Item key={item.annotationId}>
|
102 |
|
|
<List.Item.Meta
|
103 |
|
|
title={item.documentName}
|
104 |
|
|
// @ts-ignore
|
105 |
|
|
avatar={getStateTag(item.state)}
|
106 |
|
|
/>
|
107 |
|
|
</List.Item>
|
108 |
|
|
)}
|
109 |
|
|
/>
|
110 |
|
|
</Tab>
|
111 |
|
|
<Tab
|
112 |
|
|
eventKey="profile"
|
113 |
|
|
title={
|
114 |
|
|
<div>
|
115 |
|
|
<Typography.Text>Nové a rozpracované </Typography.Text>
|
116 |
|
|
<Badge bg="warning" pill>
|
117 |
|
|
{inProgress}
|
118 |
|
|
</Badge>
|
119 |
|
|
</div>
|
120 |
|
|
}
|
121 |
|
|
>
|
122 |
|
|
<List
|
123 |
|
|
dataSource={annotations}
|
124 |
|
|
size={'small'}
|
125 |
|
|
grid={{ gutter: 10, column: 1 }}
|
126 |
|
|
style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
|
127 |
|
|
renderItem={(item) =>
|
128 |
|
|
item.state === EState.New ||
|
129 |
|
|
item.state === EState.InProgress ? (
|
130 |
|
|
<List.Item key={item.annotationId}>
|
131 |
|
|
<List.Item.Meta
|
132 |
|
|
title={item.documentName}
|
133 |
|
|
// @ts-ignore
|
134 |
|
|
avatar={getStateTag(item.state)}
|
135 |
|
|
/>
|
136 |
|
|
</List.Item>
|
137 |
|
|
) : (
|
138 |
|
|
''
|
139 |
|
|
)
|
140 |
|
|
}
|
141 |
|
|
/>
|
142 |
|
|
</Tab>
|
143 |
|
|
<Tab
|
144 |
|
|
eventKey="contact"
|
145 |
|
|
title={
|
146 |
|
|
<div>
|
147 |
|
|
<Typography.Text>Hotové </Typography.Text>
|
148 |
|
|
<Badge bg="success" pill>
|
149 |
|
|
{finished}
|
150 |
|
|
</Badge>
|
151 |
|
|
</div>
|
152 |
|
|
}
|
153 |
|
|
>
|
154 |
|
|
<List
|
155 |
|
|
dataSource={annotations}
|
156 |
|
|
size={'small'}
|
157 |
|
|
grid={{ gutter: 10, column: 1 }}
|
158 |
|
|
style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
|
159 |
|
|
renderItem={(item) =>
|
160 |
|
|
item.state === EState.Done ? (
|
161 |
|
|
<List.Item key={item.annotationId}>
|
162 |
|
|
<List.Item.Meta
|
163 |
|
|
title={item.documentName}
|
164 |
|
|
// @ts-ignore
|
165 |
|
|
avatar={getStateTag(item.state)}
|
166 |
|
|
/>
|
167 |
|
|
</List.Item>
|
168 |
|
|
) : (
|
169 |
|
|
''
|
170 |
|
|
)
|
171 |
|
|
}
|
172 |
|
|
/>
|
173 |
|
|
</Tab>
|
174 |
|
|
</Tabs>
|
175 |
43d49a98
|
Jaroslav Hrubý
|
</Modal>
|
176 |
|
|
);
|
177 |
|
|
}
|
178 |
|
|
|
179 |
|
|
export default UserDocumentsModal;
|