From dc576f1ffb4b07dabdaacb6079f84016884c1440 Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Mon, 11 Mar 2024 21:08:06 -0400 Subject: [PATCH 01/12] Added the prototype version of selecting multiple options: -Looks ugly -Isn't responsive enough, flashes everytime you select or deselect an option -One bug is that you can't deselect the last element --- .../src/components/Modal/RiderModalInfo.tsx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx index 6d149fcab..4896a70ef 100644 --- a/frontend/src/components/Modal/RiderModalInfo.tsx +++ b/frontend/src/components/Modal/RiderModalInfo.tsx @@ -4,6 +4,7 @@ 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'; type ModalFormProps = { onSubmit: (data: ObjectType) => void; @@ -63,7 +64,8 @@ const RiderModalInfo = ({ const localUserType = localStorage.getItem('userType'); const isEditing = rider !== undefined; const isStudentEditing = isEditing && localUserType === 'Rider'; - + const emptyStringArray : string[] = [""] + const [selectedNeedsOptions, setSelectedNeedsOptions] = useState(emptyStringArray); return (
@@ -138,6 +140,22 @@ const RiderModalInfo = ({ name="needs" aria-required="true" ref={register({ required: true })} + value={selectedNeedsOptions} + onChange={(e) => { + if (!selectedNeedsOptions.includes(e.target.value)) { + setSelectedNeedsOptions([ + e.target.value, + ...selectedNeedsOptions, + ]); + } else { + setSelectedNeedsOptions( + selectedNeedsOptions.filter( + (word) => !(word === e.target.value) + ) + ); + } + }} + multiple={true} > {Object.values(Accessibility).map((value, index) => { return ( From a6c9f3018ed6b47babd2ad7a7d54c58fb8b67d2c Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Sun, 17 Mar 2024 14:41:16 -0400 Subject: [PATCH 02/12] Added a component for dropdown lists and used it in the student info modal --- .../components/DropdownBox/DropdownBox.css | 70 +++++++++++++++++++ .../components/DropdownBox/DropdownBox.tsx | 68 ++++++++++++++++++ .../src/components/Modal/RiderModalInfo.tsx | 42 +++-------- 3 files changed, 146 insertions(+), 34 deletions(-) create mode 100644 frontend/src/components/DropdownBox/DropdownBox.css create mode 100644 frontend/src/components/DropdownBox/DropdownBox.tsx diff --git a/frontend/src/components/DropdownBox/DropdownBox.css b/frontend/src/components/DropdownBox/DropdownBox.css new file mode 100644 index 000000000..e76623824 --- /dev/null +++ b/frontend/src/components/DropdownBox/DropdownBox.css @@ -0,0 +1,70 @@ +.dropdown-wrapper { + position: relative; +} + +.dropdown-header { + background-color: rgb(255, 255, 255); + border: 1px solid #000000; + padding: 8px; + cursor: pointer; + max-width: 200px; /* Adjust width as needed */ + height : 31px; + 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: 12px; + max-height: 400px; /* Adjust max-height as needed */ + overflow-y: auto; + z-index: 1000; + border-radius: 12px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding drop shadow */ + +} + +.dropdown-list-item { + display: flex; + align-items: center; + margin-bottom: 5px; + cursor: pointer; +} + +.item-checkbox { + width: 12px; + height: 12px; + border: 1.5px solid #ccc; + margin-right: 5px; + border-radius: 3px; + position: relative; + background-color: white; +} + +.item-checkbox-selected::after { + content: '✔'; + font-size: xx-small; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color : white +} + +.item-checkbox-selected { + background-color: rgba(3, 117, 251); +} + +.item-name { + font-size: small; +} +.dropdown-list-confirm { + height : 30px; + width : 60px; + border-radius: 20px; + border : 2px solid rgba(158, 158, 158); + margin-left: 50%; +} diff --git a/frontend/src/components/DropdownBox/DropdownBox.tsx b/frontend/src/components/DropdownBox/DropdownBox.tsx new file mode 100644 index 000000000..018c094bd --- /dev/null +++ b/frontend/src/components/DropdownBox/DropdownBox.tsx @@ -0,0 +1,68 @@ +import React, { useState } from 'react'; +import './DropdownBox.css'; + +type DropdownBoxProps = { + placeHolderText: string; + dataSource: Array; + isOpen: boolean; + confirmText : string; +}; + +const DropdownBox = ({ placeHolderText, dataSource, isOpen, confirmText }: DropdownBoxProps) => { + const [isDropdownBoxOpen, setIsDropdownBoxOpen] = useState(isOpen); + const [selectedItems, setSelectedItems] = useState(new Set()); + + 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)} + > +
+
{itemName}
+
+ )) + } + +
+ + ) + } +
+ ); +}; + +export default DropdownBox; diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx index 4896a70ef..a3ff68036 100644 --- a/frontend/src/components/Modal/RiderModalInfo.tsx +++ b/frontend/src/components/Modal/RiderModalInfo.tsx @@ -5,6 +5,7 @@ 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 DropdownBox from '../DropdownBox/DropdownBox'; type ModalFormProps = { onSubmit: (data: ObjectType) => void; @@ -64,8 +65,6 @@ const RiderModalInfo = ({ const localUserType = localStorage.getItem('userType'); const isEditing = rider !== undefined; const isStudentEditing = isEditing && localUserType === 'Rider'; - const emptyStringArray : string[] = [""] - const [selectedNeedsOptions, setSelectedNeedsOptions] = useState(emptyStringArray); return (
@@ -133,38 +132,13 @@ const RiderModalInfo = ({ )}
- - + Needs: + value.toString())} + isOpen={false} + confirmText='Next'/> + {errors.needs?.type === 'validate' && (

Invalid needs. You can enter 'Assistant', 'Crutches', or From 684e450f03623ef19dd4968a3f17d3f04c3863bd Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Sun, 17 Mar 2024 15:38:31 -0400 Subject: [PATCH 03/12] Ran prettier --- .../components/DropdownBox/DropdownBox.css | 19 ++++--- .../components/DropdownBox/DropdownBox.tsx | 53 ++++++++++++------- .../src/components/Modal/RiderModalInfo.tsx | 12 +++-- 3 files changed, 49 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/DropdownBox/DropdownBox.css b/frontend/src/components/DropdownBox/DropdownBox.css index e76623824..e140f110e 100644 --- a/frontend/src/components/DropdownBox/DropdownBox.css +++ b/frontend/src/components/DropdownBox/DropdownBox.css @@ -8,8 +8,8 @@ padding: 8px; cursor: pointer; max-width: 200px; /* Adjust width as needed */ - height : 31px; - border-radius: 0.25rem ; + height: 31px; + border-radius: 0.25rem; } .dropdown-list { @@ -24,7 +24,6 @@ z-index: 1000; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding drop shadow */ - } .dropdown-list-item { @@ -40,18 +39,18 @@ border: 1.5px solid #ccc; margin-right: 5px; border-radius: 3px; - position: relative; + position: relative; background-color: white; } .item-checkbox-selected::after { - content: '✔'; + content: '✔'; font-size: xx-small; - position: absolute; + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - color : white + color: white; } .item-checkbox-selected { @@ -62,9 +61,9 @@ font-size: small; } .dropdown-list-confirm { - height : 30px; - width : 60px; + height: 30px; + width: 60px; border-radius: 20px; - border : 2px solid rgba(158, 158, 158); + border: 2px solid rgba(158, 158, 158); margin-left: 50%; } diff --git a/frontend/src/components/DropdownBox/DropdownBox.tsx b/frontend/src/components/DropdownBox/DropdownBox.tsx index 018c094bd..8cacaee6b 100644 --- a/frontend/src/components/DropdownBox/DropdownBox.tsx +++ b/frontend/src/components/DropdownBox/DropdownBox.tsx @@ -5,10 +5,15 @@ type DropdownBoxProps = { placeHolderText: string; dataSource: Array; isOpen: boolean; - confirmText : string; + confirmText: string; }; -const DropdownBox = ({ placeHolderText, dataSource, isOpen, confirmText }: DropdownBoxProps) => { +const DropdownBox = ({ + placeHolderText, + dataSource, + isOpen, + confirmText, +}: DropdownBoxProps) => { const [isDropdownBoxOpen, setIsDropdownBoxOpen] = useState(isOpen); const [selectedItems, setSelectedItems] = useState(new Set()); @@ -36,31 +41,39 @@ const DropdownBox = ({ placeHolderText, dataSource, isOpen, confirmText }: Dropd

{placeHolderText} {' '} - {isDropdownBoxOpen ? "⇈" : "⇊"} + {isDropdownBoxOpen ? '⇈' : '⇊'}
{isDropdownBoxOpen && ( <> -
- {dataSource.map((itemName) => ( -
toggleSelectItem(itemName)} +
+ {dataSource.map((itemName) => ( +
toggleSelectItem(itemName)} + > +
+
{itemName}
+
+ ))} + -
+ {confirmText} + +
- ) - } + )}
); }; diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx index a3ff68036..915fc570c 100644 --- a/frontend/src/components/Modal/RiderModalInfo.tsx +++ b/frontend/src/components/Modal/RiderModalInfo.tsx @@ -133,12 +133,14 @@ const RiderModalInfo = ({
Needs: - value.toString())} + value.toString())} isOpen={false} - confirmText='Next'/> - + confirmText="Next" + /> {errors.needs?.type === 'validate' && (

Invalid needs. You can enter 'Assistant', 'Crutches', or From 599a1e23e93537e247430164e26fe1cd169bbe1e Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Sun, 24 Mar 2024 14:49:38 -0400 Subject: [PATCH 04/12] Changed name of DropdownBox to Multiselect box; added text input box and changed styling of MultiselectBox --- .../components/DropdownBox/DropdownBox.css | 69 -------------- .../components/DropdownBox/DropdownBox.tsx | 81 ---------------- .../src/components/Modal/RiderModalInfo.tsx | 6 +- .../components/MultiselectBox/DropdownBox.css | 49 ++++++++++ .../components/MultiselectBox/DropdownBox.tsx | 93 +++++++++++++++++++ frontend/src/icons/other/downArrow.svg | 3 + frontend/src/icons/other/index.ts | 2 + frontend/src/icons/other/upArrow.svg | 3 + frontend/src/types/index.ts | 1 - 9 files changed, 153 insertions(+), 154 deletions(-) delete mode 100644 frontend/src/components/DropdownBox/DropdownBox.css delete mode 100644 frontend/src/components/DropdownBox/DropdownBox.tsx create mode 100644 frontend/src/components/MultiselectBox/DropdownBox.css create mode 100644 frontend/src/components/MultiselectBox/DropdownBox.tsx create mode 100644 frontend/src/icons/other/downArrow.svg create mode 100644 frontend/src/icons/other/upArrow.svg diff --git a/frontend/src/components/DropdownBox/DropdownBox.css b/frontend/src/components/DropdownBox/DropdownBox.css deleted file mode 100644 index e140f110e..000000000 --- a/frontend/src/components/DropdownBox/DropdownBox.css +++ /dev/null @@ -1,69 +0,0 @@ -.dropdown-wrapper { - position: relative; -} - -.dropdown-header { - background-color: rgb(255, 255, 255); - border: 1px solid #000000; - padding: 8px; - cursor: pointer; - max-width: 200px; /* Adjust width as needed */ - height: 31px; - 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: 12px; - max-height: 400px; /* Adjust max-height as needed */ - overflow-y: auto; - z-index: 1000; - border-radius: 12px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding drop shadow */ -} - -.dropdown-list-item { - display: flex; - align-items: center; - margin-bottom: 5px; - cursor: pointer; -} - -.item-checkbox { - width: 12px; - height: 12px; - border: 1.5px solid #ccc; - margin-right: 5px; - border-radius: 3px; - position: relative; - background-color: white; -} - -.item-checkbox-selected::after { - content: '✔'; - font-size: xx-small; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; -} - -.item-checkbox-selected { - background-color: rgba(3, 117, 251); -} - -.item-name { - font-size: small; -} -.dropdown-list-confirm { - height: 30px; - width: 60px; - border-radius: 20px; - border: 2px solid rgba(158, 158, 158); - margin-left: 50%; -} diff --git a/frontend/src/components/DropdownBox/DropdownBox.tsx b/frontend/src/components/DropdownBox/DropdownBox.tsx deleted file mode 100644 index 8cacaee6b..000000000 --- a/frontend/src/components/DropdownBox/DropdownBox.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React, { useState } from 'react'; -import './DropdownBox.css'; - -type DropdownBoxProps = { - placeHolderText: string; - dataSource: Array; - isOpen: boolean; - confirmText: string; -}; - -const DropdownBox = ({ - placeHolderText, - dataSource, - isOpen, - confirmText, -}: DropdownBoxProps) => { - const [isDropdownBoxOpen, setIsDropdownBoxOpen] = useState(isOpen); - const [selectedItems, setSelectedItems] = useState(new Set()); - - 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)} - > -
-
{itemName}
-
- ))} - -
- - )} -
- ); -}; - -export default DropdownBox; diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx index 915fc570c..4569f9b92 100644 --- a/frontend/src/components/Modal/RiderModalInfo.tsx +++ b/frontend/src/components/Modal/RiderModalInfo.tsx @@ -5,7 +5,7 @@ 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 DropdownBox from '../DropdownBox/DropdownBox'; +import DropdownBox from '../MultiselectBox/DropdownBox'; type ModalFormProps = { onSubmit: (data: ObjectType) => void; @@ -136,10 +136,10 @@ const RiderModalInfo = ({ value.toString())} isOpen={false} - confirmText="Next" + optionWithTextInputBox = {"Other"} + placeHolderTextInputBox='Specify Your Other Needs' /> {errors.needs?.type === 'validate' && (

diff --git a/frontend/src/components/MultiselectBox/DropdownBox.css b/frontend/src/components/MultiselectBox/DropdownBox.css new file mode 100644 index 000000000..594d8747f --- /dev/null +++ b/frontend/src/components/MultiselectBox/DropdownBox.css @@ -0,0 +1,49 @@ +.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; +} \ No newline at end of file diff --git a/frontend/src/components/MultiselectBox/DropdownBox.tsx b/frontend/src/components/MultiselectBox/DropdownBox.tsx new file mode 100644 index 000000000..86bc109fb --- /dev/null +++ b/frontend/src/components/MultiselectBox/DropdownBox.tsx @@ -0,0 +1,93 @@ +import React, { useState } from 'react'; +import './DropdownBox.css'; +import { upArrow, downArrow } from '../../icons/other'; + +type DropdownBoxProps = { + placeHolderText: string; + dataSource: Array; + isOpen: boolean; + optionWithTextInputBox?: string; + placeHolderTextInputBox?: string; +}; + +const DropdownBox = ({ + placeHolderText, + dataSource, + isOpen, + optionWithTextInputBox, + placeHolderTextInputBox, +}: DropdownBoxProps) => { + 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)} + > + +
+ ))} + {(optionWithTextInputBox + ? selectedItems.has(optionWithTextInputBox) + : false) && ( + { + setInputValue(newInputValue.target.value); + }} + placeholder={placeHolderTextInputBox} + /> + )} +
+ + )} +
+ ); +}; + +export default DropdownBox; diff --git a/frontend/src/icons/other/downArrow.svg b/frontend/src/icons/other/downArrow.svg new file mode 100644 index 000000000..f40057512 --- /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 4dd6607ed..db9b41c68 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 000000000..9c2fdac49 --- /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 75b2b1c09..8b87d789a 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', From c9dc92f7551c021dfc768b98af94294fe0e5d585 Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Sun, 24 Mar 2024 14:58:51 -0400 Subject: [PATCH 05/12] ran prettier --- frontend/src/components/Modal/RiderModalInfo.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx index 4569f9b92..0d22ffcb8 100644 --- a/frontend/src/components/Modal/RiderModalInfo.tsx +++ b/frontend/src/components/Modal/RiderModalInfo.tsx @@ -135,11 +135,12 @@ const RiderModalInfo = ({ Needs: value.toString())} + dataSource={Object.values(Accessibility).map((value, _) => + value.toString() + )} isOpen={false} - optionWithTextInputBox = {"Other"} - placeHolderTextInputBox='Specify Your Other Needs' + optionWithTextInputBox={'Other'} + placeHolderTextInputBox="Specify Your Other Needs" /> {errors.needs?.type === 'validate' && (

From fda37b3cfd77b1658e0de0a21efb40dc40940fc3 Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Sun, 24 Mar 2024 15:24:51 -0400 Subject: [PATCH 06/12] Wrap the Needs: text around a label and changed name of component to MultiselectBox + ran prettier --- frontend/src/components/Modal/RiderModalInfo.tsx | 4 ++-- .../{DropdownBox.tsx => MultiselectBox.tsx} | 0 .../{DropdownBox.css => Multiselectbox.css} | 13 ++++++------- 3 files changed, 8 insertions(+), 9 deletions(-) rename frontend/src/components/MultiselectBox/{DropdownBox.tsx => MultiselectBox.tsx} (100%) rename frontend/src/components/MultiselectBox/{DropdownBox.css => Multiselectbox.css} (87%) diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx index 0d22ffcb8..f59687fa0 100644 --- a/frontend/src/components/Modal/RiderModalInfo.tsx +++ b/frontend/src/components/Modal/RiderModalInfo.tsx @@ -5,7 +5,7 @@ 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 DropdownBox from '../MultiselectBox/DropdownBox'; +import DropdownBox from '../MultiselectBox/MultiselectBox'; type ModalFormProps = { onSubmit: (data: ObjectType) => void; @@ -132,7 +132,7 @@ const RiderModalInfo = ({ )}

- Needs: + diff --git a/frontend/src/components/MultiselectBox/DropdownBox.tsx b/frontend/src/components/MultiselectBox/MultiselectBox.tsx similarity index 100% rename from frontend/src/components/MultiselectBox/DropdownBox.tsx rename to frontend/src/components/MultiselectBox/MultiselectBox.tsx diff --git a/frontend/src/components/MultiselectBox/DropdownBox.css b/frontend/src/components/MultiselectBox/Multiselectbox.css similarity index 87% rename from frontend/src/components/MultiselectBox/DropdownBox.css rename to frontend/src/components/MultiselectBox/Multiselectbox.css index 594d8747f..441fea248 100644 --- a/frontend/src/components/MultiselectBox/DropdownBox.css +++ b/frontend/src/components/MultiselectBox/Multiselectbox.css @@ -26,7 +26,6 @@ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding drop shadow */ } - .item-checkbox { width: 0.75rem; height: 0.75rem; @@ -41,9 +40,9 @@ } .dropdown-text-input { - position : relative; - margin-left : 0.2rem; - border-radius : 6px; - height : 1.75rem; - border : 1px #808080 solid; -} \ No newline at end of file + position: relative; + margin-left: 0.2rem; + border-radius: 6px; + height: 1.75rem; + border: 1px #808080 solid; +} From 01c1798274d3cb183d6424bbc2720a1fa7f2813d Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Sun, 24 Mar 2024 15:25:30 -0400 Subject: [PATCH 07/12] Changed name of CSS file --- frontend/src/components/MultiselectBox/MultiselectBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/MultiselectBox/MultiselectBox.tsx b/frontend/src/components/MultiselectBox/MultiselectBox.tsx index 86bc109fb..a808f9c8a 100644 --- a/frontend/src/components/MultiselectBox/MultiselectBox.tsx +++ b/frontend/src/components/MultiselectBox/MultiselectBox.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import './DropdownBox.css'; +import './Multiselectbox.css'; import { upArrow, downArrow } from '../../icons/other'; type DropdownBoxProps = { From 82486576c059bcd4c36244992af905ce74f02b25 Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Sun, 24 Mar 2024 15:27:22 -0400 Subject: [PATCH 08/12] ran prettier --- frontend/src/components/Modal/RiderModalInfo.tsx | 2 +- frontend/src/icons/other/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx index f59687fa0..10e0f07de 100644 --- a/frontend/src/components/Modal/RiderModalInfo.tsx +++ b/frontend/src/components/Modal/RiderModalInfo.tsx @@ -132,7 +132,7 @@ const RiderModalInfo = ({ )}
- + diff --git a/frontend/src/icons/other/index.ts b/frontend/src/icons/other/index.ts index db9b41c68..1ddf88ac9 100644 --- a/frontend/src/icons/other/index.ts +++ b/frontend/src/icons/other/index.ts @@ -18,4 +18,4 @@ 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' +export { default as downArrow } from './downArrow.svg'; From 817b71ae387ad47895bcdc278edd60c9cac4aa7e Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Sun, 24 Mar 2024 15:39:23 -0400 Subject: [PATCH 09/12] Changed the name of the components to MultiselectBox inside of the tsx file --- frontend/src/components/Modal/RiderModalInfo.tsx | 4 ++-- frontend/src/components/MultiselectBox/MultiselectBox.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx index 10e0f07de..294c8fb6a 100644 --- a/frontend/src/components/Modal/RiderModalInfo.tsx +++ b/frontend/src/components/Modal/RiderModalInfo.tsx @@ -5,7 +5,7 @@ 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 DropdownBox from '../MultiselectBox/MultiselectBox'; +import MultiselectBox from '../MultiselectBox/MultiselectBox'; type ModalFormProps = { onSubmit: (data: ObjectType) => void; @@ -133,7 +133,7 @@ const RiderModalInfo = ({
- value.toString() diff --git a/frontend/src/components/MultiselectBox/MultiselectBox.tsx b/frontend/src/components/MultiselectBox/MultiselectBox.tsx index a808f9c8a..b27f5998f 100644 --- a/frontend/src/components/MultiselectBox/MultiselectBox.tsx +++ b/frontend/src/components/MultiselectBox/MultiselectBox.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import './Multiselectbox.css'; import { upArrow, downArrow } from '../../icons/other'; -type DropdownBoxProps = { +type MultiselectBoxProps = { placeHolderText: string; dataSource: Array; isOpen: boolean; @@ -10,13 +10,13 @@ type DropdownBoxProps = { placeHolderTextInputBox?: string; }; -const DropdownBox = ({ +const MultiselectBox = ({ placeHolderText, dataSource, isOpen, optionWithTextInputBox, placeHolderTextInputBox, -}: DropdownBoxProps) => { +}: MultiselectBoxProps) => { const [isDropdownBoxOpen, setIsDropdownBoxOpen] = useState(isOpen); const [selectedItems, setSelectedItems] = useState(new Set()); const [inputValue, setInputValue] = useState(''); @@ -90,4 +90,4 @@ const DropdownBox = ({ ); }; -export default DropdownBox; +export default MultiselectBox; From a7ceeefee7f0d547d2fbf4e6b6aa55ee6ff74e2f Mon Sep 17 00:00:00 2001 From: Nam Anh Dang Date: Sun, 24 Mar 2024 16:03:54 -0400 Subject: [PATCH 10/12] Made it so that when the box collapses ,the checked boxes will still show up --- frontend/src/components/MultiselectBox/MultiselectBox.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/MultiselectBox/MultiselectBox.tsx b/frontend/src/components/MultiselectBox/MultiselectBox.tsx index b27f5998f..9de20d227 100644 --- a/frontend/src/components/MultiselectBox/MultiselectBox.tsx +++ b/frontend/src/components/MultiselectBox/MultiselectBox.tsx @@ -64,6 +64,7 @@ const MultiselectBox = ({ id={itemName} name={itemName} onChange={() => toggleSelectItem(itemName)} + checked = {selectedItems.has(itemName)} >