Skip to content

Commit c4d092a

Browse files
trilliumtrillium
authored
Merge pull request #1727 from ntrehan/1723
Migrated edit users to Material UI
2 parents ddcf194 + b44dbdb commit c4d092a

File tree

1 file changed

+128
-102
lines changed

1 file changed

+128
-102
lines changed

‎client/src/components/user-admin/EditUsers.jsx

Lines changed: 128 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,79 @@
11
import React, { useEffect, useState } from 'react';
2+
import {
3+
Grid,
4+
FormGroup,
5+
FormControlLabel,
6+
Switch,
7+
Button,
8+
Typography,
9+
Container,
10+
List,
11+
ListItem,
12+
ListItemText,
13+
Select,
14+
MenuItem,
15+
FormControl,
16+
InputLabel,
17+
} from '@mui/material';
218
import '../../sass/UserAdmin.scss';
3-
import { FormGroup, FormControlLabel, Switch } from '@mui/material';
419

520
// child of UserAdmin. Displays form to update users.
6-
const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUserActiveStatus, updateUserAccessLevel }) => {
21+
const EditUsers = ({
22+
userToEdit,
23+
backToSearch,
24+
updateUserDb,
25+
projects,
26+
updateUserActiveStatus,
27+
updateUserAccessLevel,
28+
}) => {
729
const [userManagedProjects, setUserManagedProjects] = useState([]); // The projects that the selected user is assigned
830
const [projectValue, setProjectValue] = useState(''); // State and handler for form in EditUsers
931
const [isActive, setIsActive] = useState(userToEdit.isActive);
10-
const [isAdmin, setIsAdmin] = useState(userToEdit.accessLevel === "admin");
32+
const [isAdmin, setIsAdmin] = useState(userToEdit.accessLevel === 'admin');
1133

1234
// Boolean to check if the current user is the super admin
13-
const isSuperAdmin = userToEdit.accessLevel === "superadmin";
35+
const isSuperAdmin = userToEdit.accessLevel === 'superadmin';
1436

15-
// Prepare data for display
1637
const userName = `${userToEdit.name?.firstName} ${userToEdit.name?.lastName}`;
1738
const userEmail = userToEdit.email;
1839
const userProjects = userManagedProjects || [];
1940

20-
// Filter active projects for dropdown
2141
const activeProjects = Object.values(projects)
2242
.filter((project) => project.projectStatus === 'Active')
2343
.sort((a, b) => a.name?.localeCompare(b.name))
2444
.map((p) => [p._id, p.name]);
2545

26-
// add user projects to state
2746
useEffect(() => {
2847
setUserManagedProjects(userToEdit.managedProjects);
2948
}, [userToEdit]);
3049

31-
// Prepare user projects for display by connecting the ID with the project name
3250
const userProjectsToDisplay = activeProjects.filter((item) =>
3351
userProjects.includes(item[0])
3452
);
3553

36-
// Handle the add project form submit
3754
const onSubmit = (event) => {
3855
event.preventDefault();
3956

40-
if (!isSuperAdmin && projectValue.length > 0 && projectValue !== 'default' && !userManagedProjects.includes(projectValue)) {
57+
if (
58+
!isSuperAdmin &&
59+
projectValue.length > 0 &&
60+
projectValue !== 'default' &&
61+
!userManagedProjects.includes(projectValue)
62+
) {
4163
const newProjects = [...userManagedProjects, projectValue];
4264
updateUserDb(userToEdit, newProjects);
4365
setUserManagedProjects(newProjects);
44-
setProjectValue([]);
66+
setProjectValue('');
4567
} else {
46-
setProjectValue([]);
68+
setProjectValue('');
4769
}
4870
};
4971

50-
// Remove projects from db
5172
const handleRemoveProject = (projectToRemove) => {
5273
if (!isSuperAdmin && userManagedProjects.length > 0) {
53-
const newProjects = userManagedProjects.filter((p) => p !== projectToRemove);
74+
const newProjects = userManagedProjects.filter(
75+
(p) => p !== projectToRemove
76+
);
5477
updateUserDb(userToEdit, newProjects);
5578
setUserManagedProjects(newProjects);
5679
}
@@ -65,102 +88,105 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
6588

6689
const handleSetAccessLevel = () => {
6790
if (!isSuperAdmin) {
68-
const newAccessLevel = isAdmin ? "user" : "admin";
91+
const newAccessLevel = isAdmin ? 'user' : 'admin';
6992
setIsAdmin(!isAdmin);
7093
updateUserAccessLevel(userToEdit, newAccessLevel);
7194
}
7295
};
7396

7497
return (
75-
<div className="edit-users">
76-
<div className="ua-row">
77-
<div className="user-display-column-left">Name:</div>
78-
<div className="user-display-column-right">{userName}</div>
79-
</div>
80-
<div className="ua-row">
81-
<div className="user-display-column-left">Email:</div>
82-
<div className="user-display-column-right">{userEmail}</div>
83-
</div>
84-
<div className="ua-row toggle-flex">
85-
<div className="user-toggle-column-left">Is Active:</div>
86-
<div className="toggle-flex">
87-
<span className="toggle-status">{isActive.toString()}</span>
88-
<FormGroup>
89-
<FormControlLabel
90-
disabled={isSuperAdmin}
91-
control={<Switch checked={isActive} />}
92-
onClick={handleSetIsActive}
98+
<Container className="edit-users">
99+
<Typography variant="body1">Name: {userName}</Typography>
100+
<Typography variant="body1">Email: {userEmail}</Typography>
101+
<FormGroup row alignItems="center">
102+
<Typography variant="body1" sx={{ marginTop: 1 }}>
103+
Is Active:
104+
</Typography>
105+
<FormControlLabel
106+
sx={{ marginLeft: 1 }}
107+
control={
108+
<Switch
109+
checked={isActive}
110+
onChange={handleSetIsActive}
111+
disabled={isSuperAdmin}
93112
/>
94-
</FormGroup>
95-
</div>
96-
</div>
97-
<div className="ua-row toggle-flex">
98-
<div className="user-toggle-column-left">VRMS Admin:</div>
99-
<div className="toggle-flex">
100-
<span className="toggle-status">{isAdmin || isSuperAdmin ? "Yes" : "No"}</span>
101-
<FormGroup>
102-
<FormControlLabel
103-
disabled={isSuperAdmin}
104-
control={<Switch checked={isAdmin || isSuperAdmin} />}
105-
onClick={handleSetAccessLevel}
113+
}
114+
label={isActive.toString()}
115+
/>
116+
</FormGroup>
117+
<FormGroup row alignItems="center">
118+
<Typography variant="body1" sx={{ marginTop: 1 }}>
119+
VRMS Admin:
120+
</Typography>
121+
<FormControlLabel
122+
sx={{ marginLeft: 1 }}
123+
control={
124+
<Switch
125+
checked={isAdmin || isSuperAdmin}
126+
onChange={handleSetAccessLevel}
127+
disabled={isSuperAdmin}
106128
/>
107-
</FormGroup>
108-
</div>
109-
</div>
110-
<div className="ua-row">
111-
<div className="user-display-column-left">Projects:</div>
112-
<div className="user-display-column-right">
113-
<ul className="project-list">
114-
{userProjectsToDisplay.map((result) => {
115-
return (
116-
<li key={`remove_${result[0]}`}>
117-
{result[1]}
118-
<button
119-
type="button"
120-
className="button-remove"
121-
disabled={isSuperAdmin}
122-
onClick={() => handleRemoveProject(result[0])}
123-
>
124-
(remove)
125-
</button>
126-
</li>
127-
);
128-
})}
129-
</ul>
130-
</div>
131-
</div>
132-
<div>
133-
<form onSubmit={onSubmit}>
134-
<select
135-
className="project-select"
136-
value={projectValue}
137-
onChange={(event) => {
138-
setProjectValue(event.target.value);
139-
}}
140-
disabled={isSuperAdmin}
141-
>
142-
<option value="default">Select a project..</option>
143-
{activeProjects.map((result) => {
144-
return (
145-
<option key={`select_${result[0]}`} value={result[0]}>
146-
{result[1]}
147-
</option>
148-
);
149-
})}
150-
</select>
151-
<button className={`button-add ${isSuperAdmin ? 'button-add-disabled' : ''}`}
152-
type="submit"
153-
disabled={isSuperAdmin}>
154-
Add project
155-
</button>
156-
</form>
157-
<div>
158-
<button type="button" className="button-back" onClick={backToSearch}>
159-
Back to search
160-
</button>
161-
</div>
162-
</div>
163-
</div>
129+
}
130+
label={isAdmin || isSuperAdmin ? 'Yes' : 'No'}
131+
/>
132+
</FormGroup>
133+
<Typography variant="body1">Projects:</Typography>
134+
<List>
135+
{userProjectsToDisplay.map((result) => (
136+
<ListItem key={`remove_${result[0]}`} divider>
137+
<Grid container alignItems="center">
138+
<Grid item xs={9}>
139+
<ListItemText primary={result[1]} />
140+
</Grid>
141+
<Grid item xs={3}>
142+
<Button
143+
variant="text"
144+
color="error"
145+
onClick={() => handleRemoveProject(result[0])}
146+
fullWidth
147+
disabled={isSuperAdmin}
148+
>
149+
(Remove)
150+
</Button>
151+
</Grid>
152+
</Grid>
153+
</ListItem>
154+
))}
155+
</List>
156+
<FormControl fullWidth>
157+
<InputLabel id="project-select-label">Select a project</InputLabel>
158+
<Select
159+
labelId="project-select-label"
160+
id="project-select"
161+
value={projectValue}
162+
label="Select a project"
163+
onChange={(event) => setProjectValue(event.target.value)}
164+
disabled={isSuperAdmin}
165+
>
166+
<MenuItem value="default">Select a project..</MenuItem>
167+
{activeProjects.map((result) => (
168+
<MenuItem key={`select_${result[0]}`} value={result[0]}>
169+
{result[1]}
170+
</MenuItem>
171+
))}
172+
</Select>
173+
<Button
174+
variant="contained"
175+
onClick={onSubmit}
176+
style={{ marginTop: '1rem' }}
177+
disabled={isSuperAdmin}
178+
>
179+
Add project
180+
</Button>
181+
</FormControl>
182+
<Button
183+
variant="outlined"
184+
onClick={backToSearch}
185+
style={{ marginTop: '1rem' }}
186+
>
187+
Back to search
188+
</Button>
189+
</Container>
164190
);
165191
};
166192

0 commit comments

Comments
 (0)