[go: nahoru, domu]
Skip to content

Commit

Permalink
#2 component for adding students
Browse files Browse the repository at this point in the history
  • Loading branch information
@MirTalpur
MirTalpur committed Aug 29, 2020
1 parent d5a55dd commit 703deed
Show file tree
Hide file tree
Showing 4 changed files with 249 additions and 7 deletions.
6 changes: 6 additions & 0 deletions components/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,12 @@ export default class Nav extends React.Component {
handleIndividualStudentTeacherUpload={this.props.handleIndividualStudentTeacherUpload}
handleIndividualStudentTeacherBackClicked={this.props.handleIndividualStudentTeacherBackClicked}
handleTeacherStudentComponentAddStudents={this.props.handleTeacherStudentComponentAddStudents}
handleCancelTeacherStudentAdd = {this.props.handleCancelTeacherStudentAdd}
handleSubmitTeacherStudentAdd = {this.props.handleSubmitTeacherStudentAdd}
handleTeacherStudentAddName={this.props.handleTeacherStudentAddName}
onBlurhandleTeacherStudentAddName={this.props.onBlurhandleTeacherStudentAddName}
handleTeacherStudentAddCurrentGrade={this.props.handleTeacherStudentAddCurrentGrade}
onBlurhandleTeacherStudentAddCurrentGrade={this.props.onBlurhandleTeacherStudentAddCurrentGrade}
/>
}
}
Expand Down
119 changes: 119 additions & 0 deletions components/teacherDashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,13 @@ export class TeacherDashboard extends React.Component {
individualStudentTeacherProfilePicFile: null,
individualStudentTeacherEditUpdateButtonError: null,
individualStudentTeacherEditUpdateButtonLoading: false,
teacherStudentAddModalVisible: true,
teacherStudentAddName: "",
teacherStudentAddNameError: false,
teacherStudentAddEmail: "",
teacherStudentAddPhotoURL: "",
teacherStudentAddCurrentGrade: "",
teacherStudentAddCurrentGradeError: false,
},
}
this.handleMenuClick = this.handleMenuClick.bind(this);
Expand All @@ -74,6 +81,12 @@ export class TeacherDashboard extends React.Component {
this.handleIndividualStudentTeacherUpload = this.handleIndividualStudentTeacherUpload.bind(this);
this.handleIndividualStudentTeacherBackClicked = this.handleIndividualStudentTeacherBackClicked.bind(this);
this.handleTeacherStudentComponentAddStudents = this.handleTeacherStudentComponentAddStudents.bind(this);
this.handleCancelTeacherStudentAdd = this.handleCancelTeacherStudentAdd.bind(this);
this.handleSubmitTeacherStudentAdd = this.handleSubmitTeacherStudentAdd.bind(this);
this.handleTeacherStudentAddName = this.handleTeacherStudentAddName.bind(this);
this.onBlurhandleTeacherStudentAddName = this.onBlurhandleTeacherStudentAddName.bind(this);
this.handleTeacherStudentAddCurrentGrade = this.handleTeacherStudentAddCurrentGrade.bind(this);
this.onBlurhandleTeacherStudentAddCurrentGrade = this.onBlurhandleTeacherStudentAddCurrentGrade.bind(this);
}

componentDidMount() {
Expand Down Expand Up @@ -485,6 +498,103 @@ export class TeacherDashboard extends React.Component {
}

/* Back Button End */

/* teacherStudentAdd */
handleSubmitTeacherStudentAdd = (e) => {

}

handleCancelTeacherStudentAdd = (e) => {
this.setState(prevState => ({
teacherStudentComponent: {
...prevState.teacherStudentComponent,
teacherStudentAddModalVisible: false,
teacherStudentComponentAddStudentsClicked: false,
teacherStudentAddModalVisible: true,
teacherStudentAddName: "",
teacherStudentAddEmail: "",
teacherStudentAddPhotoURL: "",
teacherStudentAddCurrentGrade: "",
teacherStudentAddNameError: false,

}
}));
}

handleTeacherStudentAddName = (e) => {
console.log("in handleTeacherStudentAddName");
e.preventDefault();
const target = e.target;
const value = target.value;
console.log("value: " + value);
if(value){
this.setState(prevState => ({
teacherStudentComponent: {
...prevState.teacherStudentComponent,
teacherStudentAddName: value,
teacherStudentAddNameError: false,
}
}));
} else {
this.setState(prevState => ({
teacherStudentComponent: {
...prevState.teacherStudentComponent,
teacherStudentAddName: value,
}
}));
}
}

onBlurhandleTeacherStudentAddName = (e) => {
e.preventDefault();
if (!this.state.teacherStudentComponent.teacherStudentAddName) {
this.setState(prevState => ({
teacherStudentComponent: {
...prevState.teacherStudentComponent,
teacherStudentAddNameError: true,
}
}));
}
}

handleTeacherStudentAddCurrentGrade = (e) => {
console.log("in handleTeacherStudentAddCurrentGrade");
e.preventDefault();
const target = e.target;
const value = target.value;
console.log("value: " + value);
if(value){
this.setState(prevState => ({
teacherStudentComponent: {
...prevState.teacherStudentComponent,
teacherStudentAddCurrentGrade: value,
teacherStudentAddCurrentGradeError: false,
}
}));
} else {
this.setState(prevState => ({
teacherStudentComponent: {
...prevState.teacherStudentComponent,
teacherStudentAddCurrentGrade: value,
}
}));
}
}

onBlurhandleTeacherStudentAddCurrentGrade = (e) => {
e.preventDefault();
if (!this.state.teacherStudentComponent.teacherStudentAddCurrentGrade) {
this.setState(prevState => ({
teacherStudentComponent: {
...prevState.teacherStudentComponent,
teacherStudentAddCurrentGradeError: true,
}
}));
}
}

/* teacherStudentAdd End */

/* individualStudentTeacherEdit component functions end */

/* teacherStudentComponent functions */
Expand Down Expand Up @@ -518,6 +628,7 @@ export class TeacherDashboard extends React.Component {
teacherStudentComponent: {
...prevState.teacherStudentComponent,
teacherStudentComponentAddStudentsClicked: true

}
}));
}
Expand Down Expand Up @@ -774,6 +885,14 @@ export class TeacherDashboard extends React.Component {
handleIndividualStudentTeacherUpload={this.handleIndividualStudentTeacherUpload}
handleIndividualStudentTeacherBackClicked={this.handleIndividualStudentTeacherBackClicked}
handleTeacherStudentComponentAddStudents={this.handleTeacherStudentComponentAddStudents}
handleCancelTeacherStudentAdd={this.handleCancelTeacherStudentAdd}
handleSubmitTeacherStudentAdd={this.handleSubmitTeacherStudentAdd}
handleTeacherStudentAddName={this.handleTeacherStudentAddName}
onBlurhandleTeacherStudentAddName={this.onBlurhandleTeacherStudentAddName}
handleTeacherStudentAddName={this.handleTeacherStudentAddName}
onBlurhandleTeacherStudentAddName={this.onBlurhandleTeacherStudentAddName}
handleTeacherStudentAddCurrentGrade={this.handleTeacherStudentAddCurrentGrade}
onBlurhandleTeacherStudentAddCurrentGrade={this.onBlurhandleTeacherStudentAddCurrentGrade}
/>
</div>
</React.Fragment>
Expand Down
120 changes: 114 additions & 6 deletions components/teacherStudentAdd.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Modal } from 'antd';
import { Modal, Button, Form, Space, Input } from 'antd';

import stylesheet from 'antd/dist/antd.min.css';
import { UploadOutlined, LoadingOutlined } from '@ant-design/icons';
Expand All @@ -15,18 +15,126 @@ export default class TeacherStudentAdd extends React.Component {
console.log("in teacherStudentAdd class....");
}

nameComponent = () => {
if(this.props.teacherStudentComponent.teacherStudentAddNameError) {
return(
<div>
<p>Name</p>
<Form.Item
validateStatus="error"
help="Student Name can't be empty">
<Input size="medium" style={{ borderWidth: "0 0 2px" }}
onChange={(e) => this.props.handleTeacherStudentAddName(e)}
value={this.props.teacherStudentComponent.teacherStudentAddName}
onBlur={(e) => this.props.onBlurhandleTeacherStudentAddName(e)}
/>
</Form.Item>
</div>
)
} else {
return(
<div>
<p>Name</p>
<Form.Item>
<Input size="medium" style={{ borderWidth: "0 0 2px" }}
onChange={(e) => this.props.handleTeacherStudentAddName(e)}
value={this.props.teacherStudentComponent.teacherStudentAddName}
onBlur={(e) => this.props.onBlurhandleTeacherStudentAddName(e)}
/>
</Form.Item>
</div>
)
}
}

// emailComponent = () => {
// if(this.props.teacherStudentComponent.teacherStudentAddEmailError) {
// return(
// <div>
// <p>Email</p>
// <Form.Item
// validateStatus="error"
// help="Student Email not valid">
// <Input size="medium" style={{ borderWidth: "0 0 2px" }}
// => this.props.handleTeacherStudentAddEmail(e)}
// value={this.props.teacherStudentComponent.teacherStudentAddEmail}
// => this.props.onBlurhandleTeacherStudentAddEmail(e)}
// />
// </Form.Item>
// </div>
// )
// } else {
// return(
// <div>
// <p>Name</p>
// <Form.Item>
// <Input size="medium" style={{ borderWidth: "0 0 2px" }}
// => this.props.handleTeacherStudentAddName(e)}
// value={this.props.teacherStudentComponent.teacherStudentAddName}
// => this.props.onBlurhandleTeacherStudentAddName(e)}
// />
// </Form.Item>
// </div>
// )
// }
// }

currentGradeComponent = () => {
if(this.props.teacherStudentComponent.teacherStudentAddCurrentGradeError) {
return(
<div>
<p>Current Grade</p>
<Form.Item
validateStatus="error"
help="Grade can't be empty">
<Input size="medium" style={{ borderWidth: "0 0 2px" }}
onChange={(e) => this.props.handleTeacherStudentAddCurrentGrade(e)}
value={this.props.teacherStudentComponent.teacherStudentAddCurrentGrade}
onBlur={(e) => this.props.onBlurhandleTeacherStudentAddCurrentGrade(e)}
/>
</Form.Item>
</div>
)
} else {
return(
<div>
<p>Current Grade</p>
<Form.Item>
<Input size="medium" style={{ borderWidth: "0 0 2px" }}
onChange={(e) => this.props.handleTeacherStudentAddCurrentGrade(e)}
value={this.props.teacherStudentComponent.teacherStudentAddCurrentGrade}
onBlur={(e) => this.props.onBlurhandleTeacherStudentAddCurrentGrade(e)}
/>
</Form.Item>
</div>
)
}
}

render() {
return (
<React.Fragment>
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
<div>
<Modal
title="Basic Modal"
visible={true}
title="Add Student"
visible={this.props.teacherStudentComponent.teacherStudentAddModalVisible}
onCancel={this.props.handleCancelTeacherStudentAdd}
onOk={this.props.handleSubmitTeacherStudentAdd}
footer={[
<Button key="back" onClick={(e) => this.props.handleCancelTeacherStudentAdd(e)}>
Return
</Button>,
<Button key="submit" type="primary" onClick={(e) => this.props.handleSubmitTeacherStudentAdd(e)}>
Submit
</Button>,
]}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<Form name="student_information">
<Space/>
{this.nameComponent()}
{this.currentGradeComponent()}
</Form>
</Modal>
</div>
</React.Fragment>
Expand Down
11 changes: 10 additions & 1 deletion components/teacherStudentComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,17 @@ export default class TeacherStudentComponent extends React.Component {
handleIndividualStudentTeacherBackClicked={this.props.handleIndividualStudentTeacherBackClicked}
/>
} else if(this.props.teacherStudentComponent.teacherStudentComponentAddStudentsClicked === true && !this.props.teacherStudentComponent.individualStudentEditClicked) {
return <TeacherStudentAdd />
return <TeacherStudentAdd
handleCancelTeacherStudentAdd = {this.props.handleCancelTeacherStudentAdd}
handleSubmitTeacherStudentAdd = {this.props.handleSubmitTeacherStudentAdd}
handleTeacherStudentAddName={this.props.handleTeacherStudentAddName}
onBlurhandleTeacherStudentAddName={this.props.onBlurhandleTeacherStudentAddName}
handleTeacherStudentAddCurrentGrade={this.props.handleTeacherStudentAddCurrentGrade}
onBlurhandleTeacherStudentAddCurrentGrade={this.props.onBlurhandleTeacherStudentAddCurrentGrade}
teacherStudentComponent={this.props.teacherStudentComponent}
/>
} else {
console.log("I'm in the null...");
return(
null
)
Expand Down

0 comments on commit 703deed

Please sign in to comment.