Improved validation messages; Added one more step to student form

Rafael Arenas Schuchowsky
1 parent a928a85941
Showing 3 changed files with 51 additions and 38 deletions Show diff stats
imports/client/views/core/validations.js
imports/client/views/org/admin/students/AddStudentFormContainer.js
imports/client/views/org/admin/students/StudentForm.js
-export const isRequired = value => !value && 'Required'
+export const isRequired = (fieldName, value) => {
+  console.log('isRequired', fieldName, value)
+  if (!value) {
+    return fieldName ? `${fieldName} is required` : 'Required'
+  }
+}
  
 export const minLength = minLength => {
   return value => value && value.length < minLength && `Min. length: ${minLength}`
@@ -28,7 +28,7 @@ export class AddStudentFormContainer extends Component {
   }
  
   handleSubmit() {
-    if (this.state.currentStep === 2) {
+    if (this.state.currentStep === 3) {
       addStudentManually.call(this.form.state.values)
     }
   }
@@ -48,33 +48,32 @@ export class AddStudentFormContainer extends Component {
             values={values}
             ref={validator => this.validator = validator}
             validations={{
-              admissionId: [isRequired],
-              firstName: [isRequired],
-              middleName: [isRequired],
-              lastName: [isRequired],
-              email: [isRequired, isValidEmail],
-              dob: [isRequired],
-              formattedDob: [isRequired],
-              gender: [isRequired],
-              rollNo: [(value) => this.state.currentStep === 1 && isRequired(value)],
-              class: [(value) => this.state.currentStep === 1 && isRequired(value)],
-              section: [(value) => this.state.currentStep === 1 && isRequired(value)],
-              community: [(value) => this.state.currentStep === 1 && isRequired(value)],
-              bloodGroup: [(value) => this.state.currentStep === 1 && isRequired(value)],
-              phone: [(value) => this.state.currentStep === 1 && isRequired(value)],
-              address: [(value) => this.state.currentStep === 1 && isRequired(value)],
-              city: [(value) => this.state.currentStep === 1 && isRequired(value)],
-              state: [(value) => this.state.currentStep === 1 && isRequired(value)],
-              parentName: [(value) => this.state.currentStep === 2 && isRequired(value)],
-              parentEmail: [(value) => this.state.currentStep === 2 && isRequired(value), (value) => this.state.currentStep === 2 && isValidEmail(value)],
-              relation: [(value) => this.state.currentStep === 2 && isRequired(value)],
-              profession: [(value) => this.state.currentStep === 2 && isRequired(value)],
-              parentGender: [(value) => this.state.currentStep === 2 && isRequired(value)],
-              parentPhone: [(value) => this.state.currentStep === 2 && isRequired(value)],
-              parentAddress: [(value) => this.state.currentStep === 2 && isRequired(value)],
-              parentCity: [(value) => this.state.currentStep === 2 && isRequired(value)],
-              parentState: [(value) => this.state.currentStep === 2 && isRequired(value)],
-              parentZipcode: [(value) => this.state.currentStep === 2 && isRequired(value)],
+              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 }) => (
@@ -20,12 +20,16 @@ const StudentForm = props =&gt; (
           active: props.currentStep === 0,
         },
         {
-          label: 'Address',
+          label: 'Academic',
           active: props.currentStep === 1,
         },
         {
-          label: 'Parent info',
+          label: 'Address',
           active: props.currentStep === 2,
+        },
+        {
+          label: 'Parent info',
+          active: props.currentStep === 3,
         }
       ]}
     />
@@ -127,7 +131,7 @@ const StudentForm = props =&gt; (
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="formControlsSelect">
-              <Label required>Gender</Label>
+              <Label>Gender</Label>
               <FormControl componentClass="select"
                 placeholder="select"
                 value={props.getValue('gender')}
@@ -145,8 +149,8 @@ const StudentForm = props =&gt; (
       </fieldset>
     )}
     {props.currentStep === 1 && (
-      <fieldset title="2">
-        <legend className="text-semibold">Address</legend>
+      <fieldset title="Academic">
+        <legend className="text-semibold">Academic</legend>
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="rollNo">
@@ -237,6 +241,11 @@ const StudentForm = props =&gt; (
             </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">
@@ -285,7 +294,7 @@ const StudentForm = props =&gt; (
         </Row>
       </fieldset>
     )}
-    {props.currentStep === 2 && (
+    {props.currentStep === 3 && (
       <fieldset title="2">
         <legend className="text-semibold">Parent information</legend>
         <Row>
@@ -351,7 +360,7 @@ const StudentForm = props =&gt; (
         <Row>
           <Col xs={12} sm={6}>
             <FormGroup controlId="parentGender">
-              <Label required>Parent Gender</Label>
+              <Label>Parent Gender</Label>
               <FormControl componentClass="select"
                 placeholder="select"
                 value={props.getValue('parentGender')}
@@ -438,7 +447,7 @@ const StudentForm = props =&gt; (
  
         </div>
       )}
-      {props.currentStep < 2 && (
+      {props.currentStep < 3 && (
         <div style={{ display: 'inline-block' }}>
           <Button
             bsStyle="primary"
@@ -449,7 +458,7 @@ const StudentForm = props =&gt; (
           </Button>
         </div>
       )}
-      {props.currentStep === 2 && (
+      {props.currentStep === 3 && (
         <div style={{ display: 'inline-block' }}>
           <Button
             bsStyle="primary"
1		-export const isRequired = value => !value && 'Required'
	1	+export const isRequired = (fieldName, value) => {
	2	+ console.log('isRequired', fieldName, value)
	3	+ if (!value) {
	4	+ return fieldName ? `${fieldName} is required` : 'Required'
	5	+ }
	6	+}
2	7
3	8	export const minLength = minLength => {
4	9	return value => value && value.length < minLength && `Min. length: ${minLength}`
...	...
...	...	@@ -28,7 +28,7 @@ export class AddStudentFormContainer extends Component {
28	28	}
29	29
30	30	handleSubmit() {
31		- if (this.state.currentStep === 2) {
	31	+ if (this.state.currentStep === 3) {
32	32	addStudentManually.call(this.form.state.values)
33	33	}
34	34	}
...	...	@@ -48,33 +48,32 @@ export class AddStudentFormContainer extends Component {
48	48	values={values}
49	49	ref={validator => this.validator = validator}
50	50	validations={{
51		- admissionId: [isRequired],
52		- firstName: [isRequired],
53		- middleName: [isRequired],
54		- lastName: [isRequired],
55		- email: [isRequired, isValidEmail],
56		- dob: [isRequired],
57		- formattedDob: [isRequired],
58		- gender: [isRequired],
59		- rollNo: [(value) => this.state.currentStep === 1 && isRequired(value)],
60		- class: [(value) => this.state.currentStep === 1 && isRequired(value)],
61		- section: [(value) => this.state.currentStep === 1 && isRequired(value)],
62		- community: [(value) => this.state.currentStep === 1 && isRequired(value)],
63		- bloodGroup: [(value) => this.state.currentStep === 1 && isRequired(value)],
64		- phone: [(value) => this.state.currentStep === 1 && isRequired(value)],
65		- address: [(value) => this.state.currentStep === 1 && isRequired(value)],
66		- city: [(value) => this.state.currentStep === 1 && isRequired(value)],
67		- state: [(value) => this.state.currentStep === 1 && isRequired(value)],
68		- parentName: [(value) => this.state.currentStep === 2 && isRequired(value)],
69		- parentEmail: [(value) => this.state.currentStep === 2 && isRequired(value), (value) => this.state.currentStep === 2 && isValidEmail(value)],
70		- relation: [(value) => this.state.currentStep === 2 && isRequired(value)],
71		- profession: [(value) => this.state.currentStep === 2 && isRequired(value)],
72		- parentGender: [(value) => this.state.currentStep === 2 && isRequired(value)],
73		- parentPhone: [(value) => this.state.currentStep === 2 && isRequired(value)],
74		- parentAddress: [(value) => this.state.currentStep === 2 && isRequired(value)],
75		- parentCity: [(value) => this.state.currentStep === 2 && isRequired(value)],
76		- parentState: [(value) => this.state.currentStep === 2 && isRequired(value)],
77		- parentZipcode: [(value) => this.state.currentStep === 2 && isRequired(value)],
	51	+ admissionId: [(value) => isRequired('Admission id', value)],
	52	+ firstName: [(value) => isRequired('First name', value)],
	53	+ middleName: [(value) => isRequired('Middle name', value)],
	54	+ lastName: [(value) => isRequired('Last name', value)],
	55	+ email: [(value) => isRequired('Email', value), isValidEmail],
	56	+ dob: [(value) => isRequired('Date of birth', value)],
	57	+ gender: [(value) => isRequired('Gender', value)],
	58	+ rollNo: [(value) => this.state.currentStep === 1 && isRequired('Roll no', value)],
	59	+ class: [(value) => this.state.currentStep === 1 && isRequired('Class', value)],
	60	+ section: [(value) => this.state.currentStep === 1 && isRequired('Section', value)],
	61	+ community: [(value) => this.state.currentStep === 1 && isRequired('Community', value)],
	62	+ bloodGroup: [(value) => this.state.currentStep === 1 && isRequired('Blood group', value)],
	63	+ phone: [(value) => this.state.currentStep === 1 && isRequired('Phone', value)],
	64	+ address: [(value) => this.state.currentStep === 2 && isRequired('Address', value)],
	65	+ city: [(value) => this.state.currentStep === 2 && isRequired('City', value)],
	66	+ state: [(value) => this.state.currentStep === 2 && isRequired('State', value)],
	67	+ parentName: [(value) => this.state.currentStep === 3 && isRequired('Parent name', value)],
	68	+ parentEmail: [(value) => this.state.currentStep === 3 && isRequired('Parent email', value), (value) => this.state.currentStep === 3 && isValidEmail(value)],
	69	+ relation: [(value) => this.state.currentStep === 3 && isRequired('Relation', value)],
	70	+ profession: [(value) => this.state.currentStep === 3 && isRequired('Profession', value)],
	71	+ parentGender: [(value) => this.state.currentStep === 3 && isRequired('Parent gender', value)],
	72	+ parentPhone: [(value) => this.state.currentStep === 3 && isRequired('Parent phone', value)],
	73	+ parentAddress: [(value) => this.state.currentStep === 3 && isRequired('Parent address', value)],
	74	+ parentCity: [(value) => this.state.currentStep === 3 && isRequired('Parent city', value)],
	75	+ parentState: [(value) => this.state.currentStep === 3 && isRequired('Parent state', value)],
	76	+ parentZipcode: [(value) => this.state.currentStep === 3 && isRequired('Parent zip code', value)],
78	77	}}
79	78	>
80	79	{({ errors }) => (
...	...
...	...	@@ -20,12 +20,16 @@ const StudentForm = props => (
20	20	active: props.currentStep === 0,
21	21	},
22	22	{
23		- label: 'Address',
	23	+ label: 'Academic',
24	24	active: props.currentStep === 1,
25	25	},
26	26	{
27		- label: 'Parent info',
	27	+ label: 'Address',
28	28	active: props.currentStep === 2,
	29	+ },
	30	+ {
	31	+ label: 'Parent info',
	32	+ active: props.currentStep === 3,
29	33	}
30	34	]}
31	35	/>
...	...	@@ -127,7 +131,7 @@ const StudentForm = props => (
127	131	<Row>
128	132	<Col xs={12} sm={6}>
129	133	<FormGroup controlId="formControlsSelect">
130		- <Label required>Gender</Label>
	134	+ <Label>Gender</Label>
131	135	<FormControl componentClass="select"
132	136	placeholder="select"
133	137	value={props.getValue('gender')}
...	...	@@ -145,8 +149,8 @@ const StudentForm = props => (
145	149	</fieldset>
146	150	)}
147	151	{props.currentStep === 1 && (
148		- <fieldset title="2">
149		- <legend className="text-semibold">Address</legend>
	152	+ <fieldset title="Academic">
	153	+ <legend className="text-semibold">Academic</legend>
150	154	<Row>
151	155	<Col xs={12} sm={6}>
152	156	<FormGroup controlId="rollNo">
...	...	@@ -237,6 +241,11 @@ const StudentForm = props => (
237	241	</FormGroup>
238	242	</Col>
239	243	</Row>
	244	+ </fieldset>
	245	+ )}
	246	+ {props.currentStep === 2 && (
	247	+ <fieldset title="Address">
	248	+ <legend className="text-semibold">Address</legend>
240	249	<Row>
241	250	<Col xs={12} sm={6}>
242	251	<FormGroup controlId="address">
...	...	@@ -285,7 +294,7 @@ const StudentForm = props => (
285	294	</Row>
286	295	</fieldset>
287	296	)}
288		- {props.currentStep === 2 && (
	297	+ {props.currentStep === 3 && (
289	298	<fieldset title="2">
290	299	<legend className="text-semibold">Parent information</legend>
291	300	<Row>
...	...	@@ -351,7 +360,7 @@ const StudentForm = props => (
351	360	<Row>
352	361	<Col xs={12} sm={6}>
353	362	<FormGroup controlId="parentGender">
354		- <Label required>Parent Gender</Label>
	363	+ <Label>Parent Gender</Label>
355	364	<FormControl componentClass="select"
356	365	placeholder="select"
357	366	value={props.getValue('parentGender')}
...	...	@@ -438,7 +447,7 @@ const StudentForm = props => (
438	447
439	448	</div>
440	449	)}
441		- {props.currentStep < 2 && (
	450	+ {props.currentStep < 3 && (
442	451	<div style={{ display: 'inline-block' }}>
443	452	<Button
444	453	bsStyle="primary"
...	...	@@ -449,7 +458,7 @@ const StudentForm = props => (
449	458	</Button>
450	459	</div>
451	460	)}
452		- {props.currentStep === 2 && (
	461	+ {props.currentStep === 3 && (
453	462	<div style={{ display: 'inline-block' }}>
454	463	<Button
455	464	bsStyle="primary"
...	...