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

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

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