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

added selected items to rsvp form

Browse Source
This commit is contained in:
Ryderjj89
2025-10-24 18:27:23 -04:00
parent ecd53fbadb
commit bd8f0fa2cd
1 changed files with 74 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -617,65 +617,83 @@ const RSVPForm: React.FC = () => {
)}
{neededItems.length > 0 && (
<FormControl fullWidth>
<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} />
<>
{formData.items_bringing.length > 0 && (
<Box sx={{ mb: 2 }}>
<Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 500 }}>
Items you're bringing:
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
{formData.items_bringing.map((item) => (
<Chip
key={item}
label={item}
color="success"
/>
))}
</Box>
)}
open={isItemsSelectOpen} // Control open state
onOpen={() => setIsItemsSelectOpen(true)} // Set open when opened
onClose={() => setIsItemsSelectOpen(false)} // Set closed when closed
MenuProps={{
PaperProps: {
sx: {
maxHeight: 300, // Limit height of the dropdown
overflowY: 'auto',
},
},
MenuListProps: {
sx: {
},
},
}}
>
{neededItems.map((item) => (
<MenuItem key={item} value={item}>
<Checkbox checked={formData.items_bringing.includes(item)} />
<ListItemText primary={item} />
</MenuItem>
))}
<Box sx={{
position: 'sticky',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'background.paper',
padding: 1,
zIndex: 1,
borderTop: '1px solid',
borderColor: 'divider',
textAlign: 'center',
}}>
<Button
variant="contained"
onClick={() => setIsItemsSelectOpen(false)}
fullWidth
>
Done
</Button>
</Box>
</Select>
</FormControl>
)}
<FormControl fullWidth>
<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>
)}
open={isItemsSelectOpen} // Control open state
onOpen={() => setIsItemsSelectOpen(true)} // Set open when opened
onClose={() => setIsItemsSelectOpen(false)} // Set closed when closed
MenuProps={{
PaperProps: {
sx: {
maxHeight: 300, // Limit height of the dropdown
overflowY: 'auto',
},
},
MenuListProps: {
sx: {
},
},
}}
>
{neededItems.map((item) => (
<MenuItem key={item} value={item}>
<Checkbox checked={formData.items_bringing.includes(item)} />
<ListItemText primary={item} />
</MenuItem>
))}
<Box sx={{
position: 'sticky',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'background.paper',
padding: 1,
zIndex: 1,
borderTop: '1px solid',
borderColor: 'divider',
textAlign: 'center',
}}>
<Button
variant="contained"
onClick={() => setIsItemsSelectOpen(false)}
fullWidth
>
Done
</Button>
</Box>
</Select>
</FormControl>
</>
)}
<TextField