93 lines
2.5 KiB
JavaScript
93 lines
2.5 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import {
|
|
Box,
|
|
Button,
|
|
TextField,
|
|
Typography,
|
|
Paper,
|
|
MenuItem
|
|
} from '@mui/material';
|
|
|
|
export default function AddOrEditAdminForm({ onAdd, initialData, onCancel }) {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
description: '',
|
|
status: 'Active'
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (initialData) {
|
|
setFormData(initialData);
|
|
} else {
|
|
setFormData({
|
|
name: '',
|
|
description: '',
|
|
status: 'Active'
|
|
});
|
|
}
|
|
}, [initialData]);
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (onAdd) {
|
|
onAdd(formData);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ px: 2, py: 3 }}>
|
|
<Paper elevation={0} sx={{ bgcolor: '#f9f9f9', p: 2, borderRadius: 2 }}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Item details
|
|
</Typography>
|
|
|
|
<TextField
|
|
fullWidth
|
|
label="Name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
margin="normal"
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
label="Description"
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
margin="normal"
|
|
/>
|
|
|
|
<TextField
|
|
select
|
|
fullWidth
|
|
label="Status"
|
|
name="status"
|
|
value={formData.status}
|
|
onChange={handleChange}
|
|
margin="normal"
|
|
>
|
|
<MenuItem value="Active">Active</MenuItem>
|
|
<MenuItem value="Inactive">Inactive</MenuItem>
|
|
</TextField>
|
|
|
|
<Box display="flex" justifyContent="flex-end" gap={1} mt={3}>
|
|
<Button onClick={onCancel} className="button-transparent">
|
|
Cancel
|
|
</Button>
|
|
<Button variant="contained" onClick={handleSubmit} className="button-gold">
|
|
Save
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
} |