jam-cloud/web/app/assets/javascripts/react-components/TeacherSetupIntroduction.js...

84 lines
3.3 KiB
CoffeeScript

context = window
teacherActions = window.JK.Actions.Teacher
logger = context.JK.logger
rest = window.JK.Rest()
@TeacherSetupIntroduction = React.createClass({
mixins: [
@TeacherSetupMixin,
Reflux.listenTo(@AppStore,"onAppInit"),
Reflux.listenTo(TeacherStore, "onTeacherStateChanged")
]
myBeforeShow: () ->
setTimeout((() =>
$screen = @root.closest('.screen')
$header = $screen.find('h2.edit-teacher-header')
context.JK.HelpBubbleHelper.teacherProfile($header, $screen);
), 2000)
screenName: () ->
"introduction"
getInitialState: () ->
{}
onTeacherStateChanged: (changes) ->
$root = jQuery(this.getDOMNode())
logger.debug("onTeacherIntroStateChanged", changes, changes.errors?, changes.errors)
unless this.handleErrors(changes)
teacher = changes.teacher
this.setState({
biography: teacher.biography,
introductory_video: teacher.introductory_video,
years_teaching: teacher.years_teaching,
years_playing: teacher.years_playing,
validate_introduction: true
})
handleTextChange: (e) ->
this.setState({"#{e.target.name}": e.target.value})
navDestination: (instructions) ->
navTo=null
if instructions?
if instructions.direction=="cancel" || instructions.direction=="back"
navTo = @teacherSetupSource()
else if instructions.direction=="next"
navTo = @teacherSetupDestination('basics')
navTo
handleNav: (e) ->
navTo = this.navDestination(e)
teacherActions.change.trigger(this.state, {navTo: navTo, instructions:e})
render: () ->
`<div className="TeacherSetupIntroduction TeacherSetupComponent" >
<div className="teacher-big-column left">
<div className="teacher-field" name="biography">
<label htmlFor="teacher-biography">Teacher Bio:</label>
<textarea className="teacher-biography" name="biography" ref="biography" rows="12" value={this.state.biography} onChange={this.handleTextChange} required/>
</div>
</div>
<div className="teacher-small-column left">
<div className="teacher-field" name="introductory_video">
<label htmlFor="teacher-introductory-video">Teacher Introductory Video:</label>
<input className="teacher-introductory-video" name="introductory_video" ref="introductory_video" type="url" maxLength="1024" value={this.state.introductory_video} onChange={this.handleTextChange} required/>
<em className="enter-url">(enter YouTube URL)</em>
</div>
<div className="teacher-field" name="years_teaching">
<label htmlFor="years-teaching-experience">Years Teaching Experience:</label>
<input className="years-teaching-experience" name="years_teaching" ref ="years_teaching_experience" type="number" min="0" max="99" value={this.state.years_teaching} onChange={this.handleTextChange} />
</div>
<div className="teacher-field" name="years_playing">
<label htmlFor="teacher-playing-experience">Years Playing Experience:</label>
<input className="years-playing-experience" name="years_playing" ref="years_playing_experience" type="number" min="0" max="99" value={this.state.years_playing} onChange={this.handleTextChange} />
</div>
</div>
<TeacherSetupNav hideBack={true} handleNav={this.handleNav}/>
</div>`
})