trc-client-core/src/admin/OverEnrolledSoView.jsx

The core of the TRC Client

import React from 'react';
import Reflux from 'reflux';
import moment from 'moment';
import {State} from 'react-router';

import StoreMixin from 'reflux-immutable/StoreMixin';
import DataTable from 'bd-stampy/components/DataTable';

import SodataActions from 'trc-client-core/src/sodata/SodataActions';
import Loader from 'trc-client-core/src/components/Loader';
import SodataStore from 'trc-client-core/src/sodata/SodataStore';    

var OverEnrolledView = React.createClass({
    displayName: 'OverEnrolledView',
    mixins: [
        Reflux.listenTo(SodataStore, 'onStoreChange'),
        StoreMixin,
        State
    ],
    componentDidMount() {
        SodataActions.fetchOverEnrolledSoItem(this.props.params.soId);
    },
    getStoreState() {
        return {
            soData: SodataStore.get('soData'),
            overEnrollledParticipants: SodataStore.get('overEnrollledParticipants')
        };
    },
    render() {
        if(!this.state.soData) {
            return <Loader></Loader>;
        }
        var soData = this.state.soData;
        var className = "w15 t-muted";

        return (
            <div>
                <h1>{soData.get('soId')} <span className="t-muted">{soData.get('soItemName')}</span></h1>
                <table className="Table Table-tight">
                    <tr>
                        <td className={className}>Course Page: </td>
                        <td><a href={`/#/course/${soData.get('soItemCode')}`} className="link">{soData.get('soItemName')}</a></td>
                    </tr>
                    <tr>
                        <td className={className}>Course Code: </td>
                        <td>{soData.get('soItemCode')}</td>
                    </tr>
                    <tr>
                        <td className={className}>Current Class Size: </td>
                        <td>{this.state.overEnrollledParticipants.size} / {soData.get('soMaximumEnrolment')}</td>
                    </tr>
                    <tr>
                        <td className={className}>Facility: </td>
                        <td>{soData.get('facilityDesc')}</td>
                    </tr>
                    <tr>
                        <td className={className}>Start Date: </td>
                        <td>{moment(new Date(soData.get('soStartDate'))).tz(soData.get('soTimeZone')).format('DD/MM/YYYY h:mma z')}</td>
                    </tr>
                </table>
                {this.renderTable()}
            </div>
        );
    },
    renderTable() {
        if(!this.state.overEnrollledParticipants) {
            return <Loader></Loader>;
        }

        var tableSchema = [{
            heading: '#',
            filter: 'key',
            render: this.isOver.bind(null, (item) => item.key + 1)
        }, {
            heading: 'Name',
            filter: 'participantName',
            render: this.isOver.bind(null, (item) => item.participantName)
        }, {
            heading: 'Dealer',
            filter: 'dealerName',
            render: this.isOver.bind(null, (item) => item.dealerName)
        }, {
            heading: 'Source',
            filter: 'source',
            render: this.isOver.bind(null, (item) => item.source)
        }, {
            heading: 'Enrolled',
            filter: 'enrolDate',
            render: this.isOver.bind(null, (item) => {
                var timeString = (item.source === 'LMS') ? 'DD/MM/YYYY' : 'DD/MM/YYYY h:mma z';
                return moment(new Date(item.enrolDate)).format(timeString);
            })
        }];

        return <DataTable 
            schema={tableSchema} 
            data={this.state.overEnrollledParticipants.toJS().reverse()} 
            modifier="data" 
        />;
    },
    isOver(render, item) {
        return (item.key + 1 > this.state.soData.get('soMaximumEnrolment')) ? <span className="t-red">{render(item)}</span> : render(item);
    }
});

module.exports = OverEnrolledView;