From f638fa929c1feec8f9b3f23603701566e3c52140 Mon Sep 17 00:00:00 2001
From: Nam Anh Dang <dangnamanh05@gmail.com>
Date: Thu, 4 Apr 2024 19:57:37 -0400
Subject: [PATCH] added the filter by disability box

---
 .../components/UserTables/StudentsTable.tsx   | 24 ++++++++++++++++++-
 .../components/UserTables/table.module.css    | 10 ++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/UserTables/StudentsTable.tsx b/frontend/src/components/UserTables/StudentsTable.tsx
index 879a90135..5f77be7b0 100644
--- a/frontend/src/components/UserTables/StudentsTable.tsx
+++ b/frontend/src/components/UserTables/StudentsTable.tsx
@@ -6,6 +6,8 @@ import { Row, Table } from '../TableComponents/TableComponents';
 import { useRiders } from '../../context/RidersContext';
 import styles from './table.module.css';
 import axios from '../../util/axios';
+import { Label } from '../FormElements/FormElements';
+import { Accessibility } from '../../types';
 
 type UsageData = {
   noShows: number;
@@ -34,6 +36,7 @@ const StudentsTable = ({ searchName }: studentTableProps) => {
   ];
   const [usage, setUsage] = useState<UsageType>({});
   const [showInactive, setShowInactive] = useState(false);
+  const [disabilityFilter, setDisabilityFilter] = useState('');
 
   useEffect(() => {
     axios
@@ -71,7 +74,8 @@ const StudentsTable = ({ searchName }: studentTableProps) => {
       (r.firstName + ' ' + r.lastName)
         .toLowerCase()
         .includes((searchName + '').toLowerCase()) &&
-      (showInactive ? true : r.active)
+      (showInactive ? true : r.active) &&
+      (disabilityFilter === '' ? true : r.accessibility === disabilityFilter)
   );
 
   return (
@@ -95,6 +99,24 @@ const StudentsTable = ({ searchName }: studentTableProps) => {
         />
         Show inactive students
       </label>
+      <Label
+        className={styles.filterDisabilityHeader}
+        htmlFor="filterByDisability"
+      >
+        Filter by Disability:
+      </Label>
+      <select
+        className={styles.filterDisabilityBox}
+        name="filterByDisability"
+        value={disabilityFilter}
+        onChange={(e) => setDisabilityFilter(e.target.value)}
+      >
+        {Object.values(Accessibility).map((value, index) => (
+          <option value={value} key={index}>
+            {value}
+          </option>
+        ))}
+      </select>
       <Table>
         <Row header colSizes={colSizes} data={headers} />
 
diff --git a/frontend/src/components/UserTables/table.module.css b/frontend/src/components/UserTables/table.module.css
index 91a4b3366..1a5311619 100644
--- a/frontend/src/components/UserTables/table.module.css
+++ b/frontend/src/components/UserTables/table.module.css
@@ -156,6 +156,16 @@
   border: #eb0023 1px solid;
 }
 
+.filterDisabilityHeader {
+  margin-left: 4rem;
+}
+
+.filterDisabilityBox {
+  height: 1.5rem;
+  border-radius: 4px;
+  border-width: 1.25px;
+}
+
 @media screen and (max-width: 700px) {
   .scheduleTableInner {
     min-width: initial;