trc-client-core/src/requiredRoles/RequiredRolesQAReport.jsx

The core of the TRC Client

import React from 'react';
import Reflux from 'reflux';
import moment from 'moment';
import {Link} from 'react-router';
import Icon from 'trc-client-core/src/components/Icon';
import DataTable from 'bd-stampy/components/DataTable';
import {Tab, TabView, TabContent} from 'bd-stampy/components/Tabs';
import Loader from 'trc-client-core/src/components/Loader';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import RequiredRoleQAReportInfo from '../Modal/ModalRequiredRoleQAReportInfo';
import RequiredRolesActions from 'trc-client-core/src/requiredRoles/RequiredRolesActions';
import RequiredRolesStore from 'trc-client-core/src/requiredRoles/RequiredRolesStore';

var RequiredRolesQAReport = React.createClass({
    displayName: 'RequiredRolesQAReport',
    mixins: [
        require('bd-stampy/mixins/FormMixin'),
        Reflux.listenTo(RequiredRolesStore, 'onStoreUpdate')
    ],
    getStoreState() {
        return {
            reportDetails: RequiredRolesStore.getQAReport()
        };
    },
    getInitialState: function () {
        return this.getStoreState();
    },
    componentDidMount: function () { 
        this.getData();
    },
    getData: function () { 
        RequiredRolesActions.fetchQAReport(this.state.formData);
    },
    onStoreUpdate() {
        this.setState(this.getStoreState());
    },
    showInfo: function () {
        ModalManager.showModal(RequiredRoleQAReportInfo);
    },
    render: function () {
        if(!this.state.reportDetails){
            return <Loader></Loader>;
        }

        return (
            <div>
                <h1>QA Report <span className="t-muted">Required Roles</span><Icon name="circleinfo" className="push-left" onClick={this.showInfo}/></h1>

                <TabView  transition={false} >
                    <Tab>Unapproved</Tab>
                    <TabContent>
                        {this.renderReportTableUnapproved()}
                    </TabContent>
                    <Tab>Incorrect Job Description</Tab>
                    <TabContent>
                        {this.renderReportTableIncorrect()}
                    </TabContent>
                </TabView> 
            </div>
        );
    },
    renderReportTableUnapproved(){ 
        if(!this.state.reportDetails.unapprovedParticipants){
            return <Loader></Loader>;
        }

        var tableSchema = [{
            heading: 'Name',
            filter: (item) => item.firstName,
            width: '10%',
            render: (item) => <Link to={`/portal/${item.participantId}`} className="readmore">{item.firstName + " " + item.lastName}</Link>
        }, {
            heading: 'Job Description',
            filter: (item) => item.jobPositionDesc,
            width: '10%',
            render: (item) => item.jobPositionDesc
        }, {
            heading: 'Department',
            filter: (item) => item.department,
            render: (item) => item.department
        }, {
            heading: 'Region',
            filter: (item) => item.regionCode,
            render: (item) => item.regionCode
        }, {
            heading: 'Dealership',
            filter: (item) => item.dealerName,
            render: (item) => item.dealerName
        }, {
            heading: 'Nominated By Date',
            filter: (item) => item.id.date,
            render: (item) => moment(new Date(item.id.date || 0)).format('DD/MM/YYYY')
        }];

        return <DataTable
            schema={tableSchema}
            data={this.state.reportDetails.unapprovedParticipants}
            modifier="data" 
            empty={<div className="Table_empty">No Data to display</div>}
        />;
        
    },
    renderReportTableIncorrect(){ 
        if(!this.state.reportDetails.incorrectJobDescriprion){
            return <Loader></Loader>;
        }

        var tableSchema = [{
            heading: 'Name',
            filter: (item) => item.firstName,
            width: '15%',
            render: (item) => <Link to={`/portal/${item.participantId}`} className="readmore">{item.firstName + " " + item.lastName}</Link>
        }, {
            heading: 'Job Description',
            filter: (item) => item.jobPositionDesc,
            width: '25%',
            render: (item) => item.jobPositionDesc
        }, {
            heading: 'Department',
            filter: (item) => item.department,
            render: (item) => item.department
        }, {
            heading: 'Region',
            filter: (item) => item.regionCode,
            render: (item) => item.regionCode
        }, {
            heading: 'Dealership',
            filter: (item) => item.dealerName,
            render: (item) => item.dealerName
        }];
        
        return <DataTable
                schema={tableSchema}
                data={this.state.reportDetails.incorrectJobDescriprion}
                modifier="data" 
                empty={<div className="Table_empty">No Data to display</div>}
        />;
    }

});

module.exports = RequiredRolesQAReport;