keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-12 09:31:07 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleaned up new delete/new product query refresh and added search to products page

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-09 17:05:15 +08:00
parent c51c36c367
commit 46ddb25709
3 changed files with 73 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/Components/ProductsPage/ViewManager.tsx
View file

@ -10,6 +10,7 @@ export interface props {}
export default function ViewManager(props: ProductList) {
const [tableView, toggleTableView] = useState(true);
const [searchTerm, setSearchTerm] = useState("");
if (props.Products.length === 0) {
return (
<div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
@ -22,15 +23,81 @@ export default function ViewManager(props: ProductList) {
if (tableView) {
return (
<div>
<Switch onClick={() => toggleTableView(!tableView)} />
<TableView Products={props.Products} />
<div style={styles.content_row}>
<Switch
style={{ flex: 1 }}
onClick={() => toggleTableView(!tableView)}
/>
<div style={{ flex: 8 }} />
<div
style={{
...styles.content_row,
...{ flex: 1, justifyContent: "flex-end" },
}}
>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Search&nbsp;
</p>
<input
style={{
...{
flex: 5,
height: "2rem",
},
...styles.text_S,
}}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value);
}}
maxLength={20}
/>
</div>
</div>
<TableView
Products={props.Products.filter((Product) =>
Product.name.toLowerCase().includes(searchTerm)
)}
/>
</div>
);
} else {
return (
<div>
<Switch onClick={() => toggleTableView(!tableView)} />
<BlobView Products={props.Products} />
<div style={styles.content_row}>
<Switch
style={{ flex: 1 }}
onClick={() => toggleTableView(!tableView)}
/>
<div style={{ flex: 8 }} />
<div
style={{
...styles.content_row,
...{ flex: 1, justifyContent: "flex-end" },
}}
>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Search&nbsp;
</p>
<input
style={{
...{
flex: 5,
height: "2rem",
},
...styles.text_S,
}}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value);
}}
maxLength={20}
/>
</div>
</div>
<BlobView
Products={props.Products.filter((Product) =>
Product.name.toLowerCase().includes(searchTerm)
)}
/>
</div>
);
}