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

The core of the TRC Client

import React from 'react';
import _ from 'lodash';
import Reflux from 'reflux';
import {State, Navigation} from 'react-router';

// Stampy
import {Tab, TabView, TabContent} from 'bd-stampy/components/Tabs';
import Loader from 'trc-client-core/src/components/Loader';
import FormMixin from 'bd-stampy/mixins/FormMixin';
import Input from 'bd-stampy/components/InputElement';
import DayPicker from 'trc-client-core/src/components/DayPicker';
import InputRow from 'bd-stampy/components/InputRow';

// TRC
import MarkdownTextarea from 'trc-client-core/src/components/MarkdownTextarea';
import JobPositionSelect from 'trc-client-core/src/components/JobPositionSelect';
import FormActionsBar from 'trc-client-core/src/components/FormActionsBar';
import RequiredRoleView from 'trc-client-core/src/requiredRoles/RequiredRoleView';
import RequiredRolesActions from 'trc-client-core/src/requiredRoles/RequiredRolesActions';
import RequiredRolesStore from 'trc-client-core/src/requiredRoles/RequiredRolesStore';

function ifEmpty(message) {
    return function (val) {
        if (_.isEmpty(val)) {
            return message;
        }
    };
}

var RequiredRoleEdit = React.createClass({
    displayName: 'RequiredRoleEdit',
    mixins: [
        FormMixin,
        Navigation,
        State,
        Reflux.listenTo(RequiredRolesStore, 'onStoreUpdate')
    ],
    validators: {
        name:                   ifEmpty('You must supply a Required Role Name'),
        description:            ifEmpty('You must supply a Description'),
        eligibleJobPositionIds: ifEmpty('You must select a Job Position')
    },
    onStoreUpdate() {
        if(!this.state.newRole){
            this.setState(this.getStoreState());
            this.FormMixin_updateState(this.state.role);

        } else {
            this.setState(this.getDefaultState());

        }
    },
    getDefaultState() {
        return {
            jobPositions: RequiredRolesStore.getJobPositions(),
            role: null
        };
    },
    getStoreState() {
        return {
            jobPositions: RequiredRolesStore.getJobPositions(),
            role: RequiredRolesStore.getRole()
        };
    },
    getInitialState: function () {
        var state = this.getDefaultState();
        state.newRole = (this.props.location.pathname.indexOf('/new') !== -1);
        return state;
    },
    componentDidMount: function () {
        RequiredRolesActions.fetchJobPositions();
        if(!this.state.newRole){
            RequiredRolesActions.fetchRequiredRole(this.props.params.roleId);
        }
    },
    onSubmit: function(){
        if (this.FormMixin_isValid()) {
            this.setState({dirty: false});
            RequiredRolesActions[(this.state.newRole) ? 'createRequiredRole' : 'saveRequiredRole'](this.state.formData);
         }
    },
    onFormChange(e, details) {
        this.FormMixin_onFormChange(e, details);
        this.setState({dirty: true});
    },
    render: function() {
        return (
            <div>
                {this.renderFormActions()}
                <h1>{this.state.newRole ? 'Create New Role' : 'Edit Role'}</h1>
                <TabView transition={false}>
                    <Tab>Edit</Tab>
                    <TabContent>{this.renderForm(this.state.formData)}</TabContent>
                    <Tab>Preview</Tab>
                    <TabContent>
                        <div className="Widget">
                            <RequiredRoleView role={this.state.formData} dirty={this.state.dirty} new={this.state.newRole}/>
                        </div>
                    </TabContent>
                </TabView>
                {this.renderFormActions()}
            </div>
        );
    },

    renderFormActions() {
        return (
            <div>
                <FormActionsBar className="right" onSave={this.onSubmit} onCancel="/portal/required-roles" dirty={this.state.dirty}/>
            </div>
        );
    },
    renderForm: function(formData){
        if(!Object.keys(formData).length){
            return <Loader/>;
        }
        var formErrors = this.state.formErrors || {};
        return (
            <div>
                <form id="create_role" method="post" modelAttribute="role" data-js="role">
                    <InputRow label="Role Name">
                        <Input error={formErrors.name} name="name" onChange={this.onFormChange} value={formData.name} />
                    </InputRow>

                    <InputRow label="Description">
                        <MarkdownTextarea error={formErrors.description} name="description" onChange={this.onFormChange} value={formData.description}/>
                    </InputRow>

                    <InputRow label="Renomination Date">
                        <DayPicker
                            name="renominationDate"
                            outputFormat="timestamp"
                            onChange={(data) => this.onFormChange(null, data)}
                            value={formData.renominationDate}
                            className="w100"/>

                    </InputRow>

                    <InputRow label="Eligible Job Positions">
                        <JobPositionSelect
                            name="eligibleJobPositionIds"
                            error={formErrors.eligibleJobPositionIds}
                            jobPositions={this.state.jobPositions}
                            onChange={this.onFormChange}
                            value={formData.eligibleJobPositionIds}
                        />
                    </InputRow>

                </form>
            </div>
        );
    },
    renderJobPositions(){
        return _.map(this.props.tags, function(tag, key){
            return <option value={tag.name} key={key}>{tag.name}</option>;
        });
    }
});

module.exports = RequiredRoleEdit;