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

103 lines
2.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())
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
context.JK.Banner.showNotice('hold on there', 'Please select 2 teachers.')
return
if @state.target == '1'
checked = @root.find('input[type="checkbox"]:checked')
if checked.length != 1
context.JK.Banner.showNotice('hold on there', 'Please select a teacher.')
return
teachers = []
console.log("STATE TIME", @state)
if @state.page_data?.package?.teachers?
for teacher in @state.page_data.package.teachers
teachers.push(@teacher(teacher.name, teacher.photo_url, teacher.id))
$.each(checked, (i, node) => (
$node = $(node)
teachers.push($node.data('teacher'))
))
@root.data('result', { package_type: @state.target, teachers: teachers })
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 = []
`<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="dialog-inner">
{help}
{teachers}
<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>`
})