Feat/coord interface/integration

.github/workflows/cypress.yml

@@ -13,10 +13,10 @@ env:
 jobs:
   cypress-run-chrome:
     name: Chrome tests (${{ matrix.containers }})
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     strategy:
       matrix:
-        containers: [1, 2, 3, 4]
+        containers: [1]
     services:
       postgres:
         image: postgres:14
@@ -63,7 +63,7 @@ jobs:
 
   cypress-run-firefox:
     name: Firefox tests (${{ matrix.containers }})
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     strategy:
       matrix:
         containers: [1, 2, 3, 4]

csm_web/frontend/src/components/App.tsx

@@ -9,6 +9,7 @@ import { emptyRoles, Roles } from "../utils/user";
 import CourseMenu from "./CourseMenu";
 import Home from "./Home";
 import Policies from "./Policies";
+import CoordTable from "./coord_interface/CoordTable";
 import { DataExport } from "./data_export/DataExport";
 import { EnrollmentMatcher } from "./enrollment_automation/EnrollmentMatcher";
 import { Resources } from "./resource_aggregation/Resources";
@@ -38,6 +39,8 @@ const App = () => {
           <Route index element={<Home />} />
           <Route path="sections/:id/*" element={<Section />} />
           <Route path="courses/*" element={<CourseMenu />} />
+          <Route path="coord/:id/students" element={<CoordTable />} />
+          <Route path="coord/:id/mentors" element={<CoordTable />} />
           <Route path="resources/*" element={<Resources />} />
           <Route path="matcher/*" element={<EnrollmentMatcher />} />
           <Route path="policies/*" element={<Policies />} />

csm_web/frontend/src/components/Home.tsx

@@ -131,9 +131,11 @@ const CourseCard = ({ profiles }: CourseCardProps): React.ReactElement => {
 
   if (role === Role.COORDINATOR) {
     return (
-      <Link to={`/courses/${courseId}`} className="course-card-link">
-        <Card />
-      </Link>
+      <>
+        <Link to={`/courses/${courseId}`} className="course-card-link">
+          <Card />
+        </Link>
+      </>
     );
   }
 

csm_web/frontend/src/components/SearchBar.tsx

@@ -12,7 +12,7 @@ export const SearchBar = ({ className, refObject, onChange }: SearchBarProps) =>
   return (
     <div className={`search-bar ${className ?? ""}`}>
       <SearchIcon className="search-icon" />
-      <input className="search-input" type="text" ref={refObject} onChange={onChange} />
+      <input placeholder="Search..." className="search-input" type="text" ref={refObject} onChange={onChange} />
     </div>
   );
 };

csm_web/frontend/src/components/coord_interface/ActionButton.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+interface ActionButtonProps {
+  copyEmail: () => void;
+  reset: () => void;
+}
+
+export default function ActionButton({ copyEmail, reset }: ActionButtonProps) {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const isStudents = pathname.includes("students");
+  function changeURL() {
+    const newPath = isStudents ? pathname.replace("students", "mentors") : pathname.replace("mentors", "students");
+    reset();
+    navigate(newPath);
+  }
+  return (
+    <div className="actionButtons">
+      <button onClick={copyEmail}>
+        <div id="default-copy">Copy Selected Emails</div>
+        <div id="success-copy" className="hidden">
+          <div className="checkmark"></div>
+
+          <div>Copied!</div>
+        </div>
+      </button>
+      {isStudents ? (
+        <button onClick={changeURL}>
+          <div>See Mentors</div>
+        </button>
+      ) : (
+        <button onClick={changeURL}>
+          <div>Students</div>
+        </button>
+      )}
+    </div>
+  );
+}

csm_web/frontend/src/components/coord_interface/CheckBox.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styles from "../../css/coord_interface.scss";
+
+interface CheckBoxProps {
+  id: string;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+}
+
+export function CheckBox({ id, onClick: onClick }: CheckBoxProps) {
+  return (
+    <td className={styles}>
+      <div className="checkbox-wrapper">
+        <input className="inp-cbx" id={id + "check"} type="checkbox" onClick={onClick} />
+        <label className="cbx" htmlFor={id + "check"}>
+          <span>
+            <svg width="12px" height="10px">
+              <use xlinkHref="#check"></use>
+            </svg>
+          </span>
+        </label>
+        <svg className="inline-svg">
+          <symbol id="check" viewBox="0 0 12 10">
+            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
+          </symbol>
+        </svg>
+      </div>
+    </td>
+  );
+}

csm_web/frontend/src/components/coord_interface/CoordSectionDelete.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+import { useCoordDeleteSectionMutation } from "../../utils/queries/coord";
+// import Modal from "../Modal";
+import XIcon from "../../../static/frontend/img/x.svg";
+
+// import "../../css/student_dropper.scss";
+
+interface CoordSectionDeleteProps {
+  sectionId: number;
+}
+
+export default function CoordSectionDelete({ sectionId }: CoordSectionDeleteProps) {
+  const [showDropPrompt, setShowDropPrompt] = useState(false);
+  const [drop, setDrop] = useState(false);
+  const [ban, setBan] = useState(false);
+  const [blacklist, setBlacklist] = useState(false);
+
+  /**
+   * Mutation to drop a student from the section. (Inspiration taken from dropping students within sections)
+   */
+  const coordSectionDeleteMutation = useCoordDeleteSectionMutation(sectionId);
+
+  function handleClickDrop() {
+    coordSectionDeleteMutation.mutate({ banned: ban, blacklisted: blacklist });
+    setShowDropPrompt(false);
+  }
+
+  const dropDiv = (
+    <div>
+      <h2 className="student-dropper-head-item">DROP Student</h2>
+      <div className="student-dropper-checkbox-container">
+        <input type="checkbox" id="drop" name="drop" onChange={e => setDrop(e.target.checked)} />
+        <label className="student-dropper-checkbox-label" htmlFor="drop">
+          I would like to DELETE the section: {sectionId}.
+        </label>
+        <br></br>
+      </div>
+    </div>
+  );
+
+  return (
+    //   <span className={`student-dropper ${showDropPrompt ? "ban-prompt-visible" : ""}`}>
+    //     <XIcon
+    //       className="icon inline-plus-sign"
+    //       title="Drop student from section"
+    //       onClick={() => setShowDropPrompt(true)}
+    //     />
+    //     <div>dropDiv</div>
+    <button className="danger-btn" onClick={handleClickDrop} disabled={!drop}>
+      Submit
+    </button>
+    //   </span>
+  );
+}

csm_web/frontend/src/components/coord_interface/CoordStudentDropper.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+
+import { useCoordDropStudentMutation } from "../../utils/queries/coord";
+// import Modal from "../Modal";
+import XIcon from "../../../static/frontend/img/x.svg";
+
+// import "../../css/student_dropper.scss";
+
+interface CoordStudentDropperProps {
+  // data: [];
+  id: number;
+  sectionId: number;
+  name: string;
+  courseRestricted: boolean;
+}
+
+// id, sectionId, name, courseRestricted old props
+export default function CoordStudentDropper({ id, sectionId, name, courseRestricted }: CoordStudentDropperProps) {
+  // need to find a way to change the selectedData into the format which we want for this
+  // either make it so we take in a list and then decode it wtihin this component or do something
+  const [showDropPrompt, setShowDropPrompt] = useState(false);
+  const [drop, setDrop] = useState(false);
+  const [ban, setBan] = useState(false);
+  const [blacklist, setBlacklist] = useState(false);
+
+  // make a bunch of lists which each of the indices corresponds to a student (if there are null/empty values just add null or undefined?)
+
+  /**
+   * Mutation to drop a student from the section. (Inspiration taken from dropping students within sections)
+   */
+  const coordStudentDropMutation = useCoordDropStudentMutation(id, sectionId); // might want to do like a forEach within this?
+
+  function handleClickDrop() {
+    coordStudentDropMutation.mutate({ banned: ban, blacklisted: blacklist });
+    setShowDropPrompt(false);
+  }
+
+  // this is just copied over... please look over and change later?
+  const dropDiv = (
+    <div>
+      <h2 className="student-dropper-head-item">DELETE Section</h2>
+      <div className="student-dropper-checkbox-container">
+        <input type="checkbox" id="drop" name="drop" onChange={e => setDrop(e.target.checked)} />
+        <label className="student-dropper-checkbox-label" htmlFor="drop">
+          I would like to DROP {name} from this section.
+        </label>
+        <br></br>
+      </div>
+    </div>
+  );
+
+  return (
+    //   <span className={`student-dropper ${showDropPrompt ? "ban-prompt-visible" : ""}`}>
+    //     <XIcon
+    //       className="icon inline-plus-sign"
+    //       title="Drop student from section"
+    //       onClick={() => setShowDropPrompt(true)}
+    //     />
+    //     <div>dropDiv</div>
+    <button className="danger-btn" onClick={handleClickDrop} disabled={!drop}>
+      Submit
+    </button>
+    //   </span>
+  );
+}