application/components/content/content-table.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 UnwrappedContentTable extends BaseView {

    constructor(props) {
        super(props);
    }

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

        return (
            <div>
                {this.props.items.valueSeq().map((item, i) => {
                    return <ContentRow item={item} key={i} closeIcon={this.props.closeIcon} />;
                })}
            </div>
        );
    }
}

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

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

    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 rowData = (
            <Paper className={'content-list-card zoom ' + this.getStatus(contentItem)}>
                <Row>
                    {
                        contentItem.get('type') == 'media'
                        ? (
                            <Col xs={2}>
                                <img src={contentItem.has('attachment') ? contentItem.get('attachment').get('public_url') : '#'} style={{'maxWidth':'100%'}}/>
                                <br />
                                <span className='small quiet'>Type: {contentItem.has('attachment') ? contentItem.get('attachment').get('type') : ''}</span>
                            </Col>
                        )
                        : ''
                    }
                    <Col xs={contentItem.get('type') == 'media' ? 7 : 9}>
                        <h3>
                            {
                                disableLink
                                ? <div className="truncate">{titleText}</div>
                                : <Link to={linkLocation} className="truncate">{titleText}</Link>
                            }
                            <span>|</span>
                        </h3>
                        {
                            disableLink
                            ? <span className="truncate">{slugText}</span>
                            : <Link to={linkLocation} className="truncate">{slugText}</Link>
                        }
                    </Col>
                    <Col xs={3}>
                        {
                            contentItem.get('lock') && !this.props.closeIcon
                            ? (
                                <Chip style={styles.chipLeft}>
                                    <Avatar
                                        backgroundColor='#FFF'
                                        color={ceoTheme.palette.accent1Color}
                                        icon={<FontIcon className='mui-icons'>lock_outline</FontIcon>}
                                        />
                                    {contentItem.get('lock').get('user').get('name')}
                                </Chip>
                            )
                            : ''
                        }
                        {
                            this.props.closeIcon && !this.props.disabled
                            ? (
                                <Chip style={styles.closeIcon} onClick={this.props.closeAction}>
                                    <Avatar
                                        backgroundColor='#FFF'
                                        color={ceoTheme.palette.accent1Color}
                                        icon={this.props.closeIcon}
                                        />
                                        <span style={{color:ceoTheme.palette.accent1Color}}>Unattach Content</span>
                                </Chip>
                            )
                            : ''
                        }
                    </Col>
                </Row>
                <Row className='meta'>
                    <Col xs={6}>
                        <div style={{display:'flex',flexWrap:'wrap'}}>
                            {
                                issue
                                ? (
                                    <Chip style={styles.chip}>
                                        <Avatar icon={<FontIcon className='mui-icons'>view_column</FontIcon>} />
                                        {issue}
                                    </Chip>
                                )
                                : (
                                    <Chip style={styles.chip}>
                                        <Avatar icon={<FontIcon className='mui-icons'>view_column</FontIcon>} />
                                        N/A
                                    </Chip>
                                )
                            }
                            <Chip style={styles.chip}>
                                <Avatar icon={<FontIcon style={styles.faAvatar} className='fa fa-balance-scale' />} />
                                {contentItem.get('weight')}
                            </Chip>
                            {
                                webWf
                                ? (
                                    <Chip style={styles.chip}>
                                        <Avatar>W</Avatar>
                                        {webWf.get('name')}
                                    </Chip>
                                )
                                : (
                                    <Chip style={styles.chip}>
                                        <Avatar>W</Avatar>
                                        N/A
                                    </Chip>
                                )
                            }
                            {
                                printWf && contentItem.get('type') == 'article'
                                ? (
                                    <Chip style={styles.chip}>
                                        <Avatar>P</Avatar>
                                        {printWf.get('name')}
                                    </Chip>
                                )
                                : ''
                                }
                                {
                                    !printWf && contentItem.get('type') == 'article'
                                ? (
                                    <Chip style={styles.chip}>
                                        <Avatar>P</Avatar>
                                        N/A
                                    </Chip>
                                )
                                : ''
                            }
                        </div>
                    </Col>
                    <Col xs={6}>
                        <div style={{display:'flex',flexWrap:'wrap'}}>
                            <Chip style={styles.chipLeft}>
                                <Avatar
                                    color={styles.invert.color}
                                    backgroundColor={styles.invert.backgroundColor}
                                    icon={<FontIcon className='mui-icons'>save</FontIcon>}
                                    />
                                {timeToFormat(contentItem.get('modified_at'), 'LT l')}
                            </Chip>
                            {
                                this.getStatus(contentItem) == 'scheduled'
                                ? (
                                    <Chip style={styles.chipNoBg}>
                                        <Avatar
                                            color={styles.invert.color}
                                            backgroundColor={styles.invert.backgroundColor}
                                            icon={<FontIcon className='mui-icons'>cloud_queue</FontIcon>}
                                            />
                                        {timeToFormat(contentItem.get('created_at'), 'LT l')}
                                    </Chip>
                                )
                                : ''
                            }
                            {
                                this.getStatus(contentItem) == 'published'
                                ? (
                                    <Chip style={styles.chipNoBg}>
                                        <Avatar
                                            color={styles.invert.color}
                                            backgroundColor={styles.invert.backgroundColor}
                                            icon={<FontIcon className='mui-icons'>cloud_done</FontIcon>}
                                            />
                                        {timeToFormat(contentItem.get('published_at'), 'LT l')}
                                    </Chip>
                                )
                                : ''
                            }
                        </div>
                    </Col>
                </Row>
            </Paper>
        );

        if (disableLink) {
            return rowData;
        }

        return (
            <Link to={linkLocation} className='plain'>
                {rowData}
            </Link>
        );
    }
}

const ContentRow = connect(mapStateToProps)(UnwrappedContentRow);
const ContentTable = connect(mapStateToProps)(UnwrappedContentTable);

export {ContentTable as default, ContentRow};