trc-client-core/src/qanda/QandaEditQuestionForm.jsx

The core of the TRC Client

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import _ from 'lodash';

import IconSelect from 'trc-client-core/src/components/IconSelect';
import MarkdownTextarea from 'trc-client-core/src/components/MarkdownTextarea';
import Input from 'bd-stampy/components/InputForm';
import Label from 'bd-stampy/components/Label';
import Select from 'trc-client-core/src/components/Select';

import QandaEditQuestionFormActions from 'trc-client-core/src/qanda/QandaEditQuestionFormActions';
import QandaEditQuestionFormStore from 'trc-client-core/src/qanda/QandaEditQuestionFormStore';

var QandaEditQuestionForm = React.createClass({
    displayName: 'QandaEditQuestionForm',
    mixins: [
        PureRenderMixin
    ],
    contextTypes: {
        history: React.PropTypes.object
    },
    onUpdateForm(e, details) {
        QandaEditQuestionFormActions.update(e, details);
        if (this.props.onChange) {
            this.props.onChange(e, details);
        }
    },
    render() {
        var {question, errors} = this.props;
        var icons = QandaEditQuestionFormStore.get('icons').toJS();
        var statusOptions = [
            {label: 'Draft', value: 'Draft'},
            {label: 'Publish', value: 'Publish'}
        ];

        var props = {
            errors: errors,
            modifier: 'inverse',
            onChange: this.onUpdateForm
        };

        if(!question.size && this.props.edit) {
            return null;
        }

        return (
            <div className="Widget">
                <div className="row">
                    <button data-js="fullscreen" type="button" className="Button Button-fullscreen l-right"></button>
                    <h2 className="hug">{this.props.edit ? 'Edit' : 'New'} Question</h2>
                </div>
                <input type="hidden" defaultValue={question.get('id')} name="id" />

                <Label><strong>Question</strong> ({"The problem in it's simplest terms"})</Label>
                <Input {...props} name="questionTitle" defaultValue={question.get('questionTitle')} />

                <Label><strong>Question Subtitle</strong><br/>(A space to provide more context to the question)</Label>
                <Input {...props} name="questionDescription" defaultValue={question.get('questionDescription')}/>

                <Label><strong>Icon</strong></Label>
                <IconSelect {...props} name="icon" defaultValue={question.get('icon')} placeholder="Choose an icon" error={errors.icon} icons={icons} />

                <Label><strong>Tags</strong></Label>
                {this.renderTags()}
                            
                <Label><strong>Answer</strong></Label>
                <MarkdownTextarea {...props} name="answer" defaultValue={question.get('answer')} error={errors.answer} />
                
                <Label><strong>Imagery</strong></Label>
                <em>To upload image(s) to the Q &amp; A section of the TRC, please email them to: <a className="link" href="mailto:trc@blueflag.com.au">trc@blueflag.com.au</a> with the Question in the Subject line of the email.</em>

                <hr/>

                <Label><strong>Status</strong> (Questions will not appear outside of the admin area until they are published.)</Label>
                <Select {...props} name="status" value={question.get('status')} options={statusOptions}/>

                <Label><strong>Question Asked By </strong>(A list of emails addresses to be notified when the question is published)</Label>
                <Input {...props} name="askedBy" defaultValue={question.get('askedBy')}/>

                <Label><strong>Answer Written By</strong> (Only for internal use. To record who is answering the question.)</Label>
                <Input {...props} name="answeredBy" defaultValue={question.get('answeredBy')} />              
            </div>
        );
    },
    renderTags() {
        var {tags, question, errors} = this.props;
        var chosenTags = [];
        if(question.get('tags')) {
            chosenTags = question.get('tags').toJS();
        }

        var tagOptions = tags.map((tag, key) => <option value={tag.get('name')} key={key}>{_.startCase(tag.get('name'))}</option>).toJS();
        return (
            <Select multi name="tags" onChange={this.onUpdateForm} error={errors.tags} value={chosenTags} placeholder="Choose Tags" >
                {tagOptions}
            </Select>   
        );
    }
});

module.exports = QandaEditQuestionForm;