VRFS-3359 : Teacher Profile Instrument Selector List

* Instrument Selector List Component
* Necessary backend api tweaks so only necessary instrument information
is returned (array of ids only)
* Refactor styles and add common checkbox scroller styles.

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

@@ -1,20 +1,49 @@
 context = window
+rest = window.JK.Rest()
 logger = context.JK.logger
 
 @InstrumentSelectorList = React.createClass({
+  instruments: []
+  componentDidUnmount: () ->
+    @instruments = []
+    @root.off("change", ".checkItem.checkItemInstrument input[type=checkbox]")
 
   componentDidMount: () ->
-    logger.debug("InstrumentSelectorList INIT", this.state, this.props, this.ref)
+    @root = jQuery(this.getDOMNode())
+    @root.off("change", ".checkItem.checkItemInstrument input[type=checkbox]").on("change", ".checkItem.checkItemInstrument input[type=checkbox]", @onItemChanged)
 
-  onItemChecked: (e) ->
+    rest.getInstruments().done (instruments) =>
+      @instruments = instruments
+
+  onItemChanged: (e) ->
     e.preventDefault()
-    logger.debug("onItemChecked!!!!", this.state, this.props)    
+    this.props.onInstrumentsChanged("instruments", @selectedItems())
+
+
+  selectedItems: ->
+    selected=[]
+    @root = jQuery(this.getDOMNode())
+    $(".checkItem.checkItemInstrument input[type=checkbox]:checked", @root).each ->
+      selected.push $(this).data("instrument-id")
+    selected
 
   render: () ->
-    logger.debug("RENDER InstrumentSelectorList: this.props", this.state, this.ref, this.props.handleNav)
+    instrument_options = []
+
+    for instrument in @instruments
+      nm = "check_#{instrument.id}"
+
+      checkedStr = if @isChecked(instrument.id) then "checked" else ""
+      instrument_options.push `<div className='checkItem checkItemInstrument'><input type='checkbox' name={nm} data-instrument-id={instrument.id} defaultChecked={checkedStr}></input><label htmlFor={nm}>{instrument.description}</label></div>`
+
     `<div className="InstrumentSelectorList react-component">
         <div className="checkbox-scroller left">
-          <input type="checkbox" name="example"></input><label htmlFor="example">Example</label>
+          {instrument_options}
         </div>
     </div>`
+
+  isChecked: (id) ->
+    this.props.selectedItems? && id in this.props.selectedItems
+    #!!(_.find this.props.selectedItems, (item) -> item.id is id)
+
 })

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

@@ -17,26 +17,31 @@ rest = window.JK.Rest()
     "basics"
 
   onTeacherStateChanged: (changes) ->
-    $root = jQuery(this.getDOMNode())
-    logger.debug("onTeacherBasicsStateChanged", changes, changes.errors?, changes.errors)
+    $root = jQuery(this.getDOMNode())    
     unless this.handleErrors(changes)
-      teacher = changes.teacher
-      logger.debug("@teacher", teacher)
+      teacher = changes.teacher      
       this.setState({
-        # validate_basics: true
+        #validate_basics: true,
+        instruments: teacher.instruments
       })
 
   captureFormState: (changes) ->
     $root = jQuery(this.getDOMNode())
     this.setState({
 
+    });    
+
+  handleListChange: (listName, selectedItems)->    
+      "#{listName}": selectedItems
+    })
+    this.setState({
+      "#{listName}": selectedItems
     });
-    logger.debug("capturedFormState", this.state, changes)
+
 
   navDestination: (instructions) ->
     navTo=null
-    if instructions?
-      logger.debug("handling instructions", instructions)
+    if instructions?      
       if instructions.direction=="cancel"
         navTo = @teacherSetupSource()
       else if instructions.direction=="back"
@@ -46,13 +51,11 @@ rest = window.JK.Rest()
 
     navTo
 
-  handleNav: (e) ->
-    logger.debug("handleNav #{this.screenName()}: ", this.state, this, e)
+  handleNav: (e) ->    
     navTo = this.navDestination(e)
     teacherActions.change.trigger(this.state, {navTo: navTo})
 
-  render: () ->
-    logger.debug("RENDERING TeacherSetupBasics", this.props, this.state)
+  render: () ->    
     instrumentsTaughtCheckboxes = []
     #instrumentsTaughtCheckboxes.push(`<input />`)
 
@@ -65,27 +68,27 @@ rest = window.JK.Rest()
     # and will otherwise self-render the available
     `<div className="TeacherSetupBasics TeacherSetupComponent">
       <div className="teacher-quarter-column left">
-        <div className="teacher-field" name="instruments_taught">
+        <div className="teacher-field" name="instruments">
           <strong>Instruments Taught</strong>
           
-            <InstrumentSelectorList value={this.state.instruments_taught}/>
+            <InstrumentSelectorList onInstrumentsChanged={this.handleListChange} selectedItems={this.state.instruments}/>
           
         </div>
       </div>
       <div className="teacher-quarter-column left">
-        <div className="teacher-field" name="instruments_taught">
+        <div className="teacher-field" name="subjects">
           <strong>Music Subjects Taught</strong>
           
         </div>
       </div>
       <div className="teacher-quarter-column left">
-        <div className="teacher-field" name="instruments_taught">
+        <div className="teacher-field" name="genres">
           <strong>Genres Taught</strong>
           
         </div>
       </div>
       <div className="teacher-quarter-column left">
-        <div className="teacher-field" name="instruments_taught">
+        <div className="teacher-field" name="languages">
           <strong>Languages Spoken</strong>
           
         </div>

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

@@ -3,17 +3,14 @@ teacherActions = window.JK.Actions.Teacher
 
 @TeacherSetupMixin = {
   onAppInit: (app) ->
-    @app=app
-    logger.debug("TeacherSetupIntroduction onAppInit", @app, document.referrer)
+    @app=app    
     screenBindings = {
       'beforeShow': @beforeShow
     }
-
-    logger.debug("Binding to: teachers/setup/#{@screenName()}")
+    
     @app.bindScreen("teachers/setup/#{@screenName()}", screenBindings)
 
-  beforeShow: (data) ->
-    logger.debug("TeacherSetupIntroduction beforeShow", data, data.d, window.location.search, window.location, document, document.referrer)
+  beforeShow: (data) ->    
     if data? && data.d?
       @teacherId = data.d
       teacherActions.load.trigger({teacher_id: @teacherId})
@@ -26,17 +23,13 @@ teacherActions = window.JK.Actions.Teacher
     # a default location:
     @postmark = null
     # params = this.getParams()
-    # @postmark = params.p
-    # logger.debug("Postmark: ", @postmark)
-
+    # @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
-        logger.debug("error", k, v)
+      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")

web/app/assets/stylesheets/client/client.css

@@ -15,7 +15,6 @@
  *= require jquery.bt
  *= require easydropdown
  *= require easydropdown_jk
- *= require ./react_components
  *= require ./jamkazam
  *= require ./content
  *= require ./paginator

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

@@ -13,18 +13,20 @@
     margin-bottom:10px;
     margin-top:10px;
     background-color: #c5c5c5;
-    label {
+    .checkItem {
       clear: both;
-      color: black;
-      display: inline;
-      float: left;      
-    }
-    input {
-      width: auto;
-      clear: both;
-      text-align: left;
-      float: left;
-      display: inline;
+      label {
+        color: black;
+        display: inline;
+        float: left;      
+        font-size: 1em;
+      }
+      input {
+        width: auto;
+        text-align: left;
+        float: left;
+        display: inline;
+      }
     }
   }
 }

web/app/views/api_teachers/detail.rabl

@@ -32,19 +32,19 @@ attributes  :id,
             :errors
 
 
-child :instruments => :instruments do
-  attributes :id, :description
+node :instruments do 
+  @teacher.instruments.collect{|o|o.id}
 end
 
-child :subjects => :subjects do
-  attributes :id, :description
+node :subjects do 
+  @teacher.subjects.collect{|o|o.id}
 end
 
-child :genres => :genres do
-  attributes :id, :description
+node :genres do 
+  @teacher.genres.collect{|o|o.id}
 end
 
-child :languages => :languages do
-  attributes :id, :description
+node :languages do 
+  @teacher.languages.collect{|o|o.id}
 end