diff --git a/frontend/src/pages/Users/Users.tsx b/frontend/src/pages/Users/Users.tsx index fd012e92..f9ce36bd 100644 --- a/frontend/src/pages/Users/Users.tsx +++ b/frontend/src/pages/Users/Users.tsx @@ -9,12 +9,15 @@ import { DialogTitle, FormControlLabel, IconButton, + MenuItem, Paper, Radio, RadioGroup, + Select, TextField, Typography } from '@mui/material'; +import { SelectChangeEvent } from '@mui/material/Select'; import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'; import { Add, CheckCircleOutline, Delete } from '@mui/icons-material'; import CustomToolbar from 'components/DataGrid/CustomToolbar'; @@ -23,6 +26,7 @@ import InfoDialog from 'components/Dialog/InfoDialog'; import { ImportExport } from 'components'; import { initializeUser, Organization, User } from 'types'; import { useAuthContext } from 'context'; +import { STATE_OPTIONS } from '../../constants/constants'; // @ts-ignore:next-line import { formatDistanceToNow, parseISO } from 'date-fns'; @@ -50,13 +54,15 @@ type UserFormValues = { email: string; organization?: Organization; userType: string; + state: string; }; const initialUserFormValues = { firstName: '', lastName: '', email: '', - userType: '' + userType: '', + state: '' }; type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick'; @@ -73,7 +79,8 @@ export const Users: React.FC = () => { firstName: false, lastName: false, email: false, - userType: false + userType: false, + state: false }); const [errorStates, setErrorStates] = useState({ getUsersError: '', @@ -181,7 +188,8 @@ export const Users: React.FC = () => { firstName: false, lastName: false, email: false, - userType: false + userType: false, + state: false }); }; @@ -209,14 +217,16 @@ export const Users: React.FC = () => { firstName: values.firstName, lastName: values.lastName, email: values.email, - userType: values.userType + userType: values.userType, + state: values.state }; - const { firstName, lastName, email, userType } = values; + const { firstName, lastName, email, userType, state } = values; const newFormErrors = { firstName: !firstName, lastName: !lastName, email: !email, - userType: !userType + userType: !userType, + state: !state }; setFormErrors(newFormErrors); if (Object.values(newFormErrors).some((error) => error)) { @@ -253,6 +263,13 @@ export const Users: React.FC = () => { })); }; + const handleChange = (event: SelectChangeEvent) => { + setValues((values) => ({ + ...values, + [event.target.name]: event.target.value + })); + }; + const textFieldStyling = { '& .MuiOutlinedInput-root': { '&.Mui-focused fieldset': { @@ -357,6 +374,33 @@ export const Users: React.FC = () => { value={values.email} onChange={onTextChange} /> + State + + {formErrors.state && ( + + State is required + + )} User Type { control={} label="Global View" /> + } + label="Regional Administrator" + /> } @@ -381,7 +430,7 @@ export const Users: React.FC = () => { /> {formErrors.userType && ( - + User Type is required )} @@ -401,7 +450,8 @@ export const Users: React.FC = () => { firstName: false, lastName: false, email: false, - userType: false + userType: false, + state: false }); setValues(initialUserFormValues); }}