keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-17 06:39:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made products page fully functional with delete product

Browse source
This commit is contained in:
keannu125 2023-03-06 21:06:50 +08:00
parent 3ac7785c3c
commit 57f11b024b
9 changed files with 134 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,11 +4,21 @@ import { Switch } from "@mui/material";
import TableView from "../../Components/ProductsPage/TableView/TableView"; import TableView from "../../Components/ProductsPage/TableView/TableView";
import BlobView from "../../Components/ProductsPage/BlobView/BlobView"; import BlobView from "../../Components/ProductsPage/BlobView/BlobView";
import { ProductList } from "../../Interfaces/Interfaces"; import { ProductList } from "../../Interfaces/Interfaces";
import styles from "../../styles";
export interface props {} export interface props {}
export default function ViewManager(props: ProductList) { export default function ViewManager(props: ProductList) {
const [tableView, toggleTableView] = useState(false); const [tableView, toggleTableView] = useState(true);
if (props.Products.length === 0) {
return (
<div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
<p style={{ ...styles.text_white, ...styles.text_L }}>
No products yet. Add one!
</p>
</div>
);
}
if (tableView) { if (tableView) {
return ( return (
<div> <div>

124
src/Routes/Dashboard/Dashboard.tsx
View file

@ -16,7 +16,7 @@ export default function Dashboard() {
<LoginChecker /> <LoginChecker />
<div style={styles.flex_row}> <div style={styles.flex_row}>
<HomeIcon size={64} color="white" /> <HomeIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</h1> <p style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</p>
</div> </div>
<div <div
style={{ style={{
@ -34,16 +34,16 @@ export default function Dashboard() {
> >
<div style={styles.content_row}> <div style={styles.content_row}>
<TotalProductsIcon size={64} color="white" /> <TotalProductsIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}> <p style={{ ...styles.text_white, ...styles.text_XL }}>
Total Products Total Products
</h1> </p>
</div> </div>
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <p style={{ ...styles.text_white, ...styles.text_L }}>
2546 Unique Items 2546 Unique Items
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <p style={{ ...styles.text_white, ...styles.text_L }}>
In inventory In inventory
</h1> </p>
</div> </div>
<div style={styles.flex_row}> <div style={styles.flex_row}>
<div <div
@ -54,24 +54,24 @@ export default function Dashboard() {
> >
<div style={styles.content_row}> <div style={styles.content_row}>
<StatsIcon size={64} color="white" /> <StatsIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}> <p style={{ ...styles.text_white, ...styles.text_XL }}>
Current Session Current Session
</h1> </p>
</div> </div>
<div style={styles.content_row}> <div style={styles.content_row}>
<ColoredCube size={32} color="#a48e41" /> <ColoredCube size={32} color="#a48e41" />
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <p style={{ ...styles.text_white, ...styles.text_L }}>
Added Added
</h1> </p>
</div> </div>
<h1 style={{ ...styles.text_white, ...styles.text_L }}>254</h1> <p style={{ ...styles.text_white, ...styles.text_L }}>254</p>
<div style={styles.content_row}> <div style={styles.content_row}>
<ColoredCube size={32} color="#a44141" /> <ColoredCube size={32} color="#a44141" />
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <p style={{ ...styles.text_white, ...styles.text_L }}>
Removed Removed
</h1> </p>
</div> </div>
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>118</h1> <p style={{ ...styles.text_white, ...styles.text_XL }}>118</p>
</div> </div>
<div <div
style={{ style={{
@ -89,16 +89,16 @@ export default function Dashboard() {
> >
<div style={styles.content_row}> <div style={styles.content_row}>
<LowStockIcon size={64} color="white" /> <LowStockIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <p style={{ ...styles.text_white, ...styles.text_L }}>
Low Stock Low Stock
</h1> </p>
</div> </div>
<h1 style={{ ...styles.text_white, ...styles.text_S }}> <p style={{ ...styles.text_white, ...styles.text_S }}>
Canned Pagmamahal Canned Pagmamahal
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_S }}> <p style={{ ...styles.text_white, ...styles.text_S }}>
In Stock: 3 In Stock: 3
</h1> </p>
</div> </div>
<div <div
style={{ style={{
@ -108,21 +108,21 @@ export default function Dashboard() {
> >
<div style={styles.content_row}> <div style={styles.content_row}>
<RecentlyAddedIcon size={64} color="white" /> <RecentlyAddedIcon size={64} color="white" />
<h1 <p
style={{ style={{
...styles.text_white, ...styles.text_white,
...styles.text_L, ...styles.text_L,
}} }}
> >
Recently Added Recently Added
</h1> </p>
</div> </div>
<h1 style={{ ...styles.text_white, ...styles.text_M }}> <p style={{ ...styles.text_white, ...styles.text_M }}>
Zidane's Water Zidane's Water
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_S }}> <p style={{ ...styles.text_white, ...styles.text_S }}>
Added 02/17/2023 Added 02/17/2023
</h1> </p>
</div> </div>
</div> </div>
</div> </div>
@ -133,66 +133,58 @@ export default function Dashboard() {
<div style={styles.content_row}> <div style={styles.content_row}>
<LogsIcon size={64} color="white" /> <LogsIcon size={64} color="white" />
<div style={styles.wrapper_column}> <div style={styles.wrapper_column}>
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <p style={{ ...styles.text_white, ...styles.text_L }}>Recent</p>
Recent <p style={{ ...styles.text_white, ...styles.text_L }}>
</h1>
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
Transactions Transactions
</h1> </p>
</div> </div>
</div> </div>
<div style={{ marginBottom: "8px" }} /> <div style={{ marginBottom: "8px" }} />
<h1 style={{ ...styles.text_white, ...styles.text_M }}> <p style={{ ...styles.text_white, ...styles.text_M }}>
Kopiko Blanca Kopiko Blanca
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_S }}> <p style={{ ...styles.text_white, ...styles.text_S }}>Added: 96</p>
Added: 96 <p style={{ ...styles.text_white, ...styles.text_S }}>
</h1>
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
Removed: 105 Removed: 105
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_XS }}> <p style={{ ...styles.text_white, ...styles.text_XS }}>
02/17/2023 02/17/2023
</h1> </p>
<div style={{ marginBottom: "8px" }} /> <div style={{ marginBottom: "8px" }} />
<h1 style={{ ...styles.text_white, ...styles.text_M }}> <p style={{ ...styles.text_white, ...styles.text_M }}>
Zidane's Water Zidane's Water
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_S }}> <p style={{ ...styles.text_white, ...styles.text_S }}>Added: 49</p>
Added: 49 <p style={{ ...styles.text_white, ...styles.text_S }}>
</h1>
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
Removed: 24 Removed: 24
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_XS }}> <p style={{ ...styles.text_white, ...styles.text_XS }}>
02/17/2023 02/17/2023
</h1> </p>
<div style={{ marginBottom: "8px" }} /> <div style={{ marginBottom: "8px" }} />
<h1 style={{ ...styles.text_white, ...styles.text_M }}> <p style={{ ...styles.text_white, ...styles.text_M }}>
Dan's Beefed Corn Dan's Beefed Corn
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_S }}> <p style={{ ...styles.text_white, ...styles.text_S }}>Added: 32</p>
Added: 32 <p style={{ ...styles.text_white, ...styles.text_S }}>
</h1>
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
Removed: 64 Removed: 64
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_XS }}> <p style={{ ...styles.text_white, ...styles.text_XS }}>
02/17/2023 02/17/2023
</h1> </p>
<div style={{ marginBottom: "8px" }} /> <div style={{ marginBottom: "8px" }} />
<div style={styles.content_column}> <div style={styles.content_column}>
<h1 style={{ ...styles.text_white, ...styles.text_M }}> <p style={{ ...styles.text_white, ...styles.text_M }}>
Canned Pagmamahal Canned Pagmamahal
</h1> </p>
</div> </div>
<h1 style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</h1> <p style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</p>
<h1 style={{ ...styles.text_white, ...styles.text_S }}> <p style={{ ...styles.text_white, ...styles.text_S }}>
Removed: 60 Removed: 60
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_XS }}> <p style={{ ...styles.text_white, ...styles.text_XS }}>
02/17/2023 02/17/2023
</h1> </p>
</div> </div>
</div> </div>
</div> </div>

4
src/Routes/Login/Login.tsx
View file

@ -36,9 +36,9 @@ export default function Login() {
> >
<div style={styles.flex_row}> <div style={styles.flex_row}>
<LoginIcon size={64} color="white" /> <LoginIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}> <p style={{ ...styles.text_white, ...styles.text_XL }}>
Login to Ivy Login to Ivy
</h1> </p>
</div> </div>
<div style={styles.flex_row}> <div style={styles.flex_row}>
<p style={{ ...styles.text_white, ...styles.text_M }}>Username</p> <p style={{ ...styles.text_white, ...styles.text_M }}>Username</p>

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

@ -18,7 +18,7 @@ export default function Logs() {
<LoginChecker /> <LoginChecker />
<div style={styles.flex_row}> <div style={styles.flex_row}>
<LogsIcon size={64} color="white" /> <LogsIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Logs</h1> <p style={{ ...styles.text_white, ...styles.text_XL }}>Logs</p>
</div> </div>
<TableContainer <TableContainer
style={{ style={{

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

@ -25,9 +25,7 @@ export default function NewProduct() {
<div style={{ ...styles.content_row, ...{ flex: 1 } }}> <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}> <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<AddIcon size={64} color="white" /> <AddIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}> <p style={{ ...styles.text_white, ...styles.text_XL }}>Add Product</p>
Add Product
</h1>
</div> </div>
</div> </div>
<div style={styles.content_center}> <div style={styles.content_center}>

63
src/Routes/Product/Product.tsx
View file

@ -1,12 +1,14 @@
import * as React from "react"; import * as React from "react";
import styles from "../../styles"; import styles from "../../styles";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import LoginChecker from "../../Components/LoginChecker/LoginChecker"; import LoginChecker from "../../Components/LoginChecker/LoginChecker";
import { GetProduct } from "../../Components/Api/Api"; import { DeleteProduct, GetProduct } from "../../Components/Api/Api";
import { useQuery } from "react-query"; import { useMutation, useQuery, useQueryClient } from "react-query";
import ProductIcon from "../../Components/Icons/ProductIcon/ProductIcon";
export default function Product() { export default function Product() {
const navigate = useNavigate();
let { id } = useParams(); let { id } = useParams();
const { const {
data: product, data: product,
@ -16,17 +18,38 @@ export default function Product() {
queryKey: ["product", Number(id)], queryKey: ["product", Number(id)],
queryFn: () => GetProduct(Number(id)), queryFn: () => GetProduct(Number(id)),
}); });
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: DeleteProduct,
onSuccess: () => {
queryClient.invalidateQueries("products");
},
});
if (isLoading) { if (isLoading) {
return ( return (
<div> <div>
<LoginChecker /> <LoginChecker />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}> <p style={{ ...styles.text_white, ...styles.text_XL }}>
Individual Product View for id {id} Individual Product View for id {id}
</h1> </p>
<div style={styles.content_center}> <div style={styles.content_center}>
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <p style={{ ...styles.text_white, ...styles.text_L }}>
Loading product... Loading product...
</h1> </p>
</div>
</div>
);
} else if (error) {
return (
<div>
<LoginChecker />
<p style={{ ...styles.text_white, ...styles.text_XL }}>
Individual Product View for id {id}
</p>
<div style={styles.content_center}>
<p style={{ ...styles.text_red, ...styles.text_L }}>
Error loading product
</p>
</div> </div>
</div> </div>
); );
@ -34,24 +57,32 @@ export default function Product() {
return ( return (
<div> <div>
<LoginChecker /> <LoginChecker />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}> <div style={styles.content_row}>
Individual Product View for id {id} <ProductIcon size={64} color="white" />
</h1> <p style={{ ...styles.text_white, ...styles.text_XL }}>Product View</p>
</div>
<div style={styles.content_center}> <div style={styles.content_center}>
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <div style={{ ...styles.content_column, ...styles.content_column }}>
<p style={{ ...styles.text_white, ...styles.text_L }}>
Product Name: {product.name} Product Name: {product.name}
</h1> </p>
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <p style={{ ...styles.text_white, ...styles.text_L }}>
Date Added: {product.date_added} Date Added: {product.date_added}
</h1> </p>
</div>
<Button <Button
style={{ style={{
...styles.button_baseline, ...styles.button_baseline,
...{ backgroundColor: "#80b38b", justifySelf: "center" }, ...{ backgroundColor: "#a44141" },
}}
onClick={() => {
mutation.mutate(product.id);
navigate("/Products");
}} }}
variant="contained" variant="contained"
> >
Login Delete Product
</Button> </Button>
</div> </div>
</div> </div>

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

@ -25,16 +25,16 @@ export default function Products() {
<div style={{ ...styles.content_row, ...{ flex: 1 } }}> <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}> <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<ProductsIcon size={64} color="white" /> <ProductsIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}> <p style={{ ...styles.text_white, ...styles.text_XL }}>
Products Products
</h1> </p>
</div> </div>
</div> </div>
</div> </div>
<div style={{ ...styles.content_column, ...{ alignItems: "center" } }}> <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
<h1 style={{ ...styles.text_white, ...styles.text_L }}> <p style={{ ...styles.text_white, ...styles.text_L }}>
Loading products... Loading products...
</h1> </p>
</div> </div>
</div> </div>
); );
@ -45,16 +45,16 @@ export default function Products() {
<div style={{ ...styles.content_row, ...{ flex: 1 } }}> <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}> <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<ProductsIcon size={64} color="white" /> <ProductsIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}> <p style={{ ...styles.text_white, ...styles.text_XL }}>
Products Products
</h1> </p>
</div> </div>
</div> </div>
</div> </div>
<div style={{ ...styles.content_column, ...{ alignItems: "center" } }}> <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
<h1 style={{ ...styles.text_red, ...styles.text_L }}> <p style={{ ...styles.text_red, ...styles.text_L }}>
Error loading products Error loading products
</h1> </p>
</div> </div>
</div> </div>
); );
@ -65,9 +65,7 @@ export default function Products() {
<div style={{ ...styles.content_row, ...{ flex: 1 } }}> <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}> <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<ProductsIcon size={64} color="white" /> <ProductsIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}> <p style={{ ...styles.text_white, ...styles.text_XL }}>Products</p>
Products
</h1>
</div> </div>
<div <div
style={{ style={{

2
src/routes/Inventory/Inventory.tsx
View file

@ -19,7 +19,7 @@ export default function Inventory() {
<LoginChecker /> <LoginChecker />
<div style={styles.content_row}> <div style={styles.content_row}>
<InventoryIcon size={64} color="white" /> <InventoryIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</h1> <p style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</p>
</div> </div>
<TableContainer <TableContainer
style={{ style={{

3
src/styles.tsx
View file

@ -95,7 +95,7 @@ const styles: { [key: string]: React.CSSProperties } = {
gap: 4, gap: 4,
}, },
button_baseline: { button_baseline: {
width: "8rem", width: "12rem",
height: 32, height: 32,
border: "none", border: "none",
padding: 8, padding: 8,
@ -155,6 +155,7 @@ const styles: { [key: string]: React.CSSProperties } = {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
textAlign: "center", textAlign: "center",
alignItems: "center",
}, },
flex_row: { flex_row: {
display: "flex", display: "flex",