From cecf4de79be97d3e787da3e5cdebb0707c47f6ce Mon Sep 17 00:00:00 2001 From: Camila Carrillo Date: Sun, 22 Feb 2026 20:57:16 -0500 Subject: [PATCH 1/3] base dropdown, needs edits --- frontend/src/main-page/grants/GrantPage.tsx | 4 +- .../main-page/grants/filter-bar/FilterBar.tsx | 53 +++++------- .../grants/filter-bar/StatusDropdown.tsx | 84 +++++++++++++++++++ 3 files changed, 105 insertions(+), 36 deletions(-) create mode 100644 frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx diff --git a/frontend/src/main-page/grants/GrantPage.tsx b/frontend/src/main-page/grants/GrantPage.tsx index 2ec013c..100d0a0 100644 --- a/frontend/src/main-page/grants/GrantPage.tsx +++ b/frontend/src/main-page/grants/GrantPage.tsx @@ -5,7 +5,7 @@ import GrantSearch from "./filter-bar/GrantSearch.tsx"; import NewGrantModal from "./new-grant/NewGrantModal.tsx"; import { useEffect, useState } from "react"; import { Grant } from "../../../../middle-layer/types/Grant.ts"; -// import FilterBar from "./filter-bar/FilterBar.tsx"; +import FilterBar from "./filter-bar/FilterBar.tsx"; import GrantItem from "./grant-view/GrantView.tsx"; import { useAuthContext } from "../../context/auth/authContext"; import { @@ -117,7 +117,7 @@ function GrantPage({}: GrantPageProps) {
- FILTERS GO HERE + setShowNewGrantModal(true)} />
diff --git a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx index 729f6f2..23bfce2 100644 --- a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx +++ b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx @@ -10,6 +10,7 @@ import { import { observer } from "mobx-react-lite"; import CalendarDropdown from "./CalendarDropdown.tsx"; import { FaChevronRight } from "react-icons/fa"; +import StatusDropdown from "./StatusDropdown"; interface FilterBarProps { name: string; @@ -44,40 +45,24 @@ const FilterBar: React.FC = observer(() => { } return ( -
-
-
{"Filter by Date"}
- -
-
-
{"Filter by Status"}
-
    - {linkList.map((item, index) => ( -
  • - categoryClicked(e, item.name, item.linkTo)} - to={item.linkTo ? item.linkTo : "#"} - > -
    -
    - {item.name} - -
    -
    - -
    • - ))} -
-
-
+
+ + + + + + +
); }); diff --git a/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx b/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx new file mode 100644 index 0000000..88b7718 --- /dev/null +++ b/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx @@ -0,0 +1,84 @@ + +import React, { useState } from "react"; +import { + Status, + getColorStatus, +} from "../../../../../middle-layer/types/Status.ts"; +import { updateFilter } from "../../../external/bcanSatchel/actions.ts"; +import { observer } from "mobx-react-lite"; + +const StatusDropdown: React.FC = observer(() => { + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState(null); + + const statuses = [ + Status.Active, + Status.Pending, + Status.Potential, + Status.Rejected, + Status.Inactive, + ]; + + function handleSelect(status: Status) { + const newSelected = selected === status ? null : status; + setSelected(newSelected); + updateFilter(newSelected); + } + + function handleClear() { + setSelected(null); + updateFilter(null); + } + + return ( +
+ + + {isOpen && ( +
+
+ +
+ +
+ {statuses.map((status) => ( +
handleSelect(status)} + > + handleSelect(status)} + className="cursor-pointer" + /> + + {status} + +
+ ))} +
+
+ )} +
+ ); +}); + +export default StatusDropdown; \ No newline at end of file From 357c71ebbb602a794186da35c4bba055790b1e56 Mon Sep 17 00:00:00 2001 From: Camila Carrillo Date: Mon, 23 Feb 2026 23:41:18 -0500 Subject: [PATCH 2/3] small changes ot dropdown and filterbar --- .../main-page/grants/filter-bar/FilterBar.tsx | 2 +- .../grants/filter-bar/StatusDropdown.tsx | 18 +++--------------- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx index 23bfce2..a7f117f 100644 --- a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx +++ b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx @@ -45,7 +45,7 @@ const FilterBar: React.FC = observer(() => { } return ( -
+
diff --git a/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx b/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx index 88b7718..d5c467f 100644 --- a/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx +++ b/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx @@ -25,10 +25,6 @@ const StatusDropdown: React.FC = observer(() => { updateFilter(newSelected); } - function handleClear() { - setSelected(null); - updateFilter(null); - } return (
@@ -40,17 +36,9 @@ const StatusDropdown: React.FC = observer(() => { {isOpen && ( -
-
- -
+
-
+
{statuses.map((status) => (
{ type="checkbox" checked={selected === status} onChange={() => handleSelect(status)} - className="cursor-pointer" + className="cursor-pointer w-4 h-4 flex-shrink-0" /> Date: Mon, 23 Feb 2026 23:55:31 -0500 Subject: [PATCH 3/3] commented out unused imports --- frontend/src/main-page/grants/filter-bar/FilterBar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx index a7f117f..8b54f0d 100644 --- a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx +++ b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Link } from "react-router-dom"; +//import { Link } from "react-router-dom"; import { Status, stringToStatus, @@ -8,8 +8,8 @@ import { updateFilter, } from "../../../external/bcanSatchel/actions.ts"; import { observer } from "mobx-react-lite"; -import CalendarDropdown from "./CalendarDropdown.tsx"; -import { FaChevronRight } from "react-icons/fa"; +//import CalendarDropdown from "./CalendarDropdown.tsx"; +//import { FaChevronRight } from "react-icons/fa"; import StatusDropdown from "./StatusDropdown"; interface FilterBarProps {