From 460068fd431c31915cf7282294389d0548251a15 Mon Sep 17 00:00:00 2001 From: JamesNg Date: Mon, 28 Oct 2024 20:29:49 -0400 Subject: [PATCH 1/2] Fixes to issue #1752 --- client/src/App.jsx | 4 + client/src/components/Navbar.jsx | 3 +- client/src/pages/UserAdmin.jsx | 6 +- client/src/pages/UserPermissionSearch.jsx | 288 ++++++++++++++++++++++ 4 files changed, 298 insertions(+), 3 deletions(-) create mode 100644 client/src/pages/UserPermissionSearch.jsx diff --git a/client/src/App.jsx b/client/src/App.jsx index 82fdf5baa..390c738b5 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -25,6 +25,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 { ThemeProvider } from '@mui/material'; import theme from './theme'; @@ -47,6 +49,8 @@ const routes = [ { path: '/emailsent', name: 'emailsent', Component: EmailSent }, { path: '/events', name: 'events', Component: Events }, { path: '/useradmin', name: 'useradmin', Component: UserAdmin }, + // Added User Permission Search component + { path: '/users/permission-search', name: 'useradmin', Component: UserPermissionSearch }, { path: '/projects', name: 'projects', Component: ProjectList }, { path: '/projects/create', name: 'projectform', Component: addProject}, { diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx index 08ba4dc62..0cfdc5b03 100644 --- a/client/src/components/Navbar.jsx +++ b/client/src/components/Navbar.jsx @@ -61,7 +61,8 @@ 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 6271a374d..b07eea061 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 @@ -65,7 +66,8 @@ const UserAdmin = () => { } if (Object.keys(userToEdit).length === 0) { - return ; + return ; + // return ; } else { return ( { + return ( + + {data.map((u, idx) => { + // Destructure user object + const { _id, name, email } = u; + // return projects.length === 0 ? + return type === 'admin' ? + ( + + setUserToEdit(u)} + > + + + + {`${name.firstName.toUpperCase()} ${name.lastName.toUpperCase()} ( ${email.toUpperCase()} )`} + + + + + + ) : + + setUserToEdit(u)} + > + + + {name.firstName.toUpperCase() + " " + name.lastName.toUpperCase()} + + + {u.project} + + + + + }) + } + + ) +} + + +const UserPermissionSearch = ({ users, setUserToEdit }) => { + const [userType, setUserType] = useState('admin'); // Which results will diplay + const [searchText, setSearchText] = useState(''); // Serch term for the admin/PM search + + const location = useLocation(); + + useEffect(() => { + // Edit 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; From 1819aadfecd594d44cbe880a94e86c02c34703d9 Mon Sep 17 00:00:00 2001 From: JamesNg Date: Mon, 4 Nov 2024 23:45:29 -0500 Subject: [PATCH 2/2] PR #1808 update & fixes --- client/src/components/Navbar.jsx | 4 +++- client/src/pages/UserAdmin.jsx | 3 +-- client/src/pages/UserPermissionSearch.jsx | 21 ++++++++++----------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx index 0cfdc5b03..5ed26624c 100644 --- a/client/src/components/Navbar.jsx +++ b/client/src/components/Navbar.jsx @@ -61,8 +61,10 @@ const Navbar = (props) => { {/* Admin auth -> Displays 2 links -> 'Users' and 'Projects'. */} {auth?.user?.accessLevel === 'admin' && ( <> - {/* */} + {/* Testing UserPermissionSearch component from "/users/permission-search" route */} + {/* To be replaced with new Users component */} + {/*******************************************/} USERS diff --git a/client/src/pages/UserAdmin.jsx b/client/src/pages/UserAdmin.jsx index b07eea061..359554f77 100644 --- a/client/src/pages/UserAdmin.jsx +++ b/client/src/pages/UserAdmin.jsx @@ -66,8 +66,7 @@ const UserAdmin = () => { } if (Object.keys(userToEdit).length === 0) { - return ; - // return ; + return ; } else { return ( { return ( - {data.map((u, idx) => { + {data.map((user, index) => { // Destructure user object - const { _id, name, email } = u; - // return projects.length === 0 ? + const { _id, name, email } = user; return type === 'admin' ? ( { borderBottom: 1.6, borderBottomColor: 'grey.300', }} - key={`result_${_id}/${idx}`}> + key={`result_${_id}/${index}`}> { }} className="search-results-button" type="button" - onClick={() => setUserToEdit(u)} + onClick={() => setUserToEdit(user)} > @@ -138,7 +137,7 @@ const DummyComponent = ({ data, type }) => { borderBottom: 1.6, borderBottomColor: 'grey.300', }} - key={`result_${_id}/${idx}`}> + key={`result_${_id}/${index}`}> { }} className="search-results-button" type="button" - onClick={() => setUserToEdit(u)} + onClick={() => setUserToEdit(user)} > {name.firstName.toUpperCase() + " " + name.lastName.toUpperCase()} - {u.project} + {user.project} @@ -168,13 +167,13 @@ const DummyComponent = ({ data, type }) => { const UserPermissionSearch = ({ users, setUserToEdit }) => { - const [userType, setUserType] = useState('admin'); // Which results will diplay - const [searchText, setSearchText] = useState(''); // Serch term for the admin/PM search + const [userType, setUserType] = useState('admin'); // Which results will display + const [searchText, setSearchText] = useState(''); // Search term for the admin/PM search const location = useLocation(); useEffect(() => { - // Edit url by adding '/admin' upon loading + // Edits url by adding '/admin' upon loading let editURL = ''; if (userType === 'admin') { editURL = location.pathname + '/admin';