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

The core of the TRC Client

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

import Input from 'bd-stampy/components/InputElement';
import Label from 'bd-stampy/components/Label';
import Loader from 'trc-client-core/src/components/Loader';
import Tab from 'bd-stampy/components/Tab';
import TabContent from 'bd-stampy/components/TabContent';
import Table from 'bd-stampy/components/Table';
import TabView from 'bd-stampy/components/TabView';
import ToggleGroup from 'trc-client-core/src/components/ToggleGroup';

import PortalStore from 'trc-client-core/src/portal/PortalStore';

var regions = [
    {label: 'NRO', value: 'NRO'},
    {label: 'ERO', value: 'ERO'},
    {label: 'CRO', value: 'CRO'},
    {label: 'SRO', value: 'SRO'},
    {label: 'WA', value: 'WA'}
];

var NationalStaffList = React.createClass({
    getInitialState: function () {
        return {
            data: null,
            search: undefined,
            filter: []
        };
    },
    componentDidMount: function () {
        this.fetchData();
    },
    fetchData: function () {
        PortalStore.getBodyAndPaintNationalUserList().then(data => this.setState({data: data}));
    },    
    onToggleRegion: function (e, selected) {
        var current = _.compact(_.map(selected.value, function (a, b){ 
            return (a) ? b : null;
        }));

        if (current) {
            this.setState({filter: current});
        }
    },
    applyFilter: function (data) {
        if (this.state.filter.length >= 1) {
            return _.filter(data, function(item) {
                return item.regionCode === this.state.filter[0];
            }, this);
        }
        return data;
    },
    applyEvaluationFilter: function (data) {
        if (this.state.filter.length >= 1) {
            return _.filter(data, function(item) {
                return item.participantData.regionCode === this.state.filter[0];
            }, this);
        }
        return data;
    },
    onSearch: function(e){
        this.setState({search: e.target.value});
    },
    render: function() {
        return (
            <div>
                <h1>Body & Paint <span className="t-muted">National Staff List</span></h1>
                <div className="row hide-print">
                    <div className="w30 l-right">
                        <Label className="hug-top">Filter By Text</Label>
                        <Input name="search" onChange={this.onSearch} placeholder="Search"></Input>
                    </div>
                    <Label className="hug-top">Filter By Region</Label>
                    <ToggleGroup name="Regions" toggles={regions} value={this.state.filter} onChange={this.onToggleRegion}/>
                </div>
                {this.renderData()}
            </div>
        );
    },
    renderData: function () {  
        if (this.state.data) {

            var eval_count = 0;
            if(this.state.data.evaluations){
              eval_count = this.applyEvaluationFilter(this.state.data.evaluations).length;
            }
            
            return (
                <TabView transition={false}>
                    <Tab>Staff List</Tab>
                    <TabContent>{this.renderStaffList(this.state.data)}</TabContent>
                    <Tab>Evaluations ({eval_count})</Tab>
                    <TabContent>{this.renderEvaluationList(this.state.data)}</TabContent>
                </TabView>
            );

        } else {
            return <Loader></Loader>;            
        }
    },
    renderStaffList: function(){        
        var dd = this.state.data;
        var rows = _.map(this.applyFilter(dd.staffs), function(item) {
            return {
                _id: item.participantId,
                Staff: {
                    value : <a className="link" href={`/#/portal/${item.participantId}`}>{item.firstName + ' ' + item.lastName}</a>,
                    sort : item.firstName + item.lastName
                },
                "Job title" : item.jobPositionDesc,
                "Dealer Name" : item.dealerName,
                "Dealer Code" : item.dealerCode, 
                Region : item.regionCode,
                "Further Curriculum": (
                        <div>
                            <a className={"Button Button-small Button-body w100"} href={`/#/portal/learning-plan/body_cert?participantId=${item.participantId}&dealerCode=${item.dealerCode}`} data-icon="&#xE050;" title="Toyota Body Certification">Body Certification</a>
                            <a className={"Button Button-small Button-paint w100"} href={`/#/portal/learning-plan/paint_cert?participantId=${item.participantId}&dealerCode=${item.dealerCode}`} data-icon="&#xE050;" title="Toyota Paint Certification">Paint Certification</a>
                        </div>
                    )
            };
        }, this);

        return this.renderTable(rows, "No Data to display");
    },
    renderEvaluationList: function(){
        var rows = _.map(this.applyEvaluationFilter(this.state.data.evaluations), function(item){
            return {
                _id:item.token,
                Staff: {
                    value : <a className="link" href={`/portal/#/view/${item.participantData.participantId}`}>{item.participantData.firstName + ' ' + item.participantData.lastName}</a>,
                    sort: item.participantData.firstName + item.participantData.lastName 
                },
                "Job title" : item.participantData.jobPositionDesc,
                "Dealer Name" : item.participantData.dealerName,
                "Dealer Code" : item.participantData.dealerCode, 
                Region : item.participantData.regionCode,
                Course: {
                    value: item.course.courseCode,
                    sort: item.course.courseCode
                },
                "":  <a className="Button" href={"/#/portal/evaluation?token=" + item.token}>Launch</a>
            };
        }, this);
        return this.renderTable(rows, "No Evaluation to Display");
    },
    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 = NationalStaffList;