mirror of
https://github.com/lemeow125/Ivy-Frontend.git
synced 2024-11-17 06:39:25 +08:00
Made products page fully functional with delete product
This commit is contained in:
parent
3ac7785c3c
commit
57f11b024b
9 changed files with 134 additions and 104 deletions
|
|
@ -4,11 +4,21 @@ import { Switch } from "@mui/material";
|
|||
import TableView from "../../Components/ProductsPage/TableView/TableView";
|
||||
import BlobView from "../../Components/ProductsPage/BlobView/BlobView";
|
||||
import { ProductList } from "../../Interfaces/Interfaces";
|
||||
import styles from "../../styles";
|
||||
|
||||
export interface props {}
|
||||
|
||||
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) {
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default function Dashboard() {
|
|||
<LoginChecker />
|
||||
<div style={styles.flex_row}>
|
||||
<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
|
||||
style={{
|
||||
|
|
@ -34,16 +34,16 @@ export default function Dashboard() {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<TotalProductsIcon size={64} color="white" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Total Products
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
2546 Unique Items
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
In inventory
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.flex_row}>
|
||||
<div
|
||||
|
|
@ -54,24 +54,24 @@ export default function Dashboard() {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<StatsIcon size={64} color="white" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Current Session
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.content_row}>
|
||||
<ColoredCube size={32} color="#a48e41" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Added
|
||||
</h1>
|
||||
</p>
|
||||
</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}>
|
||||
<ColoredCube size={32} color="#a44141" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Removed
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>118</h1>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>118</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -89,16 +89,16 @@ export default function Dashboard() {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<LowStockIcon size={64} color="white" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Low Stock
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Canned Pagmamahal
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
In Stock: 3
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -108,21 +108,21 @@ export default function Dashboard() {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<RecentlyAddedIcon size={64} color="white" />
|
||||
<h1
|
||||
<p
|
||||
style={{
|
||||
...styles.text_white,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Recently Added
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Zidane's Water
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added 02/17/2023
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -133,66 +133,58 @@ export default function Dashboard() {
|
|||
<div style={styles.content_row}>
|
||||
<LogsIcon size={64} color="white" />
|
||||
<div style={styles.wrapper_column}>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Recent
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>Recent</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Transactions
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginBottom: "8px" }} />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Kopiko Blanca
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added: 96
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>Added: 96</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 105
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
</p>
|
||||
<div style={{ marginBottom: "8px" }} />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Zidane's Water
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added: 49
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>Added: 49</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 24
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
</p>
|
||||
<div style={{ marginBottom: "8px" }} />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Dan's Beefed Corn
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added: 32
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>Added: 32</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 64
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
</p>
|
||||
<div style={{ marginBottom: "8px" }} />
|
||||
<div style={styles.content_column}>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Canned Pagmamahal
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 60
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,9 +36,9 @@ export default function Login() {
|
|||
>
|
||||
<div style={styles.flex_row}>
|
||||
<LoginIcon size={64} color="white" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Login to Ivy
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.flex_row}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>Username</p>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default function Logs() {
|
|||
<LoginChecker />
|
||||
<div style={styles.flex_row}>
|
||||
<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>
|
||||
<TableContainer
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -25,9 +25,7 @@ export default function NewProduct() {
|
|||
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
||||
<AddIcon size={64} color="white" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Add Product
|
||||
</h1>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>Add Product</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={styles.content_center}>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import * as React from "react";
|
||||
import styles from "../../styles";
|
||||
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 { GetProduct } from "../../Components/Api/Api";
|
||||
import { useQuery } from "react-query";
|
||||
import { DeleteProduct, GetProduct } from "../../Components/Api/Api";
|
||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import ProductIcon from "../../Components/Icons/ProductIcon/ProductIcon";
|
||||
|
||||
export default function Product() {
|
||||
const navigate = useNavigate();
|
||||
let { id } = useParams();
|
||||
const {
|
||||
data: product,
|
||||
|
|
@ -16,17 +18,38 @@ export default function Product() {
|
|||
queryKey: ["product", Number(id)],
|
||||
queryFn: () => GetProduct(Number(id)),
|
||||
});
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation({
|
||||
mutationFn: DeleteProduct,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries("products");
|
||||
},
|
||||
});
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div>
|
||||
<LoginChecker />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Individual Product View for id {id}
|
||||
</h1>
|
||||
</p>
|
||||
<div style={styles.content_center}>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
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>
|
||||
);
|
||||
|
|
@ -34,24 +57,32 @@ export default function Product() {
|
|||
return (
|
||||
<div>
|
||||
<LoginChecker />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Individual Product View for id {id}
|
||||
</h1>
|
||||
<div style={styles.content_row}>
|
||||
<ProductIcon size={64} color="white" />
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>Product View</p>
|
||||
</div>
|
||||
|
||||
<div style={styles.content_center}>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Product Name: {product.name}
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Date Added: {product.date_added}
|
||||
</h1>
|
||||
<div style={{ ...styles.content_column, ...styles.content_column }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Product Name: {product.name}
|
||||
</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Date Added: {product.date_added}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
style={{
|
||||
...styles.button_baseline,
|
||||
...{ backgroundColor: "#80b38b", justifySelf: "center" },
|
||||
...{ backgroundColor: "#a44141" },
|
||||
}}
|
||||
onClick={() => {
|
||||
mutation.mutate(product.id);
|
||||
navigate("/Products");
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
Login
|
||||
Delete Product
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,16 +25,16 @@ export default function Products() {
|
|||
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
||||
<ProductsIcon size={64} color="white" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Products
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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...
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -45,16 +45,16 @@ export default function Products() {
|
|||
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
||||
<ProductsIcon size={64} color="white" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Products
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
</h1>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -65,9 +65,7 @@ export default function Products() {
|
|||
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
||||
<ProductsIcon size={64} color="white" />
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Products
|
||||
</h1>
|
||||
<p style={{ ...styles.text_white, ...styles.text_XL }}>Products</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default function Inventory() {
|
|||
<LoginChecker />
|
||||
<div style={styles.content_row}>
|
||||
<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>
|
||||
<TableContainer
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ const styles: { [key: string]: React.CSSProperties } = {
|
|||
gap: 4,
|
||||
},
|
||||
button_baseline: {
|
||||
width: "8rem",
|
||||
width: "12rem",
|
||||
height: 32,
|
||||
border: "none",
|
||||
padding: 8,
|
||||
|
|
@ -155,6 +155,7 @@ const styles: { [key: string]: React.CSSProperties } = {
|
|||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
textAlign: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
flex_row: {
|
||||
display: "flex",
|
||||
|
|
|
|||
Loading…
Reference in a new issue