trc-client-core/src/bodyAndPaint/CertifiedStaffList.jsx

The core of the TRC Client

import React from 'react';
import moment from 'moment';
import _ from 'lodash';

import UrlStore from 'bd-stampy/utils/UrlStore';
import Table from 'bd-stampy/components/Table';
import Input from 'bd-stampy/components/InputElement';
import Label from 'bd-stampy/components/Label';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import Button from 'bd-stampy/components/Button';
import FormMixin from 'bd-stampy/mixins/FormMixin';

import YearSelect from 'trc-client-core/src/components/YearSelect';
import MonthSelect from 'trc-client-core/src/components/MonthSelect';
import PortalStore from 'trc-client-core/src/portal/PortalStore';
import URL from 'trc-client-core/src/constants/url';

var CertifiedStaffList = React.createClass({
    mixins:[
        FormMixin
    ],
    FormMixin_initialFormData: function (nextState) {
        nextState.formData = _.defaults(UrlStore.getQueryParams(), {
            month : 1,
            year : moment().year().toString()
        });
        return  nextState;
    },
    getInitialState: function(){
        return {
            data: null,
            search: undefined,
            searching: false
        };
    },
    onClick: function () {
        this.searching(true);
        PortalStore.getBodyAndPaintCertifiedStaff(this.state.formData).then(
            data => { 
                this.searching(false);
                this.setState({data : data});
            },
            () => {
                this.searching(false);
            }
        );      
    },
    onChange: function (e, details) {
        this.FormMixin_onFormChange(e, details);      
    },
    onSearch: function(e){
        this.setState({search: e.target.value});
    },
    searching(bool){
        this.setState({searching : bool});
    },
    render: function() {
        var formData = this.state.formData || {};
        return (
            <div>
                <h1>Body & Paint <span className="t-muted">Certified Staff</span></h1>
                <div className="row2 hide-print">
                    <div className="w30 l-right">
                        <Label className="Label hug-top">Filter By Text</Label>
                        <Input name="search" onChange={this.onSearch} placeholder="Search"></Input>
                    </div>
                    <div className="w50">
                        <Label className="Label hug-top">Select Month and Year</Label>
                        <Grid modifier="tight">
                            <Col width={3}>
                                <MonthSelect value={formData.month} name="month" onChange={this.onChange}/>
                            </Col >
                            <Col width={4}>
                                <YearSelect value={formData.year} name="year" to={2013} onChange={this.onChange}/>
                            </Col>
                            <Col width={4}>
                                <Button onClick={this.onClick} disabled={this.state.searching}>{(this.state.searching) ? 'Loading' : 'Submit'}</Button>
                            </Col>
                        </Grid>
                    </div>
                </div>
                {this.renderCertifiedStaff()}
            </div>
        );
    },
    renderCertifiedStaff: function(){

        if(this.state.data){
            var dd = this.state.data;
            var rows = _.map(dd, function(item) {
                return {
                    Staff: {
                        value : <a className="link" href={URL.get('portal_dashboard', item.participantData.participantId)}>{item.participantData.firstName + ' ' + item.participantData.lastName}</a>,
                        sort : item.firstName + item.lastName
                    },
                    "Job title" : item.participantData.jobPositionDesc,
                    "Dealer Name" : item.participantData.dealerName,
                    "Dealer Code" : item.participantData.dealerCode, 
                    Region : item.participantData.regionCode,
                    Code : item.certification.itemCode,             
                    Certification : item.certification.itemName,
                    "Completion Date" : moment(new Date(item.achieveTime)).format("DD/MM/YYYY")
                };
            }, this);

            return this.renderTable(rows, "No Data to display");
        }else{
            // return <Loader />;
            return <em className="InfoBox">No Data to display</em>;
        }

    },
    renderTable: function(rows, emptyText) {
        var empty = <em className="InfoBox">{emptyText}</em>;
        return (
            <Table type="data" modifier="data" search={this.state.search} empty={empty}>{rows}</Table>
        ); 
    }

});

module.exports = CertifiedStaffList;