rodolfo_ruiz/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
Download Patch File Download Diff File Expand all files Collapse all files

90
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 },
@@ -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>
);
}