From dc6c28d921762c56508af089ab74fd091eb9b2a9 Mon Sep 17 00:00:00 2001 From: BANANAPEEL202 Date: Tue, 29 Oct 2024 19:35:54 -0400 Subject: [PATCH 1/7] added clear button (not working for schemas) --- src/components/SearchBar.tsx | 63 ++++++++++++++++++++++++++++++++++-- 1 file changed, 61 insertions(+), 2 deletions(-) diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 5b553d2..2d5c82f 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { eventType, location } from "@/data/dataFilters"; import "@/css/SearchBar.css"; import SchemaSearch from "@/components/SchemaSearch"; +import { Button } from "@mantine/core"; interface SearchBarWithFilterProps { setFilteredData: React.Dispatch< @@ -12,6 +13,10 @@ interface SearchBarWithFilterProps { function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) { const [searchTerm, setSearchTerm] = useState(""); + const [selectedLocation, setSelectedLocation] = useState(""); + const [selectedEventType, setSelectedEventType] = useState(""); + const [beforeDate, setBeforeDate] = useState(""); + const [afterDate, setAfterDate] = useState(""); // const [filters] = useState({ // location: "", // eventType: "", @@ -98,8 +103,45 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) { filename: filt.filename, [name]: value, })); + + // Update local state based on input + switch (name) { + case "location": + setSelectedLocation(value); + break; + case "eventType": + setSelectedEventType(value); + break; + case "beforeDate": + setBeforeDate(value); + break; + case "afterDate": + setAfterDate(value); + break; + default: + break; + } } + // Clear all filters and search term + const handleClear = () => { + setSearchTerm(""); + setSearchFilters({ + notes: "", + filename: "", + location: "", + eventType: "", + beforeDate: "", + afterDate: "", + }); + setSearchTerm(""); + setSelectedLocation(""); + setSelectedEventType(""); + setBeforeDate(""); + setAfterDate(""); + clearSchema(); + }; + return (
{/* Display Filtered Data */} @@ -125,6 +167,7 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) { Location: @@ -158,9 +202,9 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) { @@ -169,14 +213,29 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
+
+ {/* Clear Button */} + + {/* Clear Button */} + +
); From aef274fd7df14cf14af87e1407be16ff841994cd Mon Sep 17 00:00:00 2001 From: BANANAPEEL202 Date: Tue, 29 Oct 2024 19:48:12 -0400 Subject: [PATCH 2/7] clearing schema --- src/components/SchemaSearch.tsx | 10 ++++++++-- src/components/SearchBar.tsx | 5 +++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/SchemaSearch.tsx b/src/components/SchemaSearch.tsx index 9577c88..e3731cf 100644 --- a/src/components/SchemaSearch.tsx +++ b/src/components/SchemaSearch.tsx @@ -1,12 +1,13 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Autocomplete, Button } from "@mantine/core"; import "@/css/SchemaSearch.css"; interface SchemaSearch { schemas: string[]; + clear: boolean; } -const SchemaSearch: React.FC = ({ schemas }) => { +const SchemaSearch: React.FC = ({ schemas, clear }) => { const [value, setValue] = useState(""); const [selectedSchema, setSelected] = useState([]); @@ -24,6 +25,7 @@ const SchemaSearch: React.FC = ({ schemas }) => { const clearSchema = () => { setSelected([]); + setValue(""); }; const handleKeyDown = (event: React.KeyboardEvent) => { @@ -33,6 +35,10 @@ const SchemaSearch: React.FC = ({ schemas }) => { } }; + useEffect(() => { + clearSchema(); + }, [clear]); + return (
!prev); }; return ( @@ -219,7 +220,7 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) { /> - +
Date: Tue, 29 Oct 2024 19:58:37 -0400 Subject: [PATCH 3/7] added search button and fixed functionality --- src/components/SearchBar.tsx | 12 ++++++++++-- src/routes/root.tsx | 8 +++----- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index dc2fd9e..6f4e6c8 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -9,9 +9,13 @@ interface SearchBarWithFilterProps { React.SetStateAction >; setSearchFilters: React.Dispatch>; + setSearch: React.Dispatch>; } -function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) { +function SearchBarWithFilter({ + setSearchFilters, + setSearch, +}: SearchBarWithFilterProps) { const [searchTerm, setSearchTerm] = useState(""); const [selectedLocation, setSelectedLocation] = useState(""); const [selectedEventType, setSelectedEventType] = useState(""); @@ -143,6 +147,10 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) { setClearSchemas((prev) => !prev); }; + const handleSearch = () => { + setSearch((prev) => !prev); + }; + return (
{/* Display Filtered Data */} @@ -233,7 +241,7 @@ function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) { Clear {/* Clear Button */} -
diff --git a/src/routes/root.tsx b/src/routes/root.tsx index 2c31790..881eec9 100644 --- a/src/routes/root.tsx +++ b/src/routes/root.tsx @@ -15,6 +15,7 @@ export default function Root() { beforeDate: "", afterDate: "", }); + const [search, setSearch] = useState(false); // const fetchData = async (filters: SearchFilter) => { // const { location, date, notes, eventType, filename } = filters; @@ -157,7 +158,7 @@ export default function Root() { setFilteredData(sortedData); }; getData(); - }, [searchFilters]); + }, [search]); return ( <> @@ -171,10 +172,7 @@ export default function Root() { />
- +
From e94ce730413198adc9560b9d6f34d66ea3591815 Mon Sep 17 00:00:00 2001 From: BANANAPEEL202 Date: Tue, 29 Oct 2024 20:01:40 -0400 Subject: [PATCH 4/7] fix build issue? --- src/components/SearchBar.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 6f4e6c8..16f0fb7 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -5,9 +5,6 @@ import SchemaSearch from "@/components/SchemaSearch"; import { Button } from "@mantine/core"; interface SearchBarWithFilterProps { - setFilteredData: React.Dispatch< - React.SetStateAction - >; setSearchFilters: React.Dispatch>; setSearch: React.Dispatch>; } From d3128bcecbb6936f66707dafc22a642164353a35 Mon Sep 17 00:00:00 2001 From: BANANAPEEL202 Date: Tue, 29 Oct 2024 20:05:11 -0400 Subject: [PATCH 5/7] change clear button styling --- src/components/SearchBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 16f0fb7..98f646d 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -234,7 +234,7 @@ function SearchBarWithFilter({ }} > {/* Clear Button */} - {/* Clear Button */} From 86eb4cde1d1952cabd20dd427407a1b0d53c3e41 Mon Sep 17 00:00:00 2001 From: BANANAPEEL202 Date: Tue, 29 Oct 2024 22:28:47 -0400 Subject: [PATCH 6/7] removing redudant features from schemasearch --- src/components/SchemaSearch.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/SchemaSearch.tsx b/src/components/SchemaSearch.tsx index e3731cf..c518d69 100644 --- a/src/components/SchemaSearch.tsx +++ b/src/components/SchemaSearch.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { Autocomplete, Button } from "@mantine/core"; +import { Autocomplete } from "@mantine/core"; import "@/css/SchemaSearch.css"; interface SchemaSearch { @@ -9,12 +9,13 @@ interface SchemaSearch { const SchemaSearch: React.FC = ({ schemas, clear }) => { const [value, setValue] = useState(""); - const [selectedSchema, setSelected] = useState([]); + //const [selectedSchema, setSelected] = useState([]); const filteredSchemas = schemas.filter((schema) => schema.toLowerCase().includes(value.toLowerCase()), ); - + { + /* const addSchema = (newSchema: string) => { if (!selectedSchema.includes(newSchema)) { setSelected([...selectedSchema, newSchema]); @@ -22,16 +23,18 @@ const SchemaSearch: React.FC = ({ schemas, clear }) => { alert("Schema already selected!"); } }; + */ + } const clearSchema = () => { - setSelected([]); + //setSelected([]); setValue(""); }; const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === "Enter" && filteredSchemas.length > 0) { setValue(filteredSchemas[0]); - addSchema(filteredSchemas[0]); + //addSchema(filteredSchemas[0]); } }; @@ -50,6 +53,7 @@ const SchemaSearch: React.FC = ({ schemas, clear }) => { onKeyDown={handleKeyDown} />
+ {/* {selectedSchema.length > 0 && (
@@ -58,11 +62,10 @@ const SchemaSearch: React.FC = ({ schemas, clear }) => {
  • {str}
    • ))} - +
    )} + */}
    ); }; From 193705fa17477bf04a66864b98ce5854b0706c9a Mon Sep 17 00:00:00 2001 From: BANANAPEEL202 Date: Tue, 29 Oct 2024 22:40:11 -0400 Subject: [PATCH 7/7] changing schemasearch component to multiselect --- src/components/SchemaSearch.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/SchemaSearch.tsx b/src/components/SchemaSearch.tsx index c518d69..f7f1c45 100644 --- a/src/components/SchemaSearch.tsx +++ b/src/components/SchemaSearch.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { Autocomplete } from "@mantine/core"; +import { MultiSelect } from "@mantine/core"; import "@/css/SchemaSearch.css"; interface SchemaSearch { @@ -44,13 +44,13 @@ const SchemaSearch: React.FC = ({ schemas, clear }) => { return (
    -
    {/*