Commit 4b6d093b7e606b0fc5b0dfd23f997c508f7054e3

Authored by Deepak
Exists in master

Merge branch 'new-student-form' of https://bitbucket.org/youngdesk/ydapp into new-student-form

imports/client/views/core/DatePicker.js
File was created 1 import React, { Component, PropTypes } from 'react'
2 import $ from 'jquery'
3 import 'jquery-ui/ui/widgets/datepicker'
4
5 class DatePicker extends Component {
6 componentDidMount() {
7 $('.datepicker').datepicker({
8 changeMonth: true,
9 changeYear: true,
10 showButtonPanel: true,
11 yearRange: '-116:+34',
12 dateFormat: 'dd/mm/yy'
13 });
14 }
15
16 render() {
17 return (
18 <input
19 type="text"
20 className="datepicker form-control"
21 placeholder="DD-MM-YYYY"
22 onChange={this.props.onChange}
23 value={this.props.value}
24 />
25 )
26 }
27 }
28
29 DatePicker.propTypes = {
30 value: PropTypes.string.isRequired,
31 onChange: PropTypes.func.isRequired,
32 }
33
34 export default DatePicker
35
imports/client/views/core/validations.js
1 export const isRequired = (fieldName, value) => { 1 export const isRequired = (fieldName, value) => {
2 console.log('isRequired', fieldName, value)
3 if (!value) { 2 if (!value) {
4 return fieldName ? `${fieldName} is required` : 'Required' 3 return fieldName ? `${fieldName} is required` : 'Required'
5 } 4 }
6 } 5 }
7 6
8 export const minLength = minLength => { 7 export const minLength = minLength => {
9 return value => value && value.length < minLength && `Min. length: ${minLength}` 8 return value => value && value.length < minLength && `Min. length: ${minLength}`
10 } 9 }
11 10
12 export const isValidEmail = value => { 11 export const isValidEmail = value => {
13 const exR = /^(([^<>()\[\]\\.,;:\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,}))$/ 12 const exR = /^(([^<>()\[\]\\.,;:\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,}))$/
14 return !exR.test(value) && 'Please use a valid email' 13 return !exR.test(value) && 'Please use a valid email'
15 } 14 }
16 15
imports/client/views/org/admin/students/StudentForm.js
1 import React, { PropTypes } from 'react' 1 import React, { PropTypes } from 'react'
2 import { 2 import {
3 Row, 3 Row,
4 Col, 4 Col,
5 FormGroup, 5 FormGroup,
6 FormControl, 6 FormControl,
7 Button 7 Button
8 } from 'react-bootstrap' 8 } from 'react-bootstrap'
9 import DatePicker from 'react-bootstrap-date-picker' 9 // import DatePicker from 'react-bootstrap-date-picker'
10 import DatePicker from '../../../core/DatePicker'
10 import Label from '../../../core/Label' 11 import Label from '../../../core/Label'
11 import Stepper from '../../../core/Stepper' 12 import Stepper from '../../../core/Stepper'
12 import ErrorLabel from '../../../core/ErrorLabel' 13 import ErrorLabel from '../../../core/ErrorLabel'
13 14
14 const StudentForm = props => ( 15 const StudentForm = props => (
15 <div className="stepy-validation"> 16 <div className="stepy-validation">
16 <Stepper 17 <Stepper
17 steps={[ 18 steps={[
18 { 19 {
19 label: 'Personal data', 20 label: 'Personal data',
20 active: props.currentStep === 0, 21 active: props.currentStep === 0,
21 }, 22 },
22 { 23 {
23 label: 'Academic', 24 label: 'Academic',
24 active: props.currentStep === 1, 25 active: props.currentStep === 1,
25 }, 26 },
26 { 27 {
27 label: 'Address', 28 label: 'Address',
28 active: props.currentStep === 2, 29 active: props.currentStep === 2,
29 }, 30 },
30 { 31 {
31 label: 'Parent info', 32 label: 'Parent info',
32 active: props.currentStep === 3, 33 active: props.currentStep === 3,
33 } 34 }
34 ]} 35 ]}
35 /> 36 />
36 {props.currentStep === 0 && ( 37 {props.currentStep === 0 && (
37 <fieldset title="1"> 38 <fieldset title="1">
38 <legend className="text-semibold">Personal data</legend> 39 <legend className="text-semibold">Personal data</legend>
39 <Row> 40 <Row>
40 <Col xs={12} sm={6}> 41 <Col xs={12} sm={6}>
41 <FormGroup controlId="admissionId"> 42 <FormGroup controlId="admissionId">
42 <Label required>Admission Id</Label> 43 <Label required>Admission Id</Label>
43 <FormControl 44 <FormControl
44 type="text" 45 type="text"
45 value={props.getValue('admissionId')} 46 value={props.getValue('admissionId')}
46 placeholder="admission Id" 47 placeholder="admission Id"
47 onChange={e => props.setValue('admissionId', e.target.value)} 48 onChange={e => props.setValue('admissionId', e.target.value)}
48 /> 49 />
49 {props.isSubmitted() && props.errors && props.errors.admissionId && ( 50 {props.isSubmitted() && props.errors && props.errors.admissionId && (
50 <ErrorLabel> {props.errors.admissionId} </ErrorLabel> 51 <ErrorLabel> {props.errors.admissionId} </ErrorLabel>
51 )} 52 )}
52 </FormGroup> 53 </FormGroup>
53 </Col> 54 </Col>
54 <Col xs={12} sm={6}> 55 <Col xs={12} sm={6}>
55 <FormGroup controlId="firstName"> 56 <FormGroup controlId="firstName">
56 <Label required>First Name</Label> 57 <Label required>First Name</Label>
57 <FormControl 58 <FormControl
58 type="text" 59 type="text"
59 value={props.getValue('firstName')} 60 value={props.getValue('firstName')}
60 placeholder="First Name" 61 placeholder="First Name"
61 onChange={e => props.setValue('firstName', e.target.value)} 62 onChange={e => props.setValue('firstName', e.target.value)}
62 /> 63 />
63 {props.isSubmitted() && props.errors && props.errors.firstName && ( 64 {props.isSubmitted() && props.errors && props.errors.firstName && (
64 <ErrorLabel> {props.errors.firstName} </ErrorLabel> 65 <ErrorLabel> {props.errors.firstName} </ErrorLabel>
65 )} 66 )}
66 </FormGroup> 67 </FormGroup>
67 </Col> 68 </Col>
68 </Row> 69 </Row>
69 <Row> 70 <Row>
70 <Col xs={12} sm={6}> 71 <Col xs={12} sm={6}>
71 <FormGroup controlId="middleName"> 72 <FormGroup controlId="middleName">
72 <Label required>Middle Name</Label> 73 <Label required>Middle Name</Label>
73 <FormControl 74 <FormControl
74 type="text" 75 type="text"
75 value={props.getValue('middleName')} 76 value={props.getValue('middleName')}
76 placeholder="Middle Name" 77 placeholder="Middle Name"
77 onChange={e => props.setValue('middleName', e.target.value)} 78 onChange={e => props.setValue('middleName', e.target.value)}
78 /> 79 />
79 {props.isSubmitted() && props.errors && props.errors.middleName && ( 80 {props.isSubmitted() && props.errors && props.errors.middleName && (
80 <ErrorLabel> {props.errors.middleName} </ErrorLabel> 81 <ErrorLabel> {props.errors.middleName} </ErrorLabel>
81 )} 82 )}
82 </FormGroup> 83 </FormGroup>
83 </Col> 84 </Col>
84 <Col xs={12} sm={6}> 85 <Col xs={12} sm={6}>
85 <FormGroup controlId="lastName"> 86 <FormGroup controlId="lastName">
86 <Label required>Last Name</Label> 87 <Label required>Last Name</Label>
87 <FormControl 88 <FormControl
88 type="text" 89 type="text"
89 value={props.getValue('lastName')} 90 value={props.getValue('lastName')}
90 placeholder="Last Name" 91 placeholder="Last Name"
91 onChange={e => props.setValue('lastName', e.target.value)} 92 onChange={e => props.setValue('lastName', e.target.value)}
92 /> 93 />
93 {props.isSubmitted() && props.errors && props.errors.lastName && ( 94 {props.isSubmitted() && props.errors && props.errors.lastName && (
94 <ErrorLabel> {props.errors.lastName} </ErrorLabel> 95 <ErrorLabel> {props.errors.lastName} </ErrorLabel>
95 )} 96 )}
96 </FormGroup> 97 </FormGroup>
97 </Col> 98 </Col>
98 </Row> 99 </Row>
99 <Row> 100 <Row>
100 <Col xs={12} sm={6}> 101 <Col xs={12} sm={6}>
101 <FormGroup controlId="email"> 102 <FormGroup controlId="email">
102 <Label required>Email</Label> 103 <Label required>Email</Label>
103 <FormControl 104 <FormControl
104 type="email" 105 type="email"
105 value={props.getValue('email')} 106 value={props.getValue('email')}
106 placeholder="Email" 107 placeholder="Email"
107 onChange={e => props.setValue('email', e.target.value)} 108 onChange={e => props.setValue('email', e.target.value)}
108 /> 109 />
109 {props.isSubmitted() && props.errors && props.errors.email && ( 110 {props.isSubmitted() && props.errors && props.errors.email && (
110 <ErrorLabel> {props.errors.email} </ErrorLabel> 111 <ErrorLabel> {props.errors.email} </ErrorLabel>
111 )} 112 )}
112 </FormGroup> 113 </FormGroup>
113 </Col> 114 </Col>
114 <Col xs={12} sm={6}> 115 <Col xs={12} sm={6}>
115 <FormGroup> 116 <FormGroup>
116 <Label required>Date of birth</Label> 117 <Label required>Date of birth</Label>
117 <DatePicker 118 <DatePicker
118 id="dob" 119 id="dob"
119 value={props.getValue('dob')} 120 value={props.getValue('dob')}
120 onChange={(value, formattedValue) => { 121 onChange={(e) => {
121 props.setValue('dob', value) 122 props.setValue('dob', e.target.value)
122 props.setValue('formattedDob', formattedValue)
123 }} 123 }}
124 /> 124 />
125 {props.isSubmitted() && props.errors && props.errors.dob && ( 125 {props.isSubmitted() && props.errors && props.errors.dob && (
126 <ErrorLabel> {props.errors.dob} </ErrorLabel> 126 <ErrorLabel> {props.errors.dob} </ErrorLabel>
127 )} 127 )}
128 </FormGroup> 128 </FormGroup>
129 </Col> 129 </Col>
130 </Row> 130 </Row>
131 <Row> 131 <Row>
132 <Col xs={12} sm={6}> 132 <Col xs={12} sm={6}>
133 <FormGroup controlId="formControlsSelect"> 133 <FormGroup controlId="formControlsSelect">
134 <Label>Gender</Label> 134 <Label>Gender</Label>
135 <FormControl componentClass="select" 135 <FormControl componentClass="select"
136 placeholder="select" 136 placeholder="select"
137 value={props.getValue('gender')} 137 value={props.getValue('gender')}
138 onChange={e => props.setValue('gender', e.target.value)} 138 onChange={e => props.setValue('gender', e.target.value)}
139 > 139 >
140 <option value="male">Male</option> 140 <option value="male">Male</option>
141 <option value="female">Female</option> 141 <option value="female">Female</option>
142 </FormControl> 142 </FormControl>
143 {props.isSubmitted() && props.errors && props.errors.gender && ( 143 {props.isSubmitted() && props.errors && props.errors.gender && (
144 <ErrorLabel> {props.errors.gender} </ErrorLabel> 144 <ErrorLabel> {props.errors.gender} </ErrorLabel>
145 )} 145 )}
146 </FormGroup> 146 </FormGroup>
147 </Col> 147 </Col>
148 </Row> 148 </Row>
149 </fieldset> 149 </fieldset>
150 )} 150 )}
151 {props.currentStep === 1 && ( 151 {props.currentStep === 1 && (
152 <fieldset title="Academic"> 152 <fieldset title="Academic">
153 <legend className="text-semibold">Academic</legend> 153 <legend className="text-semibold">Academic</legend>
154 <Row> 154 <Row>
155 <Col xs={12} sm={6}> 155 <Col xs={12} sm={6}>
156 <FormGroup controlId="rollNo"> 156 <FormGroup controlId="rollNo">
157 <Label required>Roll No</Label> 157 <Label required>Roll No</Label>
158 <FormControl 158 <FormControl
159 type="text" 159 type="text"
160 value={props.getValue('rollNo')} 160 value={props.getValue('rollNo')}
161 placeholder="Roll No" 161 placeholder="Roll No"
162 onChange={e => props.setValue('rollNo', e.target.value)} 162 onChange={e => props.setValue('rollNo', e.target.value)}
163 /> 163 />
164 {props.isSubmitted() && props.errors && props.errors.rollNo && ( 164 {props.isSubmitted() && props.errors && props.errors.rollNo && (
165 <ErrorLabel> {props.errors.rollNo} </ErrorLabel> 165 <ErrorLabel> {props.errors.rollNo} </ErrorLabel>
166 )} 166 )}
167 </FormGroup> 167 </FormGroup>
168 </Col> 168 </Col>
169 <Col xs={12} sm={6}> 169 <Col xs={12} sm={6}>
170 <FormGroup controlId="class"> 170 <FormGroup controlId="class">
171 <Label required>Class</Label> 171 <Label required>Class</Label>
172 <FormControl 172 <FormControl
173 type="text" 173 type="text"
174 value={props.getValue('class')} 174 value={props.getValue('class')}
175 placeholder="7" 175 placeholder="7"
176 onChange={e => props.setValue('class', e.target.value)} 176 onChange={e => props.setValue('class', e.target.value)}
177 /> 177 />
178 {props.isSubmitted() && props.errors && props.errors.class && ( 178 {props.isSubmitted() && props.errors && props.errors.class && (
179 <ErrorLabel> {props.errors.class} </ErrorLabel> 179 <ErrorLabel> {props.errors.class} </ErrorLabel>
180 )} 180 )}
181 </FormGroup> 181 </FormGroup>
182 </Col> 182 </Col>
183 </Row> 183 </Row>
184 <Row> 184 <Row>
185 <Col xs={12} sm={6}> 185 <Col xs={12} sm={6}>
186 <FormGroup controlId="section"> 186 <FormGroup controlId="section">
187 <Label required>Section</Label> 187 <Label required>Section</Label>
188 <FormControl 188 <FormControl
189 type="text" 189 type="text"
190 value={props.getValue('section')} 190 value={props.getValue('section')}
191 placeholder="B" 191 placeholder="B"
192 onChange={e => props.setValue('section', e.target.value)} 192 onChange={e => props.setValue('section', e.target.value)}
193 /> 193 />
194 {props.isSubmitted() && props.errors && props.errors.section && ( 194 {props.isSubmitted() && props.errors && props.errors.section && (
195 <ErrorLabel> {props.errors.section} </ErrorLabel> 195 <ErrorLabel> {props.errors.section} </ErrorLabel>
196 )} 196 )}
197 </FormGroup> 197 </FormGroup>
198 </Col> 198 </Col>
199 <Col xs={12} sm={6}> 199 <Col xs={12} sm={6}>
200 <FormGroup controlId="community"> 200 <FormGroup controlId="community">
201 <Label required>Community</Label> 201 <Label required>Community</Label>
202 <FormControl 202 <FormControl
203 type="text" 203 type="text"
204 value={props.getValue('community')} 204 value={props.getValue('community')}
205 placeholder="General" 205 placeholder="General"
206 onChange={e => props.setValue('community', e.target.value)} 206 onChange={e => props.setValue('community', e.target.value)}
207 /> 207 />
208 {props.isSubmitted() && props.errors && props.errors.community && ( 208 {props.isSubmitted() && props.errors && props.errors.community && (
209 <ErrorLabel> {props.errors.community} </ErrorLabel> 209 <ErrorLabel> {props.errors.community} </ErrorLabel>
210 )} 210 )}
211 </FormGroup> 211 </FormGroup>
212 </Col> 212 </Col>
213 </Row> 213 </Row>
214 <Row> 214 <Row>
215 <Col xs={12} sm={6}> 215 <Col xs={12} sm={6}>
216 <FormGroup controlId="bloodGroup"> 216 <FormGroup controlId="bloodGroup">
217 <Label required>bloodGroup</Label> 217 <Label required>bloodGroup</Label>
218 <FormControl 218 <FormControl
219 type="text" 219 type="text"
220 value={props.getValue('bloodGroup')} 220 value={props.getValue('bloodGroup')}
221 placeholder="B+" 221 placeholder="B+"
222 onChange={e => props.setValue('bloodGroup', e.target.value)} 222 onChange={e => props.setValue('bloodGroup', e.target.value)}
223 /> 223 />
224 {props.isSubmitted() && props.errors && props.errors.bloodGroup && ( 224 {props.isSubmitted() && props.errors && props.errors.bloodGroup && (
225 <ErrorLabel> {props.errors.bloodGroup} </ErrorLabel> 225 <ErrorLabel> {props.errors.bloodGroup} </ErrorLabel>
226 )} 226 )}
227 </FormGroup> 227 </FormGroup>
228 </Col> 228 </Col>
229 <Col xs={12} sm={6}> 229 <Col xs={12} sm={6}>
230 <FormGroup controlId="phone"> 230 <FormGroup controlId="phone">
231 <Label required>Phone</Label> 231 <Label required>Phone</Label>
232 <FormControl 232 <FormControl
233 type="text" 233 type="text"
234 value={props.getValue('phone')} 234 value={props.getValue('phone')}
235 placeholder="9999999999" 235 placeholder="9999999999"
236 onChange={e => props.setValue('phone', e.target.value)} 236 onChange={e => props.setValue('phone', e.target.value)}
237 /> 237 />
238 {props.isSubmitted() && props.errors && props.errors.phone && ( 238 {props.isSubmitted() && props.errors && props.errors.phone && (
239 <ErrorLabel> {props.errors.phone} </ErrorLabel> 239 <ErrorLabel> {props.errors.phone} </ErrorLabel>
240 )} 240 )}
241 </FormGroup> 241 </FormGroup>
242 </Col> 242 </Col>
243 </Row> 243 </Row>
244 </fieldset> 244 </fieldset>
245 )} 245 )}
246 {props.currentStep === 2 && ( 246 {props.currentStep === 2 && (
247 <fieldset title="Address"> 247 <fieldset title="Address">
248 <legend className="text-semibold">Address</legend> 248 <legend className="text-semibold">Address</legend>
249 <Row> 249 <Row>
250 <Col xs={12} sm={6}> 250 <Col xs={12} sm={6}>
251 <FormGroup controlId="address"> 251 <FormGroup controlId="address">
252 <Label required>Address</Label> 252 <Label required>Address</Label>
253 <FormControl 253 <FormControl
254 type="text" 254 type="text"
255 value={props.getValue('address')} 255 value={props.getValue('address')}
256 placeholder="#876, Street, town" 256 placeholder="#876, Street, town"
257 onChange={e => props.setValue('address', e.target.value)} 257 onChange={e => props.setValue('address', e.target.value)}
258 /> 258 />
259 {props.isSubmitted() && props.errors && props.errors.address && ( 259 {props.isSubmitted() && props.errors && props.errors.address && (
260 <ErrorLabel> {props.errors.address} </ErrorLabel> 260 <ErrorLabel> {props.errors.address} </ErrorLabel>
261 )} 261 )}
262 </FormGroup> 262 </FormGroup>
263 </Col> 263 </Col>
264 <Col xs={12} sm={6}> 264 <Col xs={12} sm={6}>
265 <FormGroup controlId="city"> 265 <FormGroup controlId="city">
266 <Label required>City</Label> 266 <Label required>City</Label>
267 <FormControl 267 <FormControl
268 type="text" 268 type="text"
269 value={props.getValue('city')} 269 value={props.getValue('city')}
270 placeholder="Chennai" 270 placeholder="Chennai"
271 onChange={e => props.setValue('city', e.target.value)} 271 onChange={e => props.setValue('city', e.target.value)}
272 /> 272 />
273 {props.isSubmitted() && props.errors && props.errors.city && ( 273 {props.isSubmitted() && props.errors && props.errors.city && (
274 <ErrorLabel> {props.errors.city} </ErrorLabel> 274 <ErrorLabel> {props.errors.city} </ErrorLabel>
275 )} 275 )}
276 </FormGroup> 276 </FormGroup>
277 </Col> 277 </Col>
278 </Row> 278 </Row>
279 <Row> 279 <Row>
280 <Col xs={12} sm={6}> 280 <Col xs={12} sm={6}>
281 <FormGroup controlId="state"> 281 <FormGroup controlId="state">
282 <Label required>State</Label> 282 <Label required>State</Label>
283 <FormControl 283 <FormControl
284 type="text" 284 type="text"
285 value={props.getValue('state')} 285 value={props.getValue('state')}
286 placeholder="Tamilnadu" 286 placeholder="Tamilnadu"
287 onChange={e => props.setValue('state', e.target.value)} 287 onChange={e => props.setValue('state', e.target.value)}
288 /> 288 />
289 {props.isSubmitted() && props.errors && props.errors.state && ( 289 {props.isSubmitted() && props.errors && props.errors.state && (
290 <ErrorLabel> {props.errors.state} </ErrorLabel> 290 <ErrorLabel> {props.errors.state} </ErrorLabel>
291 )} 291 )}
292 </FormGroup> 292 </FormGroup>
293 </Col> 293 </Col>
294 </Row> 294 </Row>
295 </fieldset> 295 </fieldset>
296 )} 296 )}
297 {props.currentStep === 3 && ( 297 {props.currentStep === 3 && (
298 <fieldset title="2"> 298 <fieldset title="2">
299 <legend className="text-semibold">Parent information</legend> 299 <legend className="text-semibold">Parent information</legend>
300 <Row> 300 <Row>
301 <Col xs={12} sm={6}> 301 <Col xs={12} sm={6}>
302 <FormGroup controlId="parentName"> 302 <FormGroup controlId="parentName">
303 <Label required>Parent Name</Label> 303 <Label required>Parent Name</Label>
304 <FormControl 304 <FormControl
305 type="text" 305 type="text"
306 value={props.getValue('parentName')} 306 value={props.getValue('parentName')}
307 placeholder="John" 307 placeholder="John"
308 onChange={e => props.setValue('parentName', e.target.value)} 308 onChange={e => props.setValue('parentName', e.target.value)}
309 /> 309 />
310 {props.isSubmitted() && props.errors && props.errors.parentName && ( 310 {props.isSubmitted() && props.errors && props.errors.parentName && (
311 <ErrorLabel> {props.errors.parentName} </ErrorLabel> 311 <ErrorLabel> {props.errors.parentName} </ErrorLabel>
312 )} 312 )}
313 </FormGroup> 313 </FormGroup>
314 </Col> 314 </Col>
315 <Col xs={12} sm={6}> 315 <Col xs={12} sm={6}>
316 <FormGroup controlId="parentEmail"> 316 <FormGroup controlId="parentEmail">
317 <Label required>Parent Email</Label> 317 <Label required>Parent Email</Label>
318 <FormControl 318 <FormControl
319 type="text" 319 type="text"
320 value={props.getValue('parentEmail')} 320 value={props.getValue('parentEmail')}
321 placeholder="john@email.com" 321 placeholder="john@email.com"
322 onChange={e => props.setValue('parentEmail', e.target.value)} 322 onChange={e => props.setValue('parentEmail', e.target.value)}
323 /> 323 />
324 {props.isSubmitted() && props.errors && props.errors.parentEmail && ( 324 {props.isSubmitted() && props.errors && props.errors.parentEmail && (
325 <ErrorLabel> {props.errors.parentEmail} </ErrorLabel> 325 <ErrorLabel> {props.errors.parentEmail} </ErrorLabel>
326 )} 326 )}
327 </FormGroup> 327 </FormGroup>
328 </Col> 328 </Col>
329 </Row> 329 </Row>
330 <Row> 330 <Row>
331 <Col xs={12} sm={6}> 331 <Col xs={12} sm={6}>
332 <FormGroup controlId="relation"> 332 <FormGroup controlId="relation">
333 <Label required>Relation</Label> 333 <Label required>Relation</Label>
334 <FormControl 334 <FormControl
335 type="text" 335 type="text"
336 value={props.getValue('relation')} 336 value={props.getValue('relation')}
337 placeholder="Father" 337 placeholder="Father"
338 onChange={e => props.setValue('relation', e.target.value)} 338 onChange={e => props.setValue('relation', e.target.value)}
339 /> 339 />
340 {props.isSubmitted() && props.errors && props.errors.relation && ( 340 {props.isSubmitted() && props.errors && props.errors.relation && (
341 <ErrorLabel> {props.errors.relation} </ErrorLabel> 341 <ErrorLabel> {props.errors.relation} </ErrorLabel>
342 )} 342 )}
343 </FormGroup> 343 </FormGroup>
344 </Col> 344 </Col>
345 <Col xs={12} sm={6}> 345 <Col xs={12} sm={6}>
346 <FormGroup controlId="profession"> 346 <FormGroup controlId="profession">
347 <Label required>Profession</Label> 347 <Label required>Profession</Label>
348 <FormControl 348 <FormControl
349 type="text" 349 type="text"
350 value={props.getValue('profession')} 350 value={props.getValue('profession')}
351 placeholder="Farmer" 351 placeholder="Farmer"
352 onChange={e => props.setValue('profession', e.target.value)} 352 onChange={e => props.setValue('profession', e.target.value)}
353 /> 353 />
354 {props.isSubmitted() && props.errors && props.errors.profession && ( 354 {props.isSubmitted() && props.errors && props.errors.profession && (
355 <ErrorLabel> {props.errors.profession} </ErrorLabel> 355 <ErrorLabel> {props.errors.profession} </ErrorLabel>
356 )} 356 )}
357 </FormGroup> 357 </FormGroup>
358 </Col> 358 </Col>
359 </Row> 359 </Row>
360 <Row> 360 <Row>
361 <Col xs={12} sm={6}> 361 <Col xs={12} sm={6}>
362 <FormGroup controlId="parentGender"> 362 <FormGroup controlId="parentGender">
363 <Label>Parent Gender</Label> 363 <Label>Parent Gender</Label>
364 <FormControl componentClass="select" 364 <FormControl componentClass="select"
365 placeholder="select" 365 placeholder="select"
366 value={props.getValue('parentGender')} 366 value={props.getValue('parentGender')}
367 onChange={e => props.setValue('parentGender', e.target.value)} 367 onChange={e => props.setValue('parentGender', e.target.value)}
368 > 368 >
369 <option value="male">Male</option> 369 <option value="male">Male</option>
370 <option value="female">Female</option> 370 <option value="female">Female</option>
371 </FormControl> 371 </FormControl>
372 {props.isSubmitted() && props.errors && props.errors.parentGender && ( 372 {props.isSubmitted() && props.errors && props.errors.parentGender && (
373 <ErrorLabel> {props.errors.parentGender} </ErrorLabel> 373 <ErrorLabel> {props.errors.parentGender} </ErrorLabel>
374 )} 374 )}
375 </FormGroup> 375 </FormGroup>
376 </Col> 376 </Col>
377 <Col xs={12} sm={6}> 377 <Col xs={12} sm={6}>
378 <FormGroup controlId="parentPhone"> 378 <FormGroup controlId="parentPhone">
379 <Label required>Parent Phone</Label> 379 <Label required>Parent Phone</Label>
380 <FormControl 380 <FormControl
381 type="text" 381 type="text"
382 value={props.getValue('parentPhone')} 382 value={props.getValue('parentPhone')}
383 placeholder="9876543210" 383 placeholder="9876543210"
384 onChange={e => props.setValue('parentPhone', e.target.value)} 384 onChange={e => props.setValue('parentPhone', e.target.value)}
385 /> 385 />
386 {props.isSubmitted() && props.errors && props.errors.parentPhone && ( 386 {props.isSubmitted() && props.errors && props.errors.parentPhone && (
387 <ErrorLabel> {props.errors.parentPhone} </ErrorLabel> 387 <ErrorLabel> {props.errors.parentPhone} </ErrorLabel>
388 )} 388 )}
389 </FormGroup> 389 </FormGroup>
390 </Col> 390 </Col>
391 </Row> 391 </Row>
392 <Row> 392 <Row>
393 <Col xs={12} sm={6}> 393 <Col xs={12} sm={6}>
394 <FormGroup controlId="parentAddress"> 394 <FormGroup controlId="parentAddress">
395 <Label required>Parent Address</Label> 395 <Label required>Parent Address</Label>
396 <FormControl 396 <FormControl
397 type="text" 397 type="text"
398 value={props.getValue('parentAddress')} 398 value={props.getValue('parentAddress')}
399 placeholder="#12, street, town" 399 placeholder="#12, street, town"
400 onChange={e => props.setValue('parentAddress', e.target.value)} 400 onChange={e => props.setValue('parentAddress', e.target.value)}
401 /> 401 />
402 {props.isSubmitted() && props.errors && props.errors.parentAddress && ( 402 {props.isSubmitted() && props.errors && props.errors.parentAddress && (
403 <ErrorLabel> {props.errors.parentAddress} </ErrorLabel> 403 <ErrorLabel> {props.errors.parentAddress} </ErrorLabel>
404 )} 404 )}
405 </FormGroup> 405 </FormGroup>
406 </Col> 406 </Col>
407 <Col xs={12} sm={6}> 407 <Col xs={12} sm={6}>
408 <FormGroup controlId="parentCity"> 408 <FormGroup controlId="parentCity">
409 <Label required>Parent City</Label> 409 <Label required>Parent City</Label>
410 <FormControl 410 <FormControl
411 type="text" 411 type="text"
412 value={props.getValue('parentCity')} 412 value={props.getValue('parentCity')}
413 placeholder="Chennai" 413 placeholder="Chennai"
414 onChange={e => props.setValue('parentCity', e.target.value)} 414 onChange={e => props.setValue('parentCity', e.target.value)}
415 /> 415 />
416 {props.isSubmitted() && props.errors && props.errors.parentCity && ( 416 {props.isSubmitted() && props.errors && props.errors.parentCity && (
417 <ErrorLabel> {props.errors.parentCity} </ErrorLabel> 417 <ErrorLabel> {props.errors.parentCity} </ErrorLabel>
418 )} 418 )}
419 </FormGroup> 419 </FormGroup>
420 </Col> 420 </Col>
421 </Row> 421 </Row>
422 <Row> 422 <Row>
423 <Col xs={12} sm={6}> 423 <Col xs={12} sm={6}>
424 <FormGroup controlId="parentZipcode"> 424 <FormGroup controlId="parentZipcode">
425 <Label required>Parent Zipcode</Label> 425 <Label required>Parent Zipcode</Label>
426 <FormControl 426 <FormControl
427 type="text" 427 type="text"
428 value={props.getValue('parentZipcode')} 428 value={props.getValue('parentZipcode')}
429 placeholder="600031" 429 placeholder="600031"
430 onChange={e => props.setValue('parentZipcode', e.target.value)} 430 onChange={e => props.setValue('parentZipcode', e.target.value)}
431 /> 431 />
432 {props.isSubmitted() && props.errors && props.errors.parentZipcode && ( 432 {props.isSubmitted() && props.errors && props.errors.parentZipcode && (
433 <ErrorLabel> {props.errors.parentZipcode} </ErrorLabel> 433 <ErrorLabel> {props.errors.parentZipcode} </ErrorLabel>
434 )} 434 )}
435 </FormGroup> 435 </FormGroup>
436 </Col> 436 </Col>
437 </Row> 437 </Row>
438 </fieldset> 438 </fieldset>
439 )} 439 )}
440 <div style={{ textAlign: 'left' }}> 440 <div style={{ textAlign: 'left' }}>
441 {props.currentStep > 0 && ( 441 {props.currentStep > 0 && (
442 <div style={{ display: 'inline-block', marginRight: 10 }}> 442 <div style={{ display: 'inline-block', marginRight: 10 }}>
443 <Button onClick={props.onBackClick}> 443 <Button onClick={props.onBackClick}>
444 <i className="icon-arrow-left13 position-left"></i> 444 <i className="icon-arrow-left13 position-left"></i>
445 BACK 445 BACK
446 </Button> 446 </Button>
447 447
448 </div> 448 </div>
449 )} 449 )}
450 {props.currentStep < 3 && ( 450 {props.currentStep < 3 && (
451 <div style={{ display: 'inline-block' }}> 451 <div style={{ display: 'inline-block' }}>
452 <Button 452 <Button
453 bsStyle="primary" 453 bsStyle="primary"
454 onClick={props.onNextClick} 454 onClick={props.onNextClick}
455 > 455 >
456 NEXT 456 NEXT
457 <i className="icon-arrow-right14 position-right" /> 457 <i className="icon-arrow-right14 position-right" />
458 </Button> 458 </Button>
459 </div> 459 </div>
460 )} 460 )}
461 {props.currentStep === 3 && ( 461 {props.currentStep === 3 && (
462 <div style={{ display: 'inline-block' }}> 462 <div style={{ display: 'inline-block' }}>
463 <Button 463 <Button
464 bsStyle="primary" 464 bsStyle="primary"
465 onClick={props.onNextClick} 465 onClick={props.onNextClick}
466 > 466 >
467 SAVE 467 SAVE
468 <i className="fa fa-check" /> 468 <i className="fa fa-check" />
469 </Button> 469 </Button>
470 </div> 470 </div>
471 )} 471 )}
472 </div> 472 </div>
473 </div> 473 </div>
474 ) 474 )
475 475
476 StudentForm.propTypes = { 476 StudentForm.propTypes = {
477 currentStep: PropTypes.number.isRequired, 477 currentStep: PropTypes.number.isRequired,
478 onNextClick: PropTypes.func.isRequired, 478 onNextClick: PropTypes.func.isRequired,
479 onBackClick: PropTypes.func.isRequired, 479 onBackClick: PropTypes.func.isRequired,
480 setValue: PropTypes.func.isRequired, 480 setValue: PropTypes.func.isRequired,
481 getValue: PropTypes.func.isRequired, 481 getValue: PropTypes.func.isRequired,
482 } 482 }
483 483
484 export default StudentForm 484 export default StudentForm
1 { 1 {
2 "name": "application-name", 2 "name": "application-name",
3 "version": "1.0.0", 3 "version": "1.0.0",
4 "description": "Application description.", 4 "description": "Application description.",
5 "scripts": { 5 "scripts": {
6 "start": "meteor --settings settings-development.json", 6 "start": "meteor --settings settings-development.json",
7 "test": "meteor test --driver-package practicalmeteor:mocha --port 5000", 7 "test": "meteor test --driver-package practicalmeteor:mocha --port 5000",
8 "chimp-watch": "chimp --ddp=http://localhost:3000 --watch --mocha --path=tests", 8 "chimp-watch": "chimp --ddp=http://localhost:3000 --watch --mocha --path=tests",
9 "chimp-test": "chimp --ddp=http://localhost:3000 --mocha --path=tests", 9 "chimp-test": "chimp --ddp=http://localhost:3000 --mocha --path=tests",
10 "staging": "meteor deploy staging.meteor.com --settings settings-development.json", 10 "staging": "meteor deploy staging.meteor.com --settings settings-development.json",
11 "production": "meteor deploy production.meteor.com --settings settings-production.json" 11 "production": "meteor deploy production.meteor.com --settings settings-production.json"
12 }, 12 },
13 "devDependencies": { 13 "devDependencies": {
14 "chimp": "^0.41.2", 14 "chimp": "^0.41.2",
15 "eslint": "^3.8.1", 15 "eslint": "^3.8.1",
16 "eslint-config-airbnb": "^12.0.0", 16 "eslint-config-airbnb": "^12.0.0",
17 "eslint-plugin-import": "^1.16.0", 17 "eslint-plugin-import": "^1.16.0",
18 "eslint-plugin-jsx-a11y": "^2.2.3", 18 "eslint-plugin-jsx-a11y": "^2.2.3",
19 "eslint-plugin-meteor": "^4.0.1", 19 "eslint-plugin-meteor": "^4.0.1",
20 "eslint-plugin-react": "^6.4.1" 20 "eslint-plugin-react": "^6.4.1"
21 }, 21 },
22 "eslintConfig": { 22 "eslintConfig": {
23 "parserOptions": { 23 "parserOptions": {
24 "ecmaFeatures": { 24 "ecmaFeatures": {
25 "jsx": true 25 "jsx": true
26 } 26 }
27 }, 27 },
28 "plugins": [ 28 "plugins": [
29 "meteor", 29 "meteor",
30 "react" 30 "react"
31 ], 31 ],
32 "extends": [ 32 "extends": [
33 "airbnb/base", 33 "airbnb/base",
34 "plugin:meteor/guide", 34 "plugin:meteor/guide",
35 "plugin:react/recommended" 35 "plugin:react/recommended"
36 ], 36 ],
37 "env": { 37 "env": {
38 "browser": true 38 "browser": true
39 }, 39 },
40 "globals": { 40 "globals": {
41 "server": false, 41 "server": false,
42 "browser": false, 42 "browser": false,
43 "expect": false 43 "expect": false
44 }, 44 },
45 "rules": { 45 "rules": {
46 "import/no-unresolved": 0, 46 "import/no-unresolved": 0,
47 "import/no-extraneous-dependencies": 0, 47 "import/no-extraneous-dependencies": 0,
48 "import/extensions": 0, 48 "import/extensions": 0,
49 "no-underscore-dangle": [ 49 "no-underscore-dangle": [
50 "error", 50 "error",
51 { 51 {
52 "allow": [ 52 "allow": [
53 "_id", 53 "_id",
54 "_ensureIndex", 54 "_ensureIndex",
55 "_verifyEmailToken", 55 "_verifyEmailToken",
56 "_resetPasswordToken", 56 "_resetPasswordToken",
57 "_name" 57 "_name"
58 ] 58 ]
59 } 59 }
60 ], 60 ],
61 "class-methods-use-this": 0 61 "class-methods-use-this": 0
62 } 62 }
63 }, 63 },
64 "dependencies": { 64 "dependencies": {
65 "babel-runtime": "^6.18.0", 65 "babel-runtime": "^6.18.0",
66 "babyparse": "^0.4.6", 66 "babyparse": "^0.4.6",
67 "bcrypt": "^0.8.7", 67 "bcrypt": "^0.8.7",
68 "bootstrap": "^4.0.0-alpha.6", 68 "bootstrap": "^4.0.0-alpha.6",
69 "csvtojson": "^1.1.4", 69 "csvtojson": "^1.1.4",
70 "fs": "0.0.1-security", 70 "fs": "0.0.1-security",
71 "jquery": "^2.2.4", 71 "jquery": "^2.2.4",
72 "jquery-ui": "^1.12.1",
72 "jquery-validation": "^1.15.1", 73 "jquery-validation": "^1.15.1",
73 "lodash": "^4.17.4", 74 "lodash": "^4.17.4",
74 "material-fabmenu": "0.0.1", 75 "material-fabmenu": "0.0.1",
75 "material-ui": "^0.17.1", 76 "material-ui": "^0.17.1",
76 "meteor-node-stubs": "^0.2.6", 77 "meteor-node-stubs": "^0.2.6",
77 "moment": "^2.18.0", 78 "moment": "^2.18.0",
78 "react": "^15.4.2", 79 "react": "^15.4.2",
79 "react-addons-css-transition-group": "^15.4.2", 80 "react-addons-css-transition-group": "^15.4.2",
80 "react-addons-pure-render-mixin": "^15.3.2", 81 "react-addons-pure-render-mixin": "^15.3.2",
81 "react-addons-transition-group": "^15.4.2", 82 "react-addons-transition-group": "^15.4.2",
82 "react-bootstrap": "^0.30.8", 83 "react-bootstrap": "^0.30.8",
83 "react-bootstrap-date-picker": "^4.0.0", 84 "react-bootstrap-date-picker": "^4.0.0",
84 "react-burger-menu": "^1.10.14", 85 "react-burger-menu": "^1.10.14",
85 "react-dom": "^15.4.2", 86 "react-dom": "^15.4.2",
86 "react-fontawesome": "^1.5.0", 87 "react-fontawesome": "^1.5.0",
87 "react-komposer": "^1.13.1", 88 "react-komposer": "^1.13.1",
88 "react-router": "^2.6.1", 89 "react-router": "^2.6.1",
89 "react-router-bootstrap": "^0.23.1", 90 "react-router-bootstrap": "^0.23.1",
90 "react-svg": "^2.1.19", 91 "react-svg": "^2.1.19",
91 "react-tap-event-plugin": "^2.0.1", 92 "react-tap-event-plugin": "^2.0.1",
92 "reactstrap": "^4.3.0", 93 "reactstrap": "^4.3.0",
93 "velocity-animate": "^1.4.3", 94 "velocity-animate": "^1.4.3",
94 "velocity-react": "^1.2.1" 95 "velocity-react": "^1.2.1"
95 } 96 }
96 } 97 }
97 98