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

feat: improve guest selection in rsvp form

Browse Source
This commit is contained in:
Ryderjj89
2025-06-24 17:17:39 -04:00
parent 630cf7be41
commit ecd53fbadb
1 changed files with 63 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/components/RSVPForm.tsx
View File

@@ -538,51 +538,69 @@ const RSVPForm: React.FC = () => {
{formData.bringing_guests === 'yes' && ( {formData.bringing_guests === 'yes' && (
<> <>
<TextField {/* Render dropdown if there's a max limit, otherwise render number input */}
label="Number of Guests" {event?.max_guests_per_rsvp !== undefined && event?.max_guests_per_rsvp !== -1 ? (
name="guest_count" <FormControl fullWidth required>
type="number" <InputLabel>Number of Guests</InputLabel>
value={formData.guest_count} <Select
onChange={(e) => { name="guest_count"
const value = parseInt(e.target.value); value={formData.guest_count.toString()}
if (isNaN(value)) return; onChange={(e) => {
const value = parseInt(e.target.value);
// Check if there's a maximum guest limit setFormData(prev => ({
const maxGuests = event?.max_guests_per_rsvp; ...prev,
let newCount = value; guest_count: value,
guest_names: Array(value).fill('').map((_, i) => prev.guest_names[i] || '')
// If max_guests_per_rsvp is set and not -1 (unlimited), enforce the limit }));
if (maxGuests !== undefined && maxGuests !== -1 && value > maxGuests) { }}
newCount = maxGuests; label="Number of Guests"
} required
>
// Ensure count is at least 1 {Array.from({ length: event.max_guests_per_rsvp }, (_, i) => i + 1).map((num) => (
if (newCount < 1) newCount = 1; <MenuItem key={num} value={num.toString()}>
{num}
setFormData(prev => ({ </MenuItem>
...prev, ))}
guest_count: newCount, </Select>
guest_names: Array(newCount).fill('').map((_, i) => prev.guest_names[i] || '') <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, ml: 1.75 }}>
})); Maximum {event.max_guests_per_rsvp} additional guests allowed
}} </Typography>
fullWidth </FormControl>
variant="outlined" ) : (
required <TextField
inputProps={{ label="Number of Guests"
min: 1, name="guest_count"
max: event?.max_guests_per_rsvp === -1 ? undefined : event?.max_guests_per_rsvp value={formData.guest_count}
}} onChange={(e) => {
error={formData.guest_count < 1} const value = e.target.value;
helperText={ // Only allow numbers
formData.guest_count < 1 if (!/^\d*$/.test(value)) return;
? "Number of guests must be at least 1"
: event?.max_guests_per_rsvp === 0 const numValue = parseInt(value) || 0;
? "No additional guests allowed for this event" // Ensure count is at least 1 when not empty
: event?.max_guests_per_rsvp === -1 const newCount = value === '' ? 0 : Math.max(1, numValue);
? "No limit on number of guests"
: `Maximum ${event?.max_guests_per_rsvp} additional guests allowed` setFormData(prev => ({
} ...prev,
/> guest_count: newCount,
guest_names: Array(newCount).fill('').map((_, i) => prev.guest_names[i] || '')
}));
}}
fullWidth
variant="outlined"
required
inputProps={{
inputMode: 'numeric',
pattern: '[0-9]*'
}}
error={formData.guest_count < 1}
helperText={
formData.guest_count < 1
? "Number of guests must be at least 1"
: "No limit on number of guests"
}
/>
)}
{Array.from({ length: formData.guest_count }).map((_, index) => ( {Array.from({ length: formData.guest_count }).map((_, index) => (
<TextField <TextField