VRFS-3359 : More react behavior and view updates to generic and specialized components.

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

@@ -13,7 +13,7 @@ logger = context.JK.logger
 
   onItemChanged: (e) ->
     e.preventDefault()
-    this.props.onItemChanged("objects", @selectedObjects())
+    this.props.onItemChanged(this.props.objectName, @selectedObjects())
 
   selectedObjects: ->
     selected=[]

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

@@ -1,18 +0,0 @@
-context = window
-rest = window.JK.Rest()
-logger = context.JK.logger
-
-@InstrumentSelectorList = React.createClass({
-  instruments: []
-  componentDidUnmount: () ->
-    @instruments = []
-
-  componentDidMount: () ->
-    rest.getInstruments().done (instruments) =>
-      @instruments = instruments
-
-  render: () ->
-    `<div className="InstrumentSelectorList react-component">
-        <CheckBoxList onItemChanged={this.props.handleListChange} sourceObjects={this.instruments} selectedObjects={this.props.selectedInstruments}/>
-    </div>`
-})

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

@@ -23,6 +23,9 @@ rest = window.JK.Rest()
       this.setState({
         #validate_basics: true,
         instruments: teacher.instruments
+        genres: teacher.genres
+        languages: teacher.languages
+        subjects: teacher.subjects
       })
 
   captureFormState: (changes) ->
@@ -32,11 +35,11 @@ rest = window.JK.Rest()
     });
 
   handleListChange: (listName, selectedObjects)->
+    logger.debug("handleListChange:", listName, selectedObjects)
     this.setState({
       "#{listName}": selectedObjects
     });
 
-
   navDestination: (instructions) ->
     navTo=null
     if instructions?
@@ -68,27 +71,25 @@ rest = window.JK.Rest()
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="instruments">
           <strong>Instruments Taught</strong>
-
-            <InstrumentSelectorList onInstrumentsChanged={this.handleListChange} selectedInstruments={this.state.instruments}/>
-
+          <InstrumentCheckBoxList onItemChanged={this.handleListChange} selectedInstruments={this.state.instruments}/>
         </div>
       </div>
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="subjects">
           <strong>Music Subjects Taught</strong>
-
+          <SubjectCheckBoxList onItemChanged={this.handleListChange} selectedSubjects={this.state.subjects}/>
         </div>
       </div>
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="genres">
           <strong>Genres Taught</strong>
-
+          <GenreCheckBoxList onItemChanged={this.handleListChange} selectedGenres={this.state.genres}/>
         </div>
       </div>
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="languages">
           <strong>Languages Spoken</strong>
-
+          <LanguageCheckBoxList onItemChanged={this.handleListChange} selectedLanguages={this.state.languages}/>
         </div>
       </div>
       <TeacherSetupNav handleNav={this.handleNav}></TeacherSetupNav>

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

@@ -18,27 +18,18 @@ rest = window.JK.Rest()
 
   onTeacherStateChanged: (changes) ->
     $root = jQuery(this.getDOMNode())
-    logger.debug("onTeacherExperienceStateChanged", changes, changes.errors?, changes.errors)
     unless this.handleErrors(changes)
       teacher = changes.teacher
-      logger.debug("@teacher", teacher)
       this.setState({
-        biography: teacher.biography,
-        introductory_video: teacher.introductory_video,
-        years_teaching: teacher.years_teaching,
-        years_playing: teacher.years_playing,
-        validate_experience: true
+        #validate_basics: true,
+        experience_teaching: teacher.experience_teaching
       })
 
   captureFormState: (changes) ->
     $root = jQuery(this.getDOMNode())
     this.setState({
-      biography: $root.find(".teacher-biography").val(),
-      introductory_video: $root.find(".teacher-introductory-video").val(),
-      years_teaching: $root.find(".years-teaching-experience").val(),
-      years_playing: $root.find(".years-playing-experience").val()
+
     });
-    logger.debug("capturedFormState", this.state, changes)
 
   navDestination: (instructions) ->
     navTo=null
@@ -58,14 +49,35 @@ rest = window.JK.Rest()
     navTo = this.navDestination(e)
     teacherActions.change.trigger(this.state, {navTo: navTo})
 
+  handleListChange: (listName, listObjects)->
+    logger.debug("EXPERIENCE handleListChange:", listName, listObjects)
+    this.setState({
+      "experience_#{listName}": listObjects
+    })
+    #this.forceUpdate()
+
   render: () ->
     logger.debug("RENDERING TeacherSetupExperience", this.props, this.state)
     instrumentsTaughtCheckboxes = []
     #instrumentsTaughtCheckboxes.push(`<input />`)
 
-    `<div className="TeacherSetupExperience TeacherSetupComponent">      
+    `<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}/>
+      </div>
 
-      <TeacherSetupNav handleNav={this.handleNav}/>
+      <div className="teacher-third-column">
+        <label className="sub-caption">EDUCATION:</label>
+        <TeacherExperienceEditableList onItemChanged={this.handleListChange} listItems={this.state.experience_teaching}/>
+      </div>
+
+      <div className="teacher-third-column">
+        <label className="sub-caption">AWARDS:</label>
+        <TeacherExperienceEditableList onItemChanged={this.handleListChange} listItems={this.state.experience_teaching}/>
+      </div>
+
+      <TeacherSetupNav handleNav={this.handleNav}> </TeacherSetupNav>
     </div>`
 
 

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

@@ -3,14 +3,14 @@ teacherActions = window.JK.Actions.Teacher
 
 @TeacherSetupMixin = {
   onAppInit: (app) ->
-    @app=app    
+    @app=app
     screenBindings = {
       'beforeShow': @beforeShow
     }
-    
+
     @app.bindScreen("teachers/setup/#{@screenName()}", screenBindings)
 
-  beforeShow: (data) ->    
+  beforeShow: (data) ->
     if data? && data.d?
       @teacherId = data.d
       teacherActions.load.trigger({teacher_id: @teacherId})
@@ -23,13 +23,13 @@ teacherActions = window.JK.Actions.Teacher
     # a default location:
     @postmark = null
     # params = this.getParams()
-    # @postmark = params.p    
+    # @postmark = params.p
 
   handleErrors: (changes) ->
-    $root = jQuery(this.getDOMNode())    
+    $root = jQuery(this.getDOMNode())
     $(".error-text", $root).remove()
     if changes.errors?
-      for k,v of 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")