From 974e40ec3c2f450bdd7ab18ee8a6802a4914a9be Mon Sep 17 00:00:00 2001
From: Rafael Arenas Schuchowsky <rafael.arenas352@gmail.com>
Date: Thu, 23 Mar 2017 19:14:32 -0300
Subject: [PATCH] Steps navigation and validation

---
 imports/client/views/core/Form.js                  |   8 +-
 .../org/admin/students/AddStudentFormContainer.js  |  13 +-
 .../client/views/org/admin/students/StudentForm.js | 147 +++++++++++++++++++--
 3 files changed, 156 insertions(+), 12 deletions(-)

diff --git a/imports/client/views/core/Form.js b/imports/client/views/core/Form.js
index 6f2f4b8..44b6a18 100644
--- a/imports/client/views/core/Form.js
+++ b/imports/client/views/core/Form.js
@@ -19,6 +19,7 @@ class Form extends Component {
     this.setValue = this.setValue.bind(this)
     this.setPristine = this.setPristine.bind(this)
     this.setDirty = this.setDirty.bind(this)
+    this.resetSubmitted = this.resetSubmitted.bind(this)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -44,6 +45,10 @@ class Form extends Component {
     return this.state.submitted
   }
 
+  resetSubmitted() {
+    this.setState({ submitted: false })
+  }
+
   getValue(path) {
     if (!path) {
       throw new Error(`getValue() requires a path`)
@@ -126,7 +131,8 @@ class Form extends Component {
           setValue: this.setValue,
           setPristine: this.setPristine,
           setDirty: this.setDirty,
-          reset: this.reset
+          reset: this.reset,
+          resetSubmitted: this.resetSubmitted
         })}
       </form>
     )
diff --git a/imports/client/views/org/admin/students/AddStudentFormContainer.js b/imports/client/views/org/admin/students/AddStudentFormContainer.js
index e8bec22..77d99e9 100644
--- a/imports/client/views/org/admin/students/AddStudentFormContainer.js
+++ b/imports/client/views/org/admin/students/AddStudentFormContainer.js
@@ -12,22 +12,31 @@ export class AddStudentFormContainer extends Component {
     this.state = { currentStep: 0 }
     this.handleNextClick = this.handleNextClick.bind(this)
     this.handleBackClick = this.handleBackClick.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
   }
 
   handleNextClick() {
+    console.log('handleNextClick', this.validator.getErrors())
     this.form.handleSubmit()
     if (this.validator.getErrors() && Object.keys(this.validator.getErrors()).length > 0) return
+    console.log('no errors')
     this.setState({ currentStep: this.state.currentStep + 1 })
-    this.form.reset()
+    this.form.resetSubmitted()
   }
 
   handleBackClick() {
     this.setState({ currentStep: this.state.currentStep + -1 })
   }
 
+  handleSubmit() {
+    if (this.state.currentStep === 2) {
+      alert('should submit')
+    }
+  }
+
   render() {
     return (
-      <Form onSubmit={() => alert('submitted')} ref={form => this.form = form}>
+      <Form onSubmit={this.handleSubmit} ref={form => this.form = form}>
         {({ values, setValue, getValue, isSubmitted, isDirty }) => (
           <Validator
             values={values}
diff --git a/imports/client/views/org/admin/students/StudentForm.js b/imports/client/views/org/admin/students/StudentForm.js
index acd9e43..93c0662 100644
--- a/imports/client/views/org/admin/students/StudentForm.js
+++ b/imports/client/views/org/admin/students/StudentForm.js
@@ -237,6 +237,122 @@ const StudentForm = props => (
         </Row>
       </fieldset>
     )}
+    {props.currentStep === 2 && (
+      <fieldset title="2">
+        <legend className="text-semibold">Parent information</legend>
+        <Row>
+          <Col xs={12} sm={6}>
+            <FormGroup controlId="parentName">
+              <Label>Parent Name</Label>
+              <FormControl
+                type="text"
+                value={props.getValue('parentName')}
+                placeholder="John"
+                onChange={e => props.setValue('parentName', e.target.value)}
+              />
+            </FormGroup>
+          </Col>
+          <Col xs={12} sm={6}>
+            <FormGroup controlId="parentEmail">
+              <Label>Parent Email</Label>
+              <FormControl
+                type="text"
+                value={props.getValue('parentEmail')}
+                placeholder="john@email.com"
+                onChange={e => props.setValue('parentEmail', e.target.value)}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12} sm={6}>
+            <FormGroup controlId="relation">
+              <Label>Relation</Label>
+              <FormControl
+                type="text"
+                value={props.getValue('relation')}
+                placeholder="Father"
+                onChange={e => props.setValue('relation', e.target.value)}
+              />
+            </FormGroup>
+          </Col>
+          <Col xs={12} sm={6}>
+            <FormGroup controlId="profession">
+              <Label>Profession</Label>
+              <FormControl
+                type="text"
+                value={props.getValue('profession')}
+                placeholder="Farmer"
+                onChange={e => props.setValue('profession', e.target.value)}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12} sm={6}>
+            <FormGroup controlId="parentGender">
+              <Label>Parent Gender</Label>
+              <FormControl componentClass="select"
+                placeholder="select"
+                value={props.getValue('parentGender')}
+                onChange={e => props.setValue('parentGender', e.target.value)}
+                >
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+              </FormControl>
+            </FormGroup>
+          </Col>
+          <Col xs={12} sm={6}>
+            <FormGroup controlId="parentPhone">
+              <Label>Parent Phone</Label>
+              <FormControl
+                type="text"
+                value={props.getValue('parentPhone')}
+                placeholder="9876543210"
+                onChange={e => props.setValue('parentPhone', e.target.value)}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12} sm={6}>
+            <FormGroup controlId="parentAddress">
+              <Label>Parent Address</Label>
+              <FormControl
+                type="text"
+                value={props.getValue('parentAddress')}
+                placeholder="#12, street, town"
+                onChange={e => props.setValue('parentAddress', e.target.value)}
+              />
+            </FormGroup>
+          </Col>
+          <Col xs={12} sm={6}>
+            <FormGroup controlId="parentCity">
+              <Label>Parent City</Label>
+              <FormControl
+                type="text"
+                value={props.getValue('parentCity')}
+                placeholder="Chennai"
+                onChange={e => props.setValue('parentCity', e.target.value)}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12} sm={6}>
+            <FormGroup controlId="parentZipcode">
+              <Label>Parent Zipcode</Label>
+              <FormControl
+                type="text"
+                value={props.getValue('parentZipcode')}
+                placeholder="600031"
+                onChange={e => props.setValue('parentZipcode', e.target.value)}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+      </fieldset>
+    )}
     <div style={{ textAlign: 'left' }}>
       {props.currentStep > 0 && (
         <div style={{ display: 'inline-block', marginRight: 10 }}>
@@ -247,15 +363,28 @@ const StudentForm = props => (
 
         </div>
       )}
-      <div style={{ display: 'inline-block' }}>
-        <Button
-          bsStyle="primary"
-          onClick={props.onNextClick}
-        >
-          NEXT
-          <i className="icon-arrow-right14 position-right" />
-        </Button>
-      </div>
+      {props.currentStep < 2 && (
+        <div style={{ display: 'inline-block' }}>
+          <Button
+            bsStyle="primary"
+            onClick={props.onNextClick}
+          >
+            NEXT
+            <i className="icon-arrow-right14 position-right" />
+          </Button>
+        </div>
+      )}
+      {props.currentStep === 2 && (
+        <div style={{ display: 'inline-block' }}>
+          <Button
+            bsStyle="primary"
+            onClick={props.onNextClick}
+          >
+            SAVE
+            <i className="fa fa-check" />
+          </Button>
+        </div>
+      )}
     </div>
   </div>
 )
-- 
2.0.0