From 656edbfac74b2638be47189759cc695a2e34944b Mon Sep 17 00:00:00 2001 From: apcodes Date: Fri, 19 Apr 2024 16:49:30 -0400 Subject: [PATCH 1/5] added the filter box and edited the table action to add the filter UI --- compass/components/FilterBox.tsx | 73 ++++++++++++++++++++++++ compass/components/Table/Index.tsx | 1 + compass/components/Table/TableAction.tsx | 46 ++++++++++----- package-lock.json | 6 ++ 4 files changed, 112 insertions(+), 14 deletions(-) create mode 100644 compass/components/FilterBox.tsx create mode 100644 package-lock.json diff --git a/compass/components/FilterBox.tsx b/compass/components/FilterBox.tsx new file mode 100644 index 0000000..a38574c --- /dev/null +++ b/compass/components/FilterBox.tsx @@ -0,0 +1,73 @@ +// FilterBox.tsx +import { useState } from "react"; + +const mockTags = ["food relief", "period poverty", "nutrition education"]; + +export const FilterBox = () => { + const [selectedTags, setSelectedTags] = useState([]); + const [searchTerm, setSearchTerm] = useState(""); + + const handleTagChange = (tag: string) => { + setSelectedTags((prevTags) => + prevTags.includes(tag) + ? prevTags.filter((t) => t !== tag) + : [...prevTags, tag] + ); + }; + + const handleSearchChange = (e: React.ChangeEvent) => { + setSearchTerm(e.target.value); + }; + + const renderSelectedTags = () => + selectedTags.map((tag) => ( +
+ {tag} + handleTagChange(tag)} + > + × + +
+ )); + + return ( +
+
+ Tags contains: + +
+
+ {selectedTags.length > 0 && renderSelectedTags()} + +
+
+ {mockTags + .filter((tag) => + tag.toLowerCase().includes(searchTerm.toLowerCase()) + ) + .map((tag) => ( +
+ handleTagChange(tag)} + className="mr-2" + /> + +
+ ))} +
+
+ ); +}; diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx index 9c7329b..b373560 100644 --- a/compass/components/Table/Index.tsx +++ b/compass/components/Table/Index.tsx @@ -113,6 +113,7 @@ export const Table = () => { } // TODO: Filtering + // TODO: Sorting const table = useReactTable({ diff --git a/compass/components/Table/TableAction.tsx b/compass/components/Table/TableAction.tsx index e58e110..737b95a 100644 --- a/compass/components/Table/TableAction.tsx +++ b/compass/components/Table/TableAction.tsx @@ -1,46 +1,64 @@ -/** The actions (Filter, Sort, Search) at the top of the table. */ +// TableAction.tsx import { MagnifyingGlassIcon } from "@heroicons/react/24/solid"; -import { ChangeEventHandler, Dispatch, FunctionComponent, SetStateAction, useRef, useState } from "react"; +import { ChangeEventHandler, FunctionComponent, useRef, useState } from "react"; +import { FilterBox } from "../../components/FilterBox"; type TableActionProps = { - query: string - handleChange: ChangeEventHandler -} + query: string; + handleChange: ChangeEventHandler; +}; -export const TableAction: FunctionComponent = ({query, handleChange}) => { +export const TableAction: FunctionComponent = ({ + query, + handleChange, +}) => { const searchInput = useRef(null); const [searchActive, setSearchActive] = useState(false); + const [showFilterBox, setShowFilterBox] = useState(false); const activateSearch = () => { setSearchActive(true); - if (searchInput.current === null) { return; } + if (searchInput.current === null) { + return; + } searchInput.current.focus(); searchInput.current.addEventListener("focusout", () => { if (searchInput.current?.value.trim() === "") { searchInput.current.value = ""; deactivateSearch(); } - }) - } + }); + }; const deactivateSearch = () => setSearchActive(false); + const toggleFilterBox = () => setShowFilterBox((prev) => !prev); + return (
- Filter + + Filter + + {showFilterBox && } Sort - activateSearch()}> + + />
); -}; +}; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..b5bb348 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "compass", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From a088dc16569010dafb6bd4daac3062bd4d1e657b Mon Sep 17 00:00:00 2001 From: Ilakkiya Senthilkumar Date: Fri, 19 Apr 2024 18:15:23 -0400 Subject: [PATCH 2/5] Ilakkiya_ContainsDropdown_Progress --- .../components/FilterBox/ContainsDropdown.tsx | 53 +++++++++++++++++++ .../{FilterBox.tsx => FilterBox/index.tsx} | 40 ++++++++++---- compass/components/Table/TableAction.tsx | 2 +- 3 files changed, 84 insertions(+), 11 deletions(-) create mode 100644 compass/components/FilterBox/ContainsDropdown.tsx rename compass/components/{FilterBox.tsx => FilterBox/index.tsx} (60%) diff --git a/compass/components/FilterBox/ContainsDropdown.tsx b/compass/components/FilterBox/ContainsDropdown.tsx new file mode 100644 index 0000000..1d942e4 --- /dev/null +++ b/compass/components/FilterBox/ContainsDropdown.tsx @@ -0,0 +1,53 @@ +import { useState } from "react"; +import { ChevronDownIcon } from "@heroicons/react/24/solid"; + +const mockTags = ["food relief", "period poverty", "nutrition education"]; + +type FilterType = "contains" | "does not contain" | "is empty" | "is not empty"; + +export const ContainsDropdown = ({ + isDropdownOpen, + setIsDropdownOpen, + filterType, + setFilterType, +}) => { + const handleFilterTypeChange = (type: FilterType) => { + setFilterType(type); + setIsDropdownOpen(false); + }; + + return ( +
+
+
handleFilterTypeChange("contains")} + > + Contains +
+
handleFilterTypeChange("does not contain")} + > + Does not contain +
+
handleFilterTypeChange("is empty")} + > + Is empty +
+
handleFilterTypeChange("is not empty")} + > + Is not empty +
+
+
+ ); +}; \ No newline at end of file diff --git a/compass/components/FilterBox.tsx b/compass/components/FilterBox/index.tsx similarity index 60% rename from compass/components/FilterBox.tsx rename to compass/components/FilterBox/index.tsx index a38574c..ce1e958 100644 --- a/compass/components/FilterBox.tsx +++ b/compass/components/FilterBox/index.tsx @@ -1,11 +1,17 @@ // FilterBox.tsx import { useState } from "react"; +import { ChevronDownIcon } from "@heroicons/react/24/solid"; +import { ContainsDropdown } from "./ContainsDropdown"; const mockTags = ["food relief", "period poverty", "nutrition education"]; +type FilterType = "contains" | "does not contain" | "is empty" | "is not empty"; + export const FilterBox = () => { const [selectedTags, setSelectedTags] = useState([]); const [searchTerm, setSearchTerm] = useState(""); + const [showContainsDropdown, setShowContainsDropdown] = useState(false); + const [filterType, setFilterType] = useState("contains"); const handleTagChange = (tag: string) => { setSelectedTags((prevTags) => @@ -38,18 +44,24 @@ export const FilterBox = () => { return (
- Tags contains: - + + Tags{" "} + +
- {selectedTags.length > 0 && renderSelectedTags()} - + {selectedTags.length > 0 && renderSelectedTags()} +
{mockTags @@ -68,6 +80,14 @@ export const FilterBox = () => {
))}
+ {showContainsDropdown && ( + + )} ); }; diff --git a/compass/components/Table/TableAction.tsx b/compass/components/Table/TableAction.tsx index 737b95a..852c3a4 100644 --- a/compass/components/Table/TableAction.tsx +++ b/compass/components/Table/TableAction.tsx @@ -1,7 +1,7 @@ // TableAction.tsx import { MagnifyingGlassIcon } from "@heroicons/react/24/solid"; import { ChangeEventHandler, FunctionComponent, useRef, useState } from "react"; -import { FilterBox } from "../../components/FilterBox"; +import { FilterBox } from "../FilterBox"; type TableActionProps = { query: string; From e088027ee04f45c91192805052ea236e54af2d32 Mon Sep 17 00:00:00 2001 From: Ilakkiya Senthilkumar Date: Sat, 20 Apr 2024 14:25:11 -0400 Subject: [PATCH 3/5] progress --- compass/components/FilterBox/ContainsDropdown.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/compass/components/FilterBox/ContainsDropdown.tsx b/compass/components/FilterBox/ContainsDropdown.tsx index 1d942e4..00889e2 100644 --- a/compass/components/FilterBox/ContainsDropdown.tsx +++ b/compass/components/FilterBox/ContainsDropdown.tsx @@ -24,25 +24,25 @@ export const ContainsDropdown = ({ }`} >
handleFilterTypeChange("contains")} > Contains
handleFilterTypeChange("does not contain")} > Does not contain
handleFilterTypeChange("is empty")} > Is empty
handleFilterTypeChange("is not empty")} > Is not empty From 80b450fa604b8e95638e3156e6eb151d1b7d8f22 Mon Sep 17 00:00:00 2001 From: Ilakkiya Senthilkumar Date: Sat, 20 Apr 2024 15:30:37 -0400 Subject: [PATCH 4/5] 4/20 meeting progress --- compass/components/FilterBox/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/compass/components/FilterBox/index.tsx b/compass/components/FilterBox/index.tsx index ce1e958..5faf7d4 100644 --- a/compass/components/FilterBox/index.tsx +++ b/compass/components/FilterBox/index.tsx @@ -42,7 +42,7 @@ export const FilterBox = () => { )); return ( -
+
Tags{" "} From a8e74f13eb664741f9b288e3047e9d918ce71bed Mon Sep 17 00:00:00 2001 From: Ilakkiya Senthilkumar Date: Sat, 20 Apr 2024 15:30:48 -0400 Subject: [PATCH 5/5] 4/20 meeting progress --- compass/components/Table/TableAction.tsx | 2 +- compass/components/resource/LandingSearchBar.tsx | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/compass/components/Table/TableAction.tsx b/compass/components/Table/TableAction.tsx index 852c3a4..0b20d32 100644 --- a/compass/components/Table/TableAction.tsx +++ b/compass/components/Table/TableAction.tsx @@ -37,7 +37,7 @@ export const TableAction: FunctionComponent = ({ return (
Filter diff --git a/compass/components/resource/LandingSearchBar.tsx b/compass/components/resource/LandingSearchBar.tsx index f52b6ba..724131b 100644 --- a/compass/components/resource/LandingSearchBar.tsx +++ b/compass/components/resource/LandingSearchBar.tsx @@ -1,9 +1,12 @@ -import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid" +import { ChevronDownIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid" import React, { useState } from 'react'; import Image from 'next/image'; +import { FilterBox } from "../FilterBox"; export const LandingSearchBar: React.FC = () => { const [searchTerm, setSearchTerm] = useState(''); + const [showFilterBox, setShowFilterBox] = useState(false); + const toggleFilterBox = () => setShowFilterBox((prev) => !prev); const handleSearchChange = (event: React.ChangeEvent) => { setSearchTerm(event.target.value); @@ -34,7 +37,9 @@ export const LandingSearchBar: React.FC = () => {