seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

VRFS-4151 - checkboxes fixed on search screen

This commit is contained in:
Seth Call 2016-05-29 20:17:18 -05:00
parent d30b5326bc
commit 01a096d6c3
5 changed files with 73 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,7 @@ logger = context.JK.logger
for object in this.props.sourceObjects
nm = "check_#{object.id}"
checked = @isChecked(object.id)
object_options.push `<div className='checkItem'><input type='checkbox' key={object.id} name={nm} data-object-id={object.id} checked={checked}></input><label htmlFor={nm}>{object.description}</label></div>`
object_options.push `<div className='checkItem'><input type='checkbox' key={object.id} name={nm} data-object-id={object.id} checked={checked}></input><label htmlFor={nm}>{object.description}</label><br className="clearall"/></div>`
`<div className="CheckBoxList react-component">
<div className="checkbox-scroller left">

36
web/app/assets/javascripts/react-components/TeacherSearchOptionsScreen.js.jsx.coffee
View File

@ -5,11 +5,25 @@ LocationActions = @LocationActions
@TeacherSearchOptionsScreen = React.createClass({
mixins: [Reflux.listenTo(@AppStore, "onAppInit"), Reflux.listenTo(@UserStore, "onUserChanged"),
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}}
@ -71,6 +85,20 @@ LocationActions = @LocationActions
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 =
@ -114,15 +142,15 @@ LocationActions = @LocationActions
<h3>Student Levels Taught:</h3>
<div className="teaching-level beginner-level">
<input name="beginner-level" type="checkbox" data-purpose="teaches_beginner" onChange={this.levelChanged} checked={this.state.options.teaches_beginner}></input>
<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 name="intermediate-level" type="checkbox" data-purpose="teaches_intermediate" onChange={this.levelChanged} checked={this.state.options.teaches_intermediate}></input>
<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 name="advanced-level" type="checkbox" data-purpose="teaches_advanced" onChange={this.levelChanged} checked={this.state.options.teaches_advanced}></input>
<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>

2
web/app/assets/javascripts/react-components/TeacherSearchScreen.js.jsx.coffee
View File

@ -215,7 +215,7 @@ ProfileActions = @ProfileActions
summary = ''
if searchOptions.onlyMySchool
if searchOptions.onlyMySchool && @state.user?.school_id?
summary += "From My School Only"
instruments = searchOptions.instruments

20
web/app/assets/javascripts/react-components/mixins/ICheckMixin.js.coffee
View File

@ -40,14 +40,18 @@ teacherActions = window.JK.Actions.Teacher
enableICheck: (e) ->
if !@root?
return
checkBoxes = @root.find('input[type="checkbox"]')
if checkBoxes.length > 0
context.JK.checkbox(checkBoxes)
checkBoxes.on('ifChanged', (e) => @checkIfCanFire(e))
radioBoxes = @root.find('input[type="radio"]')
if radioBoxes.length > 0
context.JK.checkbox(radioBoxes)
radioBoxes.on('ifChanged', (e) => @checkIfCanFire(e))
for checkbox in @checkboxes
selector = checkbox.selector
checkBoxes = @root.find(selector + '[type="checkbox"]')
if checkBoxes.length > 0
context.JK.checkbox(checkBoxes)
checkBoxes.on('ifChanged', (e) => @checkIfCanFire(e))
radioBoxes = @root.find(selector + '[type="radio"]')
if radioBoxes.length > 0
context.JK.checkbox(radioBoxes)
radioBoxes.on('ifChanged', (e) => @checkIfCanFire(e))
true

27
web/app/assets/stylesheets/client/react-components/TeacherSearchOptions.css.scss
View File

@ -9,6 +9,29 @@
.checkbox-scroller {
height:100px;
margin-top:0;
.checkItem {
clear: both;
margin-bottom:4px;
label {
color: black;
display: inline;
float: left;
font-size: 1em;
}
.icheckbox_minimal {
color: black;
display: inline;
float: left;
font-size: 1em;
margin-right:5px;
}
input {
width: auto;
text-align: left;
float: left;
display: inline;
}
}
}
min-width:200px;
width:25%;
@ -72,6 +95,10 @@
}
.student-levels-taught {
.icheckbox_minimal {
top:3px;
margin-right:5px;
}
.teaching-level {
margin-bottom:10px;
}