trc-client-core
Version:
The core of the TRC Client
114 lines (104 loc) • 4.05 kB
JSX
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's responsibility to approve this request. By clicking 'Request Training', you agree to <a href="/terms" className="link">Toyota Institute Australia'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;