ES6 Plato on Github
Report Home
Summary Display
components/Logbook/EventVersions.js
Maintainability
70.19
Lines of code
123
Difficulty
29.65
Estimated Errors
0.71
Function weight
By Complexity
By SLOC
import React from 'react'; import { Row, Col, Popover, Button, Well } from 'react-bootstrap'; import { getPreviousVersionNumber, } from '../../helpers/EventHelpers'; import Popup from 'reactjs-popup'; import Moment from 'moment'; import EventVersionPanel from './EventVersionPanel'; import { LATEST_EVENT_VERSION, ORIGINAL_EVENT_VERSION, MIDDLE_EVENT_VERSION } from '../../constants/EventTypes'; /** * Render the popup which displays all event versions of the event * @param {*} event the event under investigation */ export default function EventVersions(event) { let e = event; /* build the different lines representing the previous versions */ let lines = []; while (e.previousVersionEvent != null) { if (lines.length === 0) { lines.push(<EventVersionItem event={e} type='edition' mostRecent={true} />); } else { lines.push(<EventVersionItem event={e} type='edition' mostRecent={false} />); }; e = e.previousVersionEvent; } lines.push(<EventVersionItem event={e} type='creation' />); /* build the popover */ return (<Popover id='mypopover'> <div> <p style={{ marginBottom: '5px' }}> This log has {getPreviousVersionNumber(event) + 1} versions. </p> <hr style={{ marginTop: '5px' }} /> {lines.map((item, index) => <Popup key={index} trigger={<div> {item} </div>} modal closeOnDocumentClick={false} contentStyle={{ width: '90%', height: '90%' }} > {close => ( <div className='fullPage'> <a className='close' onClick={close}> × </a> <div className='content'> <EventVersionPanel event={item.props.event} version={index === 0 ? LATEST_EVENT_VERSION : index === lines.length - 1 ? ORIGINAL_EVENT_VERSION : MIDDLE_EVENT_VERSION} /> </div> </div> )} </Popup> )} <hr style={{ marginBottom: '5px' }} /> <Popup trigger={<div style={{ display: 'inline' }}> <Button bsStyle='link'> See all versions </Button> </div>} modal closeOnDocumentClick={false} contentStyle={{ width: '90%', height: '90%' }} > {close => { return <div className='fullPage'> <a className='close' onClick={close}> × </a> <div className='content'> <CompleteEventHistory event={event} /> </div> </div> }} </Popup> </div> </Popover>); } /** * React component which represents on item of the event history * @param {*} props the props passed to this component */ class EventVersionItem extends React.Component { render() { function buildTheDisplay(event, type, mostRecent) { return ( <Well bsSize='small' style={{ marginBottom: '5px', cursor: 'pointer' }}> <b> {event.username} </b> {type === 'creation' ? 'created on ' : ''} {type === 'edition' ? 'edited on ' : ''} {Moment(event.creationDate).format('MMMM DD HH:mm')} {mostRecent === true ? ' (most recent)' : ''} {event.machine ? <span style={{ color: '#777777', fontStyle: 'italic' }}> from {event.machine} </span> : ''} </Well> ); }; return ( buildTheDisplay(this.props.event, this.props.type, this.props.mostRecent) ); }; }; /** * React component which displays the complete event history */ const CompleteEventHistory = (props) => { let { event } = props; let eventVersions = []; /* first push the current event which is the latest version of the event */ eventVersions.push(<EventVersionPanel event={event} version={LATEST_EVENT_VERSION} />); /* then display the previous version of this event */ while (event.previousVersionEvent != null) { event = event.previousVersionEvent; eventVersions.push(<div className='margin-bottom-10'> <Row> <Col xs={1}> </Col> <Col xs={11}> <EventVersionPanel event={event} version={event.previousVersionEvent === null ? ORIGINAL_EVENT_VERSION : MIDDLE_EVENT_VERSION} /> </Col> </Row> </div>); }; return eventVersions; };