keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-16 22:29:24 +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:
keannu125 2023-03-09 17:05:15 +08:00
parent c51c36c367
commit 46ddb25709
3 changed files with 73 additions and 6 deletions
Show stats 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>
);
}

2
src/Routes/NewProduct/NewProduct.tsx
View file

@ -14,7 +14,7 @@ export default function NewProduct() {
mutationFn: AddProduct,
onSuccess: () => {
queryClient.invalidateQueries("products");
queryClient.invalidateQueries("logs");
queryClient.invalidateQueries("product");
queryClient.invalidateQueries("logs");
},
});

2
src/Routes/Products/Products.tsx
View file

@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import styles from "../../styles";
import { useNavigate } from "react-router-dom";
import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";