aswi2022code-of-duty-gitlab/frontend/src/features/Administration/UserDetail.tsx @ afdd306f

import {
    Button,
    Container, Divider, Grid,
    Checkbox,
    Link,
    List,
    ListItem,
    ListItemIcon,
    ListItemText,
    NativeSelect,
    Paper,
    Select, SelectChangeEvent, Typography, FormGroup, FormControlLabel
} from '@mui/material'
import React, {ChangeEvent, Fragment, ReactNode, useEffect, useState} from 'react'
import {useDispatch, useSelector} from 'react-redux'
import {RootState} from '../redux/store'
import axiosInstance from "../../api/api"
import 'react-quill/dist/quill.snow.css'
import ContentLoading from "../Reusables/ContentLoading"
import {Link as RouterLink, useNavigate} from "react-router-dom"
import EditIcon from '@mui/icons-material/Edit'
import {formatHtmlStringToReactDom} from "../../utils/formatting/HtmlUtils"
import {PermissionDto, UserDto} from "../../swagger/data-contracts"
import {Label} from "@mui/icons-material"
import ClearIcon from "@mui/icons-material/Clear"

export interface UserDetailProps {
    user: UserDto,
    onClose: () => void
}

const UserDetail = (props: UserDetailProps) => {
    const [user] = useState(props.user)
    const [canRead, setCanRead] = useState(user.permissions?.canRead)
    const [canWrite, setCanWrite] = useState(user.permissions?.canWrite)
    const [canDelete, setCanDelete] = useState(user.permissions?.canDelete)


    // Maps user property to corresponding table row
    const mapToRow = (rowName: string, item: string) => (
        <Fragment>
            <Grid sx={{my: 2}} container justifyContent="space-around">
                <Grid item xs={4} sx={{px: 1}}>
                    <Typography fontWeight={500}>{rowName}</Typography>
                </Grid>
                <Grid item xs={8} sx={{ml: 'auto'}}>
                    <Typography key={item}>{item}</Typography>
                </Grid>
            </Grid>
        </Fragment>
    )

    const rows = [
        {
            rowName: 'Name:',
            item: [props.user?.name],
        },
        {
            rowName: 'E-mail:',
            item: user?.email,
        }
    ]
    const rights = {
        canWrite: 'Add and edit locations',
        canDelete: 'Delete locations',
        canRead: 'Access to tracking tool',
    }


    const deleteUser = async () => {
        const { data, status } = await axiosInstance.delete(
            `/users/${user.email}`
        )
        if (status !== 200) {
            // TODO dodělat zpracování erroru
            return
        }
        props.onClose();
    }

    return (
        <Fragment>
            <Paper style={{minHeight: '80vh'}} variant="outlined">
                <Grid container justifyContent="space-around">
                    <Grid item xs={6} md={6} sx={{p: 2}}>
                        <Typography fontWeight={800}>Information</Typography>
                        {rows.map((row) => (

                            <Fragment>
                                {mapToRow(
                                    row.rowName as string,
                                    row.item as string
                                )}
                            </Fragment>
                        ))}
                    </Grid>
                    <Grid item xs={6} md={6} sx={{p: 2}}>
                        <b>Rights</b>
                            <FormGroup>
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={canWrite}
                                            onChange={e => setCanWrite(e.target.checked)}
                                        />}
                                    label={rights.canWrite}/>
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={canRead}
                                            onChange={e => setCanRead(e.target.checked)}
                                        />}
                                    label={rights.canRead}/>
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={canDelete}
                                            onChange={e => setCanDelete(e.target.checked)}
                                        />}
                                    label={rights.canDelete}/>
                            </FormGroup>
                    </Grid>
                </Grid>
                <Button startIcon={<ClearIcon />}
                        variant="contained"
                        color="primary"
                        onClick={deleteUser}
                        sx={{ m: 2 }} >
                    Delete
                </Button>
            </Paper>
        </Fragment>
    )
}

export default UserDetail