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

The core of the TRC Client

import React from 'react';
import {Link, History} from 'react-router';
import _ from 'lodash';
import moment from 'moment';
import Reflux from 'reflux';

import Loader from 'trc-client-core/src/components/Loader';
import Table from 'bd-stampy/components/Table';
import Button from 'bd-stampy/components/Button';

import RequiredRolesActions from 'trc-client-core/src/requiredRoles/RequiredRolesActions';
import RequiredRolesStore from 'trc-client-core/src/requiredRoles/RequiredRolesStore';
import Markdown from 'trc-client-core/src/components/Markdown';


var RequiredRolesAdmin = React.createClass({
    mixins: [
        History,
        Reflux.listenTo(RequiredRolesStore, 'onStoreUpdate')
    ],
    getStoreState() {
        return {
            roles: RequiredRolesStore.getRoles()
        };
    },
    getInitialState: function () {
        return this.getStoreState();
    },    
    componentDidMount: function () {
        RequiredRolesActions.fetchAllRequiredRoles();
    },
    onStoreUpdate() {
        this.setState(this.getStoreState());
    },
    onClickNew: function(){
        this.history.pushState(null, '/portal/required-roles/new');
    },
    render: function() {
        return (
            <div>
                <Button modifier="edit" className="right margin-top" onClick={this.onClickNew}>Create A New Role</Button>
                <h1>Required Roles</h1>
                {this.renderData()}
            </div>
        );
    },
    renderData: function(){
        if(!this.state.roles){
            return <Loader></Loader>;
        }

        var rows = _(this.state.roles)
            .filter(dd => dd.id !== null)
            .map(function(item, key){
                return {
                    _id: key, 
                    Role: { 
                        width: 20,
                        value: <Link to={`/portal/required-roles/${item.id}`} className="link">{item.name}</Link>,
                        sort: item.name 
                    },
                    Description: { 
                        width: 45,
                        value: <Markdown html={item.description.split('\n')[0] + '...'}/>
                    },
                    "Renomination Date": moment(new Date(item.renominationDate || 0)).format('YYYY-MM-DD'),
                    " ": {
                        width: 15,
                        value: <Link to={`/portal/required-roles/${item.id}/edit`} className="Button Button-small Button-edit w100" >Edit</Link>
                    }
                };
            })
            .value();

        return this.renderTable(rows, "No Data 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 = RequiredRolesAdmin;