diff --git a/frontend/src/components/UserTables/StudentsTable.tsx b/frontend/src/components/UserTables/StudentsTable.tsx index 879a9013..5f77be7b 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({}); 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 + + diff --git a/frontend/src/components/UserTables/table.module.css b/frontend/src/components/UserTables/table.module.css index 91a4b336..1a531161 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;