It fixes #154

parent 4bf934cd
......@@ -2,7 +2,7 @@ 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';
......@@ -16,25 +16,35 @@ 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){
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 = [];
lastEvent.events = [event];
}
//lastEvent.type = COLLAPSED_EVENT_TYPES;
lastEvent.type = COLLAPSED_EVENT_TYPES;
lastEvent.events.push(event);
continue;
}
}
collapsed.push(event);
}
}
return collapsed;
}
......@@ -50,9 +60,7 @@ class EventList extends React.Component {
}
items.push(this.props.events[i]);
}
//return this.collapse(items);
return items;
return this.collapse(items);
}
render() {
......@@ -62,15 +70,11 @@ class EventList extends React.Component {
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><td style={{ borderTop: '1px solid #f2f2f2', textAlign: 'center', fontSize: '18px', fontWeight: 'bold' }} colSpan={3} ><a name={event.anchor}></a> {event.text}</td></tr>;
}
if (event.type === COLLAPSED_EVENT_TYPES && !event.previousVersionEvent ){
return <CollapsedEventList event={event}></CollapsedEventList>;
}
return <Event event={event} onEventClicked={this.props.onEventClicked(event)} ></Event>
}
return <Event event={event} onEventClicked={this.props.onEventClicked} ></Event>
})}
</tbody>
</Table>
......@@ -85,8 +89,48 @@ EventList.propTypes = {
export default EventList;
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 event = this.props.event;
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>;
});
/*
return <tr>
<td style={{ width: '16px', borderTop: '0' }}>
<EventIcon event={event} /> <Glyphicon glyph='edit' onClick={() => { this.props.onEventClicked(event); }} />
......@@ -97,12 +141,16 @@ class Event extends React.Component {
</OverlayTrigger>
</td>
<td style={{ border: 0 }}>
<LazyEvent event={event} />
</td>
</tr>;
{this.getEventContentBody(this.props.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}
{event.events && !this.state.collapsed ? this.getUncollapsedEvents() : null}
</td>
</tr>;*/
}
}
class LazyEvent extends React.Component {
class LazyContentEvent extends React.Component {
getHTMLContent(event) {
return getContent(event.content, 'html') ? convertImagesToThumbnails(getContent(event.content, 'html')) : convertImagesToThumbnails(getContent(event.content, 'plainText'));
}
......@@ -112,8 +160,8 @@ class LazyEvent extends React.Component {
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.previousVersionEvent){
return <LazyLoad>
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>;
......@@ -135,32 +183,3 @@ class LazyEvent extends React.Component {
/**
* This class displays a collapsed or uncollapsed list of notifications.
* By clicking in the button it will uncollapse and will show the full list of events
*/
class CollapsedEventList extends React.Component {
constructor(props) {
super(props)
this.state = {
collapsed : false
}
//this.onClick = this.onClick.bind(this)
}
//onClick(e){
// alert("Clicked")
// }
render() {
//this.props.event.type = NOTIFICATION;
/* if (this.state.collapsed){
return <Event event={this.props.event} />
}
return this.props.event.events.map((event, index) => {
return <Event event={event} />
});*/
return "test";
}
}
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