application/components/assignment/assignment-item.js

import React from 'react';
import _ from 'lodash';
 
import {connect} from 'react-redux';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';
import {List, ListItem} from 'material-ui/List'
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField';
import FontIcon from 'material-ui/FontIcon';
import DatePicker from 'material-ui/DatePicker';
import TimePicker from 'material-ui/TimePicker';
import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
import Subheader from 'material-ui/Subheader';
 
import {browserHistory, Link} from 'react-router';
import Config from './../../config';
 
import Immutable from 'immutable';
import moment from 'moment';
 
import CurrentUser from './../../current-user';
import {sluggify} from './../../util/strings';
 
import {timeToFormat, htmlDecode} from './../../util/strings';
 
import LoadingIndicator from './../common/loading-indicator';
import UserSearchBox from './../common/user-search-box';
import SimpleEditor from './../common/simple-editor';
 
import BaseView from './../base-view';
import DeleteButton from './../common/delete-button';
import ContentSearchModal from './../common/content-search-modal';
 
import {Row, Col} from './../flexbox';
 
import {rawToHtml} from '../../util/rawToHtml';
 
import {ContentRow} from './../content/content-table';
 
import AssignmentDiscussion from './assignment-discussion';
 
import {
    workflowsMaybeFetch,
    workflowsFilterAssignmentOnly,
    workflowsFilterPrintOnly
} from './../../redux/actions/workflow-actions';
 
import {
    issuesFetch,
    issuesMaybeFetch,
    issuesFilterOpen
} from './../../redux/actions/issue-actions';
 
import {
    snackbarShowMessage,
    snackbarClose
} from './../../redux/actions/snackbar-actions';
 
import {
    alertShowMessage
} from './../../redux/actions/alert-actions';
 
import {
    globalHistoryPush,
    globalHistoryPop
} from './../../redux/actions/global-history-actions';
 
import {
    assignmentsMaybeFetchCache,
    assignmentsFetchOne,
    assignmentsCheckIn,
    assignmentsCheckOut,
    assignmentsRemove,
    assignmentsUpdate,
    assignmentsCreate,
    assignmentsClearLock
} from './../../redux/actions/assignment-actions';
 
import {
    usersMaybeFetch,
    usersFetchOne,
    usersFetch,
    usersRemove,
    userSetSelected,
    userUpdate,
    userCreate
} from './../../redux/actions/user-actions';
 
import {
    applicationIsDirty
} from './../../redux/actions/application-actions';
 
import LockButtons from './../lock-buttons';
 
class AssignmentItem extends BaseView {
 
    constructor(props) {
        super(props);
 
        this.getUuid = this.getUuid.bind(this);
        this.isNew = this.isNew.bind(this);
        this.isLocked = this.isLocked.bind(this);
        this.isUserEditable = this.isUserEditable.bind(this);
 
        this.handleFormChange = this.handleFormChange.bind(this);
        this.handleEditorChange = this.handleEditorChange.bind(this);
 
        this.handleCheckout = this.handleCheckout.bind(this);
        this.handleCheckin = this.handleCheckin.bind(this);
        this.handleSaveCheckIn = this.handleSaveCheckIn.bind(this);
        this.handleSave = this.handleSave.bind(this);
 
        this.freezeAssignment = this.freezeAssignment.bind(this);
        this.thawAssignment = this.thawAssignment.bind(this);
 
        this.state = {
            contentIsOpen: false,
            dirty: false,
            didDelete: false,
            edited: {
                users: [],
                children: []
            },
            actionStartDate: null,
            actionStartTime: null,
            actionEndDate: null,
            actionEndTime: null
        }
    }
 
    getUuid() {
        if (this.props.uuid) {
            return this.props.uuid;
        }
 
        if (this.props.params && this.props.params.id) {
            return this.props.params.id;
        }
 
        return false;
    }
 
    isNew() {
        if (!this.getUuid() || this.getUuid() === 'new') {
            return true;
        }
 
        return false;
    }
 
    isLocked() {
        if (this.isNew()) {
            return false;
        }
 
        if (this.state.edited.lock) {
            return true;
        }
 
        return false;
    }
 
    isUserEditable() {
        if (this.isNew()) {
            return true;
        }
 
        if (!this.state.edited.lock) {
            return false;
        }
 
        if (this.state.edited.lock.user_id === CurrentUser.getId()) {
            return true;
        }
 
        return false;
    }
 
    getRouter() {
        return this.props.router;
    }
 
    componentWillMount() {
        const {dispatch} = this.props;
 
        dispatch(workflowsMaybeFetch())
            .then(() => dispatch(workflowsFilterAssignmentOnly()))
            .then(() => dispatch(workflowsFilterPrintOnly()))
            .then(() => dispatch(issuesFetch()))
            .then(() => dispatch(issuesFilterOpen()))
            .then(() => dispatch(usersMaybeFetch()));
 
        if (!this.isNew()) {
            dispatch(assignmentsFetchOne(this.getUuid()))
                .then(() => {
                    let assignment = this.props.assignments.items.find((item) => item.get('uuid') == this.getUuid());
 
                    let dirty = false;
 
                    // pause here for a second and see if we have a modified version in the global history state
                    const savedState = this.props.globalHistory.items.find((item) => item.get('uuid') == this.getUuid());
 
                    if (savedState && savedState.size && savedState.get('isDirty')) {
                        // we have a freeze dried state. reconstitute that
                        // then set the dirty state to 'true'
                        assignment = this.thawAssignment(savedState.get('cachedObject'));
                        dirty = true;
                    }
 
                    this.setState({'edited': assignment.toJS(), 'dirty': dirty});
                })
                .then(() => {
                    if (this.state.edited.action_start_time) {
                        this.setState({
                            'actionStartDate': moment.utc(this.state.edited.action_start_time).local().toDate(),
                            'actionStartTime': moment.utc(this.state.edited.action_start_time).local().toDate(),
                            'actionEndDate': moment.utc(this.state.edited.action_end_time).local().toDate(),
                            'actionEndTime': moment.utc(this.state.edited.action_end_time).local().toDate(),
                        })
                    }
                });
        } else {
            this.setState({
                'edited': {
                    'children': [],
                    'users': []
                }
            });
        }
 
        this.setState({'publishIsOpen': false});
    }
 
    componentDidMount() {
        this.getRouter().setRouteLeaveHook(this.props.route, this.routerWillLeave.bind(this));
 
        if (this.refs.slugTextField && !this.refs.slugTextField.input.value) {
            setTimeout(() => this.refs.slugTextField.focus(), 0);
        }
    }
 
    routerWillLeave(nextLocation) {
        if (!this.isNew() && !this.state.didDelete) {
            const {dispatch} = this.props;
            dispatch(globalHistoryPush({
                'label': this.state.edited.title ? this.state.edited.title : this.state.edited.slug,
                'type': 'assignment',
                'contentType': 'assignment',
                'url': '/ceo/assignment/' + this.state.edited.uuid,
                'uuid': this.state.edited.uuid,
                'isDirty': this.state.dirty,
                'cachedObject': (this.state.dirty ? this.freezeAssignment(this.state.edited) : {})
            }));
        }
 
        if (this.isNew() && this.isUserEditable() && this.state.dirty && this.state.dirty === true) {
            return 'You have not saved this assignment! Any unsaved changes will be lost once you click OK. Click cancel and then save to preserve your work. Are you still sure you want to leave this item?';
        }
    }
 
    freezeAssignment(assignment) {
        let toFreeze = assignment;
 
        let rawContent = this.state.editorContent ? this.state.editorContent : toFreeze.content;
        toFreeze.content = rawContent;
 
        return toFreeze;
    }
 
    thawAssignment(assignment) {
        let toThaw = assignment;
 
        this.state.editorContent = toThaw.get('content') ? toThaw.get('content') : '';
 
        return toThaw;
    }
 
    // callbacks to handle the user selection
    onSelectUser(user) {
        let assignment = this.state.edited;
        const existing = _.find(assignment.users, {'uuid': user.get('uuid')});
        if (!existing) {
            assignment.users.push(user.toJS());
            this.setState({'edited': assignment, dirty: true});
            this.props.dispatch(applicationIsDirty(true));
        }
    }
 
    onRemoveUser(user) {
        let assignment = this.state.edited;
        assignment.users = assignment.users.filter((item, i) => {
            return user.uuid != item.uuid;
        });
 
        this.setState({'edited': assignment, dirty: true});
        this.props.dispatch(applicationIsDirty(true));
    }
 
    dueDateChange(empty, timestamp) {
        let assignment = this.state.edited;
 
        assignment.due_at = moment(timestamp).utc().format('YYYY-MM-DD HH:mm:ss');
 
        this.setState({'edited': assignment, dirty: true});
        this.props.dispatch(applicationIsDirty(true));
    }
 
    actionDateChange(context, empty, date) {
        if (context == 'start') {
            this.setState({actionStartDate: date});
            this.setState({actionEndDate: date});
        }
    }
 
    actionTimeChange(context, empty, time) {
        if (context == 'start') {
            this.setState({actionStartTime: time});
        } else if (context == 'end') {
            this.setState({actionEndTime: time});
        }
 
    }
 
    // state management
    handleSave(andCheckin = false) {
        const {dispatch} = this.props;
 
        // all of the start and end times for assignment actions
        let actionStartDate = null;
        let actionStartTime = null;
        let actionEndDate = null;
        let actionEndTime = null;
        if (this.state.actionStartDate) {
            actionStartDate = new moment(this.state.actionStartDate).utc();
        }
        if (this.state.actionStartTime) {
            actionStartTime = new moment(this.state.actionStartTime).utc();
        }
        if (this.state.actionEndDate) {
            actionEndDate = new moment(this.state.actionEndDate).utc();
        }
        if (this.state.actionEndTime) {
            actionEndTime = new moment(this.state.actionEndTime).utc();
        }
 
        let data = {
            'title':                this.state.edited.title,
            'slug':                 this.state.edited.slug,
            'content':              this.state.editorContent,
            'type':                 this.state.edited.type,
            'contact_name':         this.state.edited.contact_name,
            'contact_phone':        this.state.edited.contact_phone,
            'location':             this.state.edited.location
        };
        if (this.state.edited.issue) {
            data['issue'] = this.state.edited.issue.id;
        }
 
        //clean up and set start_time
        if (actionStartDate && actionStartTime) {
            data.action_start_time = actionStartDate.format('L') + ' ' + actionStartTime.format('HH:mm:ss');
        } else if (actionStartDate && !actionStartTime) {
            data.action_start_time = actionStartDate.format('L') + ' ' + new moment().endOf('day').utc().format('HH:mm:ss');
        }
 
        //clean up and set end_time
        if (actionEndDate && actionEndTime) {
            data.action_end_time = actionEndDate.format('L') + ' ' + actionEndTime.format('HH:mm:ss');
        } else if (actionEndDate && !actionEndTime && actionStartTime) {
            data.action_end_time = actionEndDate.format('L') + ' ' + actionStartTime.format('HH:mm:ss');
        } else if (actionEndDate && !actionEndTime && !actionStartTime && data.action_start_time) {
            data.action_end_time = data.action_start_time;
        }
 
        if (parseInt(this.state.edited.workflow_id)) {
            data['workflow_id'] = parseInt(this.state.edited.workflow_id);
        }
 
        if (this.state.edited.users && this.state.edited.users.length) {
            data['users'] = this.state.edited.users.map((user, i) => {
                return user.uuid;
            });
        }
 
        if (this.state.edited.children && this.state.edited.children.length) {
            data['children'] = this.state.edited.children.map((content, i) => {
                return content.uuid;
            })
        }
 
        if (this.state.edited.due_at) {
            data['due_at'] = this.state.edited.due_at;
        }
 
        if (!this.isUserEditable()) {
            return;
        }
 
        if (!this.isNew()) {
            dispatch(assignmentsUpdate(this.getUuid(), data))
                .then(() => {
                    const assignment = this.props.assignments.items.find((item) => item.get('uuid') == this.state.edited.uuid);
                    this.setState({'edited': assignment.toJS(), dirty: false});
                    dispatch(applicationIsDirty(false));
                })
                .then(() => {
                    dispatch(snackbarShowMessage('Assignment updated'));
                })
                .then(() => {
                    if (andCheckin !== true) {
                        return;
                    }
 
                    this.handleCheckin();
                })
                .catch(() => {
                    dispatch(snackbarClose());
                    dispatch(alertShowMessage({
                        'title': 'Oops',
                        'message': (
                            <p>There was a problem saving your assignment. Usually this means you don't have permission to perform an action, like publishing or deleting.</p>
                        )
                    }));
                    this.setState({'dirty': true});
                    dispatch(applicationIsDirty(true));
                });
        } else {
 
            // Create is slightly different
            // first, create it
            dispatch(assignmentsCreate(data))
                .then(() => {
                    // then grab the newly created item and pass it on
                    const assignment = this.props.assignments.items.find((item) => item.get('uuid') == this.props.assignments.selected);
                    dispatch(snackbarShowMessage('Assignment created'));
                    return assignment;
                })
                .then((assignment) => {
                    // update the state with the newly created object
                    dispatch(applicationIsDirty(false));
                    this.setState({
                        'edited': assignment.toJS(),
                        dirty: false
                    }, () => {
                        // after that's done check it out
                        this.handleCheckout({})
                            .then(() => {
                                // when the checkout is complete, update the URL
                                // if you don't wait, you can get a race condition that can
                                // result in a no-op warning
                                browserHistory.push('/ceo/assignment/' + this.props.assignments.selected);
                            });
                    });
                })
                .catch(() => {
                    dispatch(snackbarClose());
                    dispatch(alertShowMessage({
                        'title': 'Oops',
                        'message': (
                            <p>There was a problem saving your assignment. Usually this means you don't have permission to perform an action, like publishing or deleting.</p>
                        )
                    }));
                    this.setState({'dirty': true});
                    dispatch(applicationIsDirty(true));
                });
 
        }
    }
 
    handleFormChange(e) {
        const val = e.target.value;
        const key = e.target.getAttribute('for');
 
        let assignment = this.state.edited;
 
        assignment[key] = val;
 
        if (key === 'slug') {
            assignment[key] = sluggify(val, true);
        }
 
        this.setState({'edited': assignment, dirty: true});
        this.props.dispatch(applicationIsDirty(true));
    }
 
    handleSelectChange(e, index, val) {
        let assignment = this.state.edited;
 
        assignment.type = val;
        this.setState({'edited': assignment, dirty: true});
        this.props.dispatch(applicationIsDirty(true));
    }
 
    handleWorkflowChange(e, index, val) {
        let assignment = this.state.edited;
 
        assignment.workflow_id = val;
        this.setState({'edited': assignment, dirty: true});
        this.props.dispatch(applicationIsDirty(true));
    }
 
    handleEditorChange(raw, editorState, name) {
        this.setState({'editorContent': this.toHtml(editorState.getCurrentContent()), dirty: true});
        this.props.dispatch(applicationIsDirty(true));
    }
 
    handleIssueChange(e, index, val) {
        const issue = this.props.issues.items.find((item, i) => item.get('uuid') == val);
        if (!issue) {
            return;
        }
 
        let assignment = this.state.edited;
        assignment.issue = issue.toJS();
 
        this.setState({'edited': assignment, dirty: true});
        this.props.dispatch(applicationIsDirty(true));
    }
 
    handleCheckout(e) {
        const {dispatch} = this.props;
        return dispatch(assignmentsCheckOut(this.state.edited.srn))
            .then(() => dispatch(assignmentsFetchOne(this.state.edited.uuid)))
            .then(() => {
                const assignment = this.props.assignments.items.find((item) => item.get('uuid') == this.state.edited.uuid);
                this.setState({'edited': assignment.toJS()});
            });
    }
 
    handleCheckin(e) {
        const {dispatch} = this.props;
        dispatch(assignmentsCheckIn(this.getUuid(), this.state.edited.lock.uuid))
            .then(() => dispatch(assignmentsFetchOne(this.getUuid())))
            .then(() => {
                const assignment = this.props.assignments.items.find((item) => item.get('uuid') == this.state.edited.uuid);
                this.setState({'edited': assignment.toJS()});
            });
    }
 
    handleSaveCheckIn(e) {
        this.handleSave(true);
    }
 
    handleDelete(e) {
        const {dispatch} = this.props;
        dispatch(assignmentsRemove(this.getUuid()))
            .then(() => dispatch(globalHistoryPop(this.getUuid())))
            .then(() => this.setState({'didDelete': true}, () => {
                browserHistory.push('/ceo/assignment');
                dispatch(snackbarShowMessage('Assignment removed'));
            }))
            .catch(() => {
                dispatch(snackbarClose());
                dispatch(alertShowMessage({
                    'title': 'Oops',
                    'message': (
                        <p>There was a problem removing your assignment. You may not have permission to delete.</p>
                    )
                }));
                this.setState({'dirty': true});
                dispatch(applicationIsDirty(true));
            });
 
    }
 
    handleClearLock(e) {
        if (!CurrentUser.hasRole('Administrator')) {
            return;
        }
 
        if (!confirm('Are you sure you want to clear this lock? You may overwrite pending changes.')) {
            return;
        }
 
        const {dispatch} = this.props;
        return dispatch(assignmentsClearLock(CurrentUser.getUuid(), this.state.edited.lock.uuid))
            .then(() => dispatch(assignmentsFetchOne(this.getUuid())))
            .then(() => {
                const assignment = this.props.assignments.items.find((item) => item.get('uuid') == this.state.edited.uuid);
                this.setState({'edited': assignment.toJS()});
            });
    }
 
    toHtml(state) {
        return rawToHtml(state);
    }
 
    handleSelectContent(content) {
        let assignment = this.state.edited;
        const existing = _.find(assignment.children, {'uuid': content.get('uuid')});
        const {dispatch} = this.props;
 
        if (!existing) {
            dispatch(snackbarShowMessage('Content added'));
            assignment.children.push(content.toJS());
            this.setState({'edited': assignment, dirty: true});
            dispatch(applicationIsDirty(true));
        }
    }
 
    handleRemoveContent(content, e) {
        let assignment = this.state.edited;
        const {dispatch} = this.props;
        assignment.children = assignment.children.filter((item, i) => {
            return content.uuid != item.uuid;
        });
 
        dispatch(snackbarShowMessage('Content removed'));
        this.setState({'edited': assignment, dirty: true});
        dispatch(applicationIsDirty(true));
    }
 
    handleOpenContent() {
        this.setState({'contentIsOpen': true});
    }
 
    handleCloseContent() {
        this.setState({'contentIsOpen': false});
    }
 
    render() {
 
        if (this.getUuid() && !this.props.assignments.items.size) {
            return <LoadingIndicator />;
        }
 
        let dueDate = null;
 
        if (this.state.edited.due_at) {
            dueDate = moment.utc(this.state.edited.due_at, 'YYYY-MM-DD HH:mm:ss').local().toDate();
        }
 
        let assignment_types = [];
        if (Config && Config.get('assignment_types')) {
            assignment_types = Config.get('assignment_types');
        }
 
        const presetIssue = (this.props.location && this.props.location.query.issue)
            ? decodeURIComponent(this.props.location.query.issue)
            : null;
 
        if (presetIssue) {
            let issue = this.props.issues.items.find((item) => item.get('uuid') == presetIssue);
 
            if (issue)
                this.state.edited.issue = issue.toJS();
        }
 
        // Allows existing items attached to closed issues
        // to still show the issue in the select drop down
        let useIssue = null;
        let didUseIssue = false;
        if (this.state.edited
            && this.state.edited.issue
            && !parseInt(this.state.edited.issue.status) ) {
 
            let tempIssue = this.state.edited.issue;
            let useLabel = [];
            if (tempIssue.published_at) {
                useLabel.push(moment(new Date(tempIssue.published_at)).local().format('LL'));
            }
            if (tempIssue.label) {
                useLabel.push(tempIssue.label);
            }
 
            useLabel = useLabel.join(' - ');
            if (useLabel.length > 25) {
                useLabel = useLabel.substring(0, 22) + '...';
            }
            tempIssue.decorated_label = useLabel;
            useIssue = tempIssue;
        }
 
        let creator = this.props.users.items.find((user) => {
            return this.state.edited.creator_id == user.get('id');
        })
 
        return (
            <div className='assignment-item-root'>
                <Row>
                    <Col xs={12}>
                        <Paper className='toolbar' style={{ paddingTop:'10px', paddingBottom:'10px' }}>
                            <Row middle='xs'>
                                <Col xs={6}>
                                    <LockButtons
                                        onSave={this.handleSave}
                                        onSaveCheckIn={this.handleSaveCheckIn}
                                        onCheckIn={this.handleCheckin}
                                        onCheckOut={this.handleCheckout}
                                        userEditable={this.isUserEditable()}
                                        lockable={this.state.edited}
                                        />
                                </Col>
                            </Row>
                        </Paper>
 
                        <Row>
                            <Col xs={9}>
                                <Paper className='padded clear-bottom'>
                                    <TextField
                                        style={{display:'none'}}
                                        htmlFor='slug'
                                        fullWidth={true}
                                        floatingLabelText='Slug'
                                        disabled={this.isUserEditable() ? false : true}
                                        onChange={this.handleFormChange}
                                        value={this.state.edited.slug ? this.state.edited.slug : ''}
                                        ref='slugTextField'
                                        />
                                    <TextField
                                        htmlFor='title'
                                        fullWidth={true}
                                        floatingLabelText='Title'
                                        disabled={this.isUserEditable() ? false : true}
                                        onChange={this.handleFormChange}
                                        value={this.state.edited.title ? this.state.edited.title : ''}
                                        />
                                    <div style={{marginTop:'1em'}}>
                                        <Subheader style={{paddingLeft:'0px'}}>Description</Subheader>
                                        <SimpleEditor
                                            value={this.state.edited.content}
                                            onChange={this.handleEditorChange}
                                            readOnly={this.isUserEditable() ? false : true}
                                            />
                                    </div>
                                    <Row middle='xs'>
                                        <Col xs={6}>
                                            <TextField
                                                htmlFor='contact_name'
                                                fullWidth={true}
                                                floatingLabelText='Contact Name'
                                                disabled={this.isUserEditable() ? false : true}
                                                onChange={this.handleFormChange}
                                                value={this.state.edited.contact_name ? this.state.edited.contact_name : ''}
                                                />
                                        </Col>
                                        <Col xs={6}>
                                            <TextField
                                                htmlFor='contact_phone'
                                                fullWidth={true}
                                                floatingLabelText='Contact Phone'
                                                disabled={this.isUserEditable() ? false : true}
                                                onChange={this.handleFormChange}
                                                value={this.state.edited.contact_phone ? this.state.edited.contact_phone : ''}
                                                />
                                        </Col>
                                    </Row>
                                    <Row middle='xs'>
                                        <Col xs={6}>
                                            <Row middle='xs'>
                                                <Col xs={12}>
                                                    <DatePicker
                                                        fullWidth={true}
                                                        floatingLabelText='Start Date'
                                                        disabled={this.isUserEditable() ? false : true}
                                                        onChange={this.actionDateChange.bind(this, 'start')}
                                                        value={this.state.actionStartDate}
                                                        firstDayOfWeek={0}
                                                        />
                                                </Col>
                                            </Row>
                                        </Col>
                                        <Col xs={6}>
                                            {
                                                new Date(this.state.actionStartTime).valueOf() == new Date(this.state.actionEndTime).valueOf()
                                                ? (
                                                    <Row middle='xs'>
                                                        <Col xs={12}>
                                                        <TimePicker
                                                            fullWidth={true}
                                                            floatingLabelText='Start Time'
                                                            disabled={this.isUserEditable() && this.state.actionStartDate ? false : true}
                                                            onChange={this.actionTimeChange.bind(this, 'start')}
                                                            value={this.state.actionStartTime}
                                                            defaultTime={this.state.actionStartDate}
                                                            />
                                                        </Col>
                                                    </Row>
                                                )
                                                : (
                                                    <Row middle='xs'>
                                                        <Col xs={6}>
                                                            <TimePicker
                                                                fullWidth={true}
                                                                floatingLabelText='Start Time'
                                                                disabled={this.isUserEditable() && this.state.actionStartDate ? false : true}
                                                                onChange={this.actionTimeChange.bind(this, 'start')}
                                                                value={this.state.actionStartTime}
                                                                defaultTime={this.state.actionStartDate}
                                                                />
                                                        </Col>
                                                        <Col xs={6}>
                                                            <TimePicker
                                                                fullWidth={true}
                                                                floatingLabelText='End Time'
                                                                disabled={this.isUserEditable() && this.state.actionStartTime ? false : true}
                                                                onChange={this.actionTimeChange.bind(this, 'end')}
                                                                value={this.state.actionEndTime}
                                                                />
                                                        </Col>
                                                    </Row>
                                                )
                                            }
                                        </Col>
                                        <Col xs={12}>
                                            <TextField
                                                htmlFor='location'
                                                fullWidth={true}
                                                floatingLabelText='Location'
                                                disabled={this.isUserEditable() ? false : true}
                                                onChange={this.handleFormChange}
                                                value={this.state.edited.location ? this.state.edited.location : ''}
                                                />
                                        </Col>
                                    </Row>
                                </Paper>
 
                                <Paper className='padded clear-bottom'>
                                    <Subheader style={{paddingLeft:'0px'}}>Linked Content</Subheader>
 
                                    {this.state.edited.children.map((item, i) => {
                                        return (
 
                                            <Row key={i}>
                                                <Col xs={12} style={{marginBottom:'6px'}}>
                                                    <ContentRow
                                                        item={Immutable.fromJS(item)}
                                                        closeIcon={
                                                            <FontIcon
                                                                className='mui-icons'
                                                                style={{'cursor': 'pointer'}}
                                                                >
                                                                close
                                                            </FontIcon>
                                                        }
                                                        closeAction={
                                                            this.handleRemoveContent.bind(this, item)
                                                        }
                                                        disabled={this.isUserEditable() ? false : true}
                                                        />
                                                </Col>
                                            </Row>
                                        )
                                    })}
                                    <Row>
                                        <Col xs={12}>
                                            <RaisedButton
                                                onClick={this.handleOpenContent.bind(this)}
                                                secondary={true}
                                                label='Attach Content'
                                                style={{marginRight:'10px'}}
                                                disabled={this.isUserEditable() ? false : true}
                                                />
                                            <RaisedButton
                                                containerElement={<Link to={'/ceo/content/new?assignment='+this.getUuid()} />}
                                                label='Create Content'
                                                disabled={this.isUserEditable() ? false : true}
                                                />
                                        </Col>
                                    </Row>
                                </Paper>
                                {
                                    this.getUuid()
                                    ? (
                                        <Paper className='padded clear-bottom'>
                                            <AssignmentDiscussion assignment={this.getUuid()} readOnly={this.isUserEditable() ? false : true} />
                                        </Paper>
                                    )
                                    : ''
                                }
                            </Col>
                            <Col xs={3}>
                                <Paper className='padded clear-bottom'>
 
                                    <SelectField
                                        fullWidth={true}
                                        style={{'maxWidth': '100%'}}
                                        floatingLabelText='Assignment Type'
                                        disabled={this.isUserEditable() ? false : true}
                                        onChange={this.handleSelectChange.bind(this)}
                                        value={this.state.edited.type}
                                        >
                                        {assignment_types.map((type, i) => {
                                            return <MenuItem key={i} value={type} primaryText={type} />;
                                        })}
                                    </SelectField>
 
                                    <SelectField
                                        autoWidth={true}
                                        style={{maxWidth: '100%'}}
                                        value={parseInt(this.state.edited.workflow_id) ? this.state.edited.workflow_id : null}
                                        disabled={this.isUserEditable() ? false : true}
                                        onChange={this.handleWorkflowChange.bind(this)}
                                        floatingLabelText='Workflow Status'
                                        >
                                        {this.props.workflows.filters.assignmentOnly.map((id, i) => {
                                            const wf = this.props.workflows.items.find((workflow) => {
                                                return workflow.get('uuid') == id;
                                            })
                                            return <MenuItem key={i} value={wf.get('id')} primaryText={wf.get('name')} />
                                        })}
                                    </SelectField>
 
                                    <DatePicker
                                        autoOk={true}
                                        fullWidth={true}
                                        hintText="Due Date"
                                        value={dueDate}
                                        disabled={this.isUserEditable() ? false : true}
                                        onChange={this.dueDateChange.bind(this)}
                                        floatingLabelText='Due Date'
                                        style={{'maxWidth': '100%'}}
                                        firstDayOfWeek={0}
                                    />
 
                                    <SelectField
                                        floatingLabelText='Issue'
                                        value={this.state.edited.issue ? this.state.edited.issue.uuid : ''}
                                        disabled={this.isUserEditable() ? false : true}
                                        onChange={this.handleIssueChange.bind(this)}
                                        style={{width:'100%'}}
                                        >
                                        {this.props.issues.items.map((item, i) => {
                                            // const item = this.props.issues.items.find((item, i) => item.get('uuid') == id);
                                            if (useIssue && item.get('uuid') == useIssue.uuid) {
                                                didUseIssue = true;
                                            }
 
                                            let label = [];
                                            if (item.get('published_at')) {
                                                label.push(moment(new Date(item.get('published_at'))).local().format('LL'));
                                            }
                                            if (item.get('label')) {
                                                label.push(item.get('label'));
                                            }
 
                                            label = label.join(' - ');
                                            if (label.length > 25) {
                                                label = label.substring(0, 22) + '...';
                                            }
 
                                            return (
                                                <MenuItem key={i} value={item.get('uuid')} primaryText={label} />
                                            );
                                        })}
                                        {
                                            useIssue && !didUseIssue
                                            ? <MenuItem value={useIssue.uuid} primaryText={useIssue.decorated_label} />
                                            : ''
                                        }
                                    </SelectField>
 
                                </Paper>
 
                                <Paper className='clear-bottom'>
                                    <List>
                                        <Subheader className='fixed-label'>Assigned Users</Subheader>
                                        <ListItem disabled={true} style={{marginTop:'-16px', paddingTop:'0px', paddingBottom:'0px'}}>
                                            <UserSearchBox
                                                onSelectUser={this.onSelectUser.bind(this)}
                                                disabled={this.isUserEditable() ? false : true}
                                                />
                                        </ListItem>
 
                                        {this.state.edited.users.map((user, i) => {
                                            return (
                                                <ListItem
                                                    key={i}
                                                    disabled={true}
                                                    primaryText={user.name}
                                                    secondaryText={user.phone ? ('tel: '+user.phone) : ''}
                                                    rightIcon={
                                                        <FontIcon
                                                            className='mui-icons '
                                                            style={{'cursor': 'pointer'}}
                                                            onClick={this.onRemoveUser.bind(this, user)}
                                                            >close</FontIcon>
                                                    }
                                                    >
                                                </ListItem>
                                            );
                                        })}
                                        {
                                            creator
                                            ? (
                                                <div>
                                                    <Subheader>Created By</Subheader>
                                                    <ListItem
                                                        style={{paddingTop:'0px'}}
                                                        disabled={true}
                                                        primaryText={creator.get('name')}
                                                        secondaryText={creator.get('phone') ? ('tel: '+creator.get('phone')) : ''}
                                                        />
                                                </div>
                                            )
                                            : ''
                                        }
                                    </List>
                                </Paper>
                                <div className="clear-bottom">
                                    <DeleteButton
                                        className='full'
                                        fullWidth={true}
                                        disabled={this.isNew() || !this.isUserEditable() ? true : false}
                                        onDelete={this.handleDelete.bind(this)} />
                                </div>
 
                                {
                                    this.isLocked()
                                    ? (
                                        <div className='clear-bottom'>
                                            <RaisedButton
                                                label='Clear Lock'
                                                style={{width:'100%'}}
                                                icon={<FontIcon className='mui-icons'>clear</FontIcon>}
                                                onClick={this.handleClearLock.bind(this)}
                                                disabled={CurrentUser.hasRole('Administrator') && !this.isNew() ? false : true}
                                                />
                                        </div>
                                    )
                                    : ''
                                }
 
                            </Col>
                        </Row>
 
                        <ContentSearchModal
                            isOpen={this.state.contentIsOpen}
                            onRequestClose={this.handleCloseContent.bind(this)}
                            onSelectContent={this.handleSelectContent.bind(this)}
                            />
                    </Col>
                </Row>
            </div>
        );
    }
}
 
export default connect((state) => {
    return {
        assignments: state.assignments,
        workflows: state.workflows,
        issues: state.issues,
        users: state.users,
        globalHistory: state.globalHistory
    }
})(AssignmentItem);