jam-cloud/web/app/assets/javascripts/react-components/TeacherSearchOptionsScreen.js.jsx.coffee

context = window
rest = context.JK.Rest()
TeacherSearchActions = @TeacherSearchActions
LocationActions = @LocationActions

@TeacherSearchOptionsScreen = React.createClass({

  mixins: [ICheckMixin, Reflux.listenTo(@AppStore, "onAppInit"), Reflux.listenTo(@UserStore, "onUserChanged"),
           Reflux.listenTo(@TeacherSearchStore, "onTeacherSearchChanged")]

  LIMIT: 20

  componentDidMount: () ->
    @checkboxes = [
      {selector: 'input.onlyMySchool', stateKey: 'onlyMySchool'},
      {selector: 'input.beginner-level', stateKey: 'beginner-level'},
      {selector: 'input.intermediate-level', stateKey: 'intermediate-level'},
      {selector: 'input.advanced-level', stateKey: 'advanced-level'}]

    @root = $(@getDOMNode())

    @iCheckify()

  componentDidUpdate: () ->
    @iCheckify()

  getInitialState: () ->
    {options: {onlyMySchool: true}}

  onAppInit: (@app) ->
    @app.bindScreen('jamclass/searchOptions', {beforeShow: @beforeShow, afterShow: @afterShow})

  beforeShow: (e) ->
    LocationActions.load()

  afterShow: (e) ->

  onUserChanged: (@user) ->
    @setState(user: @user?.user)

  onTeacherSearchChanged: (options) ->
    @setState({options: options})

  handleListChange: (listName, selectedObjects)->
    logger.debug("handleListChange:", listName, selectedObjects)
    options = @state.options
    options[listName] = selectedObjects
    @setState({options: options})

  handleLocationChange: (country, region) ->
    logger.debug("handleLocationChange #{country} #{region}")
    options = @state.options
    options['location'] = {country:country, region:region}
    @setState({options: options})

  onCancel: (e) ->
    e.preventDefault()
    window.history.go(-1)

  onSearch: (e) ->
    e.preventDefault()
    logger.debug("teacher search options", @state.options)
    TeacherSearchActions.search(@state.options)


  levelChanged: (e) ->
    purpose = $(e.target).attr('data-purpose')
    checked = $(e.target).is(":checked")
    logger.debug("levelChanged:", purpose, checked)
    options = @state.options
    options[purpose] = checked
    @setState({options: options})

  handleYearsTeaching: (e) ->
    yearsTeaching = $(e.target).val()

    options = @state.options
    options['years-teaching'] = yearsTeaching
    @setState({options: options})

  onlyMySchoolChange: (e) ->
    $target = $(e.target)
    checked = $target.is(':checked')
    options = @state.options
    options.onlyMySchool = checked
    @setState(options)

  checkboxChanged: (e) ->
    $target = $(e.target)

    if $target.is('.onlyMySchool')
      state = {}
      state['onlyMySchool'] = $target.is(':checked')
      @setState(state)
      @onlyMySchoolChange(e)
    else
      state = {}
      state[$target.attr('name')] = $target.is(':checked')
      @setState(state)
      @levelChanged(e)

  render: () ->
    if @state.user?.school_id?
      onlySchoolOption =
        `<div className="search-criteria school-options">
          <h3>School Options</h3>
          <input type="checkbox" name="onlyMySchool" className="onlyMySchool" checked={this.state.options.onlyMySchool} onChange={this.onlyMySchoolChange}/><label htmlFor="onlyMySchool">Only Show Teachers<br/>In My School</label>
        </div>`

    selectedAge = null
    yearsTeaching = []
    for yr in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 40, 45, 50]
      yearsTeaching.push(`<option key={yr} value={yr}>{yr}</option>`)
    `<div className="content-body-scroller">
      <div className="screen-content">
        <h2>search teachers</h2>

        <div className="search-criteria">
          <h3>Instruments Taught:</h3>
          <InstrumentCheckBoxList onItemChanged={this.handleListChange} selectedInstruments={this.state.options.instruments}/>
        </div>

        <div className="search-criteria">
          <h3>Music Subjects Taught:</h3>
          <SubjectCheckBoxList onItemChanged={this.handleListChange} selectedSubjects={this.state.options.subjects}/>
        </div>

        <div className="search-criteria">
          <h3>Genres Taught:</h3>
          <GenreCheckBoxList onItemChanged={this.handleListChange} selectedGenres={this.state.options.genres}/>
        </div>

        <div className="search-criteria">
          <h3>Languages Spoken:</h3>
          <LanguageCheckBoxList onItemChanged={this.handleListChange} selectedLanguages={this.state.options.languages}/>
        </div>

        <br className="clearall"/>

        <div className="search-criteria">
          <div className="student-levels-taught">
            <h3>Student Levels Taught:</h3>

            <div className="teaching-level beginner-level">
              <input className="teachlevel beginner-level" name="beginner-level" type="checkbox" data-purpose="teaches_beginner" onChange={this.levelChanged} checked={this.state.options.teaches_beginner}></input>
              <label htmlFor="beginner-level">Beginner</label>
            </div>
            <div className="teaching-level intermediate-level">
              <input className="teachlevel intermediate-level" name="intermediate-level" type="checkbox" data-purpose="teaches_intermediate" onChange={this.levelChanged} checked={this.state.options.teaches_intermediate}></input>
              <label htmlFor="intermediate-level">Intermediate</label>
            </div>
            <div className="teaching-level advanced-level">
              <input className="teachlevel advanced-level" name="advanced-level" type="checkbox" data-purpose="teaches_advanced" onChange={this.levelChanged} checked={this.state.options.teaches_advanced}></input>
              <label htmlFor="advanced-level">Advanced</label>
            </div>
          </div>
        </div>

        <div className="search-criteria">
          <h3>Student Ages Taught:</h3>
          <AgeRangeList selectedAge={selectedAge} objectName="ages-taught" onItemChanged={this.handleListChange} selectedAge={this.state.options['ages-taught']} />


          <h3 className="years-teaching-header">Years Teaching Experience:</h3>
          <select name="years-teaching" onChange={this.handleYearsTeaching} value={this.state.options['years-teaching']}>
            <option value=''>Any</option>
            {yearsTeaching}
          </select>
        </div>

        <div className="search-criteria">
          <SelectLocation onItemChanged={this.handleLocationChange}/>
        </div>
        {onlySchoolOption}
      </div>
      <div className="actions">
        <a className="button-grey" onClick={this.onCancel}>CANCEL</a>
        <a className="button-orange search-btn" onClick={this.onSearch}>SEARCH</a>
      </div>
    </div>`
})