feat: adding the edit button and logic
This commit is contained in:
Rodolfo Ruiz
@@ -1,60 +1,45 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Button, TextField, Typography, Grid } from '@mui/material';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Box, Button, TextField, Grid } from '@mui/material';
|
||||
|
||||
export default function AddProductForm({ onAdd }) {
|
||||
export default function AddOrEditProductForm({ onAdd, initialData }) {
|
||||
const [product, setProduct] = useState({
|
||||
name: '',
|
||||
price: '',
|
||||
supplier: '',
|
||||
provider: '',
|
||||
stock: '',
|
||||
category: '',
|
||||
category: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setProduct(initialData);
|
||||
} else {
|
||||
setProduct({
|
||||
name: '',
|
||||
price: '',
|
||||
provider: '',
|
||||
stock: '',
|
||||
category: ''
|
||||
});
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setProduct((prev) => ({ ...prev, [name]: value }));
|
||||
setProduct((prev) => ({
|
||||
...prev,
|
||||
[name]: name === 'price' || name === 'stock' ? Number(value) : value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const handleSubmit = () => {
|
||||
if (onAdd) {
|
||||
onAdd(product);
|
||||
setProduct({ name: '', price: '', provider: '', stock: '', category: '' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
console.log('Deleting product');
|
||||
};
|
||||
|
||||
const handleUpdate = () => {
|
||||
console.log('Updating product:', product);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: 400,
|
||||
mx: 'auto',
|
||||
mt: 4,
|
||||
p: 3,
|
||||
borderRadius: 2,
|
||||
boxShadow: 3,
|
||||
bgcolor: 'white',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" gutterBottom textAlign="center" color='black'>
|
||||
Add Products
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Company"
|
||||
name="company"
|
||||
value={product.company || ''}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
|
||||
<Box mt={2}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Name"
|
||||
@@ -78,7 +63,7 @@ export default function AddProductForm({ onAdd }) {
|
||||
fullWidth
|
||||
label="Provider"
|
||||
name="provider"
|
||||
value={product.provider || ''}
|
||||
value={product.provider}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
@@ -103,17 +88,10 @@ export default function AddProductForm({ onAdd }) {
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="space-between" mt={2}>
|
||||
<Button variant="contained" color="primary" onClick={handleSave}>
|
||||
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||
<Button variant="contained" onClick={handleSubmit}>
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={handleDelete}>
|
||||
Delete
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={handleUpdate}>
|
||||
Update
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
@@ -2,10 +2,11 @@
|
||||
import SectionContainer from '../components/SectionContainer';
|
||||
import React, { useState } from 'react';
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import { Typography, Button, Dialog, DialogTitle, DialogContent } from '@mui/material';
|
||||
import AddProductForm from './AddProductForm';
|
||||
import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
|
||||
import AddOrEditProductForm from './AddOrEditProductForm.jsx';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
|
||||
const columns = [
|
||||
const columnsBase = [
|
||||
{ field: 'id', headerName: 'ID', width: 70 },
|
||||
{ field: 'company', headerName: 'Company', flex: 1 },
|
||||
{ field: 'name', headerName: 'Name', flex: 1 },
|
||||
@@ -17,44 +18,75 @@ const columns = [
|
||||
|
||||
export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
|
||||
const [rows, setRows] = useState([
|
||||
{ id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home' },
|
||||
{ id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home' },
|
||||
{ id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home' },
|
||||
{ id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home' },
|
||||
{ id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home' }
|
||||
]);
|
||||
{ id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home' },
|
||||
{ id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home' },
|
||||
{ id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home' },
|
||||
{ id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home' },
|
||||
{ id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home' }
|
||||
]);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [editingProduct, setEditingProduct] = useState(null);
|
||||
|
||||
const handleAddProduct = (newProduct) => {
|
||||
const id = rows.length + 1;
|
||||
setRows([...rows, { id, company: 'Fendi casa', ...newProduct }]);
|
||||
setOpen(false);
|
||||
};
|
||||
const handleAddOrEditProduct = (product) => {
|
||||
if (editingProduct) {
|
||||
// Update existing
|
||||
setRows(rows.map((row) => (row.id === editingProduct.id ? { ...editingProduct, ...product } : row)));
|
||||
} else {
|
||||
// Add new
|
||||
const id = rows.length + 1;
|
||||
setRows([...rows, { id, company: 'Fendi casa', ...product }]);
|
||||
}
|
||||
setOpen(false);
|
||||
setEditingProduct(null);
|
||||
};
|
||||
|
||||
const handleEditClick = (params) => {
|
||||
setEditingProduct(params.row);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
...columnsBase,
|
||||
{
|
||||
field: 'actions',
|
||||
headerName: 'Actions',
|
||||
width: 100,
|
||||
renderCell: (params) => (
|
||||
<IconButton color="primary" onClick={() => handleEditClick(params)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
<SectionContainer sx={{width: '100%' }}>
|
||||
<SectionContainer sx={{ width: '100%' }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Product Catalog
|
||||
</Typography>
|
||||
|
||||
<Button variant="contained" color="primary" onClick={() => setOpen(true)} sx={{ mb: 2 }}>
|
||||
Add Product
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Add Product</DialogTitle>
|
||||
<Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<AddProductForm onAdd={handleAddProduct} />
|
||||
<AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]} />
|
||||
<Box mt={2}>
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||
<Button variant="contained" color="primary" onClick={() => setOpen(true)}>
|
||||
Add Product
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user