trc-client-core/src/learningPlan/EvaluationForm.jsx

The core of the TRC Client

var React = require('react');
var FormMixin = require('bd-stampy/mixins/FormMixin');
var Icon = require('trc-client-core/src/components/Icon');
var Loader = require('trc-client-core/src/components/Loader');
var CareerPathwayStore = require('./CareerPathwayStore');
var StarRatingInput = require('./StarRatingInput');
var Table = require('bd-stampy/components/Table');

var EvaluationForm = React.createClass({
    mixins: [
        FormMixin
     ],
    getInitialState: function(){
        return {
            data:null,
            result:null,
            exception:null
        };
    },
    componentDidMount: function(){
        this.fetchData();
    },
    fetchData : function() {
        CareerPathwayStore.getEvaluationData(this.props.location.query.token).then(
            (success) => {
                if (success.status == "passed") {
                    this.setState({data : success.data});
                } else {
                    console.log(success);
                }
            },
            (error) => {
                this.setState({exception : error.body.message});
                console.log(error);
            }
        );
    },
    onClick: function(e, details){
        this.FormMixin_onFormChange(e, details);
    },
    postForm: function(){

        CareerPathwayStore.post(this.props.location.query.token, this.state.formData).then(
            (data) => {
                console.log(data);
                this.setState({result : data});
                // window.location = '/portal/#body_and_paint_national_staff_list';
            },
            (error) => {
                console.log(error);
            }
        );

    },
    render: function() {
        if (this.state.data) {
            var department = this.state.data.participant.departmentCategory[0];
            if(department === "body_paint"){
                department = "Body & Paint";
            }
            return (
                <div>
                    <h1 className="t-capitalize hug row">Performance Evaluation <span className="t-muted">{this.state.data.courseName}</span> </h1>

                    <h2>{this.state.data.participant.firstName} {this.state.data.participant.lastName}</h2>
                    <form id="evaluation" method="post" modelAttribute="evaluation" data-js="evaluation">
                    <Table className="Table-evaluation">
                        {this.renderEvaluationItmes(this.state.data.evaluation)}
                    </Table>
                    {this.renderSubmit()}
                    </form>

                </div>
            );
        } else if (this.state.exception) {
            return this.renderExceptionMessage();
        } else if (this.state.result) {
            return this.renderPostSubmission();
        } else {
            return <Loader></Loader>;
        }
    },
    renderSubmit: function(){
        return (
            <div onClick={this.postForm} className="Button push-top2 l-inline" key="Create">Submit Evaluation</div>
        );
    },
    renderEvaluationItmes: function(e){
        var items = e.map((item, key) => {
            return (
                <tr key={key}>
                    <td className="w60 "><h3 className="push-left2">{item.criteria}</h3></td>
                    <td ><StarRatingInput department="body_paint" name={item.order} length="5" onClick={this.onClick}/></td>
                </tr>
            );
        });

        return <ul>{items}</ul>;
    },
    renderPostSubmission : function(){
        var icon = (this.state.result === 'success') ? 'tick' : 'cross';
        var iconClass = (this.state.result === 'success') ? 't-green t-center' : 't-red t-center';
        var statusValue = (this.state.result === 'success') ? 'Success' : 'Failed';
        var resultValue = (this.state.result === 'success') ? 'Passed' : 'Failed';

        return (
            <div className="t-center">
                <Icon className={iconClass} name={icon} size="massive"></Icon>
                <h1>{statusValue}</h1>
                <h2>The evaluation result was : {resultValue}</h2>
                <a className="Button row" href="/portal/#body_and_paint_national_staff_list">Back to Staff List</a>
            </div>
        );
    },
    renderExceptionMessage : function() {
        return (
            <div className="t-center">{this.state.exception}</div>
        );
    }
});

module.exports = EvaluationForm;