VRFS-3359 : Teacher Experience List Component

* Add field label properties to experience list component.  Each of the
three lists can set labels for title and organization.  Date label is
inferred from showEndDate property
* Update usages of this list
* Sort by start_date
* List display uses available fields (e.g., date range when available)

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

@@ -3,23 +3,24 @@ rest = window.JK.Rest()
 logger = context.JK.logger
 
 @TeacherExperienceEditableList = React.createClass({
-  #instruments: []
   componentDidUnmount: () ->
-    #@instruments = []
+    $root.off("submit", ".teacher-experience-teaching-form")
 
   componentDidMount: () ->
     $root = jQuery(this.getDOMNode())
-    #rest.getInstruments().done (instruments) =>
-      #@instruments = instruments
-
-    $root.off("submit", ".teacher-experience-teaching-form").on("submit", ".teacher-experience-teaching-form", @addExperience)
+    $root.off("submit", ".teacher-experience-teaching-form").on("submit", ".teacher-experience-teaching-form", @addExperience)    
 
   formatListItem: (obj) ->
-    "#{obj.name}"
+    t = "#{obj.name}/#{obj.organization} (#{obj.start_year}"
+    t += "-#{obj.end_year}" if this.props.showEndDate
+    t += ")"
 
-  listItems: () ->
-    logger.debug("listItems", this.props.listItems)
-    this.props.listItems
+  getInitialProps: () ->
+    {listItems: []}
+
+  sortListItems: () ->
+    this.props.listItems ||= []
+    this.props.listItems = _.sortBy(this.props.listItems, 'start_year')
 
   addExperience: (e) ->
     e.preventDefault()
@@ -41,23 +42,33 @@ logger = context.JK.logger
     if this.props.showEndDate
       endDate.push `<span><label htmlFor="end-year">to</label>
                     <YearSelect name="end_year"></YearSelect></span>`
+      dtLabel = "Start & End"
+    else
+      dtLabel = "Date"
 
+    titleLabel = this.props.titleLabel
+    orgLabel = this.props.orgLabel
+
+    titleLabel ||= "Title"
+    orgLabel ||= "School/Org"
+
+    listItems= _.sortBy(this.props.listItems, 'start_year')
     `<div className="TeacherExperienceEditableList react-component">
         <form className="teacher-experience-teaching-form">
           <table className="form-table">
             <tr className="teacher-field">
-              <td><label htmlFor="title-input">Title:</label></td>
+              <td><label htmlFor="title-input">{titleLabel}:</label></td>
               <td><input name="title_input" required="required"> </input></td>
             </tr>
             <tr className="teacher-field">
-              <td><label htmlFor="organization-input">School / Org:</label></td>
+              <td><label htmlFor="organization-input">{orgLabel}:</label></td>
               <td><input name="organization_input" required="required"> </input></td>
             </tr>
             <tr className="teacher-field">
-              <td><label htmlFor="start-year">Start & End:</label></td>
+              <td><label htmlFor="start-year">{dtLabel}:</label></td>
               <td>
                 <div className="inline-fields">
-                  <YearSelect name="start_year"> </YearSelect>                  
+                  <YearSelect name="start_year"> </YearSelect>
                   {endDate}
                 </div>
               </td>
@@ -65,6 +76,6 @@ logger = context.JK.logger
           </table>
           <button className="button-grey right" type="submit">Add</button>
         </form>
-        <EditableList objectName='experience' onItemChanged={this.props.onItemChanged} listItems={this.props.listItems} formatListItem={this.formatListItem}/>
+        <EditableList objectName='experience' onItemChanged={this.props.onItemChanged} listItems={listItems} formatListItem={this.formatListItem}/>
     </div>`
 })

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

@@ -11,7 +11,11 @@ rest = window.JK.Rest()
   ]
 
   getInitialState: () ->
-    {}
+    {
+      experiences_teaching: []
+      experiences_education: []
+      experiences_award: []
+    }
 
   screenName: () ->
     "experience"
@@ -59,10 +63,6 @@ rest = window.JK.Rest()
     #this.forceUpdate()
 
   render: () ->
-    logger.debug("RENDERING TeacherSetupExperience", this.props, this.state)
-    instrumentsTaughtCheckboxes = []
-    #instrumentsTaughtCheckboxes.push(`<input />`)
-
     `<div className="TeacherSetupExperience TeacherSetupComponent">
       <div className="teacher-third-column">
         <label className="sub-caption">TEACHING EXPERIENCE:</label>
@@ -71,12 +71,23 @@ rest = window.JK.Rest()
 
       <div className="teacher-third-column">
         <label className="sub-caption">EDUCATION:</label>
-        <TeacherExperienceEditableList showEndDate="true" experienceType="education" onItemChanged={this.handleListChange} listItems={this.state.experiences_education}/>
+        <TeacherExperienceEditableList 
+          showEndDate="true" 
+          experienceType="education" 
+          onItemChanged={this.handleListChange} 
+          titleLabel="Degree/Cert"
+          orgLabel="School"
+          listItems={this.state.experiences_education}/>
       </div>
 
       <div className="teacher-third-column">
         <label className="sub-caption">AWARDS:</label>
-        <TeacherExperienceEditableList experienceType="award" onItemChanged={this.handleListChange} listItems={this.state.experiences_award}/>
+        <TeacherExperienceEditableList 
+          experienceType="award" 
+          onItemChanged={this.handleListChange} 
+          titleLabel="Award"
+          orgLabel="Organization"          
+          listItems={this.state.experiences_award}/>
       </div>
 
       <TeacherSetupNav handleNav={this.handleNav}> </TeacherSetupNav>

web/app/assets/javascripts/react-components/stores/TeacherStore.js.coffee

@@ -18,6 +18,13 @@ EVENTS = context.JK.EVENTS
   onAppInit: (app) ->
     @app = app
 
+  defaultTeacher: ->
+    {
+      experiences_teaching: []
+      experiences_education: []
+      experiences_award: []
+    }
+
   onLoadTeacher: (options) ->
     logger.debug("onLoadTeacher", options)
     if !options?
@@ -30,7 +37,7 @@ EVENTS = context.JK.EVENTS
         .fail((jqXHR, textStatus, errorMessage) =>
           logger.debug("FAILED",jqXHR, textStatus, errorMessage)
           if (jqXHR.status==404)
-            this.trigger({teacher: {}})
+            this.trigger({teacher: this.defaultTeacher()})
           else
             context.JK.app.ajaxError(jqXHR, textStatus, errorMessage)
         )