trc-client-core/src/technical/TechnicalCertifiedStaff.jsx

The core of the TRC Client

import React from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import MonthSelect from 'trc-client-core/src/components/MonthSelect';
import Input from 'bd-stampy/components/InputElement';
import YearSelect from 'trc-client-core/src/components/YearSelect';
import Time from 'trc-client-core/src/components/Time';
import TablePaginated from 'trc-client-core/src/components/TablePaginated';
import moment from 'moment';

import {requestLearningEventCertification} from 'trc-client-core/src/participant/LearningEventActions';

var TechnicalCertifiedStaff = React.createClass({
    displayName: 'TechnicalCertifiedStaff',
    getData(props) {
        props.requestCertifications('TECH', {
            month: moment().month() + 1,
            year: moment().year(),
            ...props.location.query
        });
    },
    getInitialState() {
        return {
            search: ''  
        };
    },
    componentWillMount() {
        var {location} = this.props;
        var defaultQuery = {
            month: location.query.month || String(moment().month() + 1),
            year: location.query.year || String(moment().year())
        }
        this.props.history.replaceState(null, location.pathname, defaultQuery);
        this.getData(this.props);
    },
    componentWillReceiveProps(nextProps) {
        if(this.props.location.query !== nextProps.location.query) {
            this.getData(nextProps);
        }  
    },
    getSchema() {
        return [{
            heading: 'Participant',
            filter: (item) => item.firstName + item.lastName,
            render: (item) => {
                var {participantId, firstName, lastName} = item;
                return <Link className="link" to={`/portal/${participantId}`}>{firstName} {lastName}</Link>
            }
        }, {
            heading: 'Dealership',
            filter: 'dealerName'
        }, {
            heading: 'Region',
            filter: 'regionCode'
        }, {
            heading: 'Certification',
            filter: 'itemName',
            render: ii => ii.itemName.replace('Certification', ''),
        }, {
            heading: 'Code',
            filter: 'itemCode'
        }, {
            heading: 'Completion Date',
            filter: (item) => item.achieveTime,
            render: (item) => <Time value={item.achieveTime} type="date" />
        }];
    },
    onSearch(ee, details) {
        this.setState({
            search: details.value
        });
    },
    render() {
        var {year, month} = this.props.location.query;
        return (
            <div>
                <h1>Certified Staff</h1>
                <div className="hide-print">
                    <p>Here you will find a list of all recently certified staff. The list will display the current month&apos;s data by default, if you wish to search for a specific month sort the data using the drop-down boxes provided. If you wish to further filter the data, you can search by keyword to find specific staff, dealerships or regions.</p>
                    <p>In order to make the list user-friendly, you can print the page, or export the data as an excel-friendly .CSV file, or a .TXT file ready to be inserted into the LMS. </p>

                    <Grid modifier="tight">
                        <Col width="2">
                            <h3 className="hug">Select month:</h3>
                        </Col>
                        <Col width="2">
                            <MonthSelect reverse value={month}/>
                        </Col>
                        <Col width="2"> 
                            <YearSelect placeholder="Select a year" value={year}/>
                        </Col>
                        <Col width="3">
                            <h3 className="hug">Filter by keyword:</h3>
                        </Col>
                        <Col width="3">
                            <Input name="search" onChange={this.onSearch}/>
                        </Col>
                    </Grid>

                    <p className="right">
                        <a href={`/technical/certified_staff/export/txt?year=${year}&month=${month}`} className="Button" title="Download as Text">TXT</a>
                        <a href={`/technical/certified_staff/export/xls?year=${year}&month=${month}`} className="Button" title="Download as Excel">XLS</a>
                        <a className="Button Icon Icon-small" data-icon="&#xE045;" onClick={window.print}></a>
                    </p>
                </div>
                
                <TablePaginated 
                    data={this.props.certification.toJS()}
                    search={this.state.search}
                    schema={this.getSchema()}
                />
            </div>
        );
    }
});

export default connect(
    (state) => {
        return {
            certification: state.learningEvent.get('certification')
        }
    },
    {
        requestCertifications: requestLearningEventCertification
    }
)(TechnicalCertifiedStaff);