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

feat: add image as representation field

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-06-05 19:39:01 -06:00
parent 0d63977b21
commit b03dd0a418
2 changed files with 69 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/private/AddOrEditProductForm.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Box, Button, TextField, Grid } from '@mui/material';
import { Box, Button, TextField, Grid, Avatar, Typography } from '@mui/material';
export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
const [product, setProduct] = useState({
@@ -7,7 +7,8 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
price: '',
provider: '',
stock: '',
category: ''
category: '',
representation: ''
});
useEffect(() => {
@@ -19,7 +20,8 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
price: '',
provider: '',
stock: '',
category: ''
category: '',
representation: ''
});
}
}, [initialData]);
@@ -32,6 +34,17 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
}));
};
const handleImageChange = (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onloadend = () => {
setProduct((prev) => ({ ...prev, representation: reader.result }));
};
reader.readAsDataURL(file);
};
const handleSubmit = () => {
if (onAdd) {
onAdd(product);
@@ -88,6 +101,30 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
onChange={handleChange}
margin="normal"
/>
<Grid item xs={12} textAlign="center">
{product.representation && (
<Box mb={1}>
<Typography variant="subtitle1" gutterBottom>Representation</Typography>
<Avatar
variant="rounded"
src={product.representation}
sx={{ width: 120, height: 120, mx: 'auto' }}
imgProps={{
style: {
objectFit: 'contain',
width: '100%',
height: '100%',
}
}}
/>
</Box>
)}
<Button variant="outlined" component="label">
Upload Image
<input type="file" hidden accept="image/*" onChange={handleImageChange} />
</Button>
</Grid>
<Box mt={2}>
{/* Fields... */}
<Box display="flex" justifyContent="flex-end" gap={1} mt={2}>

36
src/private/Admin.jsx
View File

@@ -2,7 +2,7 @@
import SectionContainer from '../components/SectionContainer';
import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box, Avatar } from '@mui/material';
import AddOrEditProductForm from './AddOrEditProductForm.jsx';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
@@ -14,21 +14,41 @@ const columnsBase = [
{ field: 'price', headerName: '$', width: 100, type: 'number' },
{ field: 'provider', headerName: 'Provider', flex: 1 },
{ field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
{ field: 'category', headerName: 'Category', flex: 1 }
{ field: 'category', headerName: 'Category', flex: 1 },
{
field: 'representation',
headerName: 'Representation',
width: 120,
renderCell: (params) => (
<Box display="flex" justifyContent="center" width="100%">
<Avatar
variant="rounded"
src={params.value}
sx={{ width: 100, height: 48 }}
imgProps={{
style: {
objectFit: 'contain', // or 'cover' if you want it to fill and crop
width: '100%',
height: '100%',
}
}}
/>
</Box>
)
}
];
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', representation: '/favicon.png' },
{ id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home', representation: '/logo.png' },
{ id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home', representation: '/background.jpg' },
{ id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home', representation: '/background.jpg' },
{ id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/favicon.png' }
]);
const [open, setOpen] = useState(false);
const [editingProduct, setEditingProduct] = useState(null);
const [confirmOpen, setConfirmOpen] = useState(false);
const [rowToDelete, setRowToDelete] = useState(null);