From 66e16d2e9d456b0a9b499dc9075832fb0577ef7d Mon Sep 17 00:00:00 2001 From: Leonardo Trevizo Date: Mon, 6 Oct 2025 21:19:47 -0600 Subject: [PATCH] Added Search bar Created Input search bar -> SearchByBar.tsx. Simplified the functionality of SearchByBar.tsx creating InputSearch.tsx & CascaderSearch.tsx. Modified NewProductButton.tsx style to match the style of the new search bar, as these components share the same space. Fixed undesired behavior on the SearchContext.tsx by allowing null values Updated EncoraContent.tsx to include the new Search Bar. Testing is pending Signed-off-by: Leonardo Trevizo --- .../src/components/EncoraContent.tsx | 18 +++++++-- .../segment1-search_product/SearchByBar.tsx | 24 ++++++++++++ .../input-bars/CascaderSearch.tsx | 36 +++++++++++++++++ .../input-bars/InputSearch.tsx | 39 +++++++++++++++++++ .../segment2-new_product/NewProductButton.tsx | 9 ++++- .../src/context/SearchContext.tsx | 8 ++-- 6 files changed, 125 insertions(+), 9 deletions(-) create mode 100644 inventory-manager/src/components/segment1-search_product/SearchByBar.tsx create mode 100644 inventory-manager/src/components/segment1-search_product/input-bars/CascaderSearch.tsx create mode 100644 inventory-manager/src/components/segment1-search_product/input-bars/InputSearch.tsx diff --git a/inventory-manager/src/components/EncoraContent.tsx b/inventory-manager/src/components/EncoraContent.tsx index ed1d125..797eda1 100644 --- a/inventory-manager/src/components/EncoraContent.tsx +++ b/inventory-manager/src/components/EncoraContent.tsx @@ -1,20 +1,30 @@ import React from 'react'; -import {Layout} from 'antd'; +import {Col, Layout} from 'antd'; import NewProductButton from "./segment2-new_product/NewProductButton"; import InventoryTableObj from "./segment3-table/segment/InventoryTableObj"; import {SearchProvider} from "../context/SearchContext"; import InventoryMetricsTable from "./segment4-metrics/InventoryMetricsTable"; import {DataProvider} from "../context/DataContext"; +import SearchByComponent from "./segment1-search_product/SearchByBar"; const HomePageContent: React.FC = () => { - return (
-
- +
+ + + + + +
diff --git a/inventory-manager/src/components/segment1-search_product/SearchByBar.tsx b/inventory-manager/src/components/segment1-search_product/SearchByBar.tsx new file mode 100644 index 0000000..c8387ac --- /dev/null +++ b/inventory-manager/src/components/segment1-search_product/SearchByBar.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Form } from 'antd'; +import InputSearch from "./input-bars/InputSearch"; +import CascaderSearch from "./input-bars/CascaderSearch"; + +const FiltersForm: React.FC = () => { + return ( +
+ + + + + + + + + + + +
+ ); +}; + +export default FiltersForm; diff --git a/inventory-manager/src/components/segment1-search_product/input-bars/CascaderSearch.tsx b/inventory-manager/src/components/segment1-search_product/input-bars/CascaderSearch.tsx new file mode 100644 index 0000000..5169df2 --- /dev/null +++ b/inventory-manager/src/components/segment1-search_product/input-bars/CascaderSearch.tsx @@ -0,0 +1,36 @@ +import { Cascader } from 'antd'; +import React from 'react'; +import { useSearchContext } from '../../../context/SearchContext'; + +const STOCK_OPTIONS = [ + { label: 'Everything', value: '0' }, + { label: 'Stock', value: '1' }, + { label: 'No stock', value: '2' }, +]; + +const CascaderSearch: React.FC = () => { + const { stockQuantity, setParams } = useSearchContext(); + + const value = stockQuantity !== undefined ? [String(stockQuantity)] : undefined; + + const onChange = (val?: string[]) => { + if (!val || val.length === 0) { + setParams({ stockQuantity: undefined }); + } else { + setParams({ stockQuantity: Number(val[0]) }); + } + }; + + return ( + + ); +}; + +export default CascaderSearch; diff --git a/inventory-manager/src/components/segment1-search_product/input-bars/InputSearch.tsx b/inventory-manager/src/components/segment1-search_product/input-bars/InputSearch.tsx new file mode 100644 index 0000000..8eab4c6 --- /dev/null +++ b/inventory-manager/src/components/segment1-search_product/input-bars/InputSearch.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import {Input} from "antd"; +import {useSearchContext} from "../../../context/SearchContext"; +import {Product} from "../../../types/Product"; + +interface Props { + parameter: keyof Product; +} + +const InputSearch: React.FC = ({parameter}) => { + + const {setParams} = useSearchContext(); + + function onChange(e: React.ChangeEvent) { + const next = e.target.value; + if (!e.target.value) { + if (parameter === 'name') setParams({name: null}); + if (parameter === 'category') setParams({category: null}); + } else { + if (parameter === 'name') setParams({name: next}); + if (parameter === 'category') setParams({category: next}); + } + } + + const getPlaceholder = (): string => { + if (parameter === 'name') return 'Watermelon'; + if (parameter === 'category') return 'Food'; + return ''; + }; + + return ( + + ); +} + +export default InputSearch; \ No newline at end of file diff --git a/inventory-manager/src/components/segment2-new_product/NewProductButton.tsx b/inventory-manager/src/components/segment2-new_product/NewProductButton.tsx index aeef65d..e112554 100644 --- a/inventory-manager/src/components/segment2-new_product/NewProductButton.tsx +++ b/inventory-manager/src/components/segment2-new_product/NewProductButton.tsx @@ -11,7 +11,14 @@ const NewProductButton = () => { } return ( -
+
(defaultValues); export const useSearchContext = () => useContext(SearchContext); export const SearchProvider: React.FC<{ children: React.ReactNode }> = ({children}) => { - const [name, setName] = useState(''); + const [name, setName] = useState(''); const [stockQuantity, setStockQuantity] = useState(0); const [page, setPage] = useState(0); const [sort, setSort] = useState(['']); - const [category, setCategory] = useState(''); + const [category, setCategory] = useState(''); const setParams = (params: Partial) => { if (params.name !== undefined && params.name !== '') setName(params.name);