Revize 5b1882cb
Přidáno uživatelem Michal Schwob před asi 2 roky(ů)
| frontend/src/features/Administration/UserDetail.tsx | ||
|---|---|---|
| 1 | 1 |
import {
|
| 2 | 2 |
Button, |
| 3 |
Container, Divider, Grid,
|
|
| 3 |
Grid, |
|
| 4 | 4 |
Checkbox, |
| 5 |
Link, |
|
| 6 |
List, |
|
| 7 |
ListItem, |
|
| 8 |
ListItemIcon, |
|
| 9 |
ListItemText, |
|
| 10 |
NativeSelect, |
|
| 11 | 5 |
Paper, |
| 12 |
Select, SelectChangeEvent, Typography, FormGroup, FormControlLabel |
|
| 6 |
Typography, |
|
| 7 |
FormGroup, |
|
| 8 |
FormControlLabel, Container |
|
| 13 | 9 |
} 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'
|
|
| 10 |
import React, {Fragment, useEffect, useState} from 'react'
|
|
| 17 | 11 |
import axiosInstance from "../../api/api" |
| 18 | 12 |
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 | 13 |
import {PermissionDto, UserDto} from "../../swagger/data-contracts"
|
| 24 |
import {Label} from "@mui/icons-material"
|
|
| 25 | 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 {fetchUsers, savePermissions} from "./userDetailThunks"
|
|
| 18 |
import {RootState} from "../redux/store"
|
|
| 19 |
import {setSelectedUserPermissions} from "./userDetailSlice"
|
|
| 26 | 20 |
|
| 27 | 21 |
export interface UserDetailProps {
|
| 28 | 22 |
user: UserDto, |
| ... | ... | |
| 30 | 24 |
} |
| 31 | 25 |
|
| 32 | 26 |
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)
|
|
| 27 |
const selectedUser = useSelector((state: RootState) => state.usersDetail.selectedUser)
|
|
| 28 |
const [canRead, setCanRead] = useState(selectedUser?.permissions?.canRead)
|
|
| 29 |
const [canWrite, setCanWrite] = useState(selectedUser?.permissions?.canWrite)
|
|
| 30 |
const [canDelete, setCanDelete] = useState(selectedUser?.permissions?.canDelete)
|
|
| 37 | 31 |
|
| 32 |
const dispatch = useDispatch() |
|
| 33 |
|
|
| 34 |
useEffect(()=> {
|
|
| 35 |
console.log("user updated:")
|
|
| 36 |
setCanRead(selectedUser?.permissions?.canRead) |
|
| 37 |
setCanWrite(selectedUser?.permissions?.canWrite) |
|
| 38 |
setCanDelete(selectedUser?.permissions?.canDelete) |
|
| 39 |
}, [selectedUser]); |
|
| 38 | 40 |
|
| 39 | 41 |
// Maps user property to corresponding table row |
| 40 | 42 |
const mapToRow = (rowName: string, item: string) => ( |
| 41 | 43 |
<Fragment> |
| 42 | 44 |
<Grid sx={{my: 2}} container justifyContent="space-around">
|
| 43 |
<Grid item xs={4} sx={{px: 1}}>
|
|
| 45 |
<Grid item xs={6} sx={{px: 1}}>
|
|
| 44 | 46 |
<Typography fontWeight={500}>{rowName}</Typography>
|
| 45 | 47 |
</Grid> |
| 46 |
<Grid item xs={8} sx={{ml: 'auto'}}>
|
|
| 48 |
<Grid item xs={6} sx={{ml: 'auto'}}>
|
|
| 47 | 49 |
<Typography key={item}>{item}</Typography>
|
| 48 | 50 |
</Grid> |
| 49 | 51 |
</Grid> |
| ... | ... | |
| 57 | 59 |
}, |
| 58 | 60 |
{
|
| 59 | 61 |
rowName: 'E-mail:', |
| 60 |
item: user?.email,
|
|
| 62 |
item: selectedUser?.email,
|
|
| 61 | 63 |
} |
| 62 | 64 |
] |
| 63 | 65 |
const rights = {
|
| ... | ... | |
| 69 | 71 |
|
| 70 | 72 |
const deleteUser = async () => {
|
| 71 | 73 |
const { data, status } = await axiosInstance.delete(
|
| 72 |
`/users/${user.email}`
|
|
| 74 |
`/users/${selectedUser?.email}`
|
|
| 73 | 75 |
) |
| 74 | 76 |
if (status !== 200) {
|
| 75 | 77 |
// TODO dodělat zpracování erroru |
| ... | ... | |
| 78 | 80 |
props.onClose(); |
| 79 | 81 |
} |
| 80 | 82 |
|
| 83 |
const prepareSavePermissions = () => {
|
|
| 84 |
dispatch(setSelectedUserPermissions({canRead: canRead, canWrite: canWrite, canDelete: canDelete}))
|
|
| 85 |
dispatch(savePermissions()) |
|
| 86 |
dispatch(fetchUsers()) |
|
| 87 |
} |
|
| 88 |
|
|
| 81 | 89 |
return ( |
| 82 | 90 |
<Fragment> |
| 83 | 91 |
<Paper style={{minHeight: '80vh'}} variant="outlined">
|
| 84 | 92 |
<Grid container justifyContent="space-around"> |
| 85 |
<Grid item xs={6} md={6} sx={{p: 2}}>
|
|
| 93 |
<Grid item xs={12} md={6} sx={{p: 2}}>
|
|
| 86 | 94 |
<Typography fontWeight={800}>Information</Typography>
|
| 87 | 95 |
{rows.map((row) => (
|
| 88 | 96 |
|
| ... | ... | |
| 94 | 102 |
</Fragment> |
| 95 | 103 |
))} |
| 96 | 104 |
</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>
|
|
| 105 |
<Grid item xs={12} md={6} sx={{p: 2}}>
|
|
| 106 |
<Typography fontWeight={800}>Rights</Typography>
|
|
| 107 |
<FormGroup> |
|
| 108 |
<FormControlLabel |
|
| 109 |
control={
|
|
| 110 |
<Checkbox |
|
| 111 |
checked={canWrite}
|
|
| 112 |
onChange={e => setCanWrite(e.target.checked)}
|
|
| 113 |
/>} |
|
| 114 |
label={rights.canWrite}/>
|
|
| 115 |
<FormControlLabel |
|
| 116 |
control={
|
|
| 117 |
<Checkbox |
|
| 118 |
checked={canRead}
|
|
| 119 |
onChange={e => setCanRead(e.target.checked)}
|
|
| 120 |
/>} |
|
| 121 |
label={rights.canRead}/>
|
|
| 122 |
<FormControlLabel |
|
| 123 |
control={
|
|
| 124 |
<Checkbox |
|
| 125 |
checked={canDelete}
|
|
| 126 |
onChange={e => setCanDelete(e.target.checked)}
|
|
| 127 |
/>} |
|
| 128 |
label={rights.canDelete}/>
|
|
| 129 |
</FormGroup> |
|
| 122 | 130 |
</Grid> |
| 123 | 131 |
</Grid> |
| 132 |
<Button startIcon={<CheckIcon />}
|
|
| 133 |
variant="contained" |
|
| 134 |
color="primary" |
|
| 135 |
onClick={prepareSavePermissions}
|
|
| 136 |
sx={{ m: 2 }} >
|
|
| 137 |
Save |
|
| 138 |
</Button> |
|
| 124 | 139 |
<Button startIcon={<ClearIcon />}
|
| 125 | 140 |
variant="contained" |
| 126 | 141 |
color="primary" |
Také k dispozici: Unified diff
Refactor of administration page and user registration
re #9627