VRFS-3359 : React component functionality and styles to display various experience lists.

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

@@ -8,7 +8,7 @@ logger = context.JK.logger
   listObjects: ->
     objs=[]
     @root = jQuery(this.getDOMNode())
-    $(".listItem", @root).each ->
+    $(".list-item", @root).each ->
       objs.push $(this).data("object-id")
     objs
 
@@ -30,10 +30,10 @@ logger = context.JK.logger
       for object,i in this.props.listItems
         nm = "item_#{i}"
         displayValue = this.props.formatListItem(object)
-        object_options.push `<div className='listItem'>
+        object_options.push `<div className='list-item'>
           <div className='display-value left'>{displayValue}</div>
           <div className='actions'>
-            <a className='deleteListItem right' data-item-index={i} onClick={this.deleteItem} >X</a>
+            <a className='delete-list-item right' data-item-index={i} onClick={this.deleteItem} >X</a>
           </div></div>`
     else
       object_options.push `<div className='display-value'><em>None</em></div>`

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

@@ -3,14 +3,14 @@ rest = window.JK.Rest()
 logger = context.JK.logger
 
 @TeacherExperienceEditableList = React.createClass({
-  instruments: []
+  #instruments: []
   componentDidUnmount: () ->
-    @instruments = []
+    #@instruments = []
 
   componentDidMount: () ->
     $root = jQuery(this.getDOMNode())
-    rest.getInstruments().done (instruments) =>
-      @instruments = instruments
+    #rest.getInstruments().done (instruments) =>
+      #@instruments = instruments
 
     $root.off("submit", ".teacher-experience-teaching-form").on("submit", ".teacher-experience-teaching-form", @addExperience)
 
@@ -23,7 +23,7 @@ logger = context.JK.logger
 
   addExperience: (e) ->
     e.preventDefault()
-    logger.debug("addExperience", $(this))
+    logger.debug("addExperience", this.props.listItems, this.props)
     $form = e.target
     formValues = $(":input", $form).formToObject()
     this.props.listItems.push {
@@ -38,6 +38,11 @@ logger = context.JK.logger
     false
 
   render: () ->
+    endDate = []
+    if this.props.showEndDate
+      endDate.push `<span><label htmlFor="end-year">to</label>
+                    <YearSelect name="end_year"></YearSelect></span>`
+
     `<div className="TeacherExperienceEditableList react-component">
         <form className="teacher-experience-teaching-form">
           <table className="form-table">
@@ -46,16 +51,15 @@ logger = context.JK.logger
               <td><input name="title_input"> </input></td>
             </tr>
             <tr className="teacher-field">
-              <td><label htmlFor="organization-input">School/Org:</label></td>
+              <td><label htmlFor="organization-input">School / Org:</label></td>
               <td><input name="organization_input"> </input></td>
             </tr>
             <tr className="teacher-field">
               <td><label htmlFor="start-year">Start & End:</label></td>
               <td>
                 <div className="inline-fields">
-                  <YearSelect name="start_year"> </YearSelect>
-                  <label htmlFor="end-year">to</label>
-                  <YearSelect name="end_year"> </YearSelect>
+                  <YearSelect name="start_year"> </YearSelect>                  
+                  {endDate}
                 </div>
               </td>
             </tr>

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

@@ -23,6 +23,8 @@ rest = window.JK.Rest()
       this.setState({
         #validate_basics: true,
         experience_teaching: teacher.experience_teaching
+        experience_education: teacher.experience_education
+        experience_award: teacher.experience_award
       })
 
   captureFormState: (changes) ->
@@ -64,17 +66,17 @@ rest = window.JK.Rest()
     `<div className="TeacherSetupExperience TeacherSetupComponent">
       <div className="teacher-third-column">
         <label className="sub-caption">TEACHING EXPERIENCE:</label>
-        <TeacherExperienceEditableList experienceType="teaching" onItemChanged={this.handleListChange} listItems={this.state.experience_teaching}/>
+        <TeacherExperienceEditableList showEndDate="true" experienceType="teaching" onItemChanged={this.handleListChange} listItems={this.state.experience_teaching}/>
       </div>
 
       <div className="teacher-third-column">
         <label className="sub-caption">EDUCATION:</label>
-        <TeacherExperienceEditableList onItemChanged={this.handleListChange} listItems={this.state.experience_teaching}/>
+        <TeacherExperienceEditableList showEndDate="true" experienceType="education" onItemChanged={this.handleListChange} listItems={this.state.experience_education}/>
       </div>
 
       <div className="teacher-third-column">
         <label className="sub-caption">AWARDS:</label>
-        <TeacherExperienceEditableList onItemChanged={this.handleListChange} listItems={this.state.experience_teaching}/>
+        <TeacherExperienceEditableList experienceType="award" onItemChanged={this.handleListChange} listItems={this.state.experience_award}/>
       </div>
 
       <TeacherSetupNav handleNav={this.handleNav}> </TeacherSetupNav>

web/app/assets/stylesheets/client/react-components/Profile.css.scss

@@ -27,6 +27,9 @@
     border: 2px solid #c5c5c5;
     color: #c5c5c5;
     height: 10em;
+    .list-item {
+      clear: both;
+    }
   }
 
   .checkbox-scroller {