RyderTech/rsvp-manager
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Implement read-only mode for RSVP edit form after cutoff date

Browse Source
This commit is contained in:
Ryderjj89
2025-05-16 20:47:27 -04:00
parent b4f133b077
commit 65367085c4
1 changed files with 181 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/src/components/RSVPEditForm.tsx
View File

@@ -51,6 +51,7 @@ const RSVPEditForm: React.FC = () => {
const navigate = useNavigate();
const [event, setEvent] = useState<Event | null>(null);
const [rsvpId, setRsvpId] = useState<number | null>(null);
const [isEventClosed, setIsEventClosed] = useState(false); // New state to track if event is closed
useEffect(() => {
const fetchRsvpDetails = async () => {
@@ -65,6 +66,21 @@ const RSVPEditForm: React.FC = () => {
throw new Error('Failed to fetch data from server');
}
// Check if event is closed for RSVPs
if (eventResponse.data.rsvp_cutoff_date) {
const cutoffDate = new Date(eventResponse.data.rsvp_cutoff_date);
if (new Date() > cutoffDate) {
setIsEventClosed(true); // Set state if closed
}
}
setEvent(eventResponse.data);
setRsvpId(rsvpResponse.data.id);
if (!eventResponse.data || !rsvpResponse.data || !rsvpsResponse.data) {
throw new Error('Failed to fetch data from server');
}
setEvent(eventResponse.data);
setRsvpId(rsvpResponse.data.id);
@@ -253,6 +269,13 @@ const RSVPEditForm: React.FC = () => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// Prevent submission if the event is closed
if (isEventClosed) {
setError('Event registration is closed. Changes are not allowed.');
return;
}
setIsSubmitting(true);
setError(null);
@@ -385,6 +408,12 @@ const RSVPEditForm: React.FC = () => {
Edit Your RSVP
</Typography>
{isEventClosed && (
<Typography color="error" align="center" sx={{ mb: 2 }}>
Event registration is closed. Changes are not allowed. Please contact the event organizer for assistance.
</Typography>
)}
{error && (
<Typography color="error" align="center" sx={{ mb: 2 }}>
{error}
@@ -400,6 +429,7 @@ const RSVPEditForm: React.FC = () => {
required
fullWidth
variant="outlined"
disabled={isEventClosed} // Disable if event is closed
/>
<FormControl fullWidth required>
@@ -534,6 +564,142 @@ const RSVPEditForm: React.FC = () => {
</>
)}
<FormControl fullWidth required disabled={isEventClosed}> {/* Disable if event is closed */}
<InputLabel>Are you attending?</InputLabel>
<Select
name="attending"
value={formData.attending}
onChange={handleSelectChange}
label="Are you attending?"
required
>
<MenuItem value="">Select an option</MenuItem>
<MenuItem value="yes">Yes</MenuItem>
<MenuItem value="no">No</MenuItem>
</Select>
</FormControl>
{formData.attending === 'yes' && (
<>
<FormControl fullWidth required disabled={isEventClosed}> {/* Disable if event is closed */}
<InputLabel>Are you bringing any guests?</InputLabel>
<Select
name="bringing_guests"
value={formData.bringing_guests}
onChange={handleSelectChange}
label="Are you bringing any guests?"
required
>
<MenuItem value="">Select an option</MenuItem>
<MenuItem value="yes">Yes</MenuItem>
<MenuItem value="no">No</MenuItem>
</Select>
</FormControl>
{formData.bringing_guests === 'yes' && (
<>
<TextField
label="Number of Guests"
name="guest_count"
type="number"
value={formData.guest_count}
onChange={(e) => {
const value = parseInt(e.target.value);
if (isNaN(value)) return;
const maxGuests = event?.max_guests_per_rsvp;
let newCount = value;
if (maxGuests !== undefined && maxGuests !== -1 && value > maxGuests) {
newCount = maxGuests;
}
if (newCount < 1) newCount = 1;
setFormData(prev => ({
...prev,
guest_count: newCount,
guest_names: Array(newCount).fill('').map((_, i) => prev.guest_names[i] || '')
}));
}}
fullWidth
variant="outlined"
required
inputProps={{
min: 1,
max: event?.max_guests_per_rsvp === -1 ? undefined : event?.max_guests_per_rsvp
}}
error={formData.guest_count < 1}
helperText={
formData.guest_count < 1
? "Number of guests must be at least 1"
: event?.max_guests_per_rsvp === 0
? "No additional guests allowed for this event"
: event?.max_guests_per_rsvp === -1
? "No limit on number of guests"
: `Maximum ${event?.max_guests_per_rsvp} additional guests allowed`
}
disabled={isEventClosed} // Disable if event is closed
/>
{Array.from({ length: formData.guest_count }).map((_, index) => (
<TextField
key={index}
fullWidth
label={`Guest ${index + 1} Name`}
name={`guest_name_${index}`}
value={formData.guest_names[index] || ''}
onChange={handleChange}
required
disabled={isEventClosed} // Disable if event is closed
/>
))}
</>
)}
{neededItems.length > 0 && (
<FormControl fullWidth disabled={isEventClosed}> {/* Disable if event is closed */}
<InputLabel>What items are you bringing?</InputLabel>
<Select
multiple
name="items_bringing"
value={formData.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) => (
<Chip key={value} label={value} />
))}
</Box>
)}
>
{neededItems.map((item) => (
<MenuItem key={item} value={item}>
<Checkbox checked={formData.items_bringing.includes(item)} />
<ListItemText primary={item} />
</MenuItem>
))}
</Select>
</FormControl>
)}
<TextField
label="Any other item(s)?"
name="other_items"
value={formData.other_items}
onChange={handleChange}
fullWidth
variant="outlined"
multiline
rows={2}
placeholder="Enter any additional items you'd like to bring"
disabled={isEventClosed} // Disable if event is closed
/>
</>
)}
{!isEventClosed && ( // Hide submit button if event is closed
<Button
type="submit"
variant="contained"
@@ -548,6 +714,7 @@ const RSVPEditForm: React.FC = () => {
>
{isSubmitting ? 'Saving Changes...' : 'Save Changes'}
</Button>
)}
</Box>
</Paper>
</Container>