119 lines
4.2 KiB
CoffeeScript
119 lines
4.2 KiB
CoffeeScript
context = window
|
|
teacherActions = window.JK.Actions.Teacher
|
|
logger = context.JK.logger
|
|
rest = window.JK.Rest()
|
|
|
|
@TeacherSetupBasics = React.createClass({
|
|
mixins: [
|
|
@TeacherSetupMixin,
|
|
Reflux.listenTo(@AppStore,"onAppInit"),
|
|
Reflux.listenTo(TeacherStore, "onTeacherStateChanged")
|
|
]
|
|
|
|
getInitialState: () ->
|
|
{}
|
|
|
|
screenName: () ->
|
|
"basics"
|
|
|
|
onTeacherStateChanged: (changes) ->
|
|
$root = jQuery(this.getDOMNode())
|
|
unless this.handleErrors(changes)
|
|
teacher = changes.teacher
|
|
this.setState(teacher)
|
|
|
|
captureFormState: (changes) ->
|
|
$root = jQuery(this.getDOMNode())
|
|
this.setState({
|
|
|
|
});
|
|
|
|
handleListChange: (listName, selectedObjects)->
|
|
logger.debug("handleListChange:", listName, selectedObjects)
|
|
this.setState({
|
|
"#{listName}": selectedObjects
|
|
});
|
|
|
|
handleFieldChange: (fieldName, value)->
|
|
logger.debug("handleFieldChange:", fieldName, value)
|
|
this.setState({
|
|
"#{fieldName}": value
|
|
});
|
|
|
|
navDestination: (instructions) ->
|
|
navTo=null
|
|
if instructions?
|
|
if instructions.direction=="cancel"
|
|
navTo = @teacherSetupSource()
|
|
else if instructions.direction=="back"
|
|
navTo = @teacherSetupDestination("introduction")
|
|
else if instructions.direction=="next"
|
|
navTo = @teacherSetupDestination("experience")
|
|
|
|
navTo
|
|
|
|
handleNav: (e) ->
|
|
navTo = this.navDestination(e)
|
|
this.state.validate_basics = true
|
|
teacherActions.change.trigger(this.state, {navTo: navTo, instructions:e})
|
|
|
|
render: () ->
|
|
# Render the following:
|
|
# Instruments
|
|
# Subjects
|
|
# Genres
|
|
# Languages
|
|
# All lists will take a list of selected keys,
|
|
# and will otherwise self-render the available
|
|
|
|
`<div className="TeacherSetupBasics TeacherSetupComponent">
|
|
<div className="teacher-quarter-column">
|
|
<div className="teacher-field" name="instruments">
|
|
<h3>Instruments Taught:</h3>
|
|
<InstrumentCheckBoxList onItemChanged={this.handleListChange} selectedInstruments={this.state.instruments}/>
|
|
</div>
|
|
</div>
|
|
<div className="teacher-quarter-column">
|
|
<div className="teacher-field" name="subjects">
|
|
<h3>Music Subjects Taught:</h3>
|
|
<SubjectCheckBoxList onItemChanged={this.handleListChange} selectedSubjects={this.state.subjects}/>
|
|
</div>
|
|
</div>
|
|
<div className="teacher-quarter-column">
|
|
<div className="teacher-field" name="genres">
|
|
<h3>Genres Taught:</h3>
|
|
<GenreCheckBoxList onItemChanged={this.handleListChange} selectedGenres={this.state.genres}/>
|
|
</div>
|
|
</div>
|
|
<div className="teacher-quarter-column">
|
|
<div className="teacher-field" name="languages">
|
|
<h3>Languages Spoken:</h3>
|
|
<LanguageCheckBoxList onItemChanged={this.handleListChange} selectedLanguages={this.state.languages}/>
|
|
</div>
|
|
</div>
|
|
<br className="clearall"/>
|
|
<div className="teacher-half-column">
|
|
<div className="teacher-field" name="levels_taught">
|
|
<h3>Student Levels Taught:</h3>
|
|
<div className="student-levels">
|
|
<TeacherStudentLevel onChange={this.handleFieldChange} student="teaches_beginner" display="Beginner" level={this.state.teaches_beginner} />
|
|
<TeacherStudentLevel onChange={this.handleFieldChange} student="teaches_intermediate" display="Intermediate" level={this.state.teaches_intermediate} />
|
|
<TeacherStudentLevel onChange={this.handleFieldChange} student="teaches_advanced" display="Advanced" level={this.state.teaches_advanced} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="teacher-half-column">
|
|
<div className="teacher-field" name="ages_taught">
|
|
<h3>Student Ages Taught:</h3>
|
|
<div className="student-ages">
|
|
<AgeRangeList onItemChanged={this.handleFieldChange} objectName="teaches_age_lower" selectedAge={this.state.teaches_age_lower} />
|
|
<span className="age-to-age">to</span>
|
|
<AgeRangeList onItemChanged={this.handleFieldChange} objectName="teaches_age_upper" selectedAge={this.state.teaches_age_upper} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<TeacherSetupNav handleNav={this.handleNav}></TeacherSetupNav>
|
|
</div>`
|
|
|
|
|
|
}) |