Commit f0878a68 authored by Alejandro De Maria Antolinos's avatar Alejandro De Maria Antolinos

Merge branch 'issue_154' into 'master'

Issue 154

Closes #154

See merge request !137
parents 2b5925b8 6052249b
......@@ -2,19 +2,52 @@ import React from 'react';
import PropTypes from 'prop-types'
import _ from 'lodash'
import Moment from 'moment'
import { Table, OverlayTrigger, Tooltip, Glyphicon } from 'react-bootstrap'
import { Label, Table, OverlayTrigger, Tooltip, Glyphicon } from 'react-bootstrap'
import { getContent, convertImagesToThumbnails } from '../../../helpers/EventHelpers';
import { getOriginalEvent } from '../../../helpers/EventHelpers'
import EventIcon from './EventIcon.js';
import LazyLoad from 'react-lazyload';
import EventTimeLine from './EventTimeLine.js';
import { EVENT_CATEGORY_COMMANDLINE, NOTIFICATION } from '../../../constants/EventTypes.js';
require("./eventList.css");
const COLLAPSED_EVENT_TYPES = "EVENTS";
/**
* The list of the all events
*/
class EventList extends React.Component {
constructor(props) {
super(props)
this.state = {
items : this.getItems()
}
}
componentDidMount(){
this.setState({ items : this.getItems() })
}
collapse(items){
var collapsed = [];
for (let i = 0; i < items.length; i++) {
const event = items[i];
if (event.category === EVENT_CATEGORY_COMMANDLINE && !event.previousVersionEvent){
let lastEvent = collapsed[collapsed.length - 1];
if (lastEvent.category === EVENT_CATEGORY_COMMANDLINE){
if (!lastEvent.events){
lastEvent.events = [event];
}
lastEvent.type = COLLAPSED_EVENT_TYPES;
lastEvent.events.push(event);
continue;
}
}
collapsed.push(event);
}
return collapsed;
}
/** Returns the list of items to be displayed in the table: events + days */
getItems() {
var items = [];
......@@ -27,44 +60,27 @@ class EventList extends React.Component {
}
items.push(this.props.events[i]);
}
return items;
return this.collapse(items);
}
render() {
if (!this.props.events || this.props.events.length === 0) {
return null;
}
return (
<div>
<div className="sidenav">
<EventTimeLine events={this.props.events}></EventTimeLine>
</div>
<div className="main">
<Table responsive style={{ fontSize: '12px' }} >
return <Table responsive style={{ fontSize: '12px' }} >
<tbody style={{ borderRight: '1px solid #F9F9F9' }}>
{this.getItems().map((event, index) => {
{this.state.items.map((event, index) => {
if (event.type === "date") {
return <tr key={index}><td style={{ borderTop: '1px solid #f2f2f2', textAlign: 'center', fontSize: '18px', fontWeight: 'bold' }} colSpan={3} ><a name={event.anchor}></a> {event.text}</td></tr>;
}
return <tr key={index}>
<td style={{ width: '16px', borderTop: '0' }}>
<EventIcon event={event} /> <Glyphicon glyph='edit' onClick={() => { this.props.onEventClicked(event); }} />
</td>
<td style={{ width: '16px', borderTop: '0', borderRight: '1px solid #f2f2f2' }}>
<OverlayTrigger placement="right" overlay={<Tooltip id="tooltip"> <p> Events created on {Moment(getOriginalEvent(event).creationDate).format("MMMM Do YYYY, h:mm:ss a")} </p> </Tooltip>}>
<span style={{ cursor: 'pointer', color: '#999999', margin: '0px' }}>{Moment(getOriginalEvent(event).creationDate).format("HH:mm:ss")} </span>
</OverlayTrigger>
</td>
<td style={{ border: 0 }}>
<LazyEvent event={event} />
</td>
</tr>
return <tr><td style={{ borderTop: '1px solid #f2f2f2', textAlign: 'center', fontSize: '18px', fontWeight: 'bold' }} colSpan={3} ><a name={event.anchor}></a> {event.text}</td></tr>;
}
return <Event event={event} onEventClicked={this.props.onEventClicked} ></Event>
})}
</tbody>
</Table>
</div>
</div>
)
</Table>
}
}
......@@ -75,15 +91,69 @@ EventList.propTypes = {
export default EventList;
class LazyEvent extends React.Component {
class Event extends React.Component {
constructor(props) {
super(props)
this.state = {
collapsed : true
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
this.setState({collapsed : !this.state.collapsed});
}
getUncollapsedEvents(){
return (<tbody> {this.props.event.events.map((event, index) => {
return this.getEventContentBody(event)
})}</tbody>);
}
render(){
let events = [this.props.event];
if (this.props.event.events && !this.state.collapsed ){
events = events.concat(this.props.event.events);
}
return events.map((event, index) => {
return <tr>
<td style={{ width: '16px', borderTop: '0' }}>
<EventIcon event={event} /> <Glyphicon glyph='edit' onClick={() => { this.props.onEventClicked(event); }} />
</td>
<td style={{ width: '16px', borderTop: '0', borderRight: '1px solid #f2f2f2' }}>
<OverlayTrigger placement="right" overlay={<Tooltip id="tooltip"> <p> Events created on {Moment(getOriginalEvent(event).creationDate).format("MMMM Do YYYY, h:mm:ss a")} </p> </Tooltip>}>
<span style={{ cursor: 'pointer', color: '#999999', margin: '0px' }}>{Moment(getOriginalEvent(event).creationDate).format("HH:mm:ss")} </span>
</OverlayTrigger>
</td>
<td style={{ border: 0 }}>
<LazyContentEvent event={event} />
{event.events && this.state.collapsed ? <Label style={{color:"blue", backgroundColor:"white", cursor:"pointer"}} onClick={this.handleClick} >.... {event.events.length} command lines more</Label> : null}
</td>
</tr>;
});
}
}
class LazyContentEvent extends React.Component {
getHTMLContent(event) {
return getContent(event.content, 'html') ? convertImagesToThumbnails(getContent(event.content, 'html')) : convertImagesToThumbnails(getContent(event.content, 'plainText'));
}
render() {
var content = this.getHTMLContent(this.props.event);
var content = this.getHTMLContent(this.props.event);
if (content) {
/** For performance only events with images are lazy loaded */
if ((this.props.event.type === NOTIFICATION || (this.props.event.type === COLLAPSED_EVENT_TYPES)) && this.props.event.previousVersionEvent){
return <LazyLoad>
<div dangerouslySetInnerHTML={{ __html: this.getHTMLContent(getOriginalEvent(this.props.event))}} />
<div dangerouslySetInnerHTML={{ __html: content }} />
</LazyLoad>;
}
/** For performance only events with images are lazy loaded */
if (content.indexOf("img") !== -1) {
/** For performance only events with images are lazy loaded */
return <LazyLoad once>
<div dangerouslySetInnerHTML={{ __html: content }} />
</LazyLoad>;
......@@ -96,3 +166,6 @@ class LazyEvent extends React.Component {
}
......@@ -3,6 +3,7 @@ export const ANNOTATION = 'annotation';
export const NOTIFICATION = 'notification';
export const EVENT_CATEGORY_COMMENT = 'comment';
export const EVENT_CATEGORY_COMMANDLINE = 'commandLine';
export const LIST_VIEW = 'list';
export const DOC_VIEW = 'doc';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment