UNPKG

trc-client-core

Version:
114 lines (104 loc) 4.05 kB
import React from 'react'; import Reflux from 'reflux'; import StoreMixin from 'reflux-immutable/StoreMixin'; import SodataStore from 'trc-client-core/src/sodata/SodataStore'; import RegistrationStore from 'trc-client-core/src/course/RegistrationStore'; import RegistrationActions from 'trc-client-core/src/course/RegistrationActions'; import SodataActions from 'trc-client-core/src/sodata/SodataActions'; import Select from 'trc-client-core/src/components/Select'; import UserStore from 'trc-client-core/src/user/UserStore'; import Label from 'bd-stampy/components/Label'; import Loader from 'trc-client-core/src/components/Loader'; import SoItemSelect from 'trc-client-core/src/course/SoItemSelect'; var RegistrationSingle = React.createClass({ displayName: 'RegistrationSingle', mixins: [ require('bd-stampy/mixins/FormMixin'), Reflux.listenTo(RegistrationStore, 'onStoreChange'), Reflux.listenTo(SodataStore, 'onStoreChange'), StoreMixin ], propTypes: { participantId: React.PropTypes.string.isRequired, courseCode: React.PropTypes.string.isRequired }, getInitialState() { return {}; }, getStoreState() { return { soItem: SodataStore.get('soItem'), soData: RegistrationStore.get('soData') }; }, componentDidMount() { RegistrationActions.fetchRegistrationData(this.props.courseCode); var {courseCode, participantId, actionable} = this.props; SodataActions.fetchSoItem({courseCode, participantId, actionable}); }, onFormChange(e, details) { this.FormMixin_onFormChange(e, details, this.onChange); }, onChange(e) { if(this.props.onChange) { this.props.onChange(e, this.state.formData); } }, render() { if(!this.state.soData || !this.state.soItem) { return <Loader></Loader>; } if(!this.state.soData.size) { return <div className="InfoBox">There are currently no scheduled classes for this course.</div>; } if(UserStore.is('ROLE_MANAGER')) { return this.renderEnrol(); } return this.renderRequest(); }, renderEnrol() { return <div> <h3>Enrol</h3> {this.renderSessions()} </div>; }, renderSessions() { return <div> <Label>Choose a session</Label> <SoItemSelect soData={this.state.soData} onChange={this.onFormChange} value={this.state.formData.soId} currentEnrollment={this.props.currentEnrollment} /> </div>; }, renderRequest() { var managerOptions = this.state.soItem.get('managers').map(item => { return { value: item.get('participantId'), label: `${item.get('firstName')} ${item.get('lastName')}` }; }).toJS(); return ( <div> <h3>Request Training</h3> <p><small><em>By clicking Request Training, an email will be generated and sent to your Manager with the requested training details. It is your Manager&apos;s responsibility to approve this request. By clicking &apos;Request Training&apos;, you agree to <a href="/terms" className="link">Toyota Institute Australia&apos;s Terms and Conditions.</a></em></small></p> {this.renderSessions()} <Label>and select a manager</Label> <Select name="manager" placeholder="Managers" onChange={this.onFormChange} value={this.state.formData.manager} options={managerOptions} clearable={false} /> </div> ); }, renderTitle() { return (UserStore.is('ROLE_MANAGER')) ? 'Choose a Session' : 'Request Training Session'; } }); module.exports = RegistrationSingle;