diff --git a/components/individualStudentTeacherEdit.js b/components/individualStudentTeacherEdit.js
new file mode 100644
index 0000000..4f87796
--- /dev/null
+++ b/components/individualStudentTeacherEdit.js
@@ -0,0 +1,169 @@
+import React from 'react';
+import { Form, Input, Card, Button, Avatar, Space } from 'antd';
+
+import stylesheet from 'antd/dist/antd.min.css';
+const { Meta } = Card;
+
+
+export default class TeacherEditStudentComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+
+ componentDidMount() {
+ console.log("in TeacherEditStudentComponent class....");
+ console.log(this.props.individualEditStudentInformation);
+ console.log(this.props.individualEditStudentInformation.data.data.displayName);
+
+ }
+
+ backButtonComponent = () => {
+ return(
+
+ )
+ }
+
+ updateButtonComponent = () => {
+ return(
+
+ )
+ }
+
+ nameFormItemComponent = () => {
+ if(this.props.teacherStudentComponent.individualStudentTeacherEditNameError) {
+ return(
+
+ Name
+
+ this.props.handleIndividualStudentTeacherEditNameChange(event)}
+ onBlur={(event) => this.props.onBlurhandleIndividualStudentTeacherEditNameChange(event)}
+ />
+
+
+ )
+ } else {
+ return(
+
+ Name
+
+ this.props.handleIndividualStudentTeacherEditNameChange(event)}
+ onBlur={(event)=> this.props.onBlurhandleIndividualStudentTeacherEditNameChange(event)}
+ />
+
+
+ )
+ }
+ }
+
+ emailFormItemComponent = () => {
+ if(this.props.teacherStudentComponent.individualStudentTeacherEditEmailError) {
+ return(
+
+ Email
+
+ this.props.handleIndividualStudentTeacherEditEmailChange(event)}
+ onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditEmailChange(event)}
+ />
+
+
+ )
+ } else {
+ return(
+
+ Email
+
+ this.props.handleIndividualStudentTeacherEditNameChange(event)}
+ onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditEmailChange(event)}
+ />
+
+
+ )
+ }
+ }
+
+ gradeFormItemComponent = () => {
+ if(this.props.teacherStudentComponent.individualStudentTeacherEditGradeError) {
+ return(
+
+ Current Grade
+
+ this.props.handleIndividualStudentTeacherEditNameChange(event)}
+ onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditGradeChange(event)}
+ />
+
+
+ )
+ } else {
+ return(
+
+ Current Grade
+
+ this.props.handleIndividualStudentTeacherEditNameChange(event)}
+ onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditGradeChange(event)}
+ />
+
+
+ )
+ }
+ }
+
+ passwordFormItemComponent = () => {
+ return(
+
+ New Password
+
+ this.props.handleIndividualStudentTeacherEditNameChange(event)}
+ />
+
+
+ )
+ }
+
+ render() {
+ return (
+
+
+
+ }/>
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/components/nav.js b/components/nav.js
index 330e6ff..a9ff673 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -156,6 +156,12 @@ export default class Nav extends React.Component {
return
}
}
diff --git a/components/teacherDashboard.js b/components/teacherDashboard.js
index 75a7f07..02c0552 100644
--- a/components/teacherDashboard.js
+++ b/components/teacherDashboard.js
@@ -32,8 +32,19 @@ export class TeacherDashboard extends React.Component {
},
teacherStudentComponent: {
currentUserDoc: this.props.currentUserDoc,
+ // TODO: change this back to false testing really fast
+ // thnk about changing the email and password if they don't match
+ // the currently using one when editing student profiles
individualStudentEditClicked: false,
individualEditStudentInformation: null,
+ individualStudentEditLoading: false,
+ individualStudentTeacherEditName: null,
+ individualStudentTeacherEditNameError: null,
+ individualStudentTeacherEditEmail: null,
+ individualStudentTeacherEditEmailError: null,
+ individualStudentTeacherEditEmailPristine: true,
+ individualStudentTeacherEditGrade: null,
+ individualStudentTeacherEditGradeError: null,
},
}
this.handleMenuClick = this.handleMenuClick.bind(this);
@@ -44,6 +55,12 @@ export class TeacherDashboard extends React.Component {
this.markAllStudentAtendanceTheSame = this.markAllStudentAtendanceTheSame.bind(this);
this.handleStudentAttendanceDateRange = this.handleStudentAttendanceDateRange.bind(this);
this.teacherStudentComponentHandleTeacherStudentClick = this.teacherStudentComponentHandleTeacherStudentClick.bind(this);
+ this.handleIndividualStudentTeacherEditNameChange = this.handleIndividualStudentTeacherEditNameChange.bind(this);
+ this.onBlurhandleIndividualStudentTeacherEditNameChange = this.onBlurhandleIndividualStudentTeacherEditNameChange.bind(this);
+ this.handleIndividualStudentTeacherEditEmailChange = this.handleIndividualStudentTeacherEditEmailChange.bind(this);
+ this.onBlurhandleIndividualStudentTeacherEditEmailChange = this.onBlurhandleIndividualStudentTeacherEditEmailChange.bind(this);
+ this.handleIndividualStudentTeacherEditGradeChange = this.handleIndividualStudentTeacherEditGradeChange.bind(this);
+ this.onBlurhandleIndividualStudentTeacherEditGradeChange = this.onBlurhandleIndividualStudentTeacherEditGradeChange.bind(this);
}
componentDidMount() {
@@ -52,22 +69,166 @@ export class TeacherDashboard extends React.Component {
console.log(this.state.teacherStudentComponent.currentUserDoc);
}
+ /* individualStudentTeacherEdit component functions */
+ /* Email */
+ validateEmail = (email) => {
+ const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+ return re.test(String(email).toLowerCase());
+ }
+
+ handleIndividualStudentTeacherEditEmailChange = (e) => {
+ console.log("in handleIndividualStudentTeacherEditEmailChange");
+ const target = e.target;
+ const value = target.value;
+ console.log("value being set for handleIndividualStudentTeacherEditEmailChange" + value);
+
+ if(this.state.individualStudentTeacherEditEmailPristine) {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditEmail: value,
+ }
+ }));
+ } else {
+ if(this.validateEmail(value)) {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditEmail: value,
+ individualStudentTeacherEditEmailError: null,
+ }
+ }));
+ } else {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditEmail: value,
+ individualStudentTeacherEditEmailError: true,
+ }
+ }));
+ }
+ }
+ }
+
+ onBlurhandleIndividualStudentTeacherEditEmailChange = (e) => {
+ if(!this.validateEmail(this.state.teacherStudentComponent.individualStudentTeacherEditEmail)) {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditEmailError: true,
+ individualStudentTeacherEditEmailPristine: false,
+ }
+ }));
+ }
+ }
+ /* End Email */
+
+ /* Grade Level */
+ handleIndividualStudentTeacherEditGradeChange = (e) => {
+ console.log("in handleIndividualStudentTeacherEditGradeChange");
+ const target = e.target;
+ const value = target.value;
+ console.log("value being set for handleIndividualStudentTeacherEditGradeChange" + value);
+ if(value) {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditGrade: value,
+ individualStudentTeacherEditGradeError: null,
+ }
+ }));
+ } else {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditGrade: value,
+ individualStudentTeacherEditGradeError: true,
+ }
+ }));
+ }
+ }
+
+ onBlurhandleIndividualStudentTeacherEditGradeChange = (e) => {
+ e.preventDefault();
+ const target = e.target;
+ const value = target.value;
+ if(value === "") {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditGrade: value,
+ individualStudentTeacherEditGradeError: true,
+ }
+ }));
+ }
+ }
+ /* End Grade Level */
+
+ /* Name */
+ handleIndividualStudentTeacherEditNameChange = (e) => {
+ console.log("in handleIndividualStudentTeacherEditNameChange");
+ const target = e.target;
+ const value = target.value;
+ console.log("value being set for handleIndividualStudentTeacherEditNameChange" + value);
+ if(value) {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditName: value,
+ individualStudentTeacherEditNameError: null,
+ }
+ }));
+ } else {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditName: value,
+ individualStudentTeacherEditNameError: "Name can't be blank",
+ }
+ }));
+ }
+ }
+
+ onBlurhandleIndividualStudentTeacherEditNameChange = (e) => {
+ e.preventDefault();
+ const target = e.target;
+ const value = target.value;
+ if(value === "") {
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentTeacherEditName: value,
+ individualStudentTeacherEditNameError: "Name can't be blank",
+ }
+ }));
+ }
+ }
+ /* End Name */
+
+ /* individualStudentTeacherEdit component functions end */
+
/* teacherStudentComponent functions */
teacherStudentComponentHandleTeacherStudentClick = (e) => {
console.log("im in teacherStudentComponentHandleTeacherStudentClick..")
console.log("studentUid: " + e.uid);
console.log("uid: " + this.state.currentUserDoc.uid);
+ this.setState(prevState => ({
+ teacherStudentComponent: {
+ ...prevState.teacherStudentComponent,
+ individualStudentEditLoading: true
+ }
+ }));
const getStudentDocumentAsTeacher = functions.httpsCallable('getStudentDocumentAsTeacher');
getStudentDocumentAsTeacher({
uid: this.state.currentUserDoc.uid,
studentUid: e.uid,
}).then(result => {
- console.log(result);
this.setState(prevState => ({
teacherStudentComponent: {
...prevState.teacherStudentComponent,
individualStudentEditClicked: true,
- individualEditStudentInformation: result
+ individualEditStudentInformation: result,
+ individualStudentEditLoading: false,
}
}));
}).catch(err => {
@@ -314,6 +475,12 @@ export class TeacherDashboard extends React.Component {
handleStudentAttendanceOtherReasonInput={this.handleStudentAttendanceOtherReasonInput}
markAllStudentAtendanceTheSame={this.markAllStudentAtendanceTheSame}
handleStudentAttendanceDateRange={this.handleStudentAttendanceDateRange}
+ handleIndividualStudentTeacherEditNameChange={this.handleIndividualStudentTeacherEditNameChange}
+ onBlurhandleIndividualStudentTeacherEditNameChange={this.onBlurhandleIndividualStudentTeacherEditNameChange}
+ handleIndividualStudentTeacherEditEmailChange={this.handleIndividualStudentTeacherEditEmailChange}
+ onBlurhandleIndividualStudentTeacherEditEmailChange={this.handleIndividualStudentTeacherEditEmailChange}
+ handleIndividualStudentTeacherEditGradeChange={this.handleIndividualStudentTeacherEditGradeChange}
+ onBlurhandleIndividualStudentTeacherEditGradeChange={this.onBlurhandleIndividualStudentTeacherEditGradeChange}
/>
diff --git a/components/teacherStudentComponent.js b/components/teacherStudentComponent.js
index 8e230d5..a50cd6f 100644
--- a/components/teacherStudentComponent.js
+++ b/components/teacherStudentComponent.js
@@ -8,11 +8,14 @@ import { FolderAddTwoTone } from '@ant-design/icons';
const { Meta } = Card;
const { Title, Paragraph, Text } = Typography;
+import { LoadingOutlined } from '@ant-design/icons';
-import { CalendarOutlined } from '@ant-design/icons';
import stylesheet from 'antd/dist/antd.min.css';
+import TeacherEditStudentComponent from '../components/individualStudentTeacherEdit';
+
+
export default class TeacherStudentComponent extends React.Component {
constructor(props) {
super(props);
@@ -25,24 +28,29 @@ export default class TeacherStudentComponent extends React.Component {
}
titleComponent = () => {
- return(
- All Students
- )
+ if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentComponent.currentUserDoc.teacherStudents && !this.props.teacherStudentComponent.individualStudentEditClicked){
+ return(
+ All Students
+ )
+ }
}
addStudentsButtonComponent = () => {
- return(
- } size="default" style={{marginLeft: 40}}>
- Add Students
-
- )
+ if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentComponent.currentUserDoc.teacherStudents && !this.props.teacherStudentComponent.individualStudentEditClicked){
+ return(
+ } size="default" style={{marginLeft: 40}}>
+ Add Students
+
+ )
+ }
}
showStudentsComponent = (context) => {
console.log("in teacherStudentComponent");
console.log(this.props.teacherStudentComponent.currentUserDoc);
// check if the individualStudentEditClicked is clicked
- if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentComponent.currentUserDoc.teacherStudents){
+ if(this.props.teacherStudentComponent.currentUserDoc && this.props.teacherStudentComponent.currentUserDoc.teacherStudents && !this.props.teacherStudentComponent.individualStudentEditClicked){
+ const antIcon = ;
return(
{
@@ -50,7 +58,13 @@ export default class TeacherStudentComponent extends React.Component {
return(
context.props.teacherStudentComponentHandleTeacherStudentClick(d)}>Edit
+ context.props.teacherStudentComponentHandleTeacherStudentClick(d)}>
+ {context.props.teacherStudentComponent.individualStudentEditLoading ?
+
+ :
+ Edit
+ }
+
]}
>
)
+ } else if (this.props.teacherStudentComponent.individualStudentEditClicked == true) {
+ return
+ // displayName: "asdlkfj 89234"
+ // email: "alskdjf@gmail.com"
+ // emailVerified: false
+ // isNewUser: true
+ // photoURL: null
+ // teacherUid: "19IhT36iYrc8ttuKtLXgyx4yNGE2"
+ // uid: "CaAUbJk1CVeimMJRPJyJbmTHhmP2"
+ // userType: "student"
+ // TODO: add edit information with the stuff above add a save button and also a back button
} else {
return(
null