AgileWebs/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adding the edit button and logic

Browse Source
This commit is contained in:
Rodolfo Ruiz 2025-06-04 19:59:34 -06:00
parent cef04888c6
commit 70afbd4b45
2 changed files with 89 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/private/AddProductForm.jsx → src/private/AddOrEditProductForm.jsx
View File

@ -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>
);

62
src/private/Admin.jsx
View File

@ -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 },
@ -25,36 +26,67 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
]);
const [open, setOpen] = useState(false);
const [editingProduct, setEditingProduct] = useState(null);
const handleAddProduct = (newProduct) => {
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', ...newProduct }]);
setRows([...rows, { id, company: 'Fendi casa', ...product }]);
}
setOpen(false);
setEditingProduct(null);
};
return (
const handleEditClick = (params) => {
setEditingProduct(params.row);
setOpen(true);
};
<SectionContainer sx={{width: '100%' }}>
const columns = [
...columnsBase,
{
field: 'actions',
headerName: 'Actions',
width: 100,
renderCell: (params) => (
<IconButton color="primary" onClick={() => handleEditClick(params)}>
<EditIcon />
</IconButton>
)
}
];
return (
<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>
<Box mt={2}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[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>
);
}