From ee79a3c630510f838567c0e48382f4b3ee30ce99 Mon Sep 17 00:00:00 2001 From: qianxuege Date: Tue, 18 Jun 2024 12:37:30 -0400 Subject: [PATCH] changed datepicker format and added categories dropdown --- src/components/Search.css | 20 ++++- src/components/Search.tsx | 163 ++++++++++++++++++++++++++++++---- src/components/SearchCard.tsx | 8 +- src/pages/Academics.tsx | 2 +- src/pages/Careers.tsx | 2 +- src/pages/Clubs.tsx | 2 +- 6 files changed, 169 insertions(+), 28 deletions(-) diff --git a/src/components/Search.css b/src/components/Search.css index 7227c99..8d9acdc 100644 --- a/src/components/Search.css +++ b/src/components/Search.css @@ -12,15 +12,31 @@ /* the container for the date picker */ .css-z3c6am-MuiFormControl-root-MuiTextField-root { height: 40px; - + /* 40px = h-10 in tailwind */ } - /* the inner part of the date picker */ .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root { height: 40px; background-color: white; } +/* select drop down */ +.css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input { + /* the container for select box */ + /* color: red; */ + position: relative; +} + +.css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root { + /* the label on top */ + position: relative; + top: -0.5rem !important; +} + +.css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root { + /* the text inside the label box */ + position: relative; +} diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 401d5d3..c2f4f94 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -1,30 +1,143 @@ -import React, { useState } from "react"; -import "./Search.css"; +import React, { useEffect, useState } from "react"; + import { IoSearch } from "react-icons/io5"; import { SearchCard } from "./SearchCard"; - -// import Dropdown from "react-dropdown"; +// for date picker import dayjs, { Dayjs } from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +// for categories dropdown +import OutlinedInput from '@mui/material/OutlinedInput'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import ListItemText from '@mui/material/ListItemText'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Checkbox from '@mui/material/Checkbox'; + + import "react-dropdown/style.css"; -// import "react-datepicker/dist/react-datepicker.css"; +import "./Search.css"; + // https://plainenglish.io/blog/how-to-implement-a-search-bar-in-react-js -function Search() { +const categoryListAcademics = [ + "Office Hours", + "Supplemental Instructions", + "Drop-in Tutoring", + "Peer Tutoring" +]; + +const categoryListClubs = [ + "Student Government Recognized Organizations", + "Fraternity & Sorority Chapters", + "Tepper Graduate Organizations", + "Department Sponsored Organizations", + "Student Governance", + "Tepper Offices", + "Offices" +] + +const categoryListCareer = [ + "Career Fair", + "Networking", + "Hiring", + "Employer Info", + "Guidance", + "Academic", + "Conference", + "General" +] + +interface SearchComponentProps { + page: string; +} + +const Search: React.FC = ({ page }) => { // Chang name to search bar const [searchInput, setSearchInput] = useState(""); - // const [dropdownValue, setDropdownValue] = useState(""); - const [showDatePicker, setShowDatePicker] = useState(true); - const [startDate, setStartDate] = useState(dayjs()) - const [endDate, setEndDate] = useState(dayjs()) - const handleChange = (e: React.ChangeEvent) => { + const [categoryName, setCategoryName] = useState([]); + // const [showDatePicker, setShowDatePicker] = useState(true); + const [startDate, setStartDate] = useState(dayjs()); + const [endDate, setEndDate] = useState(dayjs()); + const handleChangeSearch = (e: React.ChangeEvent) => { e.preventDefault(); setSearchInput(e.target.value); }; + const showDatePicker = true; + + const handleChangeCategory = (event: SelectChangeEvent) => { + const { + target: { value }, + } = event; + // target = the element that triggered the event + // value = the current value of the element/ the option selected + setCategoryName( + // e.g. "Office Hours, Peer Tutoring" --> ["OH", "PT"] + typeof value === 'string' ? value.split(',') : value, + ); + }; + + // style for dropdown filter + const ITEM_HEIGHT = 48; + const ITEM_PADDING_TOP = 8; + const MenuProps = { + PaperProps: { + style: { + maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, + width: 450, + }, + }, + }; + + let categoryContent = ( + + {/* Categories */} + + + ); + + // const dateId = useId(); const startDateFn = (date: Dayjs | null) => { @@ -49,6 +162,7 @@ function Search() { onChange={(date) => { startDateFn(date); }} + format="MM/DD" /> to @@ -58,6 +172,7 @@ function Search() { onChange={(date) => { endDateFn(date); }} + format="MM/DD" /> @@ -73,8 +188,8 @@ function Search() { const endDate1 = "06/17" const endTime1 = "5PM" const location1 = "POS 146"; - const eventCategory1 = "academic"; - const eventSubcategory1 = "OfficeHour"; + // const eventCategory1 = "academic"; + // const eventSubcategory1 = "OfficeHour"; return (
@@ -82,7 +197,7 @@ function Search() { @@ -90,7 +205,17 @@ function Search() {
-
{dateContent}
+
+
{dateContent}
+ {/* drop down filter */} + {(page === "academics" || page === "clubs" || page==="career") ? ( +
{categoryContent}
+ ) : ( + <> + )} +
+ +
diff --git a/src/components/SearchCard.tsx b/src/components/SearchCard.tsx index 0cdc525..65f2028 100644 --- a/src/components/SearchCard.tsx +++ b/src/components/SearchCard.tsx @@ -10,8 +10,8 @@ interface SearchCardProps { endDate: string; endTime: string; location: string; - eventCategory: string; - eventSubcategory: string; + // eventCategory: string; + // eventSubcategory: string; } const SearchCard: React.FC = ({ @@ -22,8 +22,8 @@ const SearchCard: React.FC = ({ endDate, endTime, location, - eventCategory, - eventSubcategory, + // eventCategory, + // eventSubcategory, }) => { const [buttonClicked, setButtonClicked] = useState(false); diff --git a/src/pages/Academics.tsx b/src/pages/Academics.tsx index 9a04b38..86b02da 100644 --- a/src/pages/Academics.tsx +++ b/src/pages/Academics.tsx @@ -10,7 +10,7 @@ const Academics: React.FC = () => {
- +
diff --git a/src/pages/Careers.tsx b/src/pages/Careers.tsx index 820fdf1..e3d8b31 100644 --- a/src/pages/Careers.tsx +++ b/src/pages/Careers.tsx @@ -10,7 +10,7 @@ const Careers: React.FC = () => {
- +
diff --git a/src/pages/Clubs.tsx b/src/pages/Clubs.tsx index a898133..32aa865 100644 --- a/src/pages/Clubs.tsx +++ b/src/pages/Clubs.tsx @@ -10,7 +10,7 @@ const Clubs: React.FC = () => {
- +