Skip to content

Commit

Permalink
Merge pull request #154 from makeopensource/89-create-course-styling
Browse files Browse the repository at this point in the history 
89 create course styling
  • Loading branch information
@jessehartloff
jessehartloff authored Oct 28, 2024
2 parents 4369778 + 15ec84f commit 626e40d
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 56 deletions.
2 changes: 1 addition & 1 deletion devU-client/src/components/pages/forms/courses/courseUpdatePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const CourseUpdatePage = ({ }) => {
<PageWrapper>
<h1>Update Course Form</h1>
<div className={formStyles.courseFormWrapper}>
<div className={formStyles.detailsForm}>
<div className={formStyles.updateDetailsForm}>
<h2>Course Details</h2>
<div className={formStyles.inputContainer}>
<TextField id='name' label={"Course Name*"} onChange={handleChange} value={formData.name}
Expand Down
14 changes: 10 additions & 4 deletions devU-client/src/components/pages/forms/courses/coursesFormPage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,23 @@
.form {
background-color: $list-item-background;
border-radius: 20px;
width: 70%;
padding: 30px;
width: 50%;
margin: 0 auto;
}

.detailsForm {
.updateDetailsForm {
@extend .form;
width: 70%;
max-width: 900px;
margin: 0;
}

.createDetailsForm {
@extend .form;
margin: auto;
max-width: 900px;
}

.addDropForm {
@extend .form;
width: 30%;
Expand Down Expand Up @@ -80,7 +86,7 @@ input[type='file']::file-selector-button {
flex-direction: column;
}

.detailsForm, .addDropForm {
.updateDetailsForm, .addDropForm {
width: auto; // take up full container
}
}
Expand Down
95 changes: 44 additions & 51 deletions devU-client/src/components/pages/forms/courses/coursesFormPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,51 @@
import React, {useState} from 'react'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import {useHistory} from 'react-router-dom'
import {ExpressValidationError} from 'devu-shared-modules'
import React, { useState } from 'react'
import { useHistory } from 'react-router-dom'
import { ExpressValidationError } from 'devu-shared-modules'

import PageWrapper from 'components/shared/layouts/pageWrapper'

import RequestService from 'services/request.service'

import {useActionless} from 'redux/hooks'
import { useActionless } from 'redux/hooks'
import TextField from 'components/shared/inputs/textField'
import {SET_ALERT} from 'redux/types/active.types'
import { SET_ALERT } from 'redux/types/active.types'
import formStyles from './coursesFormPage.scss'
import {applyMessageToErrorFields, removeClassFromField} from "../../../../utils/textField.utils";

import Button from '@mui/material/Button'
import { applyMessageToErrorFields, removeClassFromField } from "../../../../utils/textField.utils";


const EditCourseFormPage = () => {
const [setAlert] = useActionless(SET_ALERT)
const history = useHistory();

const [formData,setFormData] = useState({
const [formData, setFormData] = useState({
name: '',
number: '',
semester: '',
})
const [startDate, setStartDate] = useState(new Date())
const [endDate, setEndDate] = useState(new Date())

const [startDate, setStartDate] = useState(new Date().toISOString().split("T")[0])
const [endDate, setEndDate] = useState(new Date().toISOString().split("T")[0])
const [invalidFields, setInvalidFields] = useState(new Map<string, string>())

const handleChange = (value: String, e : React.ChangeEvent<HTMLInputElement>) => {
const handleChange = (value: String, e: React.ChangeEvent<HTMLInputElement>) => {
const key = e.target.id
setFormData(prevState => ({...prevState,[key] : value}))
setFormData(prevState => ({ ...prevState, [key]: value }))

const newInvalidFields = removeClassFromField(invalidFields, key)
setInvalidFields(newInvalidFields)
}
const handleStartDateChange = (date : Date) => {setStartDate(date)}
const handleEndDateChange = (date : Date) => {setEndDate(date)}

const handleStartDateChange = (event: React.ChangeEvent<HTMLInputElement>) => { setStartDate(event.target.value) }
const handleEndDateChange = (event: React.ChangeEvent<HTMLInputElement>) => { setEndDate(event.target.value) }


const handleSubmit = () => {
const finalFormData = {
name : formData.name,
number : formData.number,
semester : formData.semester,
startDate : startDate.toISOString(),
endDate : endDate.toISOString(),
name: formData.name,
number: formData.number,
semester: formData.semester,
startDate: startDate,
endDate: endDate,
}

RequestService.post('/api/courses/instructor', finalFormData)
Expand All @@ -63,42 +61,37 @@ const EditCourseFormPage = () => {
setInvalidFields(newFields);
setAlert({ autoDelete: false, type: 'error', message })
})
.finally(() => {
})
.finally(() => {
})
}

return (
<PageWrapper>
<h1>Course Form</h1>
<div className={formStyles.form}>
<TextField id='name' label={"Course Name*"} onChange={handleChange} value={formData.name}
invalidated={!!invalidFields.get("name")} helpText={invalidFields.get("name")}/>
<TextField id='number' label={"Course Number*"} onChange={handleChange} value={formData.number}
invalidated={!!invalidFields.get("number")} helpText={invalidFields.get("number")}/>
<TextField id='semester' label={"Semester*"} onChange={handleChange} value={formData.semester}
placeholder='Ex. f2022, w2023, s2024' invalidated={!!invalidFields.get("semester")}
helpText={invalidFields.get("semester")} />

<div className = {formStyles.datepickerContainer}>
<div>
<label htmlFor='start_date'>Start Date *</label>
<br/>
<DatePicker id='start_date' selected={startDate} onChange={handleStartDateChange}
className={formStyles.datepicker}/>
<h1>Create Course</h1>

<div className={formStyles.courseFormWrapper}>
<div className={formStyles.createDetailsForm}>
<TextField id='name' label={"Course Name*"} onChange={handleChange} value={formData.name}
invalidated={!!invalidFields.get("name")} helpText={invalidFields.get("name")} />
<TextField id='number' label={"Course Number*"} onChange={handleChange} value={formData.number}
invalidated={!!invalidFields.get("number")} helpText={invalidFields.get("number")} />
<TextField id='semester' label={"Semester*"} onChange={handleChange} value={formData.semester}
placeholder='Ex. f2022, w2023, s2024' invalidated={!!invalidFields.get("semester")}
helpText={invalidFields.get("semester")} />
<div className={formStyles.datepickerContainer}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', gap: '5px' }}>
<label htmlFor='start-date'>Start Date *</label>
<input type="date" id="start-date" value={startDate} onChange={handleStartDateChange} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', gap: '5px' }}>
<label htmlFor='end-date'>End Date *</label>
<input type="date" id="end-date" value={endDate} onChange={handleEndDateChange} />
</div>
</div>
<div>
<label htmlFor='end_date'>End Date *</label>
<br/>
<DatePicker id='end_date' selected={endDate} onChange={handleEndDateChange}
className={formStyles.datepicker}/>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<button className='btnPrimary' onClick={handleSubmit}>Create Course</button>
</div>
</div>
<br/>

<div style={{ display: 'flex', justifyContent: 'center' }}>
<Button variant='contained' onClick={handleSubmit} className={formStyles.submitBtn}>Submit</Button>
</div>

</div>
</PageWrapper>
)
Expand Down

0 comments on commit 626e40d

Please sign in to comment.