Commit 7e64d0aa authored by Maxime Chaillet's avatar Maxime Chaillet

handle the case when an event content is empty.

parent 4613adda
......@@ -3,7 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types'
import _ from 'lodash'
import Moment from 'moment'
import { Col, Table, Row, OverlayTrigger, Tooltip } from 'react-bootstrap'
import { Col, Table, Row, OverlayTrigger, Tooltip } from 'react-bootstrap'
import { getContent, convertImagesToThumbnails } from '../../../helpers/EventHelpers';
import { getOriginalEvent } from '../../../helpers/EventHelpers'
import UserMessage from '../../UserMessage';
......@@ -11,86 +11,94 @@ import { INFO_MESSAGE_TYPE } from '../../../constants/UserMessages';
import EventIcon from './EventIcon.js';
import LazyLoad from 'react-lazyload';
import EventTimeLine from './EventTimeLine.js';
require("./eventList.css");
/**
* The list of the all events
*/
class EventList extends React.Component {
class EventList extends React.Component {
/** Returns the list of items to be displayed in the table: events + days */
getItems(){
getItems() {
var items = [];
var lastDate = null; // format DDMMYYYY
for (var i = 0; i < this.props.events.length; i++){
var date = Moment(getOriginalEvent(this.props.events[i]).creationDate).format("MMMM Do YYYY");
if (date !== lastDate){
lastDate = date;
items.push({text: date, type : "date", anchor:date});
}
for (var i = 0; i < this.props.events.length; i++) {
var date = Moment(getOriginalEvent(this.props.events[i]).creationDate).format("MMMM Do YYYY");
if (date !== lastDate) {
lastDate = date;
items.push({ text: date, type: "date", anchor: date });
}
items.push(this.props.events[i]);
}
return items;
}
render() {
render() {
if (!this.props.events || this.props.events.length === 0) {
return null;
}
return (
<div>
<div class="sidenav">
return (
<div>
<div class="sidenav">
<EventTimeLine events={this.props.events}></EventTimeLine>
</div>
<div class="main">
<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} />
</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>
})}</tbody>
<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} />
</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>
})}
</tbody>
</Table>
</div>
</div>
</div>
)
}
}
class LazyEvent extends React.Component {
getHTMLContent(event){
class LazyEvent extends React.Component {
getHTMLContent(event) {
return getContent(event.content, 'html') ? convertImagesToThumbnails(getContent(event.content, 'html')) : convertImagesToThumbnails(getContent(event.content, 'plainText'));
}
render(){
}
render() {
var content = this.getHTMLContent(this.props.event);
if (content.indexOf("img") !== -1){
/** For performance only events with images are lazy loaded */
return <LazyLoad once>
<div dangerouslySetInnerHTML={{ __html : content}} />
</LazyLoad>;
if (content) {
if (content.indexOf("img") !== -1) {
/** For performance only events with images are lazy loaded */
return <LazyLoad once>
<div dangerouslySetInnerHTML={{ __html: content }} />
</LazyLoad>;
}
return <div dangerouslySetInnerHTML={{ __html: content }} />;
} else {
return <div style={{ fontStyle: 'italic', color: '#888888' }}> There is no content </div>
}
return <div dangerouslySetInnerHTML={{ __html : content}} />;
}
}
EventList.propTypes = {
/** the array of unsorted events as provided by the ICAT+ server */
events: PropTypes.array
events: PropTypes.array
}
export default EventList;
......@@ -18,7 +18,7 @@ import { clearAvailableTagAction } from '../../actions/logbook.js';
import OverlayBox from '../../components/Event/OverlayBox.js';
import EditEvent from '../../components/Event/EditEvent';
import NewOrEditEventPanel from '../../components/Event/NewOrEditEventPanel.js';
import "../../components/Event/event.css"
/**
......
......@@ -68,7 +68,7 @@ export function getOriginalEvent(event) {
let e = event;
if (e) {
while (e.previousVersionEvent) {
while (e.previousVersionEvent) {
e = e.previousVersionEvent;
}
return e;
......@@ -150,8 +150,11 @@ export function getLastCommentContent(event) {
* Images to thumbnails
*/
export function convertImagesToThumbnails(html) {
return html.replace(new RegExp('img src', 'g'), 'img style="height:200px;width:auto" src');
if (html){
return html.replace(new RegExp('img src', 'g'), 'img style="height:200px;width:auto" src');
}
};
/**
* Get the first letters of the event content.
* @param {array} content the event content
......
......@@ -14,12 +14,10 @@ const datasets = (state = initialState, action) => {
switch (action.type) {
case FECTH_DATASETS_BY_INVESTIGATION_PENDING:{
debugger
state = {...state, data: [], fetched: false, fetching: true};
break;
}
case FECTH_DATASETS_BY_INVESTIGATION_FULFILLED:{
debugger
state = {...state, data : action.payload.data.reverse(), fetched : true, fetching : false};
break;
}
......
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