Skip to content

EventForm Refactor to Material UI #1844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
trillium merged 15 commits into from
Feb 11, 2025
Merged

EventForm Refactor to Material UI #1844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b19bca4
Init Commit + Notes + Example Input
sasszz Jan 23, 2025
a752351
Clean up + CSS Refactor + Full MUI Event Form
sasszz Jan 29, 2025
cee3a81
Fix text size bug
sasszz Jan 29, 2025
7c6b846
Final Version + Clean Up
sasszz Jan 30, 2025
90e5cb1
Remove console log and added inline comments
sasszz Jan 30, 2025
3f291c5
Merge branch 'development' into lucie-1699-eventform-mui
sasszz Jan 30, 2025
865fe9a
Remove console log
sasszz Jan 30, 2025
0ece683
Undo unnecessary css changes
sasszz Jan 30, 2025
7fc4389
remove 0
sasszz Jan 30, 2025
11742fd
Remove double import
sasszz Jan 30, 2025
bd935e7
Merge branch 'development' into lucie-1699-eventform-mui
sasszz Feb 4, 2025
cc89940
Feedback: div to Box and reset Date initiation in form, also removed …
sasszz Feb 6, 2025
e009ae8
remove whitespace changes
sasszz Feb 6, 2025
ee5c537
Undo changes to CSS organization
sasszz Feb 6, 2025
e533d65
Merge branch 'development' into lucie-1699-eventform-mui
dannyprikaz Feb 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/src/components/manageProjects/editableMeeting.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const EditableMeeting = ({
handleInputChange={handleInputChange}
formValues={formValues}
formErrors={formErrors}
title="Edit Recurring Event"
>
<Box>
<Button
Expand Down
195 changes: 108 additions & 87 deletions client/src/components/manageProjects/eventForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import React from 'react';
import { createClockHours } from '../../utils/createClockHours';
import {
Box,
TextField,
MenuItem,
Select,
FormControl,
InputLabel,
} from '@mui/material';
import '../../sass/ManageProjects.scss';

const EventForm = ({
Expand All @@ -11,120 +19,133 @@ const EventForm = ({
}) => {
// This creates the clock hours for the form
const clockHours = createClockHours();

return (
<div className="event-form-box">
<Box className="event-form-box">
{title && <h3 className="event-form-title">{title}</h3>}
<label className="event-form-label" htmlFor="name">
Event Name:
<input
<FormControl fullWidth>
<TextField
required
helperText={formErrors?.name ? formErrors?.name : ''}
error={formErrors?.name}
id="name"
placeholder="Meeting name..."
name="name"
value={formValues.name}
label="Event Name:"
placeholder="Meeting name..."
onChange={handleInputChange}
maxLength={30}
/>
{formErrors?.name &&
<div className="event-form-error">{formErrors.name}</div>
}
</label>
<div className="event-form-row">
<label className="event-form-label" htmlFor="eventType">
Event Type:
<select
id="eventType"
</FormControl>
<Box className="event-form-row">
<FormControl fullWidth>
<InputLabel id="event-type-label">Event Type</InputLabel>
<Select
labelId="event-type-label"
name="eventType"
value={formValues.eventType}
label="Event Type"
onChange={handleInputChange}
name="eventType"
>
<option value="Team Meeting">Team Meeting</option>
<option value="Onboarding">Onboarding</option>
</select>
</label>
<label className="event-form-label" htmlFor="day">
Day of the Week:
<select
id="day"
<MenuItem value="Team Meeting">Team Meeting</MenuItem>
<MenuItem value="Onboarding">Onboarding</MenuItem>
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel id="day-input-label">Day of the Week</InputLabel>
<Select
labelId="day-input-label"
id="day-input"
name="day"
value={formValues.day}
label="Day of the Week"
onChange={handleInputChange}
name="day"
>
<option value="0">Sunday</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>
</label>
</div>
<div className="event-form-row">
<label className="event-form-label" htmlFor="startTime">
Start Time:
<select
id="startTime"
<MenuItem value="0">Sunday</MenuItem>
<MenuItem value="1">Monday</MenuItem>
<MenuItem value="2">Tuesday</MenuItem>
<MenuItem value="3">Wednesday</MenuItem>
<MenuItem value="4">Thursday</MenuItem>
<MenuItem value="5">Friday</MenuItem>
<MenuItem value="6">Saturday</MenuItem>
</Select>
</FormControl>
</Box>
<Box className="event-form-row">
<FormControl fullWidth>
<InputLabel id="start-time-label">Start Time</InputLabel>
<Select
labelId="start-time-label"
name="startTime"
value={formValues.startTime}
label="Start Time"
onChange={handleInputChange}
name="startTime"
>
{clockHours.map((value) => {
return (
<option key={value} value={value}>
<MenuItem key={value} value={value}>
{value}
</option>
</MenuItem>
);
})}
</select>
</label>
<label className="event-form-label" htmlFor="duration">
Duration:
<select
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel id="duration-label">Duration</InputLabel>
<Select
labelId="duration-label"
id="duration"
name="duration"
value={formValues.duration}
label="Duration"
onChange={handleInputChange}
name="duration"
>
<option value=".5">.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
</select>
</label>
</div>
<label className="event-form-label" htmlFor="description">
Description:
<input
id="description"
placeholder="Meeting description..."
name="description"
value={formValues.description}
onChange={handleInputChange}
maxLength={60}
/>
</label>
<label className="event-form-label" htmlFor="videoConferenceLink">
Event Link:
<input
id="videoConferenceLink"
placeholder="Enter meeting url..."
name="videoConferenceLink"
value={formValues.videoConferenceLink}
onChange={handleInputChange}
/>
{formErrors?.videoConferenceLink &&
<div className="event-form-error">
{formErrors.videoConferenceLink}
</div>
}
</label>
<MenuItem value=".5">.5</MenuItem>
<MenuItem value="1">1</MenuItem>
<MenuItem value="1.5">1.5</MenuItem>
<MenuItem value="2">2</MenuItem>
<MenuItem value="2.5">2.5</MenuItem>
<MenuItem value="3">3</MenuItem>
<MenuItem value="3.5">3.5</MenuItem>
<MenuItem value="4">4</MenuItem>
</Select>
</FormControl>
</Box>
<Box className="event-form-row">
<FormControl fullWidth>
<TextField
id="Description"
label="Description"
variant="outlined"
name="description"
fullWidth
value={formValues.description}
onChange={handleInputChange}
/>
</FormControl>
</Box>
<Box className="event-form-row">
<FormControl fullWidth>
<TextField
required
helperText={
formErrors?.videoConferenceLink
? formErrors?.videoConferenceLink
: ''
}
error={formErrors?.videoConferenceLink}
id="Meeting URL"
label="Meeting URL"
variant="outlined"
name="videoConferenceLink"
fullWidth
value={formValues.videoConferenceLink}
onChange={handleInputChange}
/>
</FormControl>
</Box>

{children}
</div>
</Box>
);
};

Expand Down
Loading
Loading