application/components/content/content-diff.js

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

import Divider from 'material-ui/Divider';
import Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';

import AuditLog from './content-audit-log';

import {Row, Col} from './../flexbox';

import Config from './../../config';

import CurrentUser from './../../current-user';

import LoadingIndicator from './../common/loading-indicator';
import Diff from './diff';

import {
    contentVersionsFetch,
    contentVersionRestore
} from './../../redux/actions/content-version-actions';

import {
    snackbarShowMessage
} from './../../redux/actions/snackbar-actions';

class DiffModal extends React.Component {
    constructor(props) {
        super(props);

        this.state = {selected: false, reposition: true}
    }



    componentWillMount() {
        this.handleOpen.call(this);
    }


    componentWillUnmount() {
    }

    handleOpen() {
        this.props.dispatch(contentVersionsFetch(this.props.content.get('srn')))
            .then(() => {
                this.setState({'selected': this.props.versions.items.first()})
            });
    }

    handleClose() {
        if (this.props.onRequestClose) {
            this.props.onRequestClose();
        }
    }

    handlePrevious() {
        let currentV = parseInt(this.state.selected.get('version'));
        if (currentV <= 1) {
            return;
        }

        currentV--;
        this.setVersion(currentV);
    }

    handleNext() {
        let currentV = parseInt(this.state.selected.get('version'));
        if (currentV >= parseInt(this.props.content.get('version'))-1) {
            return;
        }

        currentV++;
        this.setVersion(currentV);
    }

    setVersion(v) {
        let version = this.state.selected.get('version');
        const check = this.props.versions.items.find((itm) => {
            return itm.get('version') == v;
        });

        if (check && check.size) {
            version = check;
        }

        this.setState({'selected': version, 'reposition': false});
    }

    handleRestore(e) {
        let version = this.state.selected.get('version');
        let uuid = this.state.selected.get('uuid');

        if (!uuid) {
            return;
        }
        const {dispatch} = this.props;
        dispatch(snackbarShowMessage('Restoring to version ' + version));
        this.handleClose.call(this);
        dispatch(contentVersionRestore(uuid))
            .then((content) => {
                if (this.props.onRestore) {
                    this.props.onRestore(content);
                }
            });
    }

    render() {

        const actions = [
            <FlatButton
                label='Close'
                onClick={this.handleClose.bind(this)}
            />,
        ];
        return (
            <Dialog
                actions={actions}
                modal={true}
                open={this.props.isOpen}
                autoScrollBodyContent={true}
                repositionOnUpdate={this.state.reposition}
                >
                <strong>Versions</strong>
                <p>
                    <small>Each time you save, a new version is created. Content can be restored from any version, creating another version so the change history is not lost.</small>
                </p>
                <Row className='clear-top clear-bottom' bottom='xs'>
                    <Col xs={6}>
                        <FlatButton
                            className='secondary-button'
                            label='Restore this version'
                            onClick={this.handleRestore.bind(this)}
                            disabled={this.props.disabled}
                        />
                    </Col>
                    <Col xs={1} end='xs'>
                        <a onClick={this.handlePrevious.bind(this)}><span className='fa fa-angle-left'></span></a>
                    </Col>
                    <Col xs={4} center='xs'>
                        {
                            this.state.selected && this.state.selected.size
                            ? (
                                <div>
                                    Version {this.state.selected.get('version')} - {this.state.selected.get('user').get('name')}
                                </div>
                            )
                            : 'Loading...'
                        }
                    </Col>
                    <Col xs={1} start='xs'>
                        <a onClick={this.handleNext.bind(this)}><span className='fa fa-angle-right'></span></a>
                    </Col>
                </Row>

                {
                    this.state.selected && this.state.selected.size
                    ? (
                        <div className='text'>
                            <label className='fixed-label'>Title</label>
                            <div className='highlight-box'>
                                {this.state.selected.get('title')}
                            </div>
                            <Divider />
                            <div className='clear-top'>
                                <label className='fixed-label'>Slug</label>
                                <div className='highlight-box'>
                                    {this.state.selected.get('slug')}
                                </div>
                            </div>
                            <Divider />
                            <div className='clear-top'>
                                <Diff inputA={this.state.selected.get('content')} inputB={this.props.content.get('content')} />
                            </div>
                        </div>
                    )
                    : ''
                }
                {
                    this.props.logs
                    ? (
                        <div>
                            <Divider />
                            <div style={{marginTop:'16px'}}>
                                <strong>History of Changes</strong>
                                <AuditLog logs={this.props.logs} tableOnly={true} />
                            </div>
                        </div>
                    )
                    : ''
                }
            </Dialog>
        );
    }
}

export default connect((state) => {
    return {
        versions: state.contentVersions
    };
})(DiffModal);