Problem with exceed limit of updates

parent 02467665
......@@ -7,14 +7,37 @@ import { getContent, convertImagesToThumbnails } from '../../../helpers/EventHel
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 {
collapse(items){
var collapsed = [];
for (let i = 0; i < items.length; i++) {
const event = items[i];
if (event.category === EVENT_CATEGORY_COMMANDLINE){
let lastEvent = collapsed[collapsed.length - 1];
if (lastEvent.category === EVENT_CATEGORY_COMMANDLINE){
if (!lastEvent.events){
lastEvent.events = [];
}
//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 +50,30 @@ class EventList extends React.Component {
}
items.push(this.props.events[i]);
}
//return this.collapse(items);
return items;
}
render() {
if (!this.props.events || this.props.events.length === 0) {
return null;
}
return (
<div>
<div class="sidenav">
<EventTimeLine events={this.props.events}></EventTimeLine>
</div>
<div class="main">
<Table responsive style={{ fontSize: '12px' }} >
return <Table responsive style={{ fontSize: '12px' }} >
<tbody style={{ borderRight: '1px solid #F9F9F9' }}>
{this.getItems().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>;
}
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 }}>
<LazyEvent event={event} />
</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>
})}
</tbody>
</Table>
</div>
</div>
)
</Table>
}
}
......@@ -75,15 +84,42 @@ EventList.propTypes = {
export default EventList;
class Event extends React.Component {
render(){
let event = this.props.event;
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 }}>
<LazyEvent event={event} />
</td>
</tr>;
}
}
class LazyEvent 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.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 +132,35 @@ 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";
}
}
......@@ -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