Sunny Negi / Meteor-projects

Browse Code »

Commit 974e40ec3c2f450bdd7ab18ee8a6802a4914a9be

Authored by Rafael Arenas Schuchowsky 2017-03-23 18:14:32 -0400

1 parent 07ce8d1c95

Exists in master

Steps navigation and validation

Showing 3 changed files with 156 additions and 12 deletions Show diff stats

imports/client/views/core/Form.js

Diff comments View file @974e40e

 import React, { Component, PropTypes } from 'react'
 import isEqual from 'lodash/isEqual'
 import get from 'lodash/get'
 import cloneDeep from 'lodash/cloneDeep'
 import set from 'lodash/set'
 class Form extends Component {
   constructor(props) {
     super(props)
     this.state = {
       values: props.initialValues || {},
       dirtyValues: [],
       submitted: false
     }
     this.isPristine = this.isPristine.bind(this)
     this.isDirty = this.isDirty.bind(this)
     this.isSubmitted = this.isSubmitted.bind(this)
     this.getValue = this.getValue.bind(this)
     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) {
     if (!isEqual(this.props.initialValues, nextProps.initialValues)) {
       this.setState(prevState => ({
         values: { ...nextProps.initialValues, ...prevState.values }
       }))
     }
   }
   isPristine(path) {
     if (path) {
       return !this.state.dirtyValues.find(dirtyValue => dirtyValue === path)
     }
     return !this.state.dirtyValues.length
   }
   isDirty(path) {
     return !this.isPristine(path)
   }
   isSubmitted() {
     return this.state.submitted
   }
+  resetSubmitted() {
+    this.setState({ submitted: false })
+  }
   getValue(path) {
     if (!path) {
       throw new Error(`getValue() requires a path`)
     }
     return get(this.state.values, path, '')
   }
   setValue (path, value) {
     if (!path) {
       throw new Error(`setValue() requires a path`)
     }
     if (value === undefined) {
       throw new Error(`setValue() requires a non-undefined value`)
     }
     this.setState(prevState => {
       const prevValues = prevState.values
       // Lo-Dash's set() mutates the original value, so we need to make a copy
       const prevValuesCopy = cloneDeep(prevValues)
       const nextValues = set(prevValuesCopy, path, value)
       return { values: nextValues }
     })
     this.setDirty(path)
   }
   setPristine(path) {
     if (!path) {
       throw new Error(`setPristine() requires a path`)
     }
     this.setState(prevState => ({
       dirtyValues: (
         this.isPristine(path)
           ? prevState.dirtyValues
           : prevState.dirtyValues.filter(dirtyValue => dirtyValue !== path)
       )
     }))
   }
   setDirty(path) {
     if (!path) {
       throw new Error(`setDirty() requires a path`)
     }
     this.setState(prevState => ({
       dirtyValues: (
         this.isDirty(path)
           ? prevState.dirtyValues
           : [...prevState.dirtyValues, path]
       )
     }))
   }
   reset() {
     this.setState({
       values: this.props.initialValues,
       dirtyValues: [],
       submitted: false
     })
   }
   handleSubmit(event) {
     if (event) {
       event.preventDefault()
     }
     this.setState({ submitted: true })
     if (this.props.onSubmit) {
       this.props.onSubmit(this.state.values)
     }
   }
   render() {
     // eslint-disable-next-line
     const { initialValues, children, ...rest } = this.props
     return (
       <form {...rest} onSubmit={this.handleSubmit}>
         {children({
           values: this.state.values,
           isPristine: this.isPristine,
           isDirty: this.isDirty,
           isSubmitted: this.isSubmitted,
           getValue: this.getValue,
           setValue: this.setValue,
           setPristine: this.setPristine,
           setDirty: this.setDirty,
-          reset: this.reset
+          reset: this.reset,
+          resetSubmitted: this.resetSubmitted
         })}
       </form>
     )
   }
 }
 Form.propTypes = {
   initialValues: PropTypes.object,
   onSubmit: PropTypes.func,
   children: PropTypes.func.isRequired
 }
 Form.defaultProps = { initialValues: {} }
 export default Form

imports/client/views/org/admin/students/AddStudentFormContainer.js

Diff comments View file @974e40e

 import React, { Component } from 'react'
 import { AddStudentForm } from './addStudentForm'
 import StudentForm from './StudentForm'
 import Form from '../../../core/Form'
 import Validator from '../../../core/Validator'
 import { isRequired } from '../../../core/validations'
 export class AddStudentFormContainer extends Component {
   constructor(props) {
     super(props)
     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}
             ref={validator => this.validator = validator}
             validations={{
               admissionId: [isRequired],
             }}
           >
             {({ errors }) => (
               <StudentForm
                 isDirty={isDirty}
                 setValue={setValue}
                 getValue={getValue}
                 isSubmitted={isSubmitted}
                 errors={errors}
                 onNextClick={this.handleNextClick}
                 onBackClick={this.handleBackClick}
                 currentStep={this.state.currentStep}
               />
             )}
           </Validator>
         )}
       </Form>
     )
   }
 }

imports/client/views/org/admin/students/StudentForm.js

Diff comments View file @974e40e

 import React, { PropTypes } from 'react'
 import {
   Row,
   Col,
   FormGroup,
   FormControl,
   Button
 } from 'react-bootstrap'
 import DatePicker from 'react-bootstrap-date-picker'
 import Label from '../../../core/Label'
 import Stepper from '../../../core/Stepper'
 import ErrorLabel from '../../../core/ErrorLabel'
 const StudentForm = props => (
   <div className="stepy-validation">
     <Stepper
       steps={[
         {
           label: 'Personal data',
           active: props.currentStep === 0,
         },
         {
           label: 'Address',
           active: props.currentStep === 1,
         },
         {
           label: 'Parent info',
           active: props.currentStep === 2,
         }
       ]}
     />
     {props.currentStep === 0 && (
       <fieldset title="1">
         <legend className="text-semibold">Personal data</legend>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="admissionId">
               <Label required>Admission Id</Label>
               <FormControl
                 type="text"
                 value={props.getValue('admissionId')}
                 placeholder="admission Id"
                 onChange={e => props.setValue('admissionId', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.admissionId && (
                 <ErrorLabel> {props.errors.admissionId} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="firstName">
               <Label>First Name</Label>
               <FormControl
                 type="text"
                 value={props.getValue('firstName')}
                 placeholder="First Name"
                 onChange={e => props.setValue('firstName', e.target.value)}
               />
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="middleName">
               <Label>Middle Name</Label>
               <FormControl
                 type="text"
                 value={props.getValue('middleName')}
                 placeholder="Middle Name"
                 onChange={e => props.setValue('middleName', e.target.value)}
               />
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="lastName">
               <Label>Last Name</Label>
               <FormControl
                 type="text"
                 value={props.getValue('lastName')}
                 placeholder="Last Name"
                 onChange={e => props.setValue('lastName', e.target.value)}
               />
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="email">
               <Label>Email</Label>
               <FormControl
                 type="email"
                 value={props.getValue('email')}
                 placeholder="Email"
                 onChange={e => props.setValue('email', e.target.value)}
               />
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup>
               <Label>Date of birth</Label>
               <DatePicker
                 id="dob"
                 value={props.getValue('dob')}
                 onChange={value => props.setValue('dob', value)}
               />
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="formControlsSelect">
               <Label>Gender</Label>
               <FormControl componentClass="select"
                 placeholder="select"
                 value={props.getValue('gender')}
                 onChange={e => props.setValue('gender', e.target.value)}
                 >
                 <option value="male">Male</option>
                 <option value="female">Female</option>
               </FormControl>
             </FormGroup>
           </Col>
         </Row>
       </fieldset>
     )}
     {props.currentStep === 1 && (
       <fieldset title="2">
         <legend className="text-semibold">Address</legend>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="rollNo">
               <Label>Roll No</Label>
               <FormControl
                 type="text"
                 value={props.getValue('rollNo')}
                 placeholder="Roll No"
                 onChange={e => props.setValue('rollNo', e.target.value)}
               />
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="class">
               <Label>Class</Label>
               <FormControl
                 type="text"
                 value={props.getValue('class')}
                 placeholder="7"
                 onChange={e => props.setValue('class', e.target.value)}
               />
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="section">
               <Label>Section</Label>
               <FormControl
                 type="text"
                 value={props.getValue('section')}
                 placeholder="B"
                 onChange={e => props.setValue('section', e.target.value)}
               />
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="community">
               <Label>Community</Label>
               <FormControl
                 type="text"
                 value={props.getValue('community')}
                 placeholder="General"
                 onChange={e => props.setValue('community', e.target.value)}
               />
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="bloodGroup">
               <Label>bloodGroup</Label>
               <FormControl
                 type="text"
                 value={props.getValue('bloodGroup')}
                 placeholder="B+"
                 onChange={e => props.setValue('bloodGroup', e.target.value)}
               />
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="phone">
               <Label>Phone</Label>
               <FormControl
                 type="text"
                 value={props.getValue('phone')}
                 placeholder="9999999999"
                 onChange={e => props.setValue('phone', e.target.value)}
               />
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="address">
               <Label>Address</Label>
               <FormControl
                 type="text"
                 value={props.getValue('address')}
                 placeholder="#876, Street, town"
                 onChange={e => props.setValue('address', e.target.value)}
               />
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="city">
               <Label>City</Label>
               <FormControl
                 type="text"
                 value={props.getValue('city')}
                 placeholder="Chennai"
                 onChange={e => props.setValue('city', e.target.value)}
               />
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="state">
               <Label>State</Label>
               <FormControl
                 type="text"
                 value={props.getValue('state')}
                 placeholder="Tamilnadu"
                 onChange={e => props.setValue('state', e.target.value)}
               />
             </FormGroup>
           </Col>
         </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 }}>
           <Button onClick={props.onBackClick}>
             <i className="icon-arrow-left13 position-left"></i>
             BACK
           </Button>
         </div>
       )}
-      <div style={{ display: 'inline-block' }}>
+      {props.currentStep < 2 && (
-        <Button
+        <div style={{ display: 'inline-block' }}>
-          bsStyle="primary"
+          <Button
-          onClick={props.onNextClick}
+            bsStyle="primary"
-        >
+            onClick={props.onNextClick}
-          NEXT
+          >
-          <i className="icon-arrow-right14 position-right" />
+            NEXT
-        </Button>
+            <i className="icon-arrow-right14 position-right" />
-      </div>
+          </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>
 )
 StudentForm.propTypes = {
   currentStep: PropTypes.number.isRequired,
   onNextClick: PropTypes.func.isRequired,
   onBackClick: PropTypes.func.isRequired,
   setValue: PropTypes.func.isRequired,
   getValue: PropTypes.func.isRequired,
 }
 export default StudentForm