diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx index 6d149fca..294c8fb6 100644 --- a/frontend/src/components/Modal/RiderModalInfo.tsx +++ b/frontend/src/components/Modal/RiderModalInfo.tsx @@ -4,6 +4,8 @@ import cn from 'classnames'; import { Button, Input, Label } from '../FormElements/FormElements'; import styles from './ridermodal.module.css'; import { ObjectType, Accessibility, Rider } from '../../types/index'; +import { useState } from 'react'; +import MultiselectBox from '../MultiselectBox/MultiselectBox'; type ModalFormProps = { onSubmit: (data: ObjectType) => void; @@ -63,7 +65,6 @@ const RiderModalInfo = ({ const localUserType = localStorage.getItem('userType'); const isEditing = rider !== undefined; const isStudentEditing = isEditing && localUserType === 'Rider'; - return (
@@ -131,22 +132,16 @@ const RiderModalInfo = ({ )}
- - + + + value.toString() + )} + isOpen={false} + optionWithTextInputBox={'Other'} + placeHolderTextInputBox="Specify Your Other Needs" + /> {errors.needs?.type === 'validate' && (

Invalid needs. You can enter 'Assistant', 'Crutches', or diff --git a/frontend/src/components/MultiselectBox/MultiselectBox.tsx b/frontend/src/components/MultiselectBox/MultiselectBox.tsx new file mode 100644 index 00000000..05f15072 --- /dev/null +++ b/frontend/src/components/MultiselectBox/MultiselectBox.tsx @@ -0,0 +1,96 @@ +import React, { useState } from 'react'; +import './Multiselectbox.css'; +import { upArrow, downArrow } from '../../icons/other'; + +type MultiselectBoxProps = { + placeHolderText: string; + dataSource: Array; + isOpen: boolean; + optionWithTextInputBox?: string; + placeHolderTextInputBox?: string; +}; + +const MultiselectBox = ({ + placeHolderText, + dataSource, + isOpen, + optionWithTextInputBox, + placeHolderTextInputBox, +}: MultiselectBoxProps) => { + const [isDropdownBoxOpen, setIsDropdownBoxOpen] = useState(isOpen); + const [selectedItems, setSelectedItems] = useState(new Set()); + const [inputValue, setInputValue] = useState(''); + const toggleDropdownBox = () => { + setIsDropdownBoxOpen(!isDropdownBoxOpen); + }; + + const toggleSelectItem = (itemName: string) => { + const newSelectedItems = new Set(selectedItems); + if (newSelectedItems.has(itemName)) { + newSelectedItems.delete(itemName); + } else { + newSelectedItems.add(itemName); + } + setSelectedItems(newSelectedItems); + }; + + return ( +

+ + + {isDropdownBoxOpen && ( + <> +
+ {dataSource.map((itemName) => ( +
+ toggleSelectItem(itemName)} + checked={selectedItems.has(itemName)} + > + +
+ ))} + {(optionWithTextInputBox + ? selectedItems.has(optionWithTextInputBox) + : false) && ( + { + setInputValue(newInputValue.target.value); + }} + placeholder={ + placeHolderTextInputBox ? placeHolderTextInputBox : '' + } + /> + )} +
+ + )} +
+ ); +}; + +export default MultiselectBox; diff --git a/frontend/src/components/MultiselectBox/Multiselectbox.css b/frontend/src/components/MultiselectBox/Multiselectbox.css new file mode 100644 index 00000000..441fea24 --- /dev/null +++ b/frontend/src/components/MultiselectBox/Multiselectbox.css @@ -0,0 +1,48 @@ +.dropdown-wrapper { + position: relative; +} + +.dropdown-header { + background-color: rgb(255, 255, 255); + border: 1px solid #000000; + padding: 0.5rem; + cursor: pointer; + max-width: 20rem; /* Adjust width as needed */ + height: 1.938rem; + border-radius: 0.25rem; +} + +.dropdown-list { + position: absolute; + top: calc(100% + 5px); + left: 0; + background-color: rgba(234, 233, 233); /* Grey color with 30% opacity */ + border: 1px solid #ccc; + padding: 0.75rem; + max-height: 25rem; /* Adjust max-height as needed */ + overflow-y: auto; + z-index: 1000; + border-radius: 0.75rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding drop shadow */ +} + +.item-checkbox { + width: 0.75rem; + height: 0.75rem; + border: 0.094rem solid #ccc; + margin-right: 0.313rem; + border-radius: 0.188rem; + background-color: white; +} + +.item-name { + font-size: small; +} + +.dropdown-text-input { + position: relative; + margin-left: 0.2rem; + border-radius: 6px; + height: 1.75rem; + border: 1px #808080 solid; +} diff --git a/frontend/src/icons/other/downArrow.svg b/frontend/src/icons/other/downArrow.svg new file mode 100644 index 00000000..f4005751 --- /dev/null +++ b/frontend/src/icons/other/downArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/icons/other/index.ts b/frontend/src/icons/other/index.ts index 4dd6607e..1ddf88ac 100644 --- a/frontend/src/icons/other/index.ts +++ b/frontend/src/icons/other/index.ts @@ -17,3 +17,5 @@ export { default as chevronLeft } from './chevron-left.svg'; export { default as block } from './blocked.svg'; export { default as red_trash } from './red-trash.svg'; export { default as search_icon } from './search.svg'; +export { default as upArrow } from './upArrow.svg'; +export { default as downArrow } from './downArrow.svg'; diff --git a/frontend/src/icons/other/upArrow.svg b/frontend/src/icons/other/upArrow.svg new file mode 100644 index 00000000..9c2fdac4 --- /dev/null +++ b/frontend/src/icons/other/upArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts index 75b2b1c0..8b87d789 100644 --- a/frontend/src/types/index.ts +++ b/frontend/src/types/index.ts @@ -8,7 +8,6 @@ import { VehicleType } from '../../../server/src/models/vehicle'; export type Rider = RiderType; export enum Accessibility { - NONE = '', ASSISTANT = 'Assistant', CRUTCHES = 'Crutches', WHEELCHAIR = 'Wheelchair',