100 lines
2.2 KiB
JavaScript
100 lines
2.2 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Box, Button, TextField, Grid } from '@mui/material';
|
|
|
|
export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
|
|
const [product, setProduct] = useState({
|
|
name: '',
|
|
price: '',
|
|
provider: '',
|
|
stock: '',
|
|
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]: name === 'price' || name === 'stock' ? Number(value) : value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (onAdd) {
|
|
onAdd(product);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box mt={2}>
|
|
<TextField
|
|
fullWidth
|
|
label="Name"
|
|
name="name"
|
|
value={product.name}
|
|
onChange={handleChange}
|
|
margin="normal"
|
|
/>
|
|
<TextField
|
|
fullWidth
|
|
label="Price"
|
|
name="price"
|
|
type="number"
|
|
value={product.price}
|
|
onChange={handleChange}
|
|
margin="normal"
|
|
/>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<TextField
|
|
fullWidth
|
|
label="Provider"
|
|
name="provider"
|
|
value={product.provider}
|
|
onChange={handleChange}
|
|
margin="normal"
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<TextField
|
|
fullWidth
|
|
label="Stock"
|
|
name="stock"
|
|
type="number"
|
|
value={product.stock}
|
|
onChange={handleChange}
|
|
margin="normal"
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<TextField
|
|
fullWidth
|
|
label="Category"
|
|
name="category"
|
|
value={product.category}
|
|
onChange={handleChange}
|
|
margin="normal"
|
|
/>
|
|
<Box mt={2}>
|
|
{/* Fields... */}
|
|
<Box display="flex" justifyContent="flex-end" gap={1} mt={2}>
|
|
<Button onClick={onCancel}>Cancel</Button>
|
|
<Button variant="contained" onClick={handleSubmit}>Save</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
} |