Sunny Negi / Meteor-projects

Browse Code »

Commit 2ea6d70aa1cf9e35a34a2953a4652108e1b9a2e3

Authored by Rafael Arenas Schuchowsky 2017-03-24 12:04:47 -0400

1 parent 355f2411e0

Exists in master

Added some comments and refactored imports

Showing 3 changed files with 9 additions and 8 deletions Show diff stats

imports/client/views/core/Form.js

Diff comments View file @2ea6d70

 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'
+// github.com/smalldots
 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,
           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 @2ea6d70

 import React, { Component } from 'react'
 import { AddStudentForm } from './addStudentForm'
 import StudentForm from './StudentForm'
-import Form from '../../../core/Form'
+import Form from '/imports/client/views/core/Form'
-import Validator from '../../../core/Validator'
+import Validator from '/imports/client/views/core/Validator'
-import { isRequired, isValidEmail } from '../../../core/validations'
+import { isRequired, isValidEmail } from '/imports/client/views/core/validations'
 import { addStudentManually } from '/imports/collections/students/methods';
 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() {
     this.form.handleSubmit()
     if (this.validator.getErrors() && Object.keys(this.validator.getErrors()).length > 0) return
     this.setState({ currentStep: this.state.currentStep + 1 })
     this.form.resetSubmitted()
   }
   handleBackClick() {
     this.setState({ currentStep: this.state.currentStep + -1 })
   }
   handleSubmit() {
     if (this.state.currentStep === 3) {
       addStudentManually.call(this.form.state.values)
     }
   }
+  //render callback
   render() {
     return (
       <Form
         onSubmit={this.handleSubmit}
         ref={form => this.form = form}
         initialValues={{
           gender: 'male',
           parentGender: 'male',
         }}
       >
         {({ values, setValue, getValue, isSubmitted, isDirty }) => (
           <Validator
             values={values}
             ref={validator => this.validator = validator}
             validations={{
               admissionId: [(value) => isRequired('Admission id', value)],
               firstName: [(value) => isRequired('First name', value)],
               middleName: [(value) => isRequired('Middle name', value)],
               lastName: [(value) => isRequired('Last name', value)],
               email: [(value) => isRequired('Email', value), isValidEmail],
               dob: [(value) => isRequired('Date of birth', value)],
               gender: [(value) => isRequired('Gender', value)],
               rollNo: [(value) => this.state.currentStep === 1 && isRequired('Roll no', value)],
               class: [(value) => this.state.currentStep === 1 && isRequired('Class', value)],
               section: [(value) => this.state.currentStep === 1 && isRequired('Section', value)],
               community: [(value) => this.state.currentStep === 1 && isRequired('Community', value)],
               bloodGroup: [(value) => this.state.currentStep === 1 && isRequired('Blood group', value)],
               phone: [(value) => this.state.currentStep === 1 && isRequired('Phone', value)],
               address: [(value) => this.state.currentStep === 2 && isRequired('Address', value)],
               city: [(value) => this.state.currentStep === 2 && isRequired('City', value)],
               state: [(value) => this.state.currentStep === 2 && isRequired('State', value)],
               parentName: [(value) => this.state.currentStep === 3 && isRequired('Parent name', value)],
               parentEmail: [(value) => this.state.currentStep === 3 && isRequired('Parent email', value), (value) => this.state.currentStep === 3 && isValidEmail(value)],
               relation: [(value) => this.state.currentStep === 3 && isRequired('Relation', value)],
               profession: [(value) => this.state.currentStep === 3 && isRequired('Profession', value)],
               parentGender: [(value) => this.state.currentStep === 3 && isRequired('Parent gender', value)],
               parentPhone: [(value) => this.state.currentStep === 3 && isRequired('Parent phone', value)],
               parentAddress: [(value) => this.state.currentStep === 3 && isRequired('Parent address', value)],
               parentCity: [(value) => this.state.currentStep === 3 && isRequired('Parent city', value)],
               parentState: [(value) => this.state.currentStep === 3 && isRequired('Parent state', value)],
               parentZipcode: [(value) => this.state.currentStep === 3 && isRequired('Parent zip code', value)],
             }}
           >
             {({ 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 @2ea6d70

 import React, { PropTypes } from 'react'
 import {
   Row,
   Col,
   FormGroup,
   FormControl,
   Button
 } from 'react-bootstrap'
-// import DatePicker from 'react-bootstrap-date-picker'
+import DatePicker from '/imports/client/views/core/DatePicker'
-import DatePicker from '../../../core/DatePicker'
+import Label from '/imports/client/views/core/Label'
-import Label from '../../../core/Label'
+import Stepper from '/imports/client/views/core/Stepper'
-import Stepper from '../../../core/Stepper'
+import ErrorLabel from '/imports/client/views/core/ErrorLabel'
-import ErrorLabel from '../../../core/ErrorLabel'
 const StudentForm = props => (
   <div className="stepy-validation">
     <Stepper
       steps={[
         {
           label: 'Personal data',
           active: props.currentStep === 0,
         },
         {
           label: 'Academic',
           active: props.currentStep === 1,
         },
         {
           label: 'Address',
           active: props.currentStep === 2,
         },
         {
           label: 'Parent info',
           active: props.currentStep === 3,
         }
       ]}
     />
     {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 required>First Name</Label>
               <FormControl
                 type="text"
                 value={props.getValue('firstName')}
                 placeholder="First Name"
                 onChange={e => props.setValue('firstName', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.firstName && (
                 <ErrorLabel> {props.errors.firstName} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="middleName">
               <Label required>Middle Name</Label>
               <FormControl
                 type="text"
                 value={props.getValue('middleName')}
                 placeholder="Middle Name"
                 onChange={e => props.setValue('middleName', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.middleName && (
                 <ErrorLabel> {props.errors.middleName} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="lastName">
               <Label required>Last Name</Label>
               <FormControl
                 type="text"
                 value={props.getValue('lastName')}
                 placeholder="Last Name"
                 onChange={e => props.setValue('lastName', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.lastName && (
                 <ErrorLabel> {props.errors.lastName} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="email">
               <Label required>Email</Label>
               <FormControl
                 type="email"
                 value={props.getValue('email')}
                 placeholder="Email"
                 onChange={e => props.setValue('email', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.email && (
                 <ErrorLabel> {props.errors.email} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup>
               <Label required>Date of birth</Label>
               <DatePicker
                 id="dob"
                 value={props.getValue('dob')}
                 onChange={(e) => {
                   props.setValue('dob', e.target.value)
                 }}
               />
               {props.isSubmitted() && props.errors && props.errors.dob && (
                 <ErrorLabel> {props.errors.dob} </ErrorLabel>
               )}
             </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>
               {props.isSubmitted() && props.errors && props.errors.gender && (
                 <ErrorLabel> {props.errors.gender} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
       </fieldset>
     )}
     {props.currentStep === 1 && (
       <fieldset title="Academic">
         <legend className="text-semibold">Academic</legend>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="rollNo">
               <Label required>Roll No</Label>
               <FormControl
                 type="text"
                 value={props.getValue('rollNo')}
                 placeholder="Roll No"
                 onChange={e => props.setValue('rollNo', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.rollNo && (
                 <ErrorLabel> {props.errors.rollNo} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="class">
               <Label required>Class</Label>
               <FormControl
                 type="text"
                 value={props.getValue('class')}
                 placeholder="7"
                 onChange={e => props.setValue('class', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.class && (
                 <ErrorLabel> {props.errors.class} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="section">
               <Label required>Section</Label>
               <FormControl
                 type="text"
                 value={props.getValue('section')}
                 placeholder="B"
                 onChange={e => props.setValue('section', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.section && (
                 <ErrorLabel> {props.errors.section} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="community">
               <Label required>Community</Label>
               <FormControl
                 type="text"
                 value={props.getValue('community')}
                 placeholder="General"
                 onChange={e => props.setValue('community', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.community && (
                 <ErrorLabel> {props.errors.community} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="bloodGroup">
               <Label required>bloodGroup</Label>
               <FormControl
                 type="text"
                 value={props.getValue('bloodGroup')}
                 placeholder="B+"
                 onChange={e => props.setValue('bloodGroup', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.bloodGroup && (
                 <ErrorLabel> {props.errors.bloodGroup} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="phone">
               <Label required>Phone</Label>
               <FormControl
                 type="text"
                 value={props.getValue('phone')}
                 placeholder="9999999999"
                 onChange={e => props.setValue('phone', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.phone && (
                 <ErrorLabel> {props.errors.phone} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
       </fieldset>
     )}
     {props.currentStep === 2 && (
       <fieldset title="Address">
         <legend className="text-semibold">Address</legend>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="address">
               <Label required>Address</Label>
               <FormControl
                 type="text"
                 value={props.getValue('address')}
                 placeholder="#876, Street, town"
                 onChange={e => props.setValue('address', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.address && (
                 <ErrorLabel> {props.errors.address} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="city">
               <Label required>City</Label>
               <FormControl
                 type="text"
                 value={props.getValue('city')}
                 placeholder="Chennai"
                 onChange={e => props.setValue('city', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.city && (
                 <ErrorLabel> {props.errors.city} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="state">
               <Label required>State</Label>
               <FormControl
                 type="text"
                 value={props.getValue('state')}
                 placeholder="Tamilnadu"
                 onChange={e => props.setValue('state', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.state && (
                 <ErrorLabel> {props.errors.state} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
       </fieldset>
     )}
     {props.currentStep === 3 && (
       <fieldset title="2">
         <legend className="text-semibold">Parent information</legend>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="parentName">
               <Label required>Parent Name</Label>
               <FormControl
                 type="text"
                 value={props.getValue('parentName')}
                 placeholder="John"
                 onChange={e => props.setValue('parentName', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.parentName && (
                 <ErrorLabel> {props.errors.parentName} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="parentEmail">
               <Label required>Parent Email</Label>
               <FormControl
                 type="text"
                 value={props.getValue('parentEmail')}
                 placeholder="john@email.com"
                 onChange={e => props.setValue('parentEmail', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.parentEmail && (
                 <ErrorLabel> {props.errors.parentEmail} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="relation">
               <Label required>Relation</Label>
               <FormControl
                 type="text"
                 value={props.getValue('relation')}
                 placeholder="Father"
                 onChange={e => props.setValue('relation', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.relation && (
                 <ErrorLabel> {props.errors.relation} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="profession">
               <Label required>Profession</Label>
               <FormControl
                 type="text"
                 value={props.getValue('profession')}
                 placeholder="Farmer"
                 onChange={e => props.setValue('profession', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.profession && (
                 <ErrorLabel> {props.errors.profession} </ErrorLabel>
               )}
             </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>
               {props.isSubmitted() && props.errors && props.errors.parentGender && (
                 <ErrorLabel> {props.errors.parentGender} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="parentPhone">
               <Label required>Parent Phone</Label>
               <FormControl
                 type="text"
                 value={props.getValue('parentPhone')}
                 placeholder="9876543210"
                 onChange={e => props.setValue('parentPhone', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.parentPhone && (
                 <ErrorLabel> {props.errors.parentPhone} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="parentAddress">
               <Label required>Parent Address</Label>
               <FormControl
                 type="text"
                 value={props.getValue('parentAddress')}
                 placeholder="#12, street, town"
                 onChange={e => props.setValue('parentAddress', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.parentAddress && (
                 <ErrorLabel> {props.errors.parentAddress} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
           <Col xs={12} sm={6}>
             <FormGroup controlId="parentCity">
               <Label required>Parent City</Label>
               <FormControl
                 type="text"
                 value={props.getValue('parentCity')}
                 placeholder="Chennai"
                 onChange={e => props.setValue('parentCity', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.parentCity && (
                 <ErrorLabel> {props.errors.parentCity} </ErrorLabel>
               )}
             </FormGroup>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="parentZipcode">
               <Label required>Parent Zipcode</Label>
               <FormControl
                 type="text"
                 value={props.getValue('parentZipcode')}
                 placeholder="600031"
                 onChange={e => props.setValue('parentZipcode', e.target.value)}
               />
               {props.isSubmitted() && props.errors && props.errors.parentZipcode && (
                 <ErrorLabel> {props.errors.parentZipcode} </ErrorLabel>
               )}
             </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>
       )}
       {props.currentStep < 3 && (
         <div style={{ display: 'inline-block' }}>
           <Button
             bsStyle="primary"
             onClick={props.onNextClick}
           >
             NEXT
             <i className="icon-arrow-right14 position-right" />
           </Button>
         </div>
       )}
       {props.currentStep === 3 && (
         <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