ES6 Plato on Github
Report Home
Summary Display
components/Event/EventList.js
Maintainability
69.07
Lines of code
195
Difficulty
30.03
Estimated Errors
1.20
Function weight
By Complexity
By SLOC
import { DOC_VIEW } from '../../constants/EventTypes'; import React from 'react' import ReactDOM from 'react-dom' import { Grid, Row, OverlayTrigger, Tooltip } from 'react-bootstrap' import PropTypes from 'prop-types' import _ from 'lodash' import Moment from 'moment' import { getOriginalEvent } from '../../helpers/EventHelpers' import Event from './Event'; import UserMessage from '../UserMessage'; import { INFO_MESSAGE_TYPE } from '../../constants/UserMessages'; require("./event.css"); const VERTICAL_BAR_EXTRA_LENGTH_ON_TOP = 10; const VERTICAL_BAR_EXTRA_LENGTH_ON_BOTTOM = 15; const VERTICAL_BAR_LENGTH_UNIT = 'px'; /** * The list of the all events */ class EventList extends React.Component { constructor(props) { super(props) this.state = { verticalBarLength: '0px', events: this.props.events, // the displayed (ie filtered) event list. The original list is in this.props.eventList } this.adjustVerticalBarLength = this.adjustVerticalBarLength.bind(this); // this.onEventUpdated = this.onEventUpdated.bind(this); } /** * Executed after all the events have been properly displayed */ componentDidMount() { this.adjustVerticalBarLength(); } componentDidUpdate() { this.adjustVerticalBarLength(); } render() { const { events, investigationId, onEventUpdated, reverseEventsSortingByCreationDate, selectedEventId, user, updateEvent, view, } = this.props; /** * Get existing events grouped by date * */ function getGroupedEvents() { //Groups events by day. For each group (=each day), events are still sorted from the youngest to the oldest //groupedSortedEvents is an object : { "Aug 3":{ [{json event1}, {json event2}] }, "Aug 1":{ [{json event3}] } } let groupedSortedEvents = _.groupBy(events, function (o) { return Moment(getOriginalEvent(o).creationDate).format("MMMM D, YYYY"); }); // Iterates over each of the properties of the groupedSortedEvents object and create an array containing React components let eventsAndDates = []; let dateKey = 0; for (var propertyName in groupedSortedEvents) { eventsAndDates.push( <div key={dateKey}> <TimeAxisMarks userView={view} value={propertyName} /> {groupedSortedEvents[propertyName].map( (event, eventKey) => { return (<div key={eventKey}> <Event event={event} investigationId={investigationId} isSelected={event._id && event._id === selectedEventId} onEventUpdated={onEventUpdated} reverseEventsSortingByCreationDate={reverseEventsSortingByCreationDate} user={user} updateEvent={updateEvent} view={view} /> </div>) } )} </div> ) dateKey += 1; } return eventsAndDates; } let verticalBarLengthOntop = VERTICAL_BAR_EXTRA_LENGTH_ON_TOP + VERTICAL_BAR_LENGTH_UNIT; if (!events || events.length === 0) { return ( <Grid fluid={true} ref={(element) => { this.grid = element }} > <Row style={{ marginLeft: '30px', marginRight: '30px', marginTop: '20px' }}> <UserMessage message="The logbook is currently empty." isTextCentered={true} type={INFO_MESSAGE_TYPE} /> </Row> </Grid > ) } return ( <Grid fluid={true} ref={(element) => { this.grid = element }} > <Row style={{ height: verticalBarLengthOntop }}> <div ref={(element) => this.verticalBar = element} style={{ /* this is the vertical line */ content: '', position: 'relative', height: this.state.verticalBarLength, width: '2px', background: '#CCCCCC', zIndex: '1', marginLeft: '120px', }} /> </Row> {getGroupedEvents()} </Grid > ) } /** * Determine the grid height and deduce the vertical bar height. */ adjustVerticalBarLength() { var node = ReactDOM.findDOMNode(this.grid); if (node) { let gridLength = node.clientHeight; let barLengthValue = gridLength + VERTICAL_BAR_EXTRA_LENGTH_ON_BOTTOM; let barLength = barLengthValue + VERTICAL_BAR_LENGTH_UNIT; if (barLength !== this.state.verticalBarLength) { this.setState({ verticalBarLength: barLength }); } } } } const TimeAxisMarks = (props) => { let userView = props.userView; // the view the user has choosen 'doc' or 'monitoring' if (userView === DOC_VIEW) { /* to be removed */ return (<div style={{ marginTop: '10px', marginBottom: '10px' }}> <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip"> <p> Events created on {props.value} </p> </Tooltip>}> <span style={{ color: '#999999', marginLeft: '10px', fontStyle: 'italic', fontSize: '16px' }}> <strong> {Moment(props.value).format("MMM D")} </strong> </span> </OverlayTrigger> </div>) } else { // used in 'monitoring view' return (<div style={{ marginTop: '10px', marginBottom: '10px' }}> <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip"> <p> Events created on {props.value} </p> </Tooltip>}> <span style={{ color: '#999999', marginLeft: '0px', fontStyle: 'italic', fontSize: '16px' }}> <strong> {Moment(props.value).format("MMM D")} </strong> </span> </OverlayTrigger> </div> ) } } EventList.propTypes = { /** the array of unsorted events as provided by the ICAT+ server */ events: PropTypes.array, /** the investigationId the provided events belong to. */ investigationId: PropTypes.string.isRequired, /* Callback function triggered when the user updated an event */ onEventUpdated: PropTypes.func, /** the callback functon which refresh the event list */ reloadEvents: PropTypes.func.isRequired, /** callback function which reverse the sorting of events by date */ reverseEventsSortingByCreationDate: PropTypes.func.isRequired, /** the user who is currently logged in */ user: PropTypes.object.isRequired, /* the selected view to display the events in*/ view: PropTypes.string.isRequired, } export default EventList;