Revize fabfbe32
Přidáno uživatelem Jaroslav Hrubý před asi 2 roky(ů)
| webapp/components/modals/UserDocumentsModal.tsx | ||
|---|---|---|
| 1 |
import { List, Modal, Skeleton, Tag } from 'antd';
|
|
| 1 |
import { List, Modal, Skeleton, Tag, Typography } from 'antd';
|
|
| 2 | 2 |
import 'antd/dist/antd.css'; |
| 3 | 3 |
import React, { useContext, useEffect, useState } from 'react';
|
| 4 |
import { AnnotationListInfo, EState } from '../../api';
|
|
| 4 |
import { AnnotationListInfo, EState, UserInfo } from '../../api';
|
|
| 5 | 5 |
import { userController } from '../../controllers';
|
| 6 | 6 |
import { useUnauthRedirect } from '../../hooks';
|
| 7 | 7 |
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
|
| ... | ... | |
| 10 | 10 |
|
| 11 | 11 |
import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
|
| 12 | 12 |
import styles from '/styles/Icon.module.scss'; |
| 13 |
import { Badge, Tab, TabPane, Tabs } from 'react-bootstrap';
|
|
| 13 | 14 |
|
| 14 | 15 |
interface ModalProps {
|
| 15 | 16 |
onCancel: () => void; |
| 16 |
userId: string | undefined;
|
|
| 17 |
user: UserInfo;
|
|
| 17 | 18 |
} |
| 18 | 19 |
|
| 19 |
function UserDocumentsModal({ onCancel, userId }: ModalProps) {
|
|
| 20 |
function UserDocumentsModal({ onCancel, user }: ModalProps) {
|
|
| 20 | 21 |
const redirecting = useUnauthRedirect('/login');
|
| 21 | 22 |
const { role } = useContext(LoggedUserContext);
|
| 22 | 23 |
const [annotations, setAnnotations] = useState<AnnotationListInfo[]>([]); |
| 24 |
const [finished, setFinished] = useState(0); |
|
| 25 |
const [inProgress, setInProgress] = useState(0); |
|
| 23 | 26 |
|
| 24 | 27 |
const handleOk = () => {
|
| 25 | 28 |
onCancel(); |
| ... | ... | |
| 51 | 54 |
}; |
| 52 | 55 |
|
| 53 | 56 |
useEffect(() => {
|
| 54 |
if (!redirecting && role === 'ADMINISTRATOR' && userId) {
|
|
| 57 |
if (!redirecting && role === 'ADMINISTRATOR' && user.id) {
|
|
| 55 | 58 |
userController |
| 56 |
.userUserIdAnnotationsGet(userId)
|
|
| 59 |
.userUserIdAnnotationsGet(user.id)
|
|
| 57 | 60 |
.then(({ data: { annotations } }) => {
|
| 58 | 61 |
setAnnotations(annotations || []); |
| 59 | 62 |
}); |
| 63 |
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 |
} |
|
| 60 | 72 |
} |
| 61 |
}, [userId, redirecting, role]);
|
|
| 73 |
}, [redirecting, role]); |
|
| 62 | 74 |
|
| 63 | 75 |
return ( |
| 64 | 76 |
<Modal |
| ... | ... | |
| 68 | 80 |
onCancel={handleCancel}
|
| 69 | 81 |
footer={[null]}
|
| 70 | 82 |
> |
| 71 |
<List |
|
| 72 |
dataSource={annotations}
|
|
| 73 |
size={'small'}
|
|
| 74 |
grid={{ gutter: 10, column: 1 }}
|
|
| 75 |
style={{ maxHeight: 400, overflowY: 'auto', overflowX: 'hidden' }}
|
|
| 76 |
renderItem={(item) => (
|
|
| 77 |
<List.Item key={item.annotationId}>
|
|
| 78 |
<List.Item.Meta |
|
| 79 |
title={item.documentName}
|
|
| 80 |
// @ts-ignore |
|
| 81 |
avatar={getStateTag(item.state)}
|
|
| 82 |
/> |
|
| 83 |
</List.Item> |
|
| 84 |
)} |
|
| 85 |
/> |
|
| 83 |
<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> |
|
| 86 | 175 |
</Modal> |
| 87 | 176 |
); |
| 88 | 177 |
} |
Také k dispozici: Unified diff
Refactoring, fixes