1
|
import {
|
2
|
Button,
|
3
|
Grid,
|
4
|
Checkbox,
|
5
|
Paper,
|
6
|
Typography,
|
7
|
FormGroup,
|
8
|
FormControlLabel
|
9
|
} from '@mui/material'
|
10
|
import React, {Fragment, useEffect, useState} from 'react'
|
11
|
import axiosInstance from "../../api/api"
|
12
|
import 'react-quill/dist/quill.snow.css'
|
13
|
import {PermissionDto, UserDto} from "../../swagger/data-contracts"
|
14
|
import ClearIcon from "@mui/icons-material/Clear"
|
15
|
import CheckIcon from '@mui/icons-material/Check';
|
16
|
import {useDispatch, useSelector} from "react-redux"
|
17
|
import {deleteUser, savePermissions} from "./userDetailThunks"
|
18
|
import {RootState} from "../redux/store"
|
19
|
import {setSelectedUserPermissions} from "./userDetailSlice"
|
20
|
|
21
|
export interface UserDetailProps {
|
22
|
user: UserDto
|
23
|
}
|
24
|
|
25
|
const UserDetail = (props: UserDetailProps) => {
|
26
|
const selectedUser: UserDto | undefined = useSelector((state: RootState) => state.usersDetail.selectedUser)
|
27
|
const [canRead, setCanRead] = useState(selectedUser?.permissions?.canRead)
|
28
|
const [canWrite, setCanWrite] = useState(selectedUser?.permissions?.canWrite)
|
29
|
const [canDelete, setCanDelete] = useState(selectedUser?.permissions?.canDelete)
|
30
|
|
31
|
const dispatch = useDispatch()
|
32
|
|
33
|
useEffect(()=> {
|
34
|
console.log("user updated:")
|
35
|
setCanRead(selectedUser?.permissions?.canRead)
|
36
|
setCanWrite(selectedUser?.permissions?.canWrite)
|
37
|
setCanDelete(selectedUser?.permissions?.canDelete)
|
38
|
}, [selectedUser]);
|
39
|
|
40
|
// Maps user property to corresponding table row
|
41
|
const mapToRow = (rowName: string, item: string) => (
|
42
|
<Fragment>
|
43
|
<Grid sx={{my: 2}} container justifyContent="space-around">
|
44
|
<Grid item xs={6} sx={{px: 1}}>
|
45
|
<Typography fontWeight={500}>{rowName}</Typography>
|
46
|
</Grid>
|
47
|
<Grid item xs={6} sx={{ml: 'auto'}}>
|
48
|
<Typography key={item}>{item}</Typography>
|
49
|
</Grid>
|
50
|
</Grid>
|
51
|
</Fragment>
|
52
|
)
|
53
|
|
54
|
const rows = [
|
55
|
{
|
56
|
rowName: 'Name:',
|
57
|
item: [props.user?.name],
|
58
|
},
|
59
|
{
|
60
|
rowName: 'E-mail:',
|
61
|
item: selectedUser?.email,
|
62
|
}
|
63
|
]
|
64
|
const rights = {
|
65
|
canWrite: 'Add and edit locations',
|
66
|
canDelete: 'Delete locations',
|
67
|
canRead: 'Access to tracking tool',
|
68
|
}
|
69
|
|
70
|
|
71
|
const prepareDeleteUser = async () => {
|
72
|
dispatch(deleteUser())
|
73
|
}
|
74
|
|
75
|
const prepareSavePermissions = () => {
|
76
|
dispatch(setSelectedUserPermissions({canRead: canRead, canWrite: canWrite, canDelete: canDelete}))
|
77
|
dispatch(savePermissions())
|
78
|
}
|
79
|
|
80
|
return (
|
81
|
<Fragment>
|
82
|
<Paper style={{minHeight: '80vh'}} variant="outlined">
|
83
|
<Grid container justifyContent="space-around">
|
84
|
<Grid item xs={12} md={6} sx={{p: 2}}>
|
85
|
<Typography fontWeight={800}>Information</Typography>
|
86
|
{rows.map((row) => (
|
87
|
|
88
|
<Fragment>
|
89
|
{mapToRow(
|
90
|
row.rowName as string,
|
91
|
row.item as string
|
92
|
)}
|
93
|
</Fragment>
|
94
|
))}
|
95
|
</Grid>
|
96
|
<Grid item xs={12} md={6} sx={{p: 2}}>
|
97
|
<Typography fontWeight={800}>Rights</Typography>
|
98
|
<FormGroup>
|
99
|
<FormControlLabel
|
100
|
control={
|
101
|
<Checkbox
|
102
|
checked={canWrite}
|
103
|
onChange={e => setCanWrite(e.target.checked)}
|
104
|
/>}
|
105
|
label={rights.canWrite}/>
|
106
|
<FormControlLabel
|
107
|
control={
|
108
|
<Checkbox
|
109
|
checked={canRead}
|
110
|
onChange={e => setCanRead(e.target.checked)}
|
111
|
/>}
|
112
|
label={rights.canRead}/>
|
113
|
<FormControlLabel
|
114
|
control={
|
115
|
<Checkbox
|
116
|
checked={canDelete}
|
117
|
onChange={e => setCanDelete(e.target.checked)}
|
118
|
/>}
|
119
|
label={rights.canDelete}/>
|
120
|
</FormGroup>
|
121
|
</Grid>
|
122
|
</Grid>
|
123
|
<Button startIcon={<CheckIcon />}
|
124
|
variant="contained"
|
125
|
color="primary"
|
126
|
onClick={prepareSavePermissions}
|
127
|
sx={{ m: 2 }} >
|
128
|
Save
|
129
|
</Button>
|
130
|
<Button startIcon={<ClearIcon />}
|
131
|
variant="contained"
|
132
|
color="primary"
|
133
|
onClick={prepareDeleteUser}
|
134
|
sx={{ m: 2 }} >
|
135
|
Delete
|
136
|
</Button>
|
137
|
</Paper>
|
138
|
</Fragment>
|
139
|
)
|
140
|
}
|
141
|
|
142
|
export default UserDetail
|