application/components/content/content-audit-log.js

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FontIcon from 'material-ui/FontIcon';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import {Table, TableBody, TableFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import BaseView from './../base-view';
import {Row, Col} from './../flexbox';

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

class ContentAuditLog extends BaseView {

    constructor(props) {
        super(props);
        this.displayName = 'ContentAuditLog';

        this.state = {
            modalIsOpen: false
        };

        this.toggleModal = this.toggleModal.bind(this);
    }

    toggleModal() {
        this.setState({'modalIsOpen': !this.state.modalIsOpen});
    }

    render() {
        if (this.props.tableOnly && this.props.logs) {
            return (
                <Table
                    height={this.state.height}
                    fixedHeader={true}
                    selectable={false}
                    >
                    <TableBody
                        displayRowCheckbox={false}
                        >
                        {this.props.logs.map((log, i) => (
                            <TableRow key={i}>
                                <TableRowColumn style={{width: 10}}>{log.get('user') ? log.get('user').get('name') : ''}</TableRowColumn>
                                <TableRowColumn style={{width: 10}}>{timeToFormat(log.get('created_at'))}</TableRowColumn>
                                <TableRowColumn style={{'textOverflow': 'none', width: 80}}>{log.get('message')}</TableRowColumn>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            )
        }

        if (!this.props.logs || !this.props.logs.size) {
            return (
                <FlatButton
                    label='Change History'
                    disabled={true}
                    icon={<FontIcon className='mui-icons'>change_history</FontIcon>}
                    />
            );
        }

        const actions = [
            <FlatButton
                label="Done"
                primary={true}
                onClick={this.toggleModal}
            />
        ];


        return (
            <div>

                <Row className='clear-bottom'>
                    <Col xs={12} center='xs'>
                        <RaisedButton
                            style={{'width': '100%'}}
                            label='Change History'
                            onClick={this.toggleModal}
                            icon={<FontIcon className='mui-icons'>change_history</FontIcon>}
                            />
                    </Col>
                </Row>

                <Dialog
                    title="Change History"
                    actions={actions}
                    modal={false}
                    open={this.state.modalIsOpen}
                    onRequestClose={this.toggleModal}
                    autoScrollBodyContent={true}
                    >
                    <Table
                        height={this.state.height}
                        fixedHeader={true}
                        selectable={false}
                        >
                        <TableBody
                            displayRowCheckbox={false}
                            >
                            {this.props.logs.map((log, i) => (
                                <TableRow key={i}>
                                    <TableRowColumn style={{width: 10}}>{log.get('user') ? log.get('user').get('name') : ''}</TableRowColumn>
                                    <TableRowColumn style={{width: 10}}>{timeToFormat(log.get('created_at'))}</TableRowColumn>
                                    <TableRowColumn style={{'textOverflow': 'none', width: 80}}>{log.get('message')}</TableRowColumn>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </Dialog>
            </div>
        );
    }
}

export default ContentAuditLog;