Fix email field in EventAdmin RSVP edit form and add snackbar feedback
- Added email_address field to EditFormData interface - Updated handleEditRsvp to populate email field from rsvp.attendee_email - Modified handleEditSubmit to include email_address in submission data - Added snackbar state variables for user feedback notifications - Enhanced handleSendEmail and handleCopyLink with success/error snackbar messages - Added handleSnackbarClose function for snackbar management - Improved user experience with immediate visual feedback for admin actions - Fixed issue where email field would show [object Object] instead of actual email text
This commit is contained in:
Ryderjj89
@@ -29,6 +29,8 @@ import {
|
|||||||
ListItemText,
|
ListItemText,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Chip,
|
Chip,
|
||||||
|
Snackbar,
|
||||||
|
Alert,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import DeleteIcon from '@mui/icons-material/Delete';
|
import DeleteIcon from '@mui/icons-material/Delete';
|
||||||
import EditIcon from '@mui/icons-material/Edit';
|
import EditIcon from '@mui/icons-material/Edit';
|
||||||
@@ -73,6 +75,7 @@ interface Event {
|
|||||||
|
|
||||||
interface EditFormData {
|
interface EditFormData {
|
||||||
name: string;
|
name: string;
|
||||||
|
email_address: string;
|
||||||
attending: 'yes' | 'no' | 'maybe';
|
attending: 'yes' | 'no' | 'maybe';
|
||||||
bringing_guests: 'yes' | 'no';
|
bringing_guests: 'yes' | 'no';
|
||||||
guest_count: number;
|
guest_count: number;
|
||||||
@@ -110,6 +113,7 @@ const EventAdmin: React.FC = () => {
|
|||||||
const [rsvpToEdit, setRsvpToEdit] = useState<RSVP | null>(null);
|
const [rsvpToEdit, setRsvpToEdit] = useState<RSVP | null>(null);
|
||||||
const [editForm, setEditForm] = useState<EditFormData>({
|
const [editForm, setEditForm] = useState<EditFormData>({
|
||||||
name: '',
|
name: '',
|
||||||
|
email_address: '',
|
||||||
attending: 'yes',
|
attending: 'yes',
|
||||||
bringing_guests: 'no',
|
bringing_guests: 'no',
|
||||||
guest_count: 0,
|
guest_count: 0,
|
||||||
@@ -134,6 +138,9 @@ const EventAdmin: React.FC = () => {
|
|||||||
event_conclusion_email_enabled: false,
|
event_conclusion_email_enabled: false,
|
||||||
event_conclusion_message: ''
|
event_conclusion_message: ''
|
||||||
});
|
});
|
||||||
|
const [snackbarOpen, setSnackbarOpen] = useState(false);
|
||||||
|
const [snackbarMessage, setSnackbarMessage] = useState('');
|
||||||
|
const [snackbarSeverity, setSnackbarSeverity] = useState<'success' | 'error'>('success');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchEventAndRsvps();
|
fetchEventAndRsvps();
|
||||||
@@ -266,6 +273,7 @@ const EventAdmin: React.FC = () => {
|
|||||||
setRsvpToEdit(rsvp);
|
setRsvpToEdit(rsvp);
|
||||||
setEditForm({
|
setEditForm({
|
||||||
name: rsvp.name,
|
name: rsvp.name,
|
||||||
|
email_address: rsvp.attendee_email || '',
|
||||||
attending: rsvp.attending || 'yes',
|
attending: rsvp.attending || 'yes',
|
||||||
bringing_guests: rsvp.bringing_guests || 'no',
|
bringing_guests: rsvp.bringing_guests || 'no',
|
||||||
guest_count: typeof rsvp.guest_count === 'number' ? rsvp.guest_count : 0,
|
guest_count: typeof rsvp.guest_count === 'number' ? rsvp.guest_count : 0,
|
||||||
@@ -379,6 +387,7 @@ const EventAdmin: React.FC = () => {
|
|||||||
// Prepare submission data in the exact format the backend expects
|
// Prepare submission data in the exact format the backend expects
|
||||||
const submissionData = {
|
const submissionData = {
|
||||||
name: editForm.name,
|
name: editForm.name,
|
||||||
|
email_address: editForm.email_address,
|
||||||
attending: editForm.attending,
|
attending: editForm.attending,
|
||||||
bringing_guests: editForm.bringing_guests,
|
bringing_guests: editForm.bringing_guests,
|
||||||
guest_count: editForm.bringing_guests === 'yes' ? Math.max(1, parseInt(editForm.guest_count.toString(), 10)) : 0,
|
guest_count: editForm.bringing_guests === 'yes' ? Math.max(1, parseInt(editForm.guest_count.toString(), 10)) : 0,
|
||||||
@@ -417,6 +426,7 @@ const EventAdmin: React.FC = () => {
|
|||||||
const updatedRsvp: RSVP = {
|
const updatedRsvp: RSVP = {
|
||||||
...rsvpToEdit,
|
...rsvpToEdit,
|
||||||
...submissionData,
|
...submissionData,
|
||||||
|
attendee_email: editForm.email_address,
|
||||||
guest_names: filteredGuestNames,
|
guest_names: filteredGuestNames,
|
||||||
items_bringing: editForm.items_bringing,
|
items_bringing: editForm.items_bringing,
|
||||||
other_items: splitOtherItems
|
other_items: splitOtherItems
|
||||||
@@ -664,24 +674,30 @@ const EventAdmin: React.FC = () => {
|
|||||||
|
|
||||||
const handleSendEmail = async (rsvp: RSVP) => {
|
const handleSendEmail = async (rsvp: RSVP) => {
|
||||||
if (!rsvp.attendee_email || !rsvp.edit_id || !event) {
|
if (!rsvp.attendee_email || !rsvp.edit_id || !event) {
|
||||||
setError('Cannot send email: missing email address or edit ID');
|
setSnackbarMessage('Cannot send email: missing email address or edit ID');
|
||||||
|
setSnackbarSeverity('error');
|
||||||
|
setSnackbarOpen(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Create a backend endpoint to resend the edit link email
|
|
||||||
await axios.post(`/api/rsvps/resend-email/${rsvp.edit_id}`);
|
await axios.post(`/api/rsvps/resend-email/${rsvp.edit_id}`);
|
||||||
// Show success message (you could add a snackbar or toast here)
|
setSnackbarMessage(`Email sent successfully to ${rsvp.attendee_email}`);
|
||||||
console.log(`Email sent to ${rsvp.attendee_email}`);
|
setSnackbarSeverity('success');
|
||||||
|
setSnackbarOpen(true);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error sending email:', error);
|
console.error('Error sending email:', error);
|
||||||
setError('Failed to send email');
|
setSnackbarMessage('Failed to send email');
|
||||||
|
setSnackbarSeverity('error');
|
||||||
|
setSnackbarOpen(true);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCopyLink = async (rsvp: RSVP) => {
|
const handleCopyLink = async (rsvp: RSVP) => {
|
||||||
if (!rsvp.edit_id || !event) {
|
if (!rsvp.edit_id || !event) {
|
||||||
setError('Cannot copy link: missing edit ID');
|
setSnackbarMessage('Cannot copy link: missing edit ID');
|
||||||
|
setSnackbarSeverity('error');
|
||||||
|
setSnackbarOpen(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -689,8 +705,9 @@ const EventAdmin: React.FC = () => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
await navigator.clipboard.writeText(editLink);
|
await navigator.clipboard.writeText(editLink);
|
||||||
// Show success message (you could add a snackbar or toast here)
|
setSnackbarMessage('Link copied to clipboard successfully');
|
||||||
console.log('Link copied to clipboard');
|
setSnackbarSeverity('success');
|
||||||
|
setSnackbarOpen(true);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error copying to clipboard:', error);
|
console.error('Error copying to clipboard:', error);
|
||||||
// Fallback for older browsers
|
// Fallback for older browsers
|
||||||
@@ -700,10 +717,16 @@ const EventAdmin: React.FC = () => {
|
|||||||
textArea.select();
|
textArea.select();
|
||||||
document.execCommand('copy');
|
document.execCommand('copy');
|
||||||
document.body.removeChild(textArea);
|
document.body.removeChild(textArea);
|
||||||
console.log('Link copied to clipboard (fallback method)');
|
setSnackbarMessage('Link copied to clipboard successfully');
|
||||||
|
setSnackbarSeverity('success');
|
||||||
|
setSnackbarOpen(true);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSnackbarClose = () => {
|
||||||
|
setSnackbarOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<Container maxWidth="lg">
|
<Container maxWidth="lg">
|
||||||
@@ -780,587 +803,3 @@ const EventAdmin: React.FC = () => {
|
|||||||
sx={{
|
sx={{
|
||||||
minWidth: 'fit-content',
|
minWidth: 'fit-content',
|
||||||
whiteSpace: 'nowrap'
|
whiteSpace: 'nowrap'
|
||||||
}}
|
|
||||||
>
|
|
||||||
Manage Items
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="error"
|
|
||||||
startIcon={<DeleteIcon />}
|
|
||||||
onClick={() => setDeleteEventDialogOpen(true)}
|
|
||||||
sx={{
|
|
||||||
minWidth: 'fit-content',
|
|
||||||
whiteSpace: 'nowrap'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete Event
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ mb: 4 }}>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
<strong>Info:</strong> {event.description || 'None'}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
<strong>Location:</strong> {event.location}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
<strong>Date:</strong> {new Date(event.date).toLocaleString()}
|
|
||||||
</Typography>
|
|
||||||
{event.rsvp_cutoff_date && (
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
<strong>RSVP cut-off date:</strong> {new Date(event.rsvp_cutoff_date).toLocaleString()}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Add items status section */}
|
|
||||||
<Box sx={{ mb: 4 }}>
|
|
||||||
<Typography variant="h6">
|
|
||||||
Items Status
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: 3,
|
|
||||||
maxWidth: { xs: '100%', sm: '60%' }
|
|
||||||
}}>
|
|
||||||
<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>
|
|
||||||
{/* Other Items Section */}
|
|
||||||
<Box>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
Other Items:
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
{otherItems.length > 0
|
|
||||||
? otherItems.join(', ')
|
|
||||||
: 'No other items have been brought'}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Typography variant="h6" gutterBottom>
|
|
||||||
RSVPs: {rsvps.length} | Total Guests: {rsvps.reduce((total, rsvp) => {
|
|
||||||
// Count the RSVP person as 1 if they're attending
|
|
||||||
const rsvpCount = rsvp.attending === 'yes' ? 1 : 0;
|
|
||||||
// Add their guests if they're bringing any
|
|
||||||
const guestCount = (rsvp.attending === 'yes' && rsvp.bringing_guests === 'yes') ? rsvp.guest_count : 0;
|
|
||||||
return total + rsvpCount + guestCount;
|
|
||||||
}, 0)}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<TableContainer sx={{
|
|
||||||
overflowX: 'auto',
|
|
||||||
'& .MuiTable-root': {
|
|
||||||
minWidth: { xs: '100%', sm: 650 }
|
|
||||||
}
|
|
||||||
}}>
|
|
||||||
<Table>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell>Name</TableCell>
|
|
||||||
<TableCell>Email</TableCell>
|
|
||||||
<TableCell>Attending</TableCell>
|
|
||||||
<TableCell>Guests</TableCell>
|
|
||||||
<TableCell>Needed Items</TableCell>
|
|
||||||
<TableCell>Other Items</TableCell>
|
|
||||||
<TableCell>Actions</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{rsvps.map((rsvp: RSVP) => (
|
|
||||||
<TableRow key={rsvp.id}>
|
|
||||||
<TableCell>{rsvp.name || 'No name provided'}</TableCell>
|
|
||||||
<TableCell>{rsvp.attendee_email || 'No email provided'}</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{rsvp.attending ?
|
|
||||||
rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1) :
|
|
||||||
'Unknown'
|
|
||||||
}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{rsvp.bringing_guests === 'yes' ?
|
|
||||||
`${rsvp.guest_count || 0} (${Array.isArray(rsvp.guest_names) ?
|
|
||||||
rsvp.guest_names.join(', ') :
|
|
||||||
typeof rsvp.guest_names === 'string' ?
|
|
||||||
rsvp.guest_names.replace(/\s+/g, ', ') :
|
|
||||||
'No names provided'})` :
|
|
||||||
'No'
|
|
||||||
}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{Array.isArray(rsvp.items_bringing) ?
|
|
||||||
rsvp.items_bringing.map((item, index) => (
|
|
||||||
<Chip
|
|
||||||
key={index}
|
|
||||||
label={item}
|
|
||||||
color="success" // Change color to success
|
|
||||||
sx={{ m: 0.5 }}
|
|
||||||
/>
|
|
||||||
)) :
|
|
||||||
typeof rsvp.items_bringing === 'string' ?
|
|
||||||
JSON.parse(rsvp.items_bringing).map((item: string, index: number) => (
|
|
||||||
<Chip
|
|
||||||
key={index}
|
|
||||||
label={item}
|
|
||||||
color="success" // Change color to success
|
|
||||||
sx={{ m: 0.5 }}
|
|
||||||
/>
|
|
||||||
)) :
|
|
||||||
'None'
|
|
||||||
}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{rsvp.other_items || 'None'}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<IconButton
|
|
||||||
color="primary"
|
|
||||||
onClick={() => handleEditRsvp(rsvp)}
|
|
||||||
sx={{ mr: 1 }}
|
|
||||||
>
|
|
||||||
<EditIcon />
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
|
||||||
color="error"
|
|
||||||
onClick={() => handleDeleteRsvp(rsvp)}
|
|
||||||
sx={{ mr: 1 }}
|
|
||||||
>
|
|
||||||
<DeleteIcon />
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
|
||||||
color="info"
|
|
||||||
onClick={() => handleSendEmail(rsvp)}
|
|
||||||
sx={{ mr: 1 }}
|
|
||||||
disabled={!rsvp.attendee_email}
|
|
||||||
>
|
|
||||||
<EmailIcon />
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
|
||||||
color="secondary"
|
|
||||||
onClick={() => handleCopyLink(rsvp)}
|
|
||||||
disabled={!rsvp.edit_id}
|
|
||||||
>
|
|
||||||
<ContentCopyIcon />
|
|
||||||
</IconButton>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</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
|
|
||||||
/>
|
|
||||||
{/* Individual guest name fields */}
|
|
||||||
{Array.from({ length: editForm.guest_count }, (_, index) => (
|
|
||||||
<TextField
|
|
||||||
key={`guest_name_${index}`}
|
|
||||||
label={`Guest ${index + 1} Name`}
|
|
||||||
name={`guest_name_${index}`}
|
|
||||||
value={editForm.guest_names[index] || ''}
|
|
||||||
onChange={handleTextInputChange}
|
|
||||||
fullWidth
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<FormControl fullWidth>
|
|
||||||
<InputLabel>What items are you bringing?</InputLabel>
|
|
||||||
<Select<string[]>
|
|
||||||
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 }}>
|
|
||||||
{selected.map((value: string) => (
|
|
||||||
<Chip
|
|
||||||
key={value}
|
|
||||||
label={value}
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</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>
|
|
||||||
<TextField
|
|
||||||
label="Other Items"
|
|
||||||
name="other_items"
|
|
||||||
value={editForm.other_items}
|
|
||||||
onChange={(e) => setEditForm(prev => ({ ...prev, other_items: e.target.value }))}
|
|
||||||
fullWidth
|
|
||||||
multiline
|
|
||||||
rows={3}
|
|
||||||
/>
|
|
||||||
</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)}
|
|
||||||
maxWidth="sm"
|
|
||||||
fullWidth
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<Dialog
|
|
||||||
open={manageItemsDialogOpen}
|
|
||||||
onClose={() => setManageItemsDialogOpen(false)}
|
|
||||||
maxWidth="sm"
|
|
||||||
fullWidth
|
|
||||||
>
|
|
||||||
<DialogTitle>Manage Needed Items</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
||||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
||||||
<TextField
|
|
||||||
label="New Item"
|
|
||||||
value={newItem}
|
|
||||||
onChange={(e) => setNewItem(e.target.value)}
|
|
||||||
fullWidth
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
onClick={handleAddItem}
|
|
||||||
disabled={!newItem.trim()}
|
|
||||||
>
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
Current Items:
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
|
||||||
{event?.needed_items && Array.isArray(event.needed_items) && event.needed_items.map((item, index) => (
|
|
||||||
<Chip
|
|
||||||
key={`${item}-${index}`}
|
|
||||||
label={item}
|
|
||||||
onDelete={() => handleRemoveItem(item)}
|
|
||||||
color={claimedItems.includes(item) ? "success" : "primary"}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<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 }}>
|
|
||||||
{/* Event Title Field */}
|
|
||||||
<TextField
|
|
||||||
label="Title"
|
|
||||||
value={updateForm.title}
|
|
||||||
onChange={(e) => setUpdateForm(prev => ({ ...prev, title: e.target.value }))}
|
|
||||||
fullWidth
|
|
||||||
/>
|
|
||||||
<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,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
label="RSVP Cut-off Date"
|
|
||||||
type="datetime-local"
|
|
||||||
value={updateForm.rsvp_cutoff_date}
|
|
||||||
onChange={(e) => setUpdateForm(prev => ({ ...prev, rsvp_cutoff_date: e.target.value }))}
|
|
||||||
fullWidth
|
|
||||||
InputLabelProps={{
|
|
||||||
shrink: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Box sx={{ mt: 1, mb: 2 }}>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
Email Notifications
|
|
||||||
</Typography>
|
|
||||||
<FormControlLabel
|
|
||||||
control={
|
|
||||||
<Checkbox
|
|
||||||
checked={updateForm.email_notifications_enabled}
|
|
||||||
onChange={(e) => setUpdateForm(prev => ({
|
|
||||||
...prev,
|
|
||||||
email_notifications_enabled: e.target.checked
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label="Enable Email Notifications"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{updateForm.email_notifications_enabled && (
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Email Recipients (comma separated)"
|
|
||||||
value={updateForm.email_recipients}
|
|
||||||
onChange={(e) => setUpdateForm(prev => ({
|
|
||||||
...prev,
|
|
||||||
email_recipients: e.target.value
|
|
||||||
}))}
|
|
||||||
variant="outlined"
|
|
||||||
placeholder="email1@example.com, email2@example.com"
|
|
||||||
helperText="Enter email addresses separated by commas"
|
|
||||||
sx={{ mt: 2 }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Event Conclusion Email Settings */}
|
|
||||||
<Box sx={{ mt: 1, mb: 2 }}>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
Event Conclusion Email
|
|
||||||
</Typography>
|
|
||||||
<FormControlLabel
|
|
||||||
control={
|
|
||||||
<Checkbox
|
|
||||||
checked={updateForm.event_conclusion_email_enabled}
|
|
||||||
onChange={(e) => setUpdateForm(prev => ({
|
|
||||||
...prev,
|
|
||||||
event_conclusion_email_enabled: e.target.checked
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label="Enable Event Conclusion Email"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{updateForm.event_conclusion_email_enabled && (
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Event conclusion message"
|
|
||||||
value={updateForm.event_conclusion_message}
|
|
||||||
onChange={(e) => setUpdateForm(prev => ({
|
|
||||||
...prev,
|
|
||||||
event_conclusion_message: e.target.value
|
|
||||||
}))}
|
|
||||||
variant="outlined"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
helperText="This message will be sent to attendees who opted for email notifications the day after the event."
|
|
||||||
sx={{ mt: 2 }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ mt: 1 }}>
|
|
||||||
<Typography variant="subtitle1" gutterBottom>
|
|
||||||
Wallpaper
|
|
||||||
</Typography>
|
|
||||||
{event.wallpaper && (
|
|
||||||
<Box sx={{ mb: 2 }}>
|
|
||||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
|
||||||
Current wallpaper:
|
|
||||||
</Typography>
|
|
||||||
<Box
|
|
||||||
component="img"
|
|
||||||
src={event.wallpaper}
|
|
||||||
alt="Current wallpaper"
|
|
||||||
sx={{
|
|
||||||
width: '100%',
|
|
||||||
maxHeight: 200, // Increased max height for better viewing
|
|
||||||
objectFit: 'contain', // Changed to contain to show the whole image
|
|
||||||
borderRadius: 1,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
component="label"
|
|
||||||
fullWidth
|
|
||||||
startIcon={<WallpaperIcon />}
|
|
||||||
sx={{ mt: 1 }}
|
|
||||||
>
|
|
||||||
{updateForm.wallpaper ? 'Change Wallpaper' : (event.wallpaper ? 'Replace Wallpaper' : 'Upload Wallpaper')}
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
hidden
|
|
||||||
accept="image/jpeg,image/png,image/gif"
|
|
||||||
onChange={handleWallpaperChange}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
{updateForm.wallpaper && (
|
|
||||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
|
|
||||||
Selected file: {updateForm.wallpaper.name}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={() => setUpdateInfoDialogOpen(false)}>Cancel</Button>
|
|
||||||
<Button onClick={handleUpdateInfoSubmit} color="primary">Save Changes</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
</Container>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EventAdmin;
|
|
||||||
|
|||||||
Reference in New Issue
Block a user