edit product route

This commit is contained in:
jurenroy 2023-02-27 14:12:25 +08:00
parent a21adacab1
commit 88049d0367
5 changed files with 152 additions and 14 deletions

View file

@ -22,7 +22,7 @@ export default function InventoryInfo(props: ProductInfoProps) {
<TableBody>
{products.map((product) => (
<TableRow key={product.id}>
<TableCell style={{ color: 'white' }}>{product.id}</TableCell>
<TableCell style={{ color: 'white' }}>{product.id.toString().padStart(3, '0')}</TableCell>
<TableCell style={{ color: 'white' }}>{product.name}</TableCell>
<TableCell style={{ color: 'white' }}>{product.stocks}</TableCell>
<TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>

View file

@ -1,5 +1,6 @@
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
import { ProductType } from '../ProductType/ProductType';
import { useNavigate } from 'react-router-dom';
type ProductInfoProps = {
products: ProductType[];
@ -7,6 +8,15 @@ type ProductInfoProps = {
export default function ProductInfo(props: ProductInfoProps) {
const { products } = props;
const navigate = useNavigate();
const handleEdit = (id: number) => {
navigate(`/Products/EditProduct/${id.toString().padStart(3, '0')}`);
};
const handleDelete = (id: number) => {
console.log(`Deleting product with ID ${id}`);
};
return (
<TableContainer>
@ -16,14 +26,19 @@ export default function ProductInfo(props: ProductInfoProps) {
<TableCell style={{ color: 'white' }}>Product ID</TableCell>
<TableCell style={{ color: 'white' }}>Product Name</TableCell>
<TableCell style={{ color: 'white' }}>Last Modified</TableCell>
<TableCell style={{ color: 'white' }}>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{products.map((product) => (
<TableRow key={product.id}>
<TableCell style={{ color: 'white' }}>{product.id}</TableCell>
<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>
</TableCell>
</TableRow>
))}
</TableBody>