@@ -5,10 +5,27 @@ import './attendancePage.scss';
55interface Props {
66 open : boolean ;
77 onClose : ( ) => void ;
8+ onSubmit : ( data : {
9+ courseInfo : {
10+ id : string ;
11+ number : string ;
12+ name : string ;
13+ semester : string ;
14+ } ;
15+ date : string ;
16+ code : string ;
17+ duration : string ;
18+ description ?: string ;
19+ } ) => void ;
20+ courseInfo : {
21+ id : string ;
22+ number : string ;
23+ name : string ;
24+ semester : string ;
25+ } ;
826}
927
10- const InstructorAttendanceModal : React . FC < Props > = ( { open, onClose } ) => {
11- const [ course , setCourse ] = useState ( '' ) ;
28+ const InstructorAttendanceModal : React . FC < Props > = ( { open, onClose, onSubmit, courseInfo } ) => {
1229 const [ date , setDate ] = useState ( '' ) ;
1330 const [ code , setCode ] = useState ( '' ) ;
1431 const [ duration , setDuration ] = useState ( '15' ) ;
@@ -20,9 +37,16 @@ const InstructorAttendanceModal: React.FC<Props> = ({ open, onClose }) => {
2037 } ;
2138
2239 const handleSubmit = ( ) => {
23- const attendanceData = { course, date, code, duration, description } ;
40+ const attendanceData = {
41+ courseInfo,
42+ date,
43+ code,
44+ duration,
45+ description
46+ } ;
47+
2448 console . log ( 'Submitting attendance:' , attendanceData ) ;
25- onClose ( ) ;
49+ onSubmit ( attendanceData ) ;
2650 } ;
2751
2852 return (
@@ -32,44 +56,50 @@ const InstructorAttendanceModal: React.FC<Props> = ({ open, onClose }) => {
3256 onClose = { onClose }
3357 buttonAction = { handleSubmit }
3458 >
35- < div className = "assignment-form" >
36- < div className = "formRow" >
37- < label > Course:</ label >
38- < select value = { course } onChange = { ( e ) => setCourse ( e . target . value ) } required >
39- < option value = "" disabled > Select course</ option >
40- < option value = "CSE 312" > CSE 312: Web Applications</ option >
41- < option value = "CSE 443" > CSE 443: Software Engineering</ option >
42- < option value = "CSE 331" > CSE 331: Algorithms and Complexity</ option >
43- </ select >
59+ < div className = "assignment-form" style = { { display : 'flex' , flexDirection : 'column' , gap : '1rem' } } >
60+ < div className = "formRow" style = { { display : 'flex' , flexDirection : 'column' } } >
61+ < label >
62+ < strong > Course:</ strong >
63+ </ label >
64+ < span >
65+ { courseInfo . number } : { courseInfo . name }
66+ </ span >
4467 </ div >
45-
46- < div className = "formRow" >
68+
69+ < div className = "formRow" style = { { display : 'flex' , flexDirection : 'column' } } >
4770 < label > Session Date:</ label >
4871 < input
49- type = "date"
50- value = { date }
51- onChange = { ( e ) => setDate ( e . target . value ) }
52- required
72+ type = "date"
73+ value = { date }
74+ onChange = { ( e ) => setDate ( e . target . value ) }
75+ required
5376 />
5477 </ div >
55-
56- < div className = "formRow" >
78+
79+ < div className = "formRow" style = { { display : 'flex' , flexDirection : 'column' } } >
5780 < label > Attendance Code:</ label >
58- < div className = "code-input-row" >
81+ < div
82+ className = "code-input-row"
83+ style = { { display : 'flex' , gap : '0.5rem' } }
84+ >
5985 < input
60- type = "text"
61- value = { code }
62- onChange = { ( e ) => setCode ( e . target . value . toUpperCase ( ) ) }
63- placeholder = "Enter or generate a code"
64- required
86+ type = "text"
87+ value = { code }
88+ onChange = { ( e ) => setCode ( e . target . value . toUpperCase ( ) ) }
89+ placeholder = "Enter or generate a code"
90+ required
91+ style = { { flexGrow : 1 } }
6592 />
66- < button type = "button" className = "btnPrimary" onClick = { handleGenerateCode } >
93+ < button
94+ type = "button"
95+ className = "btnPrimary"
96+ onClick = { handleGenerateCode } >
6797 Generate
68- </ button >
98+ </ button >
6999 </ div >
70100 </ div >
71101
72- < div className = "formRow" >
102+ < div className = "formRow" style = { { display : 'flex' , flexDirection : 'column' } } >
73103 < label > Duration (minutes):</ label >
74104 < input
75105 type = "number"
@@ -80,7 +110,7 @@ const InstructorAttendanceModal: React.FC<Props> = ({ open, onClose }) => {
80110 />
81111 </ div >
82112
83- < div className = "formRow" >
113+ < div className = "formRow" style = { { display : 'flex' , flexDirection : 'column' } } >
84114 < label > Description (optional):</ label >
85115 < textarea
86116 value = { description }
0 commit comments