Feat/coord interface/frontend (#524)

* initial table

* table css work

* table css work

* front end table searching and select data logic

* front end table searching and select data logic

* search filter works

* im done fr now fixed select glitch and styled input and buttons slightly

* finished front end table

* functions and dropdown basics

* touchups for front end filtering integration and css

* copy button works and table header structure

* fixed filtering bugs and css for action buttons

* fixed weird double copy bug

* fixed filter copy bug

* finished coord interface

---------

Co-authored-by: Heidi Chan <heidi.chan@berkeley.edu>

Author: gabrielhan23

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>
+  );
+}