Icons,Add&Delete Product, Buttons,Color Indicator

2024-11-16 22:29:24 +08:00 · 2023-03-02 18:31:21 +08:00 · 2023-03-02 18:31:21 +08:00 · 62558a47f2
commit 62558a47f2
parent f45170d215
9 changed files with 289 additions and 57 deletions
--- a/src/components/Icons/AddIcon/AddIcon.tsx
+++ 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 (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 5v14M5 12h14" />
+      </svg>
+    </div>
+  );
+}
--- a/src/components/Icons/CancelIcon/CancelIcon.tsx
+++ 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 (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={props.color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M7.5 7.5l9 9M16.5 7.5l-9 9" />
+      </svg>
+    </div>
+  );
+}
--- a/src/components/Icons/DeleteIcon/DeleteIcon.tsx
+++ 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 (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 7h16M5 10v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V10" />
+        <path d="M10 10v-3a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3" />
+        <path d="M9 7h6" />
+      </svg>
+    </div>
+  );
+}
--- a/src/components/Icons/EditIcon/EditIcon.tsx
+++ 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 (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 17l-1.557 -4.386a2 2 0 0 1 1.923 -2.614h12.268a2 2 0 0 1 1.923 2.614l-1.558 4.386" />
+        <path d="M15 6h6v6" />
+        <path d="M10 21h5" />
+        <path d="M12 17v-5" />
+        <path d="M9 6h-6v15a2 2 0 0 0 2 2h15v-6" />
+      </svg>
+    </div>
+  );
+}
--- 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) {
        </TableHead>
        <TableBody>
          {products.map((product) => (
-            <TableRow key={product.id}>
+            <TableRow
+              key={product.id}
+              style={{
+                backgroundColor: getStocksColor(product.stocks),
+              }}
+            >
              <TableCell style={{ color: 'white' }}>{product.id.toString().padStart(3, '0')}</TableCell>
              <TableCell style={{ color: 'white' }}>{product.name}</TableCell>
              <TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
              <TableCell style={{ color: 'white' }}>
-                <button onClick={() => handleEdit(product.id)}>Edit</button>
-                <button onClick={() => handleDelete(product.id)}>Delete</button>
+                <div style={{ display: "flex", gap: 8 }}>
+                  <button onClick={() => handleEdit(product.id)}
+                    style={{
+                    ...styles.button_primary,
+                    display: "flex",
+                    alignItems: "center",
+                    backgroundColor: "transparent",
+                    borderRadius: 50,
+                  }}>
+                  <EditIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Edit</span>
+                  </button>
+                  <button onClick={() => handleDelete(product.id)}
+                    style={{
+                    ...styles.button_primary,
+                    display: "flex",
+                    alignItems: "center",
+                    backgroundColor: "transparent",
+                    borderRadius: 50,
+                  }}>
+                  <DeleteIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Delete</span>
+                  </button>
+                </div>
              </TableCell>
            </TableRow>
          ))}
--- 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
  ];
--- 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<HTMLInputElement>) => {
-    setName(event.target.value);
-  };
+  const [name, setName] = useState("");
+  const [stocks, setStocks] = useState("");

-  const handleStocksChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setStocks(event.target.value);
+  const handleStocksChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    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() {
        <h1 style={styles.text_large}>Add Product</h1>
      </div>
      <TableContainer>
-        <Table>
+        <Table style={{ color: "white" }}>
+          <TableHead>
+            <TableRow>
+              <TableCell style={{ color: "white"}}>Product Name</TableCell>
+              <TableCell style={{ color: "white"}}>Stocks</TableCell>
+              <TableCell style={{ color: 'white' }}>Actions</TableCell>
+            </TableRow>
+          </TableHead>
          <TableBody>
            <TableRow>
-              <TableCell>Name:</TableCell>
-              <TableCell>
-                <input type="text" id="name" value={name} onChange={handleNameChange} />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Stocks:</TableCell>
-              <TableCell>
-                <input type="text" id="stocks" value={stocks} onChange={handleStocksChange} />
+            <TableCell style={{ color: "white"}}>
+              <TextField
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                InputProps={{ style: { color: "white" } }}
+                style={{ border: "1px solid white" }}
+              />
+            </TableCell>
+              <TableCell style={{ color: "white" }}>
+                <TextField
+                  type="number"
+                  value={stocks}
+                  onChange={handleStocksChange}
+                  InputProps={{
+                    inputProps: { min: 0 },
+                    style: { color: "white" },
+                  }}
+                  style={{ color: "white", border: "1px solid white" }}
+                />
              </TableCell>
+              <TableCell style={{ color: 'white' }}>
+                <div style={{ display: "flex", gap: 8 }}>
+                <button onClick={handleAddProduct}
+                  style={{
+                  ...styles.button_primary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  backgroundColor: "#1d3b33",
+                  borderRadius: 50,
+                  }}>
+                  <AddIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Add</span>
+                </button>
+                <button onClick={handleCancel}
+                  style={{
+                  ...styles.button_primary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  backgroundColor: "#1d3b33",
+                  borderRadius: 50,
+                  }}>
+                  <CancelIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Cancel</span>
+                </button>
+                </div>
+                </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableContainer>
      <br />
-      <button onClick={handleAddProduct}>Add</button>
-      <button onClick={handleCancel}>Cancel</button>
+      <div style={{ display: 'flex', gap: 16,marginLeft: 395 }}>
+      
+      </div>
    </div>
  );
 }
--- 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<HTMLInputElement>) => {
-    setStocks(event.target.value);
+  const handleStocksChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    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() {
        <h1 style={styles.text_large}>Edit Product</h1>
      </div>
      <TableContainer>
-        <Table>
+        <Table style={{ color: "white", textAlign: "center" }}>
          <TableHead>
            <TableRow>
-              <TableCell>Product ID</TableCell>
-              <TableCell>Product Name</TableCell>
-              <TableCell>Stocks</TableCell>
+              <TableCell style={{ color: "white" }}>Product ID</TableCell>
+              <TableCell style={{ color: "white" }}>Product Name</TableCell>
+              <TableCell style={{ color: "white" }}>Stocks</TableCell>
+              <TableCell style={{ color: 'white' }}>Actions</TableCell>
            </TableRow>
          </TableHead>
-          <TableBody>
+          <TableBody style={{ textAlign: "center" }}>
            <TableRow>
-              <TableCell>{id}</TableCell>
-              <TableCell>{name}</TableCell>
-              <TableCell>
+              <TableCell style={{ color: "white" }}>{id}</TableCell>
+              <TableCell style={{ color: "white" }}>{name}</TableCell>
+              <TableCell style={{ color: "white" }}>
                <TextField
                  type="number"
                  value={stocks}
                  onChange={handleStocksChange}
                  InputProps={{
                    inputProps: { min: 0 },
+                    style: { color: "white" },
                  }}
+                  style={{ color: "white", border: "1px solid white" }}
                />
              </TableCell>
+              <TableCell style={{ color: 'white' }}>
+                <div style={{ display: "flex", gap: 8 }}>
+                <button onClick={handleUpdateProduct}
+                  style={{
+                  ...styles.button_primary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  backgroundColor: "#1d3b33",
+                  borderRadius: 50,
+                  }}>
+                  <EditIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Update</span>
+                </button>
+                <button onClick={handleCancel}
+                  style={{
+                  ...styles.button_primary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  backgroundColor: "#1d3b33",
+                  borderRadius: 50,
+                  }}>
+                  <CancelIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Cancel</span>
+                </button>
+                </div>
+              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableContainer>
      <br />
-      <button onClick={handleUpdateProduct}>Update</button>
-      <button onClick={handleCancel}>Cancel</button>
    </div>
  );
 }
--- 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 (
    <div style={{ margin: 32, height: "100%" }}>
-      <div style={styles.content_row}>
-        <ProductsIcon size={8} color="white" />
-        <h1 style={styles.text_large}>Products</h1>
+      <div style={{ ...styles.content_row, justifyContent: "space-between" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+          <ProductsIcon size={8} color="white" />
+          <h1 style={styles.text_large}>Products</h1>
+        </div>
+        <button
+          onClick={() => navigate("/Products/AddProduct")}
+          style={{
+            ...styles.button_primary,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            backgroundColor: "#1d3b33",
+            borderRadius: 50,
+          }}
+        >
+          <AddIcon size={7} color="white" />
+          <span style={styles.text_medium}>Add Product</span>
+        </button>
      </div>
      <ProductInfo products={ProductsLists} />
-      <button onClick={() => navigate("/Products/AddProduct")}>Add Product</button>
    </div>
  );
 }