Skip to content

Commit

Permalink
Migrated edit users to Material UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntrehan
ntrehan committed Aug 14, 2024
1 parent b5ce7e9 commit fd156cb
Showing 1 changed file with 66 additions and 97 deletions.
163 changes: 66 additions & 97 deletions client/src/components/user-admin/EditUsers.js
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,107 @@
import React, { useEffect, useState } from 'react';
import { Grid, FormGroup, FormControlLabel, Switch, Button, Typography, Container, List, ListItem, ListItemText, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
import '../../sass/UserAdmin.scss';
import { FormGroup, FormControlLabel, Switch } from '@mui/material'

// child of UserAdmin. Displays form to update users.
const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUserActiveStatus }) => {
const [userManagedProjects, setUserManagedProjects] = useState([]); // The projects that the selected user is assigned
const [projectValue, setProjectValue] = useState(''); // State and handler for form in EditUsers
const [userManagedProjects, setUserManagedProjects] = useState([]);
const [projectValue, setProjectValue] = useState('');
const [isActive, setIsActive] = useState(userToEdit.isActive);

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

// Filter active projects for dropdown
const activeProjects = Object.values(projects)
.filter((project) => project.projectStatus === 'Active')
.sort((a, b) => a.name?.localeCompare(b.name))
// eslint-disable-next-line no-underscore-dangle
.map((p) => [p._id, p.name]);

// add user projects to state
useEffect(() => {
setUserManagedProjects(userToEdit.managedProjects);
}, [userToEdit]);

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

// Handle the add project form submit
const onSubmit = (event) => {
event.preventDefault();

if (
projectValue.length > 0 &&
projectValue !== 'default' &&
!userManagedProjects.includes(projectValue)
) {
if (projectValue.length > 0 && projectValue !== 'default' && !userManagedProjects.includes(projectValue)) {
const newProjects = [...userManagedProjects, projectValue];
updateUserDb(userToEdit, newProjects);
setUserManagedProjects(newProjects);
setProjectValue([]);
setProjectValue('');
} else {
setProjectValue([]);
setProjectValue('');
}
};

// Remove projects from db
const handleRemoveProject = (projectToRemove) => {
if (userManagedProjects.length > 0) {
const newProjects = userManagedProjects.filter(
(p) => p !== projectToRemove
);
updateUserDb(userToEdit, newProjects);
setUserManagedProjects(newProjects);
}
const newProjects = userManagedProjects.filter((p) => p !== projectToRemove);
updateUserDb(userToEdit, newProjects);
setUserManagedProjects(newProjects);
};

const handleSetIsActive = () => {
setIsActive(!isActive)
updateUserActiveStatus(userToEdit, !isActive)
}
setIsActive(!isActive);
updateUserActiveStatus(userToEdit, !isActive);
};

return (
<div className="edit-users">
<div className="ua-row">
<div className="user-display-column-left">Name:</div>
<div className="user-display-column-right">{userName}</div>
</div>
<div className="ua-row">
<div className="user-display-column-left">Email:</div>
<div className="user-display-column-right">{userEmail}</div>
</div>
<div className="ua-row is-active-flex">
<div className="user-is-active-column-left">Is Active:</div>
<div className="is-active-flex">
<span className="active-status">{isActive.toString()}</span>
<FormGroup>
<FormControlLabel control={<Switch checked={isActive} />} onClick={() => handleSetIsActive()} />
</FormGroup>
</div>
</div>
<div className="ua-row">
<div className="user-display-column-left">Projects:</div>
<div className="user-display-column-right">
<ul className="project-list">
{userProjectsToDisplay.map((result) => {
return (
<li key={`remove_${result[0]}`}>
{result[1]}
<button
type="button"
className="button-remove"
onClick={() => handleRemoveProject(result[0])}
>
(remove)
</button>
</li>
);
})}
</ul>
</div>
</div>
<div>
<form onSubmit={onSubmit}>
<select
className="project-select"
value={projectValue}
onChange={(event) => {
setProjectValue(event.target.value);
}}
>
<option value="default">Select a project..</option>
{activeProjects.map((result) => {
return (
<option key={`select_${result[0]}`} value={result[0]}>
{result[1]}
</option>
);
})}
</select>
<button className="button-add" type="submit">
Add project
</button>
</form>
<div>
<button type="button" className="button-back" onClick={backToSearch}>
Back to search
</button>
</div>
</div>
</div>
<Container className="edit-users">
<Typography variant="body1">Name: {userName}</Typography>
<Typography variant="body1">Email: {userEmail}</Typography>
<FormGroup row alignItems="center">
<Typography variant="body1" sx={{ marginTop: 1 }}>Is Active:</Typography>
<FormControlLabel sx={{ marginLeft: 1 }} control={<Switch checked={isActive} onChange={handleSetIsActive} />}
label={isActive.toString()}/>
</FormGroup>
<Typography variant="body1">Projects:</Typography>
<List>
{userProjectsToDisplay.map((result) => (
<ListItem key={`remove_${result[0]}`} divider>
<Grid container alignItems="center">
<Grid item xs={9}>
<ListItemText primary={result[1]} />
</Grid>
<Grid item xs={3}>
<Button
variant="text"
color="error"
onClick={() => handleRemoveProject(result[0])}
fullWidth
>
(Remove)
</Button>
</Grid>
</Grid>
</ListItem>
))}
</List>
<FormControl fullWidth>
<InputLabel id="project-select-label">Select a project</InputLabel>
<Select
labelId="project-select-label"
id="project-select"
value={projectValue}
label="Select a project"
onChange={(event) => setProjectValue(event.target.value)}
>
<MenuItem value="default">Select a project..</MenuItem>
{activeProjects.map((result) => (
<MenuItem key={`select_${result[0]}`} value={result[0]}>
{result[1]}
</MenuItem>
))}
</Select>
<Button variant="contained" onClick={onSubmit} style={{ marginTop: '1rem' }}>
Add project
</Button>
</FormControl>
<Button variant="outlined" onClick={backToSearch} style={{ marginTop: '1rem' }}>
Back to search
</Button>
</Container>
);
};

Expand Down

0 comments on commit fd156cb

Please sign in to comment.