611 lines
20 KiB
TypeScript
611 lines
20 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import {
|
|
Box,
|
|
Paper,
|
|
Typography,
|
|
Button,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
IconButton,
|
|
Container,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
TextField,
|
|
FormControl,
|
|
InputLabel,
|
|
Select,
|
|
MenuItem,
|
|
FormControlLabel,
|
|
Switch,
|
|
SelectChangeEvent,
|
|
OutlinedInput,
|
|
ListItemText,
|
|
Checkbox,
|
|
Chip,
|
|
} from '@mui/material';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import EditIcon from '@mui/icons-material/Edit';
|
|
import axios from 'axios';
|
|
|
|
interface RSVP {
|
|
id: number;
|
|
name: string;
|
|
attending: string;
|
|
bringing_guests: string;
|
|
guest_count: number;
|
|
guest_names: string;
|
|
items_bringing: string[] | string;
|
|
}
|
|
|
|
interface Event {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
location: string;
|
|
slug: string;
|
|
needed_items?: string[] | string;
|
|
wallpaper?: string;
|
|
}
|
|
|
|
const EventAdmin: React.FC = () => {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const navigate = useNavigate();
|
|
const [event, setEvent] = useState<Event | null>(null);
|
|
const [rsvps, setRsvps] = useState<RSVP[]>([]);
|
|
const [neededItems, setNeededItems] = useState<string[]>([]);
|
|
const [claimedItems, setClaimedItems] = useState<string[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
const [rsvpToDelete, setRsvpToDelete] = useState<RSVP | null>(null);
|
|
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
|
const [rsvpToEdit, setRsvpToEdit] = useState<RSVP | null>(null);
|
|
const [editForm, setEditForm] = useState({
|
|
name: '',
|
|
attending: 'yes',
|
|
bringing_guests: 'no',
|
|
guest_count: 0,
|
|
guest_names: '',
|
|
items_bringing: [] as string[],
|
|
});
|
|
const [deleteEventDialogOpen, setDeleteEventDialogOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchEventAndRsvps();
|
|
}, [slug]);
|
|
|
|
const fetchEventAndRsvps = async () => {
|
|
try {
|
|
const [eventResponse, rsvpsResponse] = await Promise.all([
|
|
axios.get(`/api/events/${slug}`),
|
|
axios.get(`/api/events/${slug}/rsvps`)
|
|
]);
|
|
setEvent(eventResponse.data);
|
|
|
|
// Process needed items
|
|
let items: string[] = [];
|
|
if (eventResponse.data.needed_items) {
|
|
try {
|
|
if (typeof eventResponse.data.needed_items === 'string') {
|
|
const parsed = JSON.parse(eventResponse.data.needed_items);
|
|
items = Array.isArray(parsed) ? parsed : [];
|
|
} else if (Array.isArray(eventResponse.data.needed_items)) {
|
|
items = eventResponse.data.needed_items;
|
|
}
|
|
} catch (e) {
|
|
console.error('Error parsing needed_items:', e);
|
|
items = [];
|
|
}
|
|
}
|
|
|
|
// Get all claimed items from existing RSVPs
|
|
const claimed = new Set<string>();
|
|
const processedRsvps = rsvpsResponse.data.map((rsvp: RSVP) => {
|
|
let itemsBringing: string[] = [];
|
|
try {
|
|
if (typeof rsvp.items_bringing === 'string') {
|
|
try {
|
|
const parsed = JSON.parse(rsvp.items_bringing);
|
|
itemsBringing = Array.isArray(parsed) ? parsed : [];
|
|
} catch (e) {
|
|
console.error('Error parsing items_bringing JSON:', e);
|
|
}
|
|
} else if (Array.isArray(rsvp.items_bringing)) {
|
|
itemsBringing = rsvp.items_bringing;
|
|
}
|
|
|
|
// Add items to claimed set
|
|
itemsBringing.forEach(item => claimed.add(item));
|
|
} catch (e) {
|
|
console.error('Error processing items for RSVP:', e);
|
|
}
|
|
|
|
return {
|
|
...rsvp,
|
|
items_bringing: itemsBringing
|
|
};
|
|
});
|
|
|
|
// Update state with processed data
|
|
setRsvps(processedRsvps);
|
|
setClaimedItems(Array.from(claimed));
|
|
// Filter needed items to only show unclaimed ones
|
|
setNeededItems(items.filter(item => !claimed.has(item)));
|
|
setLoading(false);
|
|
} catch (error) {
|
|
setError('Failed to load event data');
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteRsvp = async (rsvp: RSVP) => {
|
|
setRsvpToDelete(rsvp);
|
|
setDeleteDialogOpen(true);
|
|
};
|
|
|
|
const confirmDelete = async () => {
|
|
if (!rsvpToDelete) return;
|
|
|
|
try {
|
|
await axios.delete(`/api/events/${slug}/rsvps/${rsvpToDelete.id}`);
|
|
setRsvps(rsvps.filter((r: RSVP) => r.id !== rsvpToDelete.id));
|
|
setDeleteDialogOpen(false);
|
|
setRsvpToDelete(null);
|
|
} catch (error) {
|
|
setError('Failed to delete RSVP');
|
|
}
|
|
};
|
|
|
|
const handleEditRsvp = (rsvp: RSVP) => {
|
|
setRsvpToEdit(rsvp);
|
|
setEditForm({
|
|
name: rsvp.name,
|
|
attending: rsvp.attending,
|
|
bringing_guests: rsvp.bringing_guests,
|
|
guest_count: rsvp.guest_count,
|
|
guest_names: rsvp.guest_names,
|
|
items_bringing: Array.isArray(rsvp.items_bringing) ? rsvp.items_bringing : [],
|
|
});
|
|
setEditDialogOpen(true);
|
|
};
|
|
|
|
const handleTextInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target;
|
|
setEditForm((prev: typeof editForm) => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
};
|
|
|
|
const handleSelectChange = (e: SelectChangeEvent<string>) => {
|
|
const { name, value } = e.target;
|
|
setEditForm((prev: typeof editForm) => ({
|
|
...prev,
|
|
[name as string]: value,
|
|
}));
|
|
};
|
|
|
|
const handleItemsChange = (e: SelectChangeEvent<string[]>) => {
|
|
const { value } = e.target;
|
|
const newItems = Array.isArray(value) ? value : [];
|
|
setEditForm(prev => ({
|
|
...prev,
|
|
items_bringing: newItems
|
|
}));
|
|
};
|
|
|
|
const handleEditSubmit = async () => {
|
|
if (!rsvpToEdit) return;
|
|
|
|
try {
|
|
const submissionData = {
|
|
...editForm,
|
|
items_bringing: JSON.stringify(editForm.items_bringing)
|
|
};
|
|
await axios.put(`/api/events/${slug}/rsvps/${rsvpToEdit.id}`, submissionData);
|
|
|
|
// Update the local state
|
|
const updatedRsvps = rsvps.map((r: RSVP) => {
|
|
if (r.id === rsvpToEdit.id) {
|
|
return {
|
|
...r,
|
|
...editForm,
|
|
items_bringing: editForm.items_bringing // Keep as array in local state
|
|
};
|
|
}
|
|
return r;
|
|
});
|
|
|
|
// Recalculate claimed items
|
|
const claimed = new Set<string>();
|
|
updatedRsvps.forEach((rsvp: RSVP) => {
|
|
let rsvpItems: string[] = [];
|
|
try {
|
|
if (typeof rsvp.items_bringing === 'string') {
|
|
const parsed = JSON.parse(rsvp.items_bringing);
|
|
rsvpItems = Array.isArray(parsed) ? parsed : [];
|
|
} else if (Array.isArray(rsvp.items_bringing)) {
|
|
rsvpItems = rsvp.items_bringing;
|
|
}
|
|
|
|
rsvpItems.forEach(item => claimed.add(item));
|
|
} catch (e) {
|
|
console.error('Error processing items for RSVP:', e);
|
|
}
|
|
});
|
|
|
|
// Get all items from the event
|
|
let allItems: string[] = [];
|
|
if (event?.needed_items) {
|
|
try {
|
|
if (typeof event.needed_items === 'string') {
|
|
const parsed = JSON.parse(event.needed_items);
|
|
allItems = Array.isArray(parsed) ? parsed : [];
|
|
} else if (Array.isArray(event.needed_items)) {
|
|
allItems = event.needed_items;
|
|
}
|
|
} catch (e) {
|
|
console.error('Error parsing event needed_items:', e);
|
|
allItems = [];
|
|
}
|
|
}
|
|
|
|
// Update needed and claimed items
|
|
const claimedArray = Array.from(claimed);
|
|
const availableItems = allItems.filter(item => !claimed.has(item));
|
|
|
|
setRsvps(updatedRsvps);
|
|
setNeededItems(availableItems);
|
|
setClaimedItems(claimedArray);
|
|
setEditDialogOpen(false);
|
|
setRsvpToEdit(null);
|
|
} catch (error) {
|
|
setError('Failed to update RSVP');
|
|
}
|
|
};
|
|
|
|
const handleDeleteEvent = async () => {
|
|
try {
|
|
await axios.delete(`/api/events/${slug}`);
|
|
navigate('/');
|
|
} catch (error) {
|
|
setError('Failed to delete event');
|
|
setDeleteEventDialogOpen(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<Container maxWidth="lg">
|
|
<Typography>Loading...</Typography>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
if (error || !event) {
|
|
return (
|
|
<Container maxWidth="lg">
|
|
<Typography color="error">{error || 'Event not found'}</Typography>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
minHeight: '100vh',
|
|
backgroundImage: event?.wallpaper ? `url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
py: 4,
|
|
}}
|
|
>
|
|
<Container maxWidth="lg">
|
|
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
|
<Typography variant="h4" component="h2" color="primary">
|
|
{event.title} - Admin
|
|
</Typography>
|
|
<Button
|
|
variant="outlined"
|
|
onClick={() => navigate('/')}
|
|
>
|
|
Back to Events
|
|
</Button>
|
|
</Box>
|
|
|
|
{/* Add items status section */}
|
|
<Box sx={{ mb: 4 }}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Items Status
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 4 }}>
|
|
<Box>
|
|
<Typography variant="subtitle1" gutterBottom>
|
|
Still Needed:
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
|
{neededItems.map((item: string, index: number) => (
|
|
<Chip
|
|
key={`${item}-${index}`}
|
|
label={item}
|
|
color="primary"
|
|
variant="outlined"
|
|
/>
|
|
))}
|
|
{neededItems.length === 0 && (
|
|
<Typography variant="body2" color="text.secondary">
|
|
All items have been claimed
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
<Box>
|
|
<Typography variant="subtitle1" gutterBottom>
|
|
Claimed Items:
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
|
{claimedItems.map((item: string, index: number) => (
|
|
<Chip
|
|
key={`${item}-${index}`}
|
|
label={item}
|
|
color="success"
|
|
/>
|
|
))}
|
|
{claimedItems.length === 0 && (
|
|
<Typography variant="body2" color="text.secondary">
|
|
No items have been claimed yet
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Typography variant="h6" gutterBottom>
|
|
RSVPs ({rsvps.length})
|
|
</Typography>
|
|
|
|
<TableContainer>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Name</TableCell>
|
|
<TableCell>Attending</TableCell>
|
|
<TableCell>Guests</TableCell>
|
|
<TableCell>Items Bringing</TableCell>
|
|
<TableCell>Actions</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rsvps.map((rsvp: RSVP) => (
|
|
<TableRow key={rsvp.id}>
|
|
<TableCell>{rsvp.name}</TableCell>
|
|
<TableCell>{rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)}</TableCell>
|
|
<TableCell>
|
|
{rsvp.bringing_guests === 'yes' ?
|
|
`${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` :
|
|
'No'
|
|
}
|
|
</TableCell>
|
|
<TableCell>
|
|
{(() => {
|
|
let items: string[] = [];
|
|
try {
|
|
if (typeof rsvp.items_bringing === 'string') {
|
|
try {
|
|
const parsed = JSON.parse(rsvp.items_bringing);
|
|
items = Array.isArray(parsed) ? parsed : [];
|
|
} catch (e) {
|
|
console.error('Error parsing items_bringing JSON in table:', e);
|
|
}
|
|
} else if (Array.isArray(rsvp.items_bringing)) {
|
|
items = rsvp.items_bringing;
|
|
}
|
|
} catch (e) {
|
|
console.error('Error processing items in table:', e);
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
|
{items.length > 0 ? items.map((item: string, index: number) => (
|
|
<Chip
|
|
key={`${item}-${index}`}
|
|
label={item}
|
|
color="success"
|
|
size="small"
|
|
variant={claimedItems.includes(item) ? "filled" : "outlined"}
|
|
/>
|
|
)) : (
|
|
<Typography variant="body2" color="text.secondary">
|
|
No items
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
);
|
|
})()}
|
|
</TableCell>
|
|
<TableCell>
|
|
<IconButton
|
|
color="primary"
|
|
onClick={() => handleEditRsvp(rsvp)}
|
|
sx={{ mr: 1 }}
|
|
>
|
|
<EditIcon />
|
|
</IconButton>
|
|
<IconButton
|
|
color="error"
|
|
onClick={() => handleDeleteRsvp(rsvp)}
|
|
>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 4 }}>
|
|
<Button
|
|
variant="contained"
|
|
color="error"
|
|
startIcon={<DeleteIcon />}
|
|
onClick={() => setDeleteEventDialogOpen(true)}
|
|
>
|
|
Delete Event
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
|
|
<Dialog
|
|
open={deleteDialogOpen}
|
|
onClose={() => setDeleteDialogOpen(false)}
|
|
>
|
|
<DialogTitle>Delete RSVP</DialogTitle>
|
|
<DialogContent>
|
|
<Typography>
|
|
Are you sure you want to delete {rsvpToDelete?.name}'s RSVP?
|
|
</Typography>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => setDeleteDialogOpen(false)}>Cancel</Button>
|
|
<Button onClick={confirmDelete} color="error">Delete</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
open={editDialogOpen}
|
|
onClose={() => setEditDialogOpen(false)}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
>
|
|
<DialogTitle>Edit RSVP</DialogTitle>
|
|
<DialogContent>
|
|
<Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
<TextField
|
|
label="Name"
|
|
name="name"
|
|
value={editForm.name}
|
|
onChange={handleTextInputChange}
|
|
fullWidth
|
|
/>
|
|
<FormControl fullWidth>
|
|
<InputLabel>Attending</InputLabel>
|
|
<Select
|
|
name="attending"
|
|
value={editForm.attending}
|
|
onChange={handleSelectChange}
|
|
label="Attending"
|
|
>
|
|
<MenuItem value="yes">Yes</MenuItem>
|
|
<MenuItem value="no">No</MenuItem>
|
|
<MenuItem value="maybe">Maybe</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<FormControl fullWidth>
|
|
<InputLabel>Bringing Guests</InputLabel>
|
|
<Select
|
|
name="bringing_guests"
|
|
value={editForm.bringing_guests}
|
|
onChange={handleSelectChange}
|
|
label="Bringing Guests"
|
|
>
|
|
<MenuItem value="yes">Yes</MenuItem>
|
|
<MenuItem value="no">No</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
{editForm.bringing_guests === 'yes' && (
|
|
<>
|
|
<TextField
|
|
label="Number of Guests"
|
|
name="guest_count"
|
|
type="number"
|
|
value={editForm.guest_count}
|
|
onChange={handleTextInputChange}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label="Guest Names"
|
|
name="guest_names"
|
|
value={editForm.guest_names}
|
|
onChange={handleTextInputChange}
|
|
fullWidth
|
|
multiline
|
|
rows={2}
|
|
/>
|
|
</>
|
|
)}
|
|
<FormControl fullWidth>
|
|
<InputLabel>What items are you bringing?</InputLabel>
|
|
<Select
|
|
multiple
|
|
name="items_bringing"
|
|
value={editForm.items_bringing}
|
|
onChange={handleItemsChange}
|
|
input={<OutlinedInput label="What items are you bringing?" />}
|
|
renderValue={(selected) => (
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
|
{Array.isArray(selected) ? selected.map((value: string) => (
|
|
<Chip
|
|
key={value}
|
|
label={value}
|
|
color="primary"
|
|
/>
|
|
)) : null}
|
|
</Box>
|
|
)}
|
|
>
|
|
{Array.from(new Set([...neededItems, ...editForm.items_bringing])).map((item: string) => (
|
|
<MenuItem key={item} value={item}>
|
|
<Checkbox checked={editForm.items_bringing.includes(item)} />
|
|
<ListItemText
|
|
primary={item}
|
|
secondary={neededItems.includes(item) ? 'Available' : 'Currently assigned'}
|
|
/>
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => setEditDialogOpen(false)}>Cancel</Button>
|
|
<Button onClick={handleEditSubmit} color="primary">Save Changes</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
open={deleteEventDialogOpen}
|
|
onClose={() => setDeleteEventDialogOpen(false)}
|
|
>
|
|
<DialogTitle>Delete Event</DialogTitle>
|
|
<DialogContent>
|
|
<Typography>
|
|
Are you sure you want to delete "{event.title}"? This action cannot be undone.
|
|
</Typography>
|
|
<Typography color="error" sx={{ mt: 2 }}>
|
|
All RSVPs associated with this event will also be deleted.
|
|
</Typography>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => setDeleteEventDialogOpen(false)}>Cancel</Button>
|
|
<Button onClick={handleDeleteEvent} color="error" variant="contained">
|
|
Delete Event
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default EventAdmin;
|