1486 - The ability to set a User as Admin on Edit Users Page

backend/models/user.model.js

@@ -36,7 +36,8 @@ const userSchema = mongoose.Schema({
   managedProjects: [{ type: String}], // Which projects managed by user.
   //currentProject: { type: String }              // no longer need this as we can get it from Project Team Member table
   // password: { type: String, required: true }
-  isActive: { type: Boolean, default: true }
+  isActive: { type: Boolean, default: true },
+  isAdmin: {type: Boolean, default: false} // Signifies if a user is an admin or not
 });
 
 userSchema.methods.serialize = function () {
@@ -67,7 +68,8 @@ userSchema.methods.serialize = function () {
     githubPublic2FA: this.githubPublic2FA,
     availability: this.availability,
     managedProjects: this.managedProjects,
-    isActive: this.isActive
+    isActive: this.isActive,
+    isAdmin: this.isAmdin
   };
 };
 

client/src/api/UserApiService.js

@@ -73,6 +73,22 @@ class UserApiService {
       alert('server not responding.  Please try again.');
     }
   }
+
+  async updateUserDbIsAdmin(userToEdit, isAdmin) {
+    const url = `${this.baseUserUrl}${userToEdit._id}`;
+    const requestOptions = {
+      method: 'PATCH',
+      headers: this.headers,
+      body: JSON.stringify({ isAdmin }),
+    };
+
+    try {
+      return await fetch(url, requestOptions);
+    } catch (err) {
+      console.error('update is-admin error', err);
+      alert('server not responding.  Please try again.');
+    }
+  }
 }
 
 export default UserApiService;

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

@@ -3,10 +3,11 @@ 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 EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUserActiveStatus, updateUserAdminStatus }) => {
   const [userManagedProjects, setUserManagedProjects] = useState([]); //  The projects that the selected user is assigned
   const [projectValue, setProjectValue] = useState(''); // State and handler for form in EditUsers
   const [isActive, setIsActive] = useState(userToEdit.isActive);
+  const [isAdmin, setIsAdmin] = useState(userToEdit.isAdmin);
 
   // Prepare data for display
   const userName = `${userToEdit.name?.firstName} ${userToEdit.name?.lastName}`;
@@ -64,6 +65,10 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
     updateUserActiveStatus(userToEdit, !isActive)
   }
 
+  const handleSetIsAdmin = () => {
+    setIsAdmin(!isAdmin)
+    updateUserAdminStatus(userToEdit, !isAdmin)
+  }
   return (
     <div className="edit-users">
       <div className="ua-row">
@@ -74,15 +79,24 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
         <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>
+      <div className="ua-row toggle-flex">
+        <div className="user-toggle-column-left">Is Active:</div>
+        <div className="toggle-flex">
+          <span className="toggle-status">{isActive.toString()}</span>
           <FormGroup>
             <FormControlLabel control={<Switch checked={isActive} />} onClick={() => handleSetIsActive()} />
           </FormGroup>
         </div>
       </div>
+      <div className="ua-row toggle-flex">
+        <div className="user-toggle-column-left">Is Admin:</div>
+        <div className="toggle-flex">
+          <span className="toggle-status">{isAdmin.toString()}</span>
+          <FormGroup>
+            <FormControlLabel control={<Switch checked={isAdmin} />} onClick={() => handleSetIsAdmin()} />
+          </FormGroup>
+        </div>
+      </div>
       <div className="ua-row">
         <div className="user-display-column-left">Projects:</div>
         <div className="user-display-column-right">

client/src/pages/UserAdmin.jsx

@@ -37,6 +37,13 @@ const UserAdmin = () => {
     }, [userApiService, fetchUsers]
   )
 
+  const updateUserAdminStatus = useCallback(
+    async (user, isAdmin) => {
+      await userApiService.updateUserDbIsAdmin(user, isAdmin);
+      fetchUsers()
+    }, [userApiService, fetchUsers]
+  )
+
   const fetchProjects = useCallback(async () => {
     const projectRes = await projectApiService.fetchProjects();
     setProjects(projectRes);
@@ -65,6 +72,7 @@ const UserAdmin = () => {
         updateUserDb={updateUserDb}
         backToSearch={backToSearch}
         updateUserActiveStatus={updateUserActiveStatus}
+        updateUserAdminStatus={updateUserAdminStatus}
       />
     );
   }

client/src/sass/UserAdmin.scss

@@ -65,18 +65,18 @@
   margin-bottom: 8px;
 }
 
-.user-is-active-column-left {
+.user-toggle-column-left {
   display: flex;
   flex-direction: column;
   flex-basis: 15%;
 }
 
-.active-status {
+.toggle-status {
   margin-right: 15px;
   width: 25px;
 }
 
-.is-active-flex {
+.toggle-flex {
   display: flex;
   align-items: center;
 }