chore: organize names and folders to better fit
This commit is contained in:
Rodolfo Ruiz
179
src/public/products/Products.jsx
Normal file
179
src/public/products/Products.jsx
Normal file
@@ -0,0 +1,179 @@
|
||||
|
||||
import SectionContainer from '../../components/SectionContainer.jsx';
|
||||
import { useState } from 'react';
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box, Avatar } from '@mui/material';
|
||||
import AddOrEditProductForm from './AddOrEditProductForm.jsx';
|
||||
|
||||
import EditRoundedIcon from '@mui/icons-material/EditRounded';
|
||||
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
|
||||
import '../../App.css'
|
||||
|
||||
const columnsBase = [
|
||||
{
|
||||
field: 'representation',
|
||||
headerName: '',
|
||||
flex: 2,
|
||||
renderCell: (params) => {
|
||||
const { representation, name, provider, price } = params.row;
|
||||
return (
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Box
|
||||
component="img"
|
||||
src={representation || '/favicon.png'}
|
||||
alt={name}
|
||||
sx={{ width: 120, height: 140, borderRadius: 1, objectFit: 'cover' }}
|
||||
/>
|
||||
<Box>
|
||||
<Typography fontWeight={700}>{name}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">{provider}</Typography>
|
||||
<Typography variant="h6" color="text.secondary">${Number(price).toFixed(2)}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ field: 'company', headerName: 'Company', flex: 1 },
|
||||
{ field: 'category', headerName: 'Category', flex: 1 },
|
||||
{ field: 'stock', headerName: 'Stock', width: 120, type: 'number' },
|
||||
];
|
||||
|
||||
export default function Products({ 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', representation: '/1.jpg' },
|
||||
{ id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home', representation: '/2.jpg' },
|
||||
{ id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home', representation: '/3.jpg' },
|
||||
{ id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home', representation: '/4.jpg' },
|
||||
{ id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/5.jpg' }
|
||||
]);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [editingProduct, setEditingProduct] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [rowToDelete, setRowToDelete] = useState(null);
|
||||
|
||||
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 handleDeleteClick = (row) => {
|
||||
setRowToDelete(row);
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
setRows(rows.filter((row) => row.id !== rowToDelete.id));
|
||||
setRowToDelete(null);
|
||||
setConfirmOpen(false);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
...columnsBase,
|
||||
{
|
||||
field: 'actions',
|
||||
headerName: '',
|
||||
width: 130,
|
||||
renderCell: (params) => (
|
||||
<Box display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
height="100%"
|
||||
gap={2}>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: '#DFCCBC',
|
||||
color: '#26201A',
|
||||
'&:hover': {
|
||||
backgroundColor: '#C2B2A4',
|
||||
},
|
||||
borderRadius: 2,
|
||||
p: 1,
|
||||
}}
|
||||
onClick={() => handleEditClick(params)}
|
||||
>
|
||||
<EditRoundedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: '#FBE9E7',
|
||||
color: '#C62828',
|
||||
'&:hover': {
|
||||
backgroundColor: '#EF9A9A',
|
||||
},
|
||||
borderRadius: 2,
|
||||
p: 1,
|
||||
}}
|
||||
onClick={() => handleDeleteClick(params.row)}
|
||||
>
|
||||
<DeleteRoundedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<SectionContainer sx={{ width: '100%' }}>
|
||||
<Typography variant="h4" gutterBottom color='#26201AFF'>
|
||||
Products
|
||||
</Typography>
|
||||
|
||||
<Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="md" fullWidth>
|
||||
<DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
|
||||
<DialogTitle>Confirm Delete</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Are you sure you want to delete{' '}
|
||||
<strong>{rowToDelete?.name}</strong>?
|
||||
</Typography>
|
||||
<Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
|
||||
<Button onClick={() => setConfirmOpen(false)} className='button-transparent'>Cancel</Button>
|
||||
<Button variant="contained" onClick={confirmDelete} className="button-gold">Delete</Button>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Box mt={2}>
|
||||
<DataGrid
|
||||
getRowHeight={() => 140}
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
getRowSpacing={() => ({
|
||||
top: 8,
|
||||
bottom: 8,
|
||||
})}
|
||||
/>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||
<Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
|
||||
Add Product
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user