trc-client-core/src/course/RequestTrainingView.jsx

The core of the TRC Client

import React from 'react';
import Reflux from 'reflux';
import moment from 'moment';

import CourseStore from 'trc-client-core/src/course/CourseStore';
import ParticipantActions from 'trc-client-core/src/participant/ParticipantActions';
import ParticipantStore from 'trc-client-core/src/participant/ParticipantStore';
import RegistrationActions from 'trc-client-core/src/course/RegistrationActions';
import RegistrationStore from 'trc-client-core/src/course/RegistrationStore';
import Select from 'trc-client-core/src/components/Select';
import Loader from 'trc-client-core/src/components/Loader';

import Label from 'bd-stampy/components/Label';
import Button from 'bd-stampy/components/Button';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';


var RequestTrainingView = React.createClass({
    displayName: 'RequestTrainingView',
    mixins: [
        require('reflux-immutable/StoreMixin'),
        Reflux.listenTo(CourseStore, 'onStoreChange'),
        Reflux.listenTo(RegistrationStore, 'onStoreChange'),
        Reflux.listenTo(ParticipantStore, 'onStoreChange')
    ],
    getStoreState() {
        return {
            course: CourseStore.get('course'),
            soData: RegistrationStore.get('soData'),
            managers: ParticipantStore.get('managers')
        };
    },
    componentDidMount() {
        RegistrationActions.fetchRegistrationData(this.props.courseId);
        ParticipantActions.fetchManagers();
    },
    onFormChange(ee, details) {
        var newState = {};
        newState[details.key] = details.value;
        this.setState(newState);
    },
    sendRequest() {
        RegistrationActions.requestTraining(this.state.manager, this.state.soId);
    },
    render() {
        if(!this.state.soData) {
            return <Loader></Loader>;
        }

        if(this.state.soData.size === 0) {
            return <div className="InfoBox">There are currently no scheduled classes for this course.</div>;
        }

        return (
            <Grid>
                <Col width={7}>
                    <h2>Request Training</h2>
                    <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-and-conditions" className="link">Toyota Institute Australia&apos;s Terms and Conditions.</a></em></small></p>
                    <Label>Choose a session</Label>
                    <Select
                        name="soId"
                        placeholder="Sessions"
                        onChange={this.onFormChange}
                        value={this.state.soId}
                        options={this.state.soData.toList().map(this.renderSoOption).toJS()}
                        clearable={false}
                    />
                    <Label>and select a manager</Label>
                    <Select
                        name="manager"
                        placeholder="Managers"
                        onChange={this.onFormChange}
                        value={this.state.manager}
                        options={this.state.managers.map(this.renderManagerOption).toJS()}
                        clearable={false}
                    />
                    <Button onClick={this.sendRequest} disabled={!this.state.soId || !this.state.manager}>Request Training</Button>
                </Col>
                <Col width={3}/>
            </Grid>
        );
    },
    renderSoOption(item) {
        var soStartDate = moment(new Date(item.get('soStartDate'))).tz(item.get('soTimeZone')).format("DD MMM YYYY, ddd hh:mm a z");
        var remainingSpots = item.get('soMaximumEnrolment') - item.get('soNoParticipants');
        var spotsLeftText = (remainingSpots > 0) ? `${remainingSpots} spots left` : 'FULL';

        return {
            value: item.get('soId').toString(),
            label: `${soStartDate} - ${item.get('facility')} - ${spotsLeftText}`,
            disabled: remainingSpots === 0
        };
    },
    renderManagerOption(item) {
        return {
            value: item.get('participantId'),
            label: `${item.get('firstName')} ${item.get('lastName')}`
        };
    }
});

module.exports = RequestTrainingView;