diff --git a/client/src/App.jsx b/client/src/App.jsx index 4c7d590f3..947e77d22 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -26,6 +26,8 @@ import addProject from './components/manageProjects/addProject'; import HealthCheck from './pages/HealthCheck'; import SecretPassword from './pages/SecretPassword'; import UserWelcome from './pages/UserWelcome'; +// Added User Permission Search component +import UserPermissionSearch from './pages/UserPermissionSearch'; import UserPermission from './pages/UserPermission'; import { ThemeProvider } from '@mui/material'; diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx index 68d39e454..08dcbb241 100644 --- a/client/src/components/Navbar.jsx +++ b/client/src/components/Navbar.jsx @@ -61,6 +61,7 @@ const Navbar = (props) => { {/* Admin auth -> Displays 2 links -> 'Users' and 'Projects'. */} {auth?.user?.accessLevel === 'admin' && ( <> + USERS diff --git a/client/src/pages/UserAdmin.jsx b/client/src/pages/UserAdmin.jsx index b8d6df07b..5b84eed93 100644 --- a/client/src/pages/UserAdmin.jsx +++ b/client/src/pages/UserAdmin.jsx @@ -3,9 +3,10 @@ import { Redirect } from 'react-router-dom'; import '../sass/UserAdmin.scss'; import useAuth from '../hooks/useAuth'; import EditUsers from '../components/user-admin/EditUsers'; -import UserManagement from '../components/user-admin/UserManagement'; import UserApiService from '../api/UserApiService'; import ProjectApiService from '../api/ProjectApiService'; +import UserManagement from '../components/user-admin/UserManagement'; +import UserPermissionSearch from './UserPermissionSearch'; const UserAdmin = () => { // Initialize state hooks diff --git a/client/src/pages/UserPermissionSearch.jsx b/client/src/pages/UserPermissionSearch.jsx new file mode 100644 index 000000000..fd559ff31 --- /dev/null +++ b/client/src/pages/UserPermissionSearch.jsx @@ -0,0 +1,287 @@ +import React, { useState, useEffect } from 'react'; +import {Box, Button, ButtonGroup, Grid, TextField, Typography, List, ListItem, ListItemButton} from '@mui/material'; +import { useLocation } from 'react-router-dom'; + +import '../sass/UserAdmin.scss'; + +const Buttonsx = { + px: 2, + py: 0.5, +} + +const dummyData = [ + { + "_id": 1, + "name": { + "firstName": "John", + "lastName": "Doe", + }, + "accessLevel": "admin", + "email": "johndoe@hackforla.org", + "projects": [] + }, + { + "_id": 2, + "name": { + "firstName": "Vinny", + "lastName": "Harris", + }, + "accessLevel": "admin", + "email": "vinnyharris@hackforla.org", + "projects": [] + }, + { + "_id": 3, + "name": { + "firstName": "Gary", + "lastName": "Jones", + }, + "accessLevel": "admin", + "email": "garyjones@hackforla.org", + "projects": [] + }, + { + "_id": 4, + "name": { + "firstName": "Jane", + "lastName": "Smith", + }, + "accessLevel": "projectLead", + "email": "janesmith@hackforla.org", + "projects": ["VRMS", "Mobile"] + }, + { + "_id": 5, + "name": { + "firstName": "Bonnie", + "lastName": "Wolfe", + }, + "accessLevel": "projectLead", + "email": "bonnie@hackforla.org", + "projects": ["Home Unite Us"] + }, + { + "_id": 6, + "name": { + "firstName": "Diana", + "lastName": "Loeb", + }, + "accessLevel": "projectLead", + "email": "dianaloeb@hackforla.org", + "projects": ["HackforLA Mobile", "LA TDM Calculator"] + }, + { + "_id": 7, + "name": { + "firstName": "Zack", + "lastName": "Cruz", + }, + "accessLevel": "projectLead", + "email": "dianaloeb@hackforla.org", + "projects": ["LA TDM Calculator", "VRMS backend"] + }, + { + "_id": 8, + "name": { + "firstName": "Iris", + "lastName": "Sosa", + }, + "accessLevel": "projectLead", + "email": "irissosa@hackforla.org", + "projects": ["Home Unite Us", "VRMS Support"] + }, +]; + +const DummyComponent = ({ data, type }) => { + return ( + + {data.map((user, index) => { + // Destructure user object + const { _id, name, email } = user; + return type === 'admin' ? + ( + + setUserToEdit(user)} + > + + + + {`${name.firstName.toUpperCase()} ${name.lastName.toUpperCase()} ( ${email.toUpperCase()} )`} + + + + + + ) : + + setUserToEdit(user)} + > + + + {name.firstName.toUpperCase() + " " + name.lastName.toUpperCase()} + + + {user.project} + + + + + }) + } + + ) +} + + +const UserPermissionSearch = ({ users, setUserToEdit }) => { + const [userType, setUserType] = useState('admin'); // Which results will display + const [searchText, setSearchText] = useState(''); // Search term for the admin/PM search + + const location = useLocation(); + + useEffect(() => { + // Edits url by adding '/admin' upon loading + let editURL = ''; + if (userType === 'admin') { + editURL = location.pathname + '/admin'; + } else { + editURL = location.pathname + '/projects'; + } + window.history.replaceState({}, "", editURL); + }, [userType]); + + + // Swaps the buttons and displayed panels for the search results, by email or by name + const buttonSwap = () => + userType === 'projectLead' + ? setUserType('admin') + : setUserType('projectLead'); + + // Handle change on input in search form + const handleChange = (event) => { + setSearchText(event.target.value); + }; + + // Filtering logic + let filteredData; + if (!searchText) { + filteredData = dummyData.filter((user) => user.accessLevel === userType); + if (userType === 'admin') { + // Default display for admins, sorted ASC based on first name + filteredData.sort((u1, u2) => u1.name?.firstName.localeCompare(u2.name?.firstName)) + } else { + // Default display of all PMs, sorted ASC based on project name, then first name + let tempFilter = []; + filteredData.forEach((user) => { + user.projects.forEach((project) => { + tempFilter.push({ ...user, project }) + }) + }) + tempFilter.sort((u1, u2) => u1.project.localeCompare(u2.project) || u1.name?.firstName.localeCompare(u2.name?.firstName)) + filteredData = [...tempFilter]; + } + } + + return ( + + + User Permission Search + + + + + + + + 0? '#F5F5F5': 'transparent', + my: 1.2, + borderRadius: 1, + flexGrow: 1, + width: 1/1, + }}> + + {/*Component to render admins and PMs*/} + + + + + + ); +}; + +export default UserPermissionSearch;