import { makeStyles, Theme, Checkbox, FormGroup, FormControlLabel, } from '@material-ui/core'; import { FC, useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import DialogTemplate from '@/components/customDialog/DialogTemplate'; import { UpdateUserRoleProps, UpdateUserRoleParams } from './Types'; import { UserHttp } from '@/http/User'; const useStyles = makeStyles((theme: Theme) => ({ input: { margin: theme.spacing(1, 0, 0.5), }, dialogWrapper: { maxWidth: theme.spacing(70), '& .MuiFormControlLabel-root': { width: theme.spacing(20), }, }, })); const UpdateUserRole: FC = ({ onUpdate, handleClose, roles, username, }) => { const { t: userTrans } = useTranslation('user'); const { t: btnTrans } = useTranslation('btn'); const [roleOptions, setRoleOptions] = useState([]); const [form, setForm] = useState({ username: username, roles: roles, }); const classes = useStyles(); const handleUpdate = async () => { await UserHttp.updateUserRole(form); onUpdate(form); }; const fetchAllRoles = async () => { const roles = await UserHttp.getRoles(); setRoleOptions(roles.results.map((r: any) => r.role.name)); }; useEffect(() => { fetchAllRoles(); }, []); return ( <> {roleOptions.map((roleOption: string, index: number) => ( , checked: boolean ) => { let newRoles = [...form.roles]; if (!checked) { newRoles = newRoles.filter( (n: string | number) => n !== roleOption ); } else { newRoles.push(roleOption); } setForm(v => ({ ...v, roles: [...newRoles] })); }} /> } key={index} label={roleOption} value={roleOption} checked={form.roles.indexOf(roleOption) !== -1} /> ))} ); }; export default UpdateUserRole;