1
|
import {
|
2
|
Button,
|
3
|
Container, Divider, Grid,
|
4
|
Checkbox,
|
5
|
Link,
|
6
|
List,
|
7
|
ListItem,
|
8
|
ListItemIcon,
|
9
|
ListItemText,
|
10
|
NativeSelect,
|
11
|
Paper,
|
12
|
Select, SelectChangeEvent, Typography, FormGroup, FormControlLabel
|
13
|
} from '@mui/material'
|
14
|
import React, {ChangeEvent, Fragment, ReactNode, useEffect, useState} from 'react'
|
15
|
import {useDispatch, useSelector} from 'react-redux'
|
16
|
import {RootState} from '../redux/store'
|
17
|
import axiosInstance from "../../api/api"
|
18
|
import 'react-quill/dist/quill.snow.css'
|
19
|
import ContentLoading from "../Reusables/ContentLoading"
|
20
|
import {Link as RouterLink, useNavigate} from "react-router-dom"
|
21
|
import EditIcon from '@mui/icons-material/Edit'
|
22
|
import {formatHtmlStringToReactDom} from "../../utils/formatting/HtmlUtils"
|
23
|
import {PermissionDto, UserDto} from "../../swagger/data-contracts"
|
24
|
import {Label} from "@mui/icons-material"
|
25
|
import ClearIcon from "@mui/icons-material/Clear"
|
26
|
|
27
|
export interface UserDetailProps {
|
28
|
user: UserDto,
|
29
|
onClose: () => void
|
30
|
}
|
31
|
|
32
|
const UserDetail = (props: UserDetailProps) => {
|
33
|
const [user] = useState(props.user)
|
34
|
const [canRead, setCanRead] = useState(user.permissions?.canRead)
|
35
|
const [canWrite, setCanWrite] = useState(user.permissions?.canWrite)
|
36
|
const [canDelete, setCanDelete] = useState(user.permissions?.canDelete)
|
37
|
|
38
|
|
39
|
// Maps user property to corresponding table row
|
40
|
const mapToRow = (rowName: string, item: string) => (
|
41
|
<Fragment>
|
42
|
<Grid sx={{my: 2}} container justifyContent="space-around">
|
43
|
<Grid item xs={4} sx={{px: 1}}>
|
44
|
<Typography fontWeight={500}>{rowName}</Typography>
|
45
|
</Grid>
|
46
|
<Grid item xs={8} sx={{ml: 'auto'}}>
|
47
|
<Typography key={item}>{item}</Typography>
|
48
|
</Grid>
|
49
|
</Grid>
|
50
|
</Fragment>
|
51
|
)
|
52
|
|
53
|
const rows = [
|
54
|
{
|
55
|
rowName: 'Name:',
|
56
|
item: [props.user?.name],
|
57
|
},
|
58
|
{
|
59
|
rowName: 'E-mail:',
|
60
|
item: user?.email,
|
61
|
}
|
62
|
]
|
63
|
const rights = {
|
64
|
canWrite: 'Add and edit locations',
|
65
|
canDelete: 'Delete locations',
|
66
|
canRead: 'Access to tracking tool',
|
67
|
}
|
68
|
|
69
|
|
70
|
const deleteUser = async () => {
|
71
|
const { data, status } = await axiosInstance.delete(
|
72
|
`/users/${user.email}`
|
73
|
)
|
74
|
if (status !== 200) {
|
75
|
// TODO dodělat zpracování erroru
|
76
|
return
|
77
|
}
|
78
|
props.onClose();
|
79
|
}
|
80
|
|
81
|
return (
|
82
|
<Fragment>
|
83
|
<Paper style={{minHeight: '80vh'}} variant="outlined">
|
84
|
<Grid container justifyContent="space-around">
|
85
|
<Grid item xs={6} md={6} sx={{p: 2}}>
|
86
|
<Typography fontWeight={800}>Information</Typography>
|
87
|
{rows.map((row) => (
|
88
|
|
89
|
<Fragment>
|
90
|
{mapToRow(
|
91
|
row.rowName as string,
|
92
|
row.item as string
|
93
|
)}
|
94
|
</Fragment>
|
95
|
))}
|
96
|
</Grid>
|
97
|
<Grid item xs={6} md={6} sx={{p: 2}}>
|
98
|
<b>Rights</b>
|
99
|
<FormGroup>
|
100
|
<FormControlLabel
|
101
|
control={
|
102
|
<Checkbox
|
103
|
checked={canWrite}
|
104
|
onChange={e => setCanWrite(e.target.checked)}
|
105
|
/>}
|
106
|
label={rights.canWrite}/>
|
107
|
<FormControlLabel
|
108
|
control={
|
109
|
<Checkbox
|
110
|
checked={canRead}
|
111
|
onChange={e => setCanRead(e.target.checked)}
|
112
|
/>}
|
113
|
label={rights.canRead}/>
|
114
|
<FormControlLabel
|
115
|
control={
|
116
|
<Checkbox
|
117
|
checked={canDelete}
|
118
|
onChange={e => setCanDelete(e.target.checked)}
|
119
|
/>}
|
120
|
label={rights.canDelete}/>
|
121
|
</FormGroup>
|
122
|
</Grid>
|
123
|
</Grid>
|
124
|
<Button startIcon={<ClearIcon />}
|
125
|
variant="contained"
|
126
|
color="primary"
|
127
|
onClick={deleteUser}
|
128
|
sx={{ m: 2 }} >
|
129
|
Delete
|
130
|
</Button>
|
131
|
</Paper>
|
132
|
</Fragment>
|
133
|
)
|
134
|
}
|
135
|
|
136
|
export default UserDetail
|