application/components/content/content-result.js

import React from 'react';
import {connect} from 'react-redux';

import Paper from 'material-ui/Paper';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import FontIcon from 'material-ui/FontIcon';
import Chip from 'material-ui/Chip';
import Avatar from 'material-ui/Avatar';

import {Link} from 'react-router';
import moment from 'moment';

import {timeToFormat} from './../../util/strings';

import BaseView from './../base-view';

import LoadingIndicator from './../common/loading-indicator';
import {Row, Col} from './../flexbox';

import ceoTheme from './../../theme';

const styles = {
  chip: {
    marginRight: 4,
  },
  chipLeft: {
    backgroundColor:'#FFF',
    marginLeft: 'auto',
    marginRight: 4,
  },
  chipNoBg: {
    backgroundColor:'#FFF',
    marginRight: 4,
  },
  faAvatar: {
    fontSize: '16px'
  },
  invert: {
    backgroundColor: '#FFF',
    color: ceoTheme.palette.textColor
  },
  closeIcon: {
    backgroundColor:'#FFF',
    marginLeft: 'auto',
    marginRight: 4,
    cursor: 'pointer'
  }
};


class ContentResult extends BaseView {

    getStatus(contentItem) {
        const now = moment().utc();

        if (!contentItem.get('published_at')) {
            return 'draft';
        }

        const pubTime = moment.utc(contentItem.get('published_at'));

        if (now.isBefore(pubTime)) {
            return 'scheduled';
        }

        if (now.isAfter(pubTime)) {
            return 'published';
        }

        return status;
    }

    render() {
        let webWf = null;
        let printWf = null;
        let issue = null;

        const contentItem = this.props.item;

        const titleText = contentItem.get('title') ? contentItem.get('title') : contentItem.get('slug');
        const slugText = contentItem.get('slug') ? contentItem.get('slug') : (<span className="invalid">No slug</span>);

        let linkLocation = '/ceo/locate/' + contentItem.get('uuid');
        if (parseInt(contentItem.get('container_id')) && contentItem.get('type') == 'media') {
            // it's a gallery
            linkLocation = '/ceo/locate/' + contentItem.get('container').get('uuid');
        }

        let colOffset = 0;
        if (this.props.rightButton) {
            colOffset = 1;
        }

        return (
            <Paper className={'content-list-card zoom ' + this.getStatus(contentItem)}>
                <Row>
                    {
                        contentItem.get('type') == 'media'
                        ? (
                            <Col xs={2}>
                                <img src={contentItem.get('attachment').get('public_url')} style={{'maxWidth':'100%'}}/>
                                <br />
                                <span className='small quiet'>Type: {contentItem.get('attachment').get('type')}</span>
                            </Col>
                        )
                        : ''
                    }
                    <Col xs={(contentItem.get('type') == 'media' ? 10 : 12) - colOffset}>
                        <h3>
                            <Link to={linkLocation} className="truncate">{titleText}</Link>
                            <span>|</span>
                        </h3>
                            <Link to={linkLocation} className="truncate">{slugText}</Link>
                    </Col>
                    {
                        colOffset
                        ? <Col xs={1} end='xs'>{this.props.rightButton}</Col>
                        : ''
                    }
                </Row>
                {this.props.children}
            </Paper>
        );
    }
}

export default connect()(ContentResult);