Skip to content

Commit 1d63aee

Browse files
NeemZ16NeemZ16
authored
Merge pull request #221 from makeopensource/42-create-course-modal
#42 - Implement create course modal
2 parents bcf7677 + 0d82013 commit 1d63aee

File tree

7 files changed

+185
-161
lines changed

7 files changed

+185
-161
lines changed

‎devU-client/src/components/pages/courses/courseDetailPage.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import ListItemText from '@mui/material/ListItemText';
1414

1515
import styles from './courseDetailPage.scss';
1616
//import { SET_ALERT } from '../../../redux/types/active.types';
17-
import { useAppSelector} from "../../../redux/hooks";
17+
import { useAppSelector } from "../../../redux/hooks";
1818
import AddAssignmentModal from '../forms/assignments/assignmentFormPage';
1919
import { prettyPrintSemester } from 'utils/semester.utils';
2020
import { wordPrintDate } from 'utils/date.utils';
@@ -32,16 +32,16 @@ const CourseDetailPage = () => {
3232
setOpenModal(false);
3333
};
3434

35-
// const[User, setUser]= useState < User <string>,preferredName>>({})
35+
// const[User, setUser]= useState < User <string>,preferredName>>({})
3636

37-
// const role = useAppSelector((store) => store.roleMode)
38-
/* const fetchUserinfo = async () => {
39-
RequestService.get< typeof User>('api/users')
40-
.then((User) =>{
41-
setUser(User)
42-
43-
})
44-
*/
37+
// const role = useAppSelector((store) => store.roleMode)
38+
/* const fetchUserinfo = async () => {
39+
RequestService.get< typeof User>('api/users')
40+
.then((User) =>{
41+
setUser(User)
42+
43+
})
44+
*/
4545

4646

4747
const fetchCourseInfo = async () => {

‎devU-client/src/components/pages/forms/courses/automateDates.tsx‎

Lines changed: 51 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import React, { useState, useEffect } from 'react';
22
import formStyles from './coursesFormPage.scss';
33

44
interface AutomateDatesProps {
5-
onDatesChange: (dates: { startDate: string; endDate: string }) => void;
5+
onDatesChange: (dates: { startDate: string; endDate: string, semester: string, year: string }) => void;
66
}
77

8+
9+
// FUNCTIONALITY: automatically sets start and end date on picking season, year, and session
810
const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
911
const [season, setSeason] = useState('');
1012
const [year, setYear] = useState(new Date().getFullYear().toString());
@@ -14,47 +16,19 @@ const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
1416

1517
// Hardcoded dates for each year, season, and session
1618
const dateMapping: { [key: string]: { [key: string]: { [key: string]: { start: string; end: string } } } } = {
17-
2024: {
18-
Fall: {
19-
'15 week': { start: '2024-09-01', end: '2024-12-15' },
20-
'7 week': { start: '2024-09-01', end: '2024-10-20' },
21-
Custom: { start: '', end: '' },
22-
},
23-
Spring: {
24-
'15 week': { start: '2024-02-01', end: '2024-05-15' },
25-
'7 week': { start: '2024-02-01', end: '2024-03-20' },
26-
Custom: { start: '', end: '' },
27-
},
28-
Winter: {
29-
'15 days': { start: '2024-01-02', end: '2024-01-17' },
30-
'14 days': { start: '2024-01-02', end: '2024-01-16' },
31-
Custom: { start: '', end: '' },
32-
},
33-
Summer: {
34-
'Summer Session I (J)': { start: '2024-06-01', end: '2024-06-30' },
35-
'Summer Session II (K)': { start: '2024-07-01', end: '2024-07-31' },
36-
'Summer Session III (M)': { start: '2024-08-01', end: '2024-08-30' },
37-
'9 Weeks (L)': { start: '2024-06-01', end: '2024-08-01' },
38-
'10 Weeks (A)': { start: '2024-06-01', end: '2024-08-10' },
39-
'12 Weeks (I)': { start: '2024-05-20', end: '2024-08-10' },
40-
Custom: { start: '', end: '' },
41-
},
42-
},
4319
2025: {
4420
Fall: {
4521
'15 week': { start: '2025-09-01', end: '2025-12-15' },
4622
'7 week': { start: '2025-09-01', end: '2025-10-20' },
47-
Custom: { start: '', end: '' },
4823
},
4924
Spring: {
5025
'15 week': { start: '2025-02-01', end: '2025-05-15' },
5126
'7 week': { start: '2025-02-01', end: '2025-03-20' },
52-
Custom: { start: '', end: '' },
5327
},
5428
Winter: {
5529
'15 days': { start: '2025-01-02', end: '2025-01-17' },
5630
'14 days': { start: '2025-01-02', end: '2025-01-16' },
57-
Custom: { start: '', end: '' },
31+
// Custom: { start: '', end: '' },
5832
},
5933
Summer: {
6034
'Summer Session I (J)': { start: '2025-06-01', end: '2025-06-30' },
@@ -63,24 +37,24 @@ const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
6337
'9 Weeks (L)': { start: '2025-06-01', end: '2025-08-01' },
6438
'10 Weeks (A)': { start: '2025-06-01', end: '2025-08-10' },
6539
'12 Weeks (I)': { start: '2025-05-20', end: '2025-08-10' },
66-
Custom: { start: '', end: '' },
40+
// Custom: { start: '', end: '' },
6741
},
6842
},
6943
2026: {
7044
Fall: {
7145
'15 week': { start: '2026-09-01', end: '2026-12-15' },
7246
'7 week': { start: '2026-09-01', end: '2026-10-20' },
73-
Custom: { start: '', end: '' },
47+
// Custom: { start: '', end: '' },
7448
},
7549
Spring: {
7650
'15 week': { start: '2026-02-01', end: '2026-05-15' },
7751
'7 week': { start: '2026-02-01', end: '2026-03-20' },
78-
Custom: { start: '', end: '' },
52+
// Custom: { start: '', end: '' },
7953
},
8054
Winter: {
8155
'15 days': { start: '2026-01-02', end: '2026-01-17' },
8256
'14 days': { start: '2026-01-02', end: '2026-01-16' },
83-
Custom: { start: '', end: '' },
57+
// Custom: { start: '', end: '' },
8458
},
8559
Summer: {
8660
'Summer Session I (J)': { start: '2026-06-01', end: '2026-06-30' },
@@ -89,24 +63,24 @@ const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
8963
'9 Weeks (L)': { start: '2026-06-01', end: '2026-08-01' },
9064
'10 Weeks (A)': { start: '2026-06-01', end: '2026-08-10' },
9165
'12 Weeks (I)': { start: '2026-05-20', end: '2026-08-10' },
92-
Custom: { start: '', end: '' },
66+
// Custom: { start: '', end: '' },
9367
},
9468
},
9569
2027: {
9670
Fall: {
9771
'15 week': { start: '2027-09-01', end: '2027-12-15' },
9872
'7 week': { start: '2027-09-01', end: '2027-10-20' },
99-
Custom: { start: '', end: '' },
73+
// Custom: { start: '', end: '' },
10074
},
10175
Spring: {
10276
'15 week': { start: '2027-02-01', end: '2027-05-15' },
10377
'7 week': { start: '2027-02-01', end: '2027-03-20' },
104-
Custom: { start: '', end: '' },
78+
// Custom: { start: '', end: '' },
10579
},
10680
Winter: {
10781
'15 days': { start: '2027-01-02', end: '2027-01-17' },
10882
'14 days': { start: '2027-01-02', end: '2027-01-16' },
109-
Custom: { start: '', end: '' },
83+
// Custom: { start: '', end: '' },
11084
},
11185
Summer: {
11286
'Summer Session I (J)': { start: '2027-06-01', end: '2027-06-30' },
@@ -115,24 +89,24 @@ const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
11589
'9 Weeks (L)': { start: '2027-06-01', end: '2027-08-01' },
11690
'10 Weeks (A)': { start: '2027-06-01', end: '2027-08-10' },
11791
'12 Weeks (I)': { start: '2027-05-20', end: '2027-08-10' },
118-
Custom: { start: '', end: '' },
92+
// Custom: { start: '', end: '' },
11993
},
12094
},
12195
2028: {
12296
Fall: {
12397
'15 week': { start: '2028-09-01', end: '2028-12-15' },
12498
'7 week': { start: '2028-09-01', end: '2028-10-20' },
125-
Custom: { start: '', end: '' },
99+
// Custom: { start: '', end: '' },
126100
},
127101
Spring: {
128102
'15 week': { start: '2028-02-01', end: '2028-05-15' },
129103
'7 week': { start: '2028-02-01', end: '2028-03-20' },
130-
Custom: { start: '', end: '' },
104+
// Custom: { start: '', end: '' },
131105
},
132106
Winter: {
133107
'15 days': { start: '2028-01-02', end: '2028-01-17' },
134108
'14 days': { start: '2028-01-02', end: '2028-01-16' },
135-
Custom: { start: '', end: '' },
109+
// Custom: { start: '', end: '' },
136110
},
137111
Summer: {
138112
'Summer Session I (J)': { start: '2028-06-01', end: '2028-06-30' },
@@ -141,59 +115,7 @@ const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
141115
'9 Weeks (L)': { start: '2028-06-01', end: '2028-08-01' },
142116
'10 Weeks (A)': { start: '2028-06-01', end: '2028-08-10' },
143117
'12 Weeks (I)': { start: '2028-05-20', end: '2028-08-10' },
144-
Custom: { start: '', end: '' },
145-
},
146-
},
147-
2029: {
148-
Fall: {
149-
'15 week': { start: '2029-09-01', end: '2029-12-15' },
150-
'7 week': { start: '2029-09-01', end: '2029-10-20' },
151-
Custom: { start: '', end: '' },
152-
},
153-
Spring: {
154-
'15 week': { start: '2029-02-01', end: '2029-05-15' },
155-
'7 week': { start: '2029-02-01', end: '2029-03-20' },
156-
Custom: { start: '', end: '' },
157-
},
158-
Winter: {
159-
'15 days': { start: '2029-01-02', end: '2029-01-17' },
160-
'14 days': { start: '2029-01-02', end: '2029-01-16' },
161-
Custom: { start: '', end: '' },
162-
},
163-
Summer: {
164-
'Summer Session I (J)': { start: '2029-06-01', end: '2029-06-30' },
165-
'Summer Session II (K)': { start: '2029-07-01', end: '2029-07-31' },
166-
'Summer Session III (M)': { start: '2029-08-01', end: '2029-08-30' },
167-
'9 Weeks (L)': { start: '2029-06-01', end: '2029-08-01' },
168-
'10 Weeks (A)': { start: '2029-06-01', end: '2029-08-10' },
169-
'12 Weeks (I)': { start: '2029-05-20', end: '2029-08-10' },
170-
Custom: { start: '', end: '' },
171-
},
172-
},
173-
2030: {
174-
Fall: {
175-
'15 week': { start: '2030-02-01', end: '2030-05-15' },
176-
'7 week': { start: '2030-02-01', end: '2030-10-20' },
177-
Custom: { start: '', end: '' },
178-
},
179-
Spring: {
180-
'15 week': { start: '2030-09-01', end: '2030-12-15' },
181-
'7 week': { start: '2030-09-01', end: '2030-03-20' },
182-
Custom: { start: '', end: '' },
183-
},
184-
Winter: {
185-
'15 days': { start: '2030-01-02', end: '2030-01-17' },
186-
'14 days': { start: '2030-01-02', end: '2030-01-16' },
187-
Custom: { start: '', end: '' },
188-
},
189-
Summer: {
190-
'Summer Session I (J)': { start: '2030-06-01', end: '2030-06-30' },
191-
'Summer Session II (K)': { start: '2030-07-01', end: '2030-07-31' },
192-
'Summer Session III (M)': { start: '2030-08-01', end: '2030-08-30' },
193-
'9 Weeks (L)': { start: '2030-06-01', end: '2030-08-01' },
194-
'10 Weeks (A)': { start: '2030-06-01', end: '2030-08-10' },
195-
'12 Weeks (I)': { start: '2030-05-20', end: '2030-08-10' },
196-
Custom: { start: '', end: '' },
118+
// Custom: { start: '', end: '' },
197119
},
198120
},
199121
};
@@ -206,14 +128,14 @@ const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
206128
return [
207129
{ value: '15 week', label: '15 week' },
208130
{ value: '7 week', label: '7 week' },
209-
{ value: 'Custom', label: 'Custom' },
131+
// { value: 'Custom', label: 'Custom' },
210132
];
211133
case 'Winter':
212134
return [
213135
{ value: '15 days', label: '15 days' },
214136
{ value: '14 days', label: '14 days' },
215137
// { value: '10 days', label: '10 days' },
216-
{ value: 'Custom', label: 'Custom' },
138+
// { value: 'Custom', label: 'Custom' },
217139
];
218140
case 'Summer':
219141
return [
@@ -223,7 +145,7 @@ const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
223145
{ value: '9 Weeks (L)', label: '9 Weeks (L)' },
224146
{ value: '10 Weeks (A)', label: '10 Weeks (A)' },
225147
{ value: '12 Weeks (I)', label: '12 Weeks (I)' },
226-
{ value: 'Custom', label: 'Custom' },
148+
// { value: 'Custom', label: 'Custom' },
227149
];
228150
default:
229151
return [];
@@ -232,7 +154,6 @@ const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
232154

233155
// Update start and end dates based on selected year, season, and session
234156
const updateDates = () => {
235-
console.log("year, season, session: ", year, season, session);
236157
if (dateMapping[year]?.[season]?.[session]) {
237158
const { start, end } = dateMapping[year][season][session];
238159
setStartDate(start);
@@ -268,40 +189,41 @@ const AutomateDates = ({ onDatesChange }: AutomateDatesProps) => {
268189
}, [season]);
269190

270191
useEffect(() => {
271-
onDatesChange({ startDate, endDate });
192+
onDatesChange({ startDate, endDate, semester: season, year });
272193
}, [startDate, endDate, onDatesChange]);
273194

274195
return (
275-
<div className={formStyles.semesterOptions}>
276-
<div className={formStyles.fieldContainer}>
277-
<label htmlFor="season">Season</label>
278-
<select id="season" value={season} onChange={(e) => setSeason(e.target.value)}>
279-
<option value="">Select Season</option>
280-
<option value="Fall">Fall</option>
281-
<option value="Winter">Winter</option>
282-
<option value="Spring">Spring</option>
283-
<option value="Summer">Summer</option>
284-
</select>
285-
</div>
286-
287-
<div className={formStyles.fieldContainer}>
288-
<label htmlFor="year">Year</label>
289-
<select id="year" value={year} onChange={(e) => setYear(e.target.value)}>
290-
{Array.from({ length: 7 }, (_, i) => (new Date().getFullYear() + i).toString()).map((year) => (
291-
<option key={year} value={year}>{year}</option>
292-
))}
293-
</select>
294-
</div>
295-
296-
<div className={formStyles.fieldContainer}>
297-
<label htmlFor="session">Session</label>
298-
<select id="session" value={session} onChange={(e) => setSession(e.target.value)}>
299-
{getSessionOptions(season).map((option) => (
300-
<option key={option.value} value={option.value}>{option.label}</option>
301-
))}
302-
</select>
196+
<>
197+
<div className="input-subgroup-2col">
198+
<div className={formStyles.fieldContainer}>
199+
<label htmlFor="season">Semester:</label>
200+
<select id="season" value={season} onChange={(e) => setSeason(e.target.value)}>
201+
<option value="">Select Semester</option>
202+
<option value="Fall">Fall</option>
203+
<option value="Winter">Winter</option>
204+
<option value="Spring">Spring</option>
205+
<option value="Summer">Summer</option>
206+
</select>
207+
</div>
208+
<div className={formStyles.fieldContainer}>
209+
<label htmlFor="year">Year:</label>
210+
<select id="year" value={year} onChange={(e) => setYear(e.target.value)}>
211+
{Array.from({ length: 4 }, (_, i) => (new Date().getFullYear() + i).toString()).map((year) => (
212+
<option key={year} value={year}>{year}</option>
213+
))}
214+
</select>
215+
</div>
303216
</div>
304-
</div>
217+
<div className={formStyles.fieldContainer}>
218+
<label htmlFor="session">Session:</label>
219+
<select id="session" value={session} onChange={(e) => setSession(e.target.value)}>
220+
<option value="">Select Session</option>
221+
{getSessionOptions(season).map((option) => (
222+
<option key={option.value} value={option.value}>{option.label}</option>
223+
))}
224+
</select>
225+
</div>
226+
</>
305227
);
306228
}
307229

‎devU-client/src/components/pages/forms/courses/coursesFormPage.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,17 @@ input[type='date'] {
7979
.fieldContainer {
8080
display: flex;
8181
justify-content: center;
82-
align-items: center;
8382
flex-direction: column;
8483
gap: 5px;
8584
}
8685

8786
select {
8887
background: $input-field-background;
8988
color: $input-field-label;
90-
padding: 0.625rem 1rem;
89+
padding: 10px;
9190
border: none;
92-
border-radius: 100px;
91+
border-radius: 10px;
92+
width: 100%;
9393
}
9494

9595
input[type='file']::file-selector-button {

0 commit comments

Comments
 (0)