Commit 4b6d093b7e606b0fc5b0dfd23f997c508f7054e3
Exists in
master
Merge branch 'new-student-form' of https://bitbucket.org/youngdesk/ydapp into new-student-form
Showing
4 changed files
Show diff stats
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 |
package.json
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 |