134 lines
3.6 KiB
CoffeeScript
134 lines
3.6 KiB
CoffeeScript
context = window
|
|
@TestDrivePackageDialog = React.createClass({
|
|
|
|
mixins: [Reflux.listenTo(@AppStore, "onAppInit")]
|
|
teacher: null
|
|
|
|
beforeShow: (args) ->
|
|
# d1 should be a teacher ID (vs a user ID that happens to be a teacher)
|
|
logger.debug("TestDrivePackageDialog.beforeShow", args.d1)
|
|
@setState({target: args.d1, page_data: window.page_data})
|
|
|
|
|
|
afterHide: () ->
|
|
|
|
onAppInit: (@app) ->
|
|
dialogBindings = {
|
|
'beforeShow': @beforeShow,
|
|
'afterHide': @afterHide
|
|
};
|
|
|
|
@app.bindDialog('test-drive-package-dialog', dialogBindings);
|
|
|
|
getInitialState: () ->
|
|
{
|
|
target: null,
|
|
page_data: null
|
|
}
|
|
|
|
|
|
componentDidMount: () ->
|
|
@root = $(@getDOMNode())
|
|
@dialog = @root.closest('.dialog')
|
|
|
|
renderTeacher: (teacher) ->
|
|
photo_url = '/assets/shared/avatar_generic.png'
|
|
if teacher.photo_url?
|
|
photo_url = teacher.photo_url
|
|
|
|
`<div className="teacher-select">
|
|
<div className="avatar">
|
|
<img src={photo_url}/>
|
|
</div>
|
|
<div className="username">
|
|
{teacher.first_name}
|
|
<br/>
|
|
{teacher.last_name}
|
|
</div>
|
|
<div className="checkbox-wrapper">
|
|
<input type="checkbox" name="teacher-select" data-teacher-id={teacher.id}/>
|
|
</div>
|
|
</div>`
|
|
|
|
doCancel: (e) ->
|
|
e.preventDefault()
|
|
@app.layout.closeDialog('test-drive-package-dialog', true);
|
|
|
|
selectTeachers: (e) ->
|
|
e.preventDefault()
|
|
|
|
# validate
|
|
|
|
if @state.target == '2'
|
|
checked = @root.find('input[type="checkbox"]:checked')
|
|
|
|
if checked.length != 2
|
|
window.JK.Banner.showAlert('hold on there', 'Please select 2 teachers.')
|
|
return
|
|
|
|
if @state.target == '1'
|
|
checked = @root.find('input[type="checkbox"]:checked')
|
|
|
|
if checked.length != 1
|
|
window.JK.Banner.showAlert('hold on there', 'Please select 1 teacher.')
|
|
return
|
|
|
|
teachers = []
|
|
|
|
|
|
$.each(checked, (i, node) => (
|
|
$node = $(node)
|
|
teacherId = $node.attr('data-teacher-id')
|
|
for teacher in @state.page_data.package.teachers
|
|
if teacher.id == teacherId
|
|
teachers.push(teacher)
|
|
break
|
|
))
|
|
@dialog.data('result', {package_type: @state.target, teachers: teachers})
|
|
@app.layout.closeDialog('test-drive-package-dialog')
|
|
render: () ->
|
|
if @state.target == '2'
|
|
help =
|
|
`<p>
|
|
Check the boxes under the 2 instructors you want to select for your TestDrive package. Then click the Select
|
|
button below.
|
|
</p>`
|
|
else
|
|
help =
|
|
`<p>
|
|
Check the box under the instructor you want to select for your TestDrive package. Then click the Select button
|
|
below.
|
|
</p>`
|
|
|
|
teachers = []
|
|
|
|
if @state.page_data?.package?.teachers?
|
|
for teacher in @state.page_data.package.teachers
|
|
teachers.push(@renderTeacher(teacher))
|
|
|
|
teacherHolderClasses = {"teacher-holder" : true, "two": teachers.length == 2, "four": teachers.length == 4}
|
|
dialogInnerClasses = {"dialog-inner": true, "two": teachers.length == 2, "four": teachers.length == 4}
|
|
`<div>
|
|
<div className="content-head">
|
|
<img className="content-icon" src="/assets/content/icon_add.png" height={19} width={19}/>
|
|
|
|
<h1>select instructors</h1>
|
|
</div>
|
|
<div className={classNames(dialogInnerClasses)}>
|
|
|
|
{help}
|
|
|
|
<div className={classNames(teacherHolderClasses)}>
|
|
{teachers}
|
|
<br className="clearall"/>
|
|
</div>
|
|
|
|
|
|
<div className="actions">
|
|
<a onClick={this.doCancel} className="button-grey">CANCEL</a>
|
|
<a onClick={this.selectTeachers} className="button-orange select-teachers">SELECT</a>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
|
|
}) |