application/components/content/content-grid.js

import React from 'react';
import {browserHistory} from 'react-router';
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 {GridList, GridTile} from 'material-ui/GridList';
import IconButton from 'material-ui/IconButton';

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 UnwrappedContentGrid extends BaseView {

    constructor(props) {
        super(props);
    }

    render() {
        if (this.props.content.isFetching) {
            return <LoadingIndicator />
        }

        return (
            <Paper className='clear-bottom' style={{padding:'10px'}}>
                <GridList cellHeight={330} cols={3} className='media-result grid'>
                    {this.props.items.valueSeq().map((item, i) => {
                        return <ContentTile item={item} key={i} closeIcon={this.props.closeIcon} />;
                    })}
                </GridList>
            </Paper>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        workflows: state.workflows,
        content: state.content
    };
};

class UnwrappedContentTile extends BaseView {

    constructor(props) {
        super(props);
    }

    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;
    }

    onClickTile(url, e) {
        browserHistory.push(url);
    }

    render() {
        let webWf = null;
        let printWf = null;
        let issue = null;
        let disableLink = false;
        const contentItem = this.props.item;

        if (this.props.disableLink && this.props.disableLink === true) {
            disableLink = true;
        }

        if (contentItem.get('workflow_id') && parseInt(contentItem.get('workflow_id'))) {
            webWf = this.props.workflows.items.find((item) => {
                return item.get('id') == parseInt(contentItem.get('workflow_id'));
            });
        }
        if (contentItem.get('export') && parseInt(contentItem.get('export').get('workflow_id'))) {
            printWf = this.props.workflows.items.find((item) => {
                return item.get('id') == parseInt(contentItem.get('export').get('workflow_id'));
            });
        }
        if (contentItem.get('assignment') && parseInt(contentItem.get('assignment').get('issue_id'))) {
            issue = contentItem.get('assignment').get('issue').get('label')
                ? contentItem.get('assignment').get('issue').get('label')
                : timeToFormat(contentItem.get('assignment').get('issue').get('published_at'), 'M/DD/YYYY');
        }

        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/content/' + contentItem.get('uuid');
        if (parseInt(contentItem.get('container_id')) && contentItem.get('type') == 'media') {
            // it's a gallery
            linkLocation = '/ceo/container/' + contentItem.get('container').get('uuid');
        }

        const avatars = {
            gallery: 'collections',
            image: 'photo',
            video: 'videocam',
            pdf: 'picture_as_pdf',
            vimeo: 'ondemand_video',
            youtube: 'ondemand_video',
            audio: 'audiotrack'
        }

        let actionIcon = 'photo';
        if (contentItem.has('attachment')) {
            avatars[contentItem.get('attachment').get('type')];
        }

        const tileData = (
            <GridTile
                onClick={this.onClickTile.bind(this, linkLocation)}
                title={contentItem.get('title') ? contentItem.get('title') : contentItem.get('slug')}
                subtitle={timeToFormat(contentItem.get('modified_at'))}
                actionIcon={<IconButton><FontIcon className='mui-icons' color='white'>{actionIcon}</FontIcon></IconButton>}
                className='grid-tile'
                >
                <img src={contentItem.has('attachment') ? contentItem.get('attachment').get('public_url') : '#'} />
            </GridTile>
        );

        return tileData;
    }
}

const ContentTile = connect(mapStateToProps)(UnwrappedContentTile);
const ContentGrid = connect(mapStateToProps)(UnwrappedContentGrid);

export {ContentGrid as default, ContentTile};