From 62558a47f2fb5764e1abd6d584625cf0af9f98f1 Mon Sep 17 00:00:00 2001 From: jurenroy Date: Thu, 2 Mar 2023 18:31:21 +0800 Subject: [PATCH] Icons,Add&Delete Product, Buttons,Color Indicator --- src/components/Icons/AddIcon/AddIcon.tsx | 15 +++ .../Icons/CancelIcon/CancelIcon.tsx | 27 ++++ .../Icons/DeleteIcon/DeleteIcon.tsx | 17 +++ src/components/Icons/EditIcon/EditIcon.tsx | 19 +++ src/components/ProductInfo/ProductInfo.tsx | 50 +++++++- .../ProductsLists/ProductsLists.tsx | 6 +- src/routes/Products/AddProduct/AddProduct.tsx | 119 +++++++++++++----- .../Products/EditProduct/EditProduct.tsx | 69 +++++++--- src/routes/Products/Products.tsx | 24 +++- 9 files changed, 289 insertions(+), 57 deletions(-) create mode 100644 src/components/Icons/AddIcon/AddIcon.tsx create mode 100644 src/components/Icons/CancelIcon/CancelIcon.tsx create mode 100644 src/components/Icons/DeleteIcon/DeleteIcon.tsx create mode 100644 src/components/Icons/EditIcon/EditIcon.tsx diff --git a/src/components/Icons/AddIcon/AddIcon.tsx b/src/components/Icons/AddIcon/AddIcon.tsx new file mode 100644 index 0000000..c0bf219 --- /dev/null +++ b/src/components/Icons/AddIcon/AddIcon.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function AddIcon(props: props) { + return ( +
+ + + +
+ ); +} diff --git a/src/components/Icons/CancelIcon/CancelIcon.tsx b/src/components/Icons/CancelIcon/CancelIcon.tsx new file mode 100644 index 0000000..cefe1a8 --- /dev/null +++ b/src/components/Icons/CancelIcon/CancelIcon.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} + +export default function CancelIcon(props: props) { + return ( +
+ + + + +
+ ); +} diff --git a/src/components/Icons/DeleteIcon/DeleteIcon.tsx b/src/components/Icons/DeleteIcon/DeleteIcon.tsx new file mode 100644 index 0000000..c67f0d7 --- /dev/null +++ b/src/components/Icons/DeleteIcon/DeleteIcon.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function DeleteIcon(props: props) { + return ( +
+ + + + + +
+ ); +} diff --git a/src/components/Icons/EditIcon/EditIcon.tsx b/src/components/Icons/EditIcon/EditIcon.tsx new file mode 100644 index 0000000..3c497de --- /dev/null +++ b/src/components/Icons/EditIcon/EditIcon.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function EditIcon(props: props) { + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx index 348f5db..1e2aca1 100644 --- a/src/components/ProductInfo/ProductInfo.tsx +++ b/src/components/ProductInfo/ProductInfo.tsx @@ -1,6 +1,10 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; import { ProductType } from '../ProductType/ProductType'; import { useNavigate } from 'react-router-dom'; +import styles from '../../styles'; +import EditIcon from "../../Components/Icons/EditIcon/EditIcon"; +import DeleteIcon from "../../Components/Icons/DeleteIcon/DeleteIcon"; +import ProductsLists from "../../Components/ProductsLists/ProductsLists"; type ProductInfoProps = { products: ProductType[]; @@ -15,7 +19,20 @@ export default function ProductInfo(props: ProductInfoProps) { }; const handleDelete = (id: number) => { + const newProductsList = products.filter(product => product.id !== id); console.log(`Deleting product with ID ${id}`); + console.log(newProductsList); // optional, to check that the product was removed from the array + ProductsLists.splice(id-1, 1,); + }; + + const getStocksColor = (stocks: number) => { + if (stocks >= 10) { + return 'green'; + } else if (stocks >= 4) { + return 'orange'; + } else { + return 'red'; + } }; return ( @@ -31,13 +48,40 @@ export default function ProductInfo(props: ProductInfoProps) { {products.map((product) => ( - + {product.id.toString().padStart(3, '0')} {product.name} {product.lastModified} - - +
+ + +
))} diff --git a/src/components/ProductsLists/ProductsLists.tsx b/src/components/ProductsLists/ProductsLists.tsx index 515a2d8..b66bd18 100644 --- a/src/components/ProductsLists/ProductsLists.tsx +++ b/src/components/ProductsLists/ProductsLists.tsx @@ -3,19 +3,19 @@ const ProductsLists = [ id: 1, name: 'Product 1', stocks: 10, - lastModified: '2022-02-24' + lastModified: '3/2/2023, 2:11:45 PM' }, { id: 2, name: 'Product 2', stocks: 5, - lastModified: '2022-02-23' + lastModified: '3/2/2023, 2:21:23 PM' }, { id: 3, name: 'Product 3', stocks: 15, - lastModified: '2022-02-25' + lastModified: '3/2/2023, 1:35:56 PM' }, // add more products here ]; diff --git a/src/routes/Products/AddProduct/AddProduct.tsx b/src/routes/Products/AddProduct/AddProduct.tsx index d36e1b8..687d6f8 100644 --- a/src/routes/Products/AddProduct/AddProduct.tsx +++ b/src/routes/Products/AddProduct/AddProduct.tsx @@ -1,41 +1,47 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; -import { ProductType } from "../../../Components/ProductType/ProductType"; -import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; -import styles from "../../../styles"; -import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; - import { Table, TableBody, TableCell, TableContainer, + TableHead, TableRow, + TextField, } from "@mui/material"; +import { ProductType } from "../../../Components/ProductType/ProductType"; +import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; +import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; +import AddIcon from "../../../Components/Icons/AddIcon/AddIcon"; +import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon"; +import styles from "../../../styles"; export default function AddProduct() { - const [name, setName] = useState(""); - const [stocks, setStocks] = useState(""); const navigate = useNavigate(); - const handleNameChange = (event: React.ChangeEvent) => { - setName(event.target.value); - }; + const [name, setName] = useState(""); + const [stocks, setStocks] = useState(""); - const handleStocksChange = (event: React.ChangeEvent) => { - setStocks(event.target.value); + const handleStocksChange = ( + event: React.ChangeEvent + ) => { + const value = parseInt(event.target.value); + if (!isNaN(value) && value >= 0) { + setStocks(value.toString()); + } }; const handleAddProduct = () => { - if (name && stocks) { - const newProduct: ProductType = { - id: ProductsLists.length + 1, - name: name, - stocks: parseInt(stocks), - lastModified: new Date().toLocaleString(), - }; - ProductsLists.push(newProduct); - } + const maxId = Math.max(...ProductsLists.map((product) => product.id)); + const newProduct: ProductType = { + id: maxId + 1, + name: name, + stocks: parseInt(stocks), + lastModified: new Date().toLocaleString(), + }; + + ProductsLists.push(newProduct); + navigate("/Products"); }; @@ -50,26 +56,73 @@ export default function AddProduct() {

Add Product

- +
+ + + Product Name + Stocks + Actions + + - Name: - - - - - - Stocks: - - + + setName(e.target.value)} + InputProps={{ style: { color: "white" } }} + style={{ border: "1px solid white" }} + /> + + + + +
+ + +
+

- - +
+ +
); } diff --git a/src/routes/Products/EditProduct/EditProduct.tsx b/src/routes/Products/EditProduct/EditProduct.tsx index 5ffc8ed..09993f6 100644 --- a/src/routes/Products/EditProduct/EditProduct.tsx +++ b/src/routes/Products/EditProduct/EditProduct.tsx @@ -12,8 +12,11 @@ import { import { ProductType } from "../../../Components/ProductType/ProductType"; import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; +import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon"; +import EditIcon from "../../../Components/Icons/EditIcon/EditIcon"; import styles from "../../../styles"; + type EditProductParams = { id?: string; }; @@ -26,15 +29,22 @@ export default function EditProduct() { const [stocks, setStocks] = useState(""); useEffect(() => { - const product = ProductsLists.find((product) => product.id.toString().padStart(3, '0') === id); + const product = ProductsLists.find( + (product) => product.id.toString().padStart(3, "0") === id + ); if (product) { setName(product.name); setStocks(product.stocks.toString()); } }, [id]); - const handleStocksChange = (event: React.ChangeEvent) => { - setStocks(event.target.value); + const handleStocksChange = ( + event: React.ChangeEvent + ) => { + const value = parseInt(event.target.value); + if (!isNaN(value) && value >= 0) { + setStocks(value.toString()); + } }; const handleUpdateProduct = () => { @@ -45,7 +55,9 @@ export default function EditProduct() { lastModified: new Date().toLocaleString(), }; - const index = ProductsLists.findIndex((product) => product.id.toString().padStart(3, '0') === id); + const index = ProductsLists.findIndex( + (product) => product.id.toString().padStart(3, "0") === id + ); ProductsLists.splice(index, 1, updatedProduct); navigate("/Products"); @@ -62,35 +74,64 @@ export default function EditProduct() {

Edit Product

- +
- Product ID - Product Name - Stocks + Product ID + Product Name + Stocks + Actions - + - {id} - {name} - + {id} + {name} + + +
+ + +
+

- - ); } diff --git a/src/routes/Products/Products.tsx b/src/routes/Products/Products.tsx index a3c1d07..11558f3 100644 --- a/src/routes/Products/Products.tsx +++ b/src/routes/Products/Products.tsx @@ -2,6 +2,7 @@ import React from "react"; import styles from "../../styles"; import { useNavigate } from "react-router-dom"; import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon"; +import AddIcon from "../../Components/Icons/AddIcon/AddIcon"; import ProductInfo from "../../Components/ProductInfo/ProductInfo"; import ProductsLists from "../../Components/ProductsLists/ProductsLists"; @@ -10,12 +11,27 @@ export default function Products() { return (
-
- -

Products

+
+
+ +

Products

+
+
-
); }