Tian/role filter

src/pages/api/get_users.js

@@ -17,6 +17,7 @@ async function handler(req, res) {
           { "tenures.semester": { $in: [req.query.semester] } },
           { "tenures.year": { $in: [Number(req.query.year)] } },
 
+          req.query.role == "All" ? {} : { "tenures.role": { $in: [req.query.role] } },
           req.query.department == "All" ? {} : { "tenures.department": { $in: [req.query.department] } },
         ],
       },
@@ -42,7 +43,6 @@ async function handler(req, res) {
       },
     },
   ]);
-
   res.status(200).json({ users });
 }
 

src/screens/AdminDashboard/AdminDashboard.tsx

@@ -90,25 +90,32 @@ const StyledSelect = styled(Select)(() => ({
 }));
 
 function AdminDashboardPage({ url }) {
+  const [semester, setSemester] = useState("Fall 2023");
   const [department, setDepartment] = useState("All");
-  const [semesterFilter, setSemesterFilter] = useState("Spring 2023");
   const [showUploadModal, setShowUploadModal] = useState(false);
   const [fileBlob, setFileBlob] = useState(null);
   const [filter, setFilter] = useState("");
   const [isAddUser, setIsAddUser] = useState(false);
   const [newMembers, setNewMembers] = useState(null);
+  const [role, setRole] = useState("All");
+
+  const semesters = fields.semesterOptions;
+  const roles = fields.roles;
 
   const departments = fields.departments;
-  const semesterFilters = fields.semesterYearOptions;
 
   const changeSemesterHandler = (event) => {
-    setSemesterFilter(event.target.value);
+    setSemester(event.target.value);
   };
 
   const changeDepartmentHandler = (event) => {
     setDepartment(event.target.value);
   };
 
+  const changeRoleHandler = (event) => {
+    setRole(event.target.value);
+  };
+
   const bulkUpload = async () => {
     const res = await sendRequest(urls.api.bulkUpload, "POST", fileBlob, { "Content-Type": "text/csv" }, false);
     setNewMembers(res.members);
@@ -179,7 +186,7 @@ function AdminDashboardPage({ url }) {
                 UPLOAD CSV
               </StyledButton>
               <StyledSelect
-                value={semesterFilter}
+                value={semester}
                 onChange={changeSemesterHandler}
                 MenuProps={{
                   PaperProps: {
@@ -194,7 +201,7 @@ function AdminDashboardPage({ url }) {
                     },
                   },
                 }}>
-                {Array.from(semesterFilters)
+                {Array.from(semesters)
                   .sort(sortTenures(false))
                   .map((semester) => {
                     return (
@@ -230,12 +237,38 @@ function AdminDashboardPage({ url }) {
                     );
                   })}
               </StyledSelect>
+              <StyledSelect
+                value={role}
+                onChange={changeRoleHandler}
+                MenuProps={{
+                  PaperProps: {
+                    sx: {
+                      "& .MuiMenuItem-root.Mui-selected": {
+                        backgroundColor: "#0069ca1a",
+                        color: "#78adff",
+                      },
+                      "& .MuiMenuItem-root.Mui-selected:hover": {
+                        backgroundColor: "#0069ca23",
+                      },
+                    },
+                  },
+                }}>
+                {Array.from(roles)
+                  .sort()
+                  .map((role) => {
+                    return (
+                      <MenuItem key={role} value={role} style={{ justifyContent: "center", fontFamily: "Poppins" }}>
+                        {role.toUpperCase()}
+                      </MenuItem>
+                    );
+                  })}
+              </StyledSelect>
               <LogoutIcon style={{ width: "2rem", height: "2rem", cursor: "pointer" }} onClick={() => signOut()} />
             </Box>
           </Box>
           <div style={{ height: "78vh", width: "90vw" }}>
             <DashboardContext.Provider value={{ url, isAddUser, setIsAddUser }}>
-              <UserTable currentSemester={semesterFilter} newMembers={newMembers} departmentFilter={department} />
+              <UserTable currentSemester={semester} newMembers={newMembers} roleFilter={role} departmentFilter={department} />
             </DashboardContext.Provider>
           </div>
         </Grid>

src/screens/AdminDashboard/UserTable/PaginationTable/EditMemberModal/EditMemberModal.tsx

@@ -197,12 +197,6 @@ export default function EditMemberModal({ row, isVisible, closeModal, currentSem
         });
       }
       setUserList(users);
-
-      /*if (!semesters.has(semesterYear)) {
-        const newSemesters = new Set(semesters);
-        newSemesters.add(semesterYear);
-        setSemesters(newSemesters);
-      }*/
     }
   };
 

src/screens/AdminDashboard/UserTable/UserTable.tsx

@@ -5,19 +5,20 @@ import TableContext from "../../../contexts/TableContext";
 import { User } from "../types";
 import sendRequest from "../../../server/utils/sendToBackend";
 
-function UserTable({ currentSemester, newMembers, departmentFilter }) {
+function UserTable({ currentSemester, newMembers, roleFilter, departmentFilter }) {
   const [userList, setUserList] = useState<User[]>([]);
 
   useEffect(() => {
     (async () => {
       const response = await sendRequest(
-        `/api/get_users?department=${departmentFilter}&semester=${currentSemester.split(" ")[0]}&year=${currentSemester.split(" ")[1]}`,
+        `/api/get_users?department=${departmentFilter}&role=${roleFilter}` +
+          `&semester=${currentSemester.split(" ")[0]}&year=${currentSemester.split(" ")[1]}`,
         "GET",
       );
       const { users } = response;
       setUserList(users);
     })();
-  }, [departmentFilter, currentSemester, newMembers]);
+  }, [roleFilter, currentSemester, newMembers, departmentFilter]);
 
   if (!userList) {
     return (

src/server/utils/fields.js

@@ -6,9 +6,7 @@ const memberTypes = {
   2: "Root Admin",
 };
 
-const semesterOptions = ["Fall", "Spring", "Summer"];
-
-const semesterYearOptions = ["Fall 2022", "Spring 2023"];
+const semesterOptions = ["Spring 2020", "Fall 2020", "Spring 2021", "Fall 2021", "Spring 2022", "Fall 2022", "Spring 2023", "Fall 2023"];
 
 const departments = [
   "All",
@@ -24,6 +22,7 @@ const departments = [
 ];
 
 const roles = [
+  "All",
   "Developer",
   "Senior Developer",
   "Product Designer",
@@ -52,6 +51,7 @@ const roles = [
   "Associate Executive Director",
   "Executive Director",
   "Alumni",
+  "Senior Dev",
 ];
 
 const projects = [
@@ -82,7 +82,6 @@ const fields = {
   preferences,
   memberTypes,
   semesterOptions,
-  semesterYearOptions,
   departments,
   roles,
   projects,