Skip to content

Commit e2ec0fe

Browse files
trilliumtrillium
authored
Merge pull request #1844 from sasszz/lucie-1699-eventform-mui
EventForm Refactor to Material UI
2 parents 38cf12a + e533d65 commit e2ec0fe

File tree

4 files changed

+267
-268
lines changed

4 files changed

+267
-268
lines changed

‎client/src/components/manageProjects/editableMeeting.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const EditableMeeting = ({
4949
handleInputChange={handleInputChange}
5050
formValues={formValues}
5151
formErrors={formErrors}
52+
title="Edit Recurring Event"
5253
>
5354
<Box>
5455
<Button

‎client/src/components/manageProjects/eventForm.jsx‎

Lines changed: 108 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import React from 'react';
22
import { createClockHours } from '../../utils/createClockHours';
3+
import {
4+
Box,
5+
TextField,
6+
MenuItem,
7+
Select,
8+
FormControl,
9+
InputLabel,
10+
} from '@mui/material';
311
import '../../sass/ManageProjects.scss';
412

513
const EventForm = ({
@@ -11,120 +19,133 @@ const EventForm = ({
1119
}) => {
1220
// This creates the clock hours for the form
1321
const clockHours = createClockHours();
22+
1423
return (
15-
<div className="event-form-box">
24+
<Box className="event-form-box">
1625
{title && <h3 className="event-form-title">{title}</h3>}
17-
<label className="event-form-label" htmlFor="name">
18-
Event Name:
19-
<input
26+
<FormControl fullWidth>
27+
<TextField
28+
required
29+
helperText={formErrors?.name ? formErrors?.name : ''}
30+
error={formErrors?.name}
2031
id="name"
21-
placeholder="Meeting name..."
2232
name="name"
2333
value={formValues.name}
34+
label="Event Name:"
35+
placeholder="Meeting name..."
2436
onChange={handleInputChange}
25-
maxLength={30}
2637
/>
27-
{formErrors?.name &&
28-
<div className="event-form-error">{formErrors.name}</div>
29-
}
30-
</label>
31-
<div className="event-form-row">
32-
<label className="event-form-label" htmlFor="eventType">
33-
Event Type:
34-
<select
35-
id="eventType"
38+
</FormControl>
39+
<Box className="event-form-row">
40+
<FormControl fullWidth>
41+
<InputLabel id="event-type-label">Event Type</InputLabel>
42+
<Select
43+
labelId="event-type-label"
44+
name="eventType"
3645
value={formValues.eventType}
46+
label="Event Type"
3747
onChange={handleInputChange}
38-
name="eventType"
3948
>
40-
<option value="Team Meeting">Team Meeting</option>
41-
<option value="Onboarding">Onboarding</option>
42-
</select>
43-
</label>
44-
<label className="event-form-label" htmlFor="day">
45-
Day of the Week:
46-
<select
47-
id="day"
49+
<MenuItem value="Team Meeting">Team Meeting</MenuItem>
50+
<MenuItem value="Onboarding">Onboarding</MenuItem>
51+
</Select>
52+
</FormControl>
53+
<FormControl fullWidth>
54+
<InputLabel id="day-input-label">Day of the Week</InputLabel>
55+
<Select
56+
labelId="day-input-label"
57+
id="day-input"
58+
name="day"
4859
value={formValues.day}
60+
label="Day of the Week"
4961
onChange={handleInputChange}
50-
name="day"
5162
>
52-
<option value="0">Sunday</option>
53-
<option value="1">Monday</option>
54-
<option value="2">Tuesday</option>
55-
<option value="3">Wednesday</option>
56-
<option value="4">Thursday</option>
57-
<option value="5">Friday</option>
58-
<option value="6">Saturday</option>
59-
</select>
60-
</label>
61-
</div>
62-
<div className="event-form-row">
63-
<label className="event-form-label" htmlFor="startTime">
64-
Start Time:
65-
<select
66-
id="startTime"
63+
<MenuItem value="0">Sunday</MenuItem>
64+
<MenuItem value="1">Monday</MenuItem>
65+
<MenuItem value="2">Tuesday</MenuItem>
66+
<MenuItem value="3">Wednesday</MenuItem>
67+
<MenuItem value="4">Thursday</MenuItem>
68+
<MenuItem value="5">Friday</MenuItem>
69+
<MenuItem value="6">Saturday</MenuItem>
70+
</Select>
71+
</FormControl>
72+
</Box>
73+
<Box className="event-form-row">
74+
<FormControl fullWidth>
75+
<InputLabel id="start-time-label">Start Time</InputLabel>
76+
<Select
77+
labelId="start-time-label"
78+
name="startTime"
6779
value={formValues.startTime}
80+
label="Start Time"
6881
onChange={handleInputChange}
69-
name="startTime"
7082
>
7183
{clockHours.map((value) => {
7284
return (
73-
<option key={value} value={value}>
85+
<MenuItem key={value} value={value}>
7486
{value}
75-
</option>
87+
</MenuItem>
7688
);
7789
})}
78-
</select>
79-
</label>
80-
<label className="event-form-label" htmlFor="duration">
81-
Duration:
82-
<select
90+
</Select>
91+
</FormControl>
92+
<FormControl fullWidth>
93+
<InputLabel id="duration-label">Duration</InputLabel>
94+
<Select
95+
labelId="duration-label"
8396
id="duration"
97+
name="duration"
8498
value={formValues.duration}
99+
label="Duration"
85100
onChange={handleInputChange}
86-
name="duration"
87101
>
88-
<option value=".5">.5</option>
89-
<option value="1">1</option>
90-
<option value="1.5">1.5</option>
91-
<option value="2">2</option>
92-
<option value="2.5">2.5</option>
93-
<option value="3">3</option>
94-
<option value="3.5">3.5</option>
95-
<option value="4">4</option>
96-
</select>
97-
</label>
98-
</div>
99-
<label className="event-form-label" htmlFor="description">
100-
Description:
101-
<input
102-
id="description"
103-
placeholder="Meeting description..."
104-
name="description"
105-
value={formValues.description}
106-
onChange={handleInputChange}
107-
maxLength={60}
108-
/>
109-
</label>
110-
<label className="event-form-label" htmlFor="videoConferenceLink">
111-
Event Link:
112-
<input
113-
id="videoConferenceLink"
114-
placeholder="Enter meeting url..."
115-
name="videoConferenceLink"
116-
value={formValues.videoConferenceLink}
117-
onChange={handleInputChange}
118-
/>
119-
{formErrors?.videoConferenceLink &&
120-
<div className="event-form-error">
121-
{formErrors.videoConferenceLink}
122-
</div>
123-
}
124-
</label>
102+
<MenuItem value=".5">.5</MenuItem>
103+
<MenuItem value="1">1</MenuItem>
104+
<MenuItem value="1.5">1.5</MenuItem>
105+
<MenuItem value="2">2</MenuItem>
106+
<MenuItem value="2.5">2.5</MenuItem>
107+
<MenuItem value="3">3</MenuItem>
108+
<MenuItem value="3.5">3.5</MenuItem>
109+
<MenuItem value="4">4</MenuItem>
110+
</Select>
111+
</FormControl>
112+
</Box>
113+
<Box className="event-form-row">
114+
<FormControl fullWidth>
115+
<TextField
116+
id="Description"
117+
label="Description"
118+
variant="outlined"
119+
name="description"
120+
fullWidth
121+
value={formValues.description}
122+
onChange={handleInputChange}
123+
/>
124+
</FormControl>
125+
</Box>
126+
<Box className="event-form-row">
127+
<FormControl fullWidth>
128+
<TextField
129+
required
130+
helperText={
131+
formErrors?.videoConferenceLink
132+
? formErrors?.videoConferenceLink
133+
: ''
134+
}
135+
error={formErrors?.videoConferenceLink}
136+
id="Meeting URL"
137+
label="Meeting URL"
138+
variant="outlined"
139+
name="videoConferenceLink"
140+
fullWidth
141+
value={formValues.videoConferenceLink}
142+
onChange={handleInputChange}
143+
/>
144+
</FormControl>
145+
</Box>
125146

126147
{children}
127-
</div>
148+
</Box>
128149
);
129150
};
130151

0 commit comments

Comments
 (0)