VRFS-3359 : Validate end year greater or equal start year.

web/app/assets/javascripts/react-components/TeacherExperienceEditableList.js.jsx.coffee

@@ -4,11 +4,11 @@ logger = context.JK.logger
 
 @TeacherExperienceEditableList = React.createClass({
   componentDidUnmount: () ->
-    $root.off("submit", ".teacher-experience-teaching-form")
+    @root.off("submit", ".teacher-experience-teaching-form")
 
   componentDidMount: () ->
-    $root = jQuery(this.getDOMNode())
-    $root.off("submit", ".teacher-experience-teaching-form").on("submit", ".teacher-experience-teaching-form", @addExperience)    
+    @root = jQuery(this.getDOMNode())
+    @root.off("submit", ".teacher-experience-teaching-form").on("submit", ".teacher-experience-teaching-form", @addExperience)
 
   formatListItem: (obj) ->
     t = "#{obj.name}/#{obj.organization} (#{obj.start_year}"
@@ -22,19 +22,31 @@ logger = context.JK.logger
     this.props.listItems ||= []
     this.props.listItems = _.sortBy(this.props.listItems, 'start_year')
 
+  addError: (k,v) ->
+    teacherField = @root#.find(".teacher-field[name='#{k}'] > td").first()
+    teacherField.prepend("<div class='error-text'>#{v.join()}</div>")
+    $("input", teacherField).addClass("input-error")
+
   addExperience: (e) ->
     e.preventDefault()
     logger.debug("addExperience", this.props.listItems, this.props)
     $form = e.target
-    this.props.listItems.push {
-      name: $("[name='title_input']", $form).val()
-      organization: $("[name='organization_input']", $form).val()
-      start_year: $("[name='start_year']", $form).val()
-      end_year: $("[name='end_year']", $form).val()
-    }
-    logger.debug("addExperience", this.props.listItems)
-    this.props.onItemChanged(this.props.experienceType, this.props.listItems)
-    $form.reset()
+
+    start_year = $("[name='start_year']", $form).val()
+    end_year = $("[name='end_year']", $form).val()
+
+    if this.props.showEndDate && start_year > end_year
+      this.addError("date", ["End year must be greater than start year"])
+    else
+      this.props.listItems.push {
+        name: $("[name='title_input']", $form).val()
+        organization: $("[name='organization_input']", $form).val()
+        start_year: start_year
+        end_year: end_year
+      }
+      logger.debug("addExperience", this.props.listItems)
+      this.props.onItemChanged(this.props.experienceType, this.props.listItems)
+      $form.reset()
     false
 
   render: () ->
@@ -56,15 +68,15 @@ logger = context.JK.logger
     `<div className="TeacherExperienceEditableList react-component">
         <form className="teacher-experience-teaching-form">
           <table className="form-table">
-            <tr className="teacher-field">
+            <tr className="teacher-field" name="title">
               <td><label htmlFor="title-input">{titleLabel}:</label></td>
               <td><input name="title_input" required="required"> </input></td>
             </tr>
-            <tr className="teacher-field">
+            <tr className="teacher-field" name="organization">
               <td><label htmlFor="organization-input">{orgLabel}:</label></td>
               <td><input name="organization_input" required="required"> </input></td>
             </tr>
-            <tr className="teacher-field">
+            <tr className="teacher-field" name="date">
               <td><label htmlFor="start-year">{dtLabel}:</label></td>
               <td>
                 <div className="inline-fields">

web/app/assets/javascripts/react-components/TeacherSetupExperience.js.jsx.coffee

@@ -71,10 +71,10 @@ rest = window.JK.Rest()
 
       <div className="teacher-third-column">
         <label className="sub-caption">EDUCATION:</label>
-        <TeacherExperienceEditableList 
-          showEndDate="true" 
-          experienceType="education" 
-          onItemChanged={this.handleListChange} 
+        <TeacherExperienceEditableList
+          showEndDate="true"
+          experienceType="education"
+          onItemChanged={this.handleListChange}
           titleLabel="Degree/Cert"
           orgLabel="School"
           listItems={this.state.experiences_education}/>
@@ -82,11 +82,11 @@ rest = window.JK.Rest()
 
       <div className="teacher-third-column">
         <label className="sub-caption">AWARDS:</label>
-        <TeacherExperienceEditableList 
-          experienceType="award" 
-          onItemChanged={this.handleListChange} 
+        <TeacherExperienceEditableList
+          experienceType="award"
+          onItemChanged={this.handleListChange}
           titleLabel="Award"
-          orgLabel="Organization"          
+          orgLabel="Organization"
           listItems={this.state.experiences_award}/>
       </div>
 

web/app/assets/javascripts/react-components/mixins/TeacherSetupMixin.js.coffee

@@ -7,7 +7,7 @@ teacherActions = window.JK.Actions.Teacher
     screenBindings = {
       'beforeShow': @beforeShow
     }
-
+    @root = jQuery(this.getDOMNode())
     @app.bindScreen("teachers/setup/#{@screenName()}", screenBindings)
 
   beforeShow: (data) ->
@@ -26,16 +26,17 @@ teacherActions = window.JK.Actions.Teacher
     # @postmark = params.p
 
   handleErrors: (changes) ->
-    $root = jQuery(this.getDOMNode())
-    $(".error-text", $root).remove()
+    $(".error-text", @root).remove()
     if changes.errors?
-      for k,v of changes.errors
-        teacherField = $root.find(".teacher-field[name='#{k}']")
-        teacherField.append("<div class='error-text'>#{v.join()}</div>")
-        $("input", teacherField).addClass("input-error")
+      addError(k,v) for k,v of changes.errors
 
     changes.errors?
 
+  addError: (k,v) ->
+    teacherField = @root.find(".teacher-field[name='#{k}']")
+    teacherField.append("<div class='error-text'>#{v.join()}</div>")
+    $("input", teacherField).addClass("input-error")
+
   getParams:() =>
     params = {}
     q = window.location.href.split("?")[1]