trc-client-core/src/admin/AdminLearningPlanListView.jsx

The core of the TRC Client

import React, { Component, PropTypes } from 'react';
import {Link} from 'react-router';
import { connect } from 'react-redux';
import {OrderedMap} from 'immutable';

// components
import Page from 'trc-client-core/src/components/Page';
import Loader from 'trc-client-core/src/components/Loader';
import { learningPlanRequestList } from 'trc-client-core/src/learningPlan/LearningPlanActions.js';
import ErrorMessage from 'trc-client-core/src/components/ErrorMessage';
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 DataTable from 'bd-stampy/components/DataTable';

import {
    LEARNING_PLAN_LIST_FETCH,
    LEARNING_PLAN_LIST_ERROR

} from 'trc-client-core/src/constants/ActionTypes';


//
// AdminLearningPlanListView class
//

class AdminLearningPlanListView extends Component {

	//
	// lifecycle methods
	//

	componentDidMount() {
		if(!this.props.listReceived) { // bad! this check should be in the action at the very least
			this.props.dispatch(learningPlanRequestList());
		}
	}

	//
	// actions
	//

	refresh() {
		this.props.dispatch(learningPlanRequestList());
	}

	//
	// render
	//

	render() {
		return (
			<Page title="Learning Plan Editor">
				<div>
					<h1>Learning Plan Editor</h1>
					<p>
						<Link to="/admin/learning-plans/new" className="Button Button-edit">Create new</Link>&nbsp;{this.renderRefreshButton()}
					</p>
					<div>{this.renderPlans()}</div>
				</div>
			</Page>
		);
	}

	renderPlans() {

		const { error } = this.props;

		if(error) {
			return <ErrorMessage code={500} message={error.message} />;
		}

		if(!this.props.listReceived) {
			return (
				<div>
					<Loader />
				</div>
			);
		}

		var learningPlans = this.props.learningPlans.toArray().map(ii => ii.toJS());

		var tableSchema = [{
            heading: 'Learning plan',
            filter: 'displayName'
        }, {
            heading: 'Learning plan ID',
            filter: 'careerPlanId'
        }, {
            heading: 'Pathway type',
            filter: 'pathwayType'
        }, {
            heading: 'Brand',
            filter: 'brand'
        }, {
            heading: 'Visible',
            filter: 'visible',
            render: (item) => <div>{item.visible ? "Yes" : ""}</div>
        }, {
        	heading: 'Actions',
        	render: (item) => (
        		<div>
	        		<Link to={`/admin/learning-plans/${item.careerPlanId}/edit`} activeClassName="is-active" className="Button Button-edit Button-small w100">Edit</Link>
	        		<Link to={`/admin/learning-plans/${item.careerPlanId}/copy`} activeClassName="is-active" className="Button Button-grey Button-small w100">Copy</Link>
	        	</div>
	        )
        }];

        return <DataTable 
            schema={tableSchema} 
            data={learningPlans} 
            modifier="data" 
        />;
	}

	renderRefreshButton() {
		const { fetching } = this.props;

		if(fetching) {
			return <Button disabled={true} modifier="grey">Refreshing list...</Button>;
		}
		return <Button onClick={this.refresh.bind(this)} modifier="grey">Refresh list</Button>;
	}

}

AdminLearningPlanListView.propTypes = {
    learningPlans: PropTypes.object,
    listReceived: PropTypes.bool,
    fetching: PropTypes.bool,
    error: PropTypes.object
};


export default connect(
	(state, props) => ({
		learningPlans: 	state.learningPlan.get("collection"),
		listReceived: 	state.learningPlan.get("listReceived"),
		fetching: 		state.async.get( LEARNING_PLAN_LIST_FETCH ),
		error: 			state.async.get( LEARNING_PLAN_LIST_ERROR )
	})
)( AdminLearningPlanListView );