Feature: Add Update Info button and dialog for editing event details

This commit is contained in:
2025-05-01 13:21:45 -04:00
parent c07d6b7027
commit a641a8d128

View File

@@ -81,6 +81,12 @@ const EventAdmin: React.FC = () => {
const [manageItemsDialogOpen, setManageItemsDialogOpen] = useState(false);
const [newItem, setNewItem] = useState('');
const [itemToDelete, setItemToDelete] = useState<string | null>(null);
const [updateInfoDialogOpen, setUpdateInfoDialogOpen] = useState(false);
const [updateForm, setUpdateForm] = useState({
description: '',
location: '',
date: ''
});
useEffect(() => {
fetchEventAndRsvps();
@@ -363,6 +369,41 @@ const EventAdmin: React.FC = () => {
}
};
const handleUpdateInfoSubmit = async () => {
if (!event) return;
try {
await axios.put(`/api/events/${slug}`, {
...event,
description: updateForm.description,
location: updateForm.location,
date: updateForm.date
});
setEvent(prev => prev ? {
...prev,
description: updateForm.description,
location: updateForm.location,
date: updateForm.date
} : null);
setUpdateInfoDialogOpen(false);
} catch (error) {
setError('Failed to update event information');
}
};
const handleUpdateInfoClick = () => {
if (!event) return;
setUpdateForm({
description: event.description,
location: event.location,
date: event.date.slice(0, 16) // Format date for datetime-local input
});
setUpdateInfoDialogOpen(true);
};
if (loading) {
return (
<Container maxWidth="lg">
@@ -411,6 +452,13 @@ const EventAdmin: React.FC = () => {
>
Back to Events
</Button>
<Button
variant="outlined"
onClick={handleUpdateInfoClick}
startIcon={<EditIcon />}
>
Update Info
</Button>
<Button
variant="outlined"
startIcon={<AddIcon />}
@@ -755,6 +803,47 @@ const EventAdmin: React.FC = () => {
<Button onClick={() => setManageItemsDialogOpen(false)}>Close</Button>
</DialogActions>
</Dialog>
<Dialog
open={updateInfoDialogOpen}
onClose={() => setUpdateInfoDialogOpen(false)}
maxWidth="sm"
fullWidth
>
<DialogTitle>Update Event Information</DialogTitle>
<DialogContent>
<Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
<TextField
label="Description"
value={updateForm.description}
onChange={(e) => setUpdateForm(prev => ({ ...prev, description: e.target.value }))}
fullWidth
multiline
rows={3}
/>
<TextField
label="Location"
value={updateForm.location}
onChange={(e) => setUpdateForm(prev => ({ ...prev, location: e.target.value }))}
fullWidth
/>
<TextField
label="Date and Time"
type="datetime-local"
value={updateForm.date}
onChange={(e) => setUpdateForm(prev => ({ ...prev, date: e.target.value }))}
fullWidth
InputLabelProps={{
shrink: true,
}}
/>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={() => setUpdateInfoDialogOpen(false)}>Cancel</Button>
<Button onClick={handleUpdateInfoSubmit} color="primary">Save Changes</Button>
</DialogActions>
</Dialog>
</Container>
</Box>
);