Steps navigation and validation

Rafael Arenas Schuchowsky
1 parent 07ce8d1c95
Showing 3 changed files with 156 additions and 12 deletions Show diff stats
imports/client/views/core/Form.js
imports/client/views/org/admin/students/AddStudentFormContainer.js
imports/client/views/org/admin/students/StudentForm.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>
     )
@@ -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}
@@ -237,6 +237,122 @@ const StudentForm = props =&gt; (
         </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 =&gt; (
  
         </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>
 )
...	...	@@ -19,6 +19,7 @@ class Form extends Component {
19	19	this.setValue = this.setValue.bind(this)
20	20	this.setPristine = this.setPristine.bind(this)
21	21	this.setDirty = this.setDirty.bind(this)
	22	+ this.resetSubmitted = this.resetSubmitted.bind(this)
22	23	}
23	24
24	25	componentWillReceiveProps(nextProps) {
...	...	@@ -44,6 +45,10 @@ class Form extends Component {
44	45	return this.state.submitted
45	46	}
46	47
	48	+ resetSubmitted() {
	49	+ this.setState({ submitted: false })
	50	+ }
	51	+
47	52	getValue(path) {
48	53	if (!path) {
49	54	throw new Error(`getValue() requires a path`)
...	...	@@ -126,7 +131,8 @@ class Form extends Component {
126	131	setValue: this.setValue,
127	132	setPristine: this.setPristine,
128	133	setDirty: this.setDirty,
129		- reset: this.reset
	134	+ reset: this.reset,
	135	+ resetSubmitted: this.resetSubmitted
130	136	})}
131	137	</form>
132	138	)
...	...
...	...	@@ -12,22 +12,31 @@ export class AddStudentFormContainer extends Component {
12	12	this.state = { currentStep: 0 }
13	13	this.handleNextClick = this.handleNextClick.bind(this)
14	14	this.handleBackClick = this.handleBackClick.bind(this)
	15	+ this.handleSubmit = this.handleSubmit.bind(this)
15	16	}
16	17
17	18	handleNextClick() {
	19	+ console.log('handleNextClick', this.validator.getErrors())
18	20	this.form.handleSubmit()
19	21	if (this.validator.getErrors() && Object.keys(this.validator.getErrors()).length > 0) return
	22	+ console.log('no errors')
20	23	this.setState({ currentStep: this.state.currentStep + 1 })
21		- this.form.reset()
	24	+ this.form.resetSubmitted()
22	25	}
23	26
24	27	handleBackClick() {
25	28	this.setState({ currentStep: this.state.currentStep + -1 })
26	29	}
27	30
	31	+ handleSubmit() {
	32	+ if (this.state.currentStep === 2) {
	33	+ alert('should submit')
	34	+ }
	35	+ }
	36	+
28	37	render() {
29	38	return (
30		- <Form onSubmit={() => alert('submitted')} ref={form => this.form = form}>
	39	+ <Form onSubmit={this.handleSubmit} ref={form => this.form = form}>
31	40	{({ values, setValue, getValue, isSubmitted, isDirty }) => (
32	41	<Validator
33	42	values={values}
...	...
...	...	@@ -237,6 +237,122 @@ const StudentForm = props => (
237	237	</Row>
238	238	</fieldset>
239	239	)}
	240	+ {props.currentStep === 2 && (
	241	+ <fieldset title="2">
	242	+ <legend className="text-semibold">Parent information</legend>
	243	+ <Row>
	244	+ <Col xs={12} sm={6}>
	245	+ <FormGroup controlId="parentName">
	246	+ <Label>Parent Name</Label>
	247	+ <FormControl
	248	+ type="text"
	249	+ value={props.getValue('parentName')}
	250	+ placeholder="John"
	251	+ onChange={e => props.setValue('parentName', e.target.value)}
	252	+ />
	253	+ </FormGroup>
	254	+ </Col>
	255	+ <Col xs={12} sm={6}>
	256	+ <FormGroup controlId="parentEmail">
	257	+ <Label>Parent Email</Label>
	258	+ <FormControl
	259	+ type="text"
	260	+ value={props.getValue('parentEmail')}
	261	+ placeholder="john@email.com"
	262	+ onChange={e => props.setValue('parentEmail', e.target.value)}
	263	+ />
	264	+ </FormGroup>
	265	+ </Col>
	266	+ </Row>
	267	+ <Row>
	268	+ <Col xs={12} sm={6}>
	269	+ <FormGroup controlId="relation">
	270	+ <Label>Relation</Label>
	271	+ <FormControl
	272	+ type="text"
	273	+ value={props.getValue('relation')}
	274	+ placeholder="Father"
	275	+ onChange={e => props.setValue('relation', e.target.value)}
	276	+ />
	277	+ </FormGroup>
	278	+ </Col>
	279	+ <Col xs={12} sm={6}>
	280	+ <FormGroup controlId="profession">
	281	+ <Label>Profession</Label>
	282	+ <FormControl
	283	+ type="text"
	284	+ value={props.getValue('profession')}
	285	+ placeholder="Farmer"
	286	+ onChange={e => props.setValue('profession', e.target.value)}
	287	+ />
	288	+ </FormGroup>
	289	+ </Col>
	290	+ </Row>
	291	+ <Row>
	292	+ <Col xs={12} sm={6}>
	293	+ <FormGroup controlId="parentGender">
	294	+ <Label>Parent Gender</Label>
	295	+ <FormControl componentClass="select"
	296	+ placeholder="select"
	297	+ value={props.getValue('parentGender')}
	298	+ onChange={e => props.setValue('parentGender', e.target.value)}
	299	+ >
	300	+ <option value="male">Male</option>
	301	+ <option value="female">Female</option>
	302	+ </FormControl>
	303	+ </FormGroup>
	304	+ </Col>
	305	+ <Col xs={12} sm={6}>
	306	+ <FormGroup controlId="parentPhone">
	307	+ <Label>Parent Phone</Label>
	308	+ <FormControl
	309	+ type="text"
	310	+ value={props.getValue('parentPhone')}
	311	+ placeholder="9876543210"
	312	+ onChange={e => props.setValue('parentPhone', e.target.value)}
	313	+ />
	314	+ </FormGroup>
	315	+ </Col>
	316	+ </Row>
	317	+ <Row>
	318	+ <Col xs={12} sm={6}>
	319	+ <FormGroup controlId="parentAddress">
	320	+ <Label>Parent Address</Label>
	321	+ <FormControl
	322	+ type="text"
	323	+ value={props.getValue('parentAddress')}
	324	+ placeholder="#12, street, town"
	325	+ onChange={e => props.setValue('parentAddress', e.target.value)}
	326	+ />
	327	+ </FormGroup>
	328	+ </Col>
	329	+ <Col xs={12} sm={6}>
	330	+ <FormGroup controlId="parentCity">
	331	+ <Label>Parent City</Label>
	332	+ <FormControl
	333	+ type="text"
	334	+ value={props.getValue('parentCity')}
	335	+ placeholder="Chennai"
	336	+ onChange={e => props.setValue('parentCity', e.target.value)}
	337	+ />
	338	+ </FormGroup>
	339	+ </Col>
	340	+ </Row>
	341	+ <Row>
	342	+ <Col xs={12} sm={6}>
	343	+ <FormGroup controlId="parentZipcode">
	344	+ <Label>Parent Zipcode</Label>
	345	+ <FormControl
	346	+ type="text"
	347	+ value={props.getValue('parentZipcode')}
	348	+ placeholder="600031"
	349	+ onChange={e => props.setValue('parentZipcode', e.target.value)}
	350	+ />
	351	+ </FormGroup>
	352	+ </Col>
	353	+ </Row>
	354	+ </fieldset>
	355	+ )}
240	356	<div style={{ textAlign: 'left' }}>
241	357	{props.currentStep > 0 && (
242	358	<div style={{ display: 'inline-block', marginRight: 10 }}>
...	...	@@ -247,15 +363,28 @@ const StudentForm = props => (
247	363
248	364	</div>
249	365	)}
250		- <div style={{ display: 'inline-block' }}>
251		- <Button
252		- bsStyle="primary"
253		- onClick={props.onNextClick}
254		- >
255		- NEXT
256		- <i className="icon-arrow-right14 position-right" />
257		- </Button>
258		- </div>
	366	+ {props.currentStep < 2 && (
	367	+ <div style={{ display: 'inline-block' }}>
	368	+ <Button
	369	+ bsStyle="primary"
	370	+ onClick={props.onNextClick}
	371	+ >
	372	+ NEXT
	373	+ <i className="icon-arrow-right14 position-right" />
	374	+ </Button>
	375	+ </div>
	376	+ )}
	377	+ {props.currentStep === 2 && (
	378	+ <div style={{ display: 'inline-block' }}>
	379	+ <Button
	380	+ bsStyle="primary"
	381	+ onClick={props.onNextClick}
	382	+ >
	383	+ SAVE
	384	+ <i className="fa fa-check" />
	385	+ </Button>
	386	+ </div>
	387	+ )}
259	388	</div>
260	389	</div>
261	390	)
...	...