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

The core of the TRC Client

var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');
var moment = require('moment');
var {Link} = require('react-router');

var StoreMixin = require('reflux-immutable/StoreMixin');
var DataTable = require('bd-stampy/components/DataTable');

var SodataActions = require('trc-client-core/src/sodata/SodataActions');
var Loader = require('trc-client-core/src/components/Loader');
var SodataStore = require('trc-client-core/src/sodata/SodataStore');    

var OverEnrolledView = React.createClass({
    displayName: 'OverEnrolledView',
    mixins: [
        Reflux.listenTo(SodataStore, 'onStoreChange'),
        StoreMixin
    ],
    componentDidMount() {
        SodataActions.fetchOverEnrolledSoItems();              
    },
    getStoreState() {
        return {
            soItems: SodataStore.get('overEnrollledSoItems')
        };
    },
    render() {
        return (
            <div>
                <h1>Over Enrolled Courses</h1>
                {this.renderTable()}
            </div>
        );
    },
    renderTable() {
        if(!this.state.soItems) {
            return <Loader></Loader>;
        }

        var sortByCount = (item) => (item.soNoParticipants - item.soMaximumEnrolment) * -1;

        var tableSchema = [{
            heading: 'Id',
            filter: 'soId',
            width: 80,
            render: (item) => <Link to={`/portal/over_enrolled_courses/${item.soId}`} className="link">{item.soId}</Link>
        }, {
            heading: 'Name', 
            filter: 'soItemName'
        }, {
            heading: 'Course Code',
            filter: 'soItemCode',
            render: (item) => item.soItemCode || ' - '
        }, {
            heading: 'Start Date',
            filter: 'soStartDate',
            render: (item) => moment(new Date(item.soStartDate || 0)).tz(item.soTimeZone).format('DD/MM/YYYY h:mma z')
        }, {
            heading: 'Size',
            filter: 'soNoParticipants',
            width: 1
        }, {
            heading: 'Max',
            filter: 'soMaximumEnrolment',
            width: 1
        }, {
            heading: 'Over',
            filter: sortByCount,
            render: (item) => item.soNoParticipants - item.soMaximumEnrolment,
            width: 1
        }];

        return <DataTable 
            schema={tableSchema} 
            data={_(this.state.soItems.toJS()).compact().sortByOrder('soStartDate').reverse().value()} 
            modifier="data" 
        />;
    }
});

module.exports = OverEnrolledView;