Commit 08321c2b authored by Maxime Chaillet's avatar Maxime Chaillet

show event history via a popup. adjust the layout to mockup v6.

parent e724a532
......@@ -27,7 +27,8 @@ export function postEvents(newEvent, sessionId, investigationId, onSuccess) {
.then(function (response) {
console.log("the new event was posted successfully");
localStorage.removeItem('plainText');
localStorage.removeItem('formattedHTML');
localStorage.removeItem('HTMLText');
localStorage.removeItem('draftJSText');
onSuccess();
})
.catch(function (error) {
......@@ -39,7 +40,7 @@ export function putEvents(newEvent, sessionId, investigationId, onSuccess) {
axios({
method: 'put',
url: postEventsHTTPRequest(investigationId),
data: {event: newEvent},
data: { event: newEvent },
headers: {
sessionId: sessionId
}
......@@ -47,7 +48,8 @@ export function putEvents(newEvent, sessionId, investigationId, onSuccess) {
.then(function (response) {
console.log("the event was modified successfully");
localStorage.removeItem('plainText');
localStorage.removeItem('formattedHTML');
localStorage.removeItem('HTMLText');
localStorage.removeItem('draftJSText');
onSuccess();
})
.catch(function (error) {
......
......@@ -6,6 +6,7 @@ import PropTypes from 'prop-types'
import { eventCategoryIcon, getEventCreationDate, EXPANDED_VIEW_MODE, displayContent, getOriginalEvent } from './helper.js'
import EventProperty from './EventProperty.jsx'
import EventHeader from './EventHeader.jsx'
import { putEvents } from '../../actions/Event/index.js'
......@@ -17,36 +18,9 @@ class EditEvent extends React.Component {
constructor(props) {
super(props)
this.onSuccessfullyUpdated = this.onSuccessfullyUpdated.bind(this)
this.displayHeaderRightSide = this.displayHeaderRightSide.bind(this)
}
displayHeaderRightSide(isFullPage) {
if (isFullPage === false) {
return (<div class="pull-right">
Not tagged |
<Popup
trigger={<span style={{ paddingTop: '2px', marginLeft: '5px' }} ><Glyphicon glyph='fullscreen' style={{ marginLeft: '2px', marginRight: '2px' }} /> </span>}
modal
closeOnDocumentClick={false}
contentStyle={{ width: '90%', height: '90%' }}
>
{close => (
<div className="fullPage">
<a className="close" onClick={close}> &times; </a>
<div className="content">
<EditEvent event={this.props.event} isFullPage={true} close={close} />
</div>
<div className="actions">
</div>
</div>
)}
</Popup>
<span onClick={() => { this.props.toggleMode(EXPANDED_VIEW_MODE) }}> <Glyphicon glyph='remove-circle' /> </span>
</div>)
} else {
return (<div class="pull-right"> Not tagged </div>)
}
}
render() {
let originalEvent = getOriginalEvent(this.props.event);
......@@ -55,22 +29,9 @@ class EditEvent extends React.Component {
return (
<Panel bsStyle='primary' >
<Panel.Heading>
<Row>
<Col xs={1}>
{getEventCreationDate(originalEvent)}
</Col>
<Col xs={1}>
{eventCategoryIcon(originalEvent.category)}
</Col>
<Col xs={8}>
<b> {this.props.event.title || "User comment"} </b>
</Col>
<Col xs={2}>
{this.displayHeaderRightSide(this.props.isFullPage || false)}
</Col>
</Row>
</Panel.Heading>
<EventHeader event={this.props.event} mode={'edition'} isFullPage={this.props.isFullPage} toggleMode={this.props.toggleMode} />
<Panel.Body style={{ color: 'black' }}>
<FormControl
......
......@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import CollapsedEvent from './CollapsedEvent'
import ExpandedEvent from './ExpandedEvent'
import EventHistory from './EventHistory'
import EventHistory from './FullEventHistory'
import { COLLAPSED_MODE, EXPANDED_VIEW_MODE, EDITION_MODE, HISTORY_MODE } from './helper.js';
import EditEvent from './EditEvent';
......
import React from 'react'
import { Row, Col, Glyphicon, Panel } from 'react-bootstrap'
import Popup from 'reactjs-popup'
import PropTypes from 'prop-types'
import ExpandedEvent from './ExpandedEvent.jsx'
import EditEvent from './EditEvent.jsx'
import { getEventCreationDate, eventCategoryIcon, getOriginalEvent, getEventHistoryCreationDate, COLLAPSED_MODE, EXPANDED_VIEW_MODE } from './helper.js'
class EventHeader extends React.Component {
constructor(props) {
super(props)
this.displayHeaderRightSide = this.displayHeaderRightSide.bind(this);
this.showTags = this.showTags.bind(this);
}
/**
* Shows the tags an event has.
* @param {*} event the event under investigation
* @returns a span component show the tag icon followed by the tags.
*/
showTags(event) {
if (event.tag.length === 0)
return (
<span>
<Glyphicon glyph='tag' style={{ marginRight: '2px' }} />
<span class='text-italic'> No tags </span>
<span > &nbsp; &nbsp; </span>
</span>
)
}
/**
* display the content floating on the right side of the header
* @param {String} mode the event mode 'expanded', 'edition',
* @param {Boolean} isFullPage true when the vent is displayed full page.
* @param {Function} toggleMode the callback function used to change the event mode
*
*/
displayHeaderRightSide(mode, isFullPage, toggleMode) {
if (isFullPage === false) {
return (<span> |
<Popup
trigger={<span style={{ paddingTop: '2px', marginLeft: '5px', verticalAlign: 'middle' }} ><Glyphicon glyph='fullscreen' style={{ marginLeft: '2px', marginRight: '2px' }} /> </span>}
modal
closeOnDocumentClick={false}
contentStyle={{ width: '90%', height: '90%' }}
>
{close => (
<div className="fullPage">
<a className="close" onClick={close}> &times; </a>
<div className="content">
{mode === 'expanded' ? <ExpandedEvent event={this.props.event} isFullPage={true} /> : ""}
{mode === 'edition' ? <EditEvent event={this.props.event} isFullPage={true} close={close} /> : ""}
</div>
</div>
)}
</Popup>
{mode === 'edition' ? <span onClick={() => { toggleMode(EXPANDED_VIEW_MODE) }}> <Glyphicon glyph='remove-circle' /> </span> : ""}
<span > &nbsp; &nbsp; </span>
</span>)
}
}
render() {
let event = this.props.event
let originalEvent = getOriginalEvent(this.props.event)
if (this.props.mode === 'expanded') {
return (
<Panel.Heading>
<Row>
<Col xs={1}>
{getEventCreationDate(originalEvent)}
</Col>
<Col xs={1}>
{eventCategoryIcon(originalEvent.category)}
</Col>
<Col xs={8}>
<div style={{ cursor: 'pointer' }} onClick={() => { this.props.toggleMode(COLLAPSED_MODE) }}> <b> {event.title || "User comment"} </b> </div>
</Col>
<div class="pull-right">
{this.showTags(event)}
{this.displayHeaderRightSide('expanded', this.props.isFullPage || false)}
</div>
</Row>
</Panel.Heading>
)
} else if (this.props.mode === 'edition') {
return (<Panel.Heading>
<Row>
<Col xs={1}>
{getEventCreationDate(originalEvent)}
</Col>
<Col xs={1}>
{eventCategoryIcon(originalEvent.category)}
</Col>
<Col xs={8}>
<b> {this.props.event.title || "User comment"} </b>
</Col>
<div class="pull-right">
{this.showTags(this.props.event)}
{this.displayHeaderRightSide('edition', this.props.isFullPage || false, this.props.toggleMode)}
</div>
</Row>
</Panel.Heading>
)
} else if (this.props.mode === 'new') {
return (<Panel.Heading >
<b> New comment </b>
<div class="pull-right">
{this.showTags(this.props.event)}
{this.displayHeaderRightSide('new')}
</div>
</Panel.Heading>)
} else if (this.props.mode === 'previousVersion') {
return (<Panel.Heading >
<Row>
<div class="pull-right">
{this.showTags(this.props.event)}
</div>
<div> {eventCategoryIcon("previousVersion")}
&nbsp; On {getEventHistoryCreationDate(this.props.event)}, the comment was:
</div>
</Row>
</Panel.Heading>)
}
}
}
EventHeader.PropTypes = {
/** the event object as received from the ICAT+ server */
event: PropTypes.object.isRequired,
/** TRUE when the expended event is displayed in fullscreen. FALSE by default */
isFullPage: PropTypes.bool,
/* the mode indicating what needs to be displayed */
mode: PropTypes.string.isRequired,
/* the callback function used to change the event mode */
toggleMode: PropTypes.func,
}
export default EventHeader;
import React from 'react'
import { Row, Col, Panel, Glyphicon } from 'react-bootstrap'
import ExpandedEvent from "./ExpandedEvent"
import { displayContent, eventCategoryIcon, getEventHistoryCreationDate } from './helper.js'
import EventProperty from './EventProperty'
import Popup from 'reactjs-popup'
// import Moment from 'moment'
/*
* This class manage the complete history of a given event
*/
class EventHistory extends React.Component {
constructor(props) {
super(props);
this.getAllVersionsOfEvent = this.getAllVersionsOfEvent.bind(this);
}
// agofromNow(date) {
// let updatedOn = Moment(date); //a moment object
// let now = Moment();
// let daydeltaFromNow = now.diff(updatedOn, 'days');
// if (daydeltaFromNow <= 25) {
// return "Updated " + updatedOn.fromNow().toString();
// } else {
// return Moment(date).format("MMM DD, HH:mm").toString();
// }
// }
/**
* Get all the versions of an event for displaying purpose
* @param {event} event the event the history should be displayed
* @returns {array} an array containing all the available versions of the event. The latest version is at index 0.
* The higher the index, the older the event. Returns itself if an event does not have another version.
*/
getAllVersionsOfEvent(event) {
let e = event;
let eventHistoryItems = [];
/* first push the current event which is the latest version of the event*/
eventHistoryItems.push(<ExpandedEvent event={event} toggleMode={this.props.toggleMode} isHistoryDisplayed={true} />)
/* then display the previous version of this event */
while (e.previousVersionEvent != null) {
e = e.previousVersionEvent;
eventHistoryItems.push(<EventHistoryItem event={e} />)
}
return eventHistoryItems
}
render() {
return (
this.getAllVersionsOfEvent(this.props.event)
)
}
}
const EventHistoryItem = (props) => {
return (<div class='margin-bottom-10'>
<Row>
<Col xs={1}> </Col>
<Col xs={11}>
<Panel bsClass='expandedEventPanel'>
<Panel.Heading bsClass='expandedEventPanel'>
<Row>
<Col xs={8} style={{ paddingLeft: '12px' }}>
{eventCategoryIcon("previousVersion")}
<span> On {getEventHistoryCreationDate(props.event)}, the comment was: </span>
</Col>
<Col xs={2}>
<div class="pull-right">
{props.event.tag[0]}
</div>
</Col>
</Row>
</Panel.Heading>
<Panel.Body bsClass='eventPanel'>
<Row>
<Col xs={12}>
{displayContent(props.event.content, false)}
</Col>
</Row>
</Panel.Body>
<Panel.Footer>
<EventProperty propertyName='updateAuthorship' propertyValue={props.event.username} />
<div style={{ float: 'right' }}>
<Popup
trigger={<span style={{ backgroundColor: '#FFFFFF', paddingTop: '2px', marginLeft: '5px' }} ><Glyphicon glyph='fullscreen' style={{ marginLeft: '2px', marginRight: '2px' }} /> </span>}
modal
closeOnDocumentClick={false}
contentStyle={{ width: '90%', height: '90%' }}
>
{close => (
<div className="fullPage">
<a className="close" onClick={close}> &times; </a>
<div className="content">
<ExpandedEvent event={props.event} isFullPage={true} />
</div>
<div className="actions">
</div>
</div>
)}
</Popup>
</div>
</Panel.Footer>
</Panel>
</Col>
</Row>
</div>)
}
// let olderHistoryItems = this.state.sortedHistory.map(
// (item, index) => {
// let dateMsg = this.agofromNow(item.updatedOn);
// if (index > 0) {
// return (<EventHistoryItem expanded={true} item={item} type={this.props.event.type} paddingLeft={index * this.paddingStep} dateMsg={dateMsg}> </EventHistoryItem>)
// }
// }
// )
// return (
// <div className="grayBackground padding-top-10 padding-right-10 padding-left-10 padding-bottom-10">
// <EventHistoryItem
// expanded={true}
// type={this.props.event.type}
// dateMsg={this.agofromNow(this.state.sortedHistory[0].updatedOn)}
// item={this.state.sortedHistory[0]}
// quitHistoryButton={true}
// toggleHistory={this.props.toggleHistory}
// >
// </EventHistoryItem>
// {olderHistoryItems}
// </div >
// )
export default EventHistory
\ No newline at end of file
......@@ -22,6 +22,9 @@ class EventProperty extends React.Component {
if (propertyName === 'updateAuthorship') {
return <span className='padding-left-5' style={{ fontStyle: 'italic' }}> Updated by {propertyValue} </span>
}
if (propertyName === 'historyAuthorship'){
return <span className='padding-left-5' style={{ fontStyle: 'italic' }}> Commented by {propertyValue} </span>
}
}
......
This diff is collapsed.
import React from 'react'
import { Row, Col, Panel, Glyphicon } from 'react-bootstrap'
import ExpandedEvent from "./ExpandedEvent"
import { displayContent, eventCategoryIcon, getEventHistoryCreationDate } from './helper.js'
import EventProperty from './EventProperty'
import Popup from 'reactjs-popup'
import SingleEventHistory from './SingleEventHistory';
/*
* This class manage the complete history of a given event
*/
class FullEventHistory extends React.Component {
constructor(props) {
super(props);
this.getAllVersionsOfEvent = this.getAllVersionsOfEvent.bind(this);
}
/**
* Get all the versions of an event for displaying purpose
* @param {event} event the event the history should be displayed
* @returns {array} an array containing all the available versions of the event. The latest version is at index 0.
* The higher the index, the older the event. Returns itself if an event does not have another version.
*/
getAllVersionsOfEvent(event) {
let e = event;
let eventHistoryItems = [];
/* first push the current event which is the latest version of the event*/
eventHistoryItems.push(<ExpandedEvent event={event} isFullPage={true} />)
/* then display the previous version of this event */
while (e.previousVersionEvent != null) {
e = e.previousVersionEvent;
eventHistoryItems.push(<EventHistoryItem event={e} />)
}
return eventHistoryItems
}
render() {
return (
this.getAllVersionsOfEvent(this.props.event)
)
}
}
const EventHistoryItem = (props) => {
return (<div class='margin-bottom-10'>
<Row>
<Col xs={1}> </Col>
<Col xs={11}>
<SingleEventHistory event={props.event} />
</Col>
</Row>
</div>)
}
export default FullEventHistory
\ No newline at end of file
......@@ -116,6 +116,9 @@ class List extends React.Component {
}
cancelNewEventClicked() {
localStorage.removeItem('plainText');
localStorage.removeItem('HTMLText');
localStorage.removeItem('draftJSText');
this.setState({ isShowingNewEvent: false })
}
......
......@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
import MyEditor from './Editor/MyEditor.jsx';
import { postEvents } from '../../actions/Event/index.js'
import EventHeader from './EventHeader';
class NewEvent extends React.Component {
......@@ -16,7 +17,6 @@ class NewEvent extends React.Component {
}
this.changeStateToUploaded = this.changeStateToUploaded.bind(this)
this.displayHeaderRightSide = this.displayHeaderRightSide.bind(this)
}
postEvents = () => {
......@@ -53,13 +53,6 @@ class NewEvent extends React.Component {
this.setState({ progress: "uploaded" })
}
displayHeaderRightSide() {
return (<div class="pull-right">
Not tagged |
<span onClick={this.props.cancelNewEventClicked}> <Glyphicon glyph='remove-circle' /> </span>
</div>)
}
render() {
let investigationId = this.props.investigationId;
let expanded = this.props.expanded;
......@@ -72,7 +65,10 @@ class NewEvent extends React.Component {
<Panel bsStyle='primary' >
<Panel.Heading >
<b> New comment </b>
{this.displayHeaderRightSide()}
<div class="pull-right">
Not tagged |
<span onClick={this.props.cancelNewEventClicked}> <Glyphicon glyph='remove-circle' /> </span>
</div>
</Panel.Heading>
<Panel.Body>
<div style={{
......
import React from 'react'
import { Row, Col, Panel, Glyphicon } from 'react-bootstrap'
import ExpandedEvent from "./ExpandedEvent"
import { displayContent, eventCategoryIcon, getEventHistoryCreationDate } from './helper.js'
import EventProperty from './EventProperty'
import Popup from 'reactjs-popup'
import EventHeader from './EventHeader'
// import Moment from 'moment'
/*
* This class manage the complete history of a given event
*/
class SingleEventHistory extends React.Component {
constructor(props) {
super(props);
}
render() {
let event = this.props.event;
return (
<div class='margin-bottom-10'>
<Panel>
<EventHeader event={event} mode='previousVersion'/>
<Panel.Body>
<Row>
<Col xs={12}>
{displayContent(event.content, false)}
</Col>
</Row>
</Panel.Body>
<Panel.Footer>
<EventProperty propertyName='historyAuthorship' propertyValue={event.username} />
</Panel.Footer>
</Panel>
</div>)
}
}
export default SingleEventHistory
\ No newline at end of file
......@@ -21,7 +21,7 @@ export function eventCategoryIcon(category) {
} else if (category === 'commandLine') {
return (<div className=' glyphicon glyphicon-expand padding-top-10' style={{ fontSize: '40px' }}> </div>)
} else if (category === 'error') {
return (<div className=' glyphicon glyphicon-alert padding-top-10' style={{ fontSize: '40px' }}> </div>)
return (<img src='/error.png' width='25px' alt='error.png' />)
} else if (category === 'file') {
return (<div className=' glyphicon glyphicon-file padding-top-10' style={{ fontSize: '40px' }}> </div>)
} else if (category === 'previousVersion') {
......@@ -60,7 +60,7 @@ export function getOriginalEvent(event) {
}
/**
* Get the number of preveious version an given event has.
* Get the number of previous version an given event has.
* @param {event} event the event which is investigated
* @returns {number} the number of previous event version which exists
*/
......
......@@ -152,6 +152,10 @@ body {
font-size: 12px;
}
.text-italic {
font-style: italic;
}
/* text related classes */
.editionModeTop {
......@@ -170,26 +174,27 @@ body {
text-align: center;
}
/* Badges */
/* blue, medium (=normal) size */
.ourBadges-m {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #007bff;
border-radius: 10px;
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #007bff;
border-radius: 10px;
}
/* blue, small size */
.ourBadges-s {
display: inline-block;
min-width: 10px;
......@@ -205,10 +210,8 @@ body {
border-radius: 10px;
}
/* END badges */
/* unsorted */
/*ensures that header is below gray div in full screen mode*/
......@@ -356,6 +359,7 @@ div.collapsedEventPanel-heading:hover {
.fullPage {
font-size: 12px;
height: 100%;
overflow: auto;
}
.fullPage>.header {
......@@ -393,4 +397,22 @@ div.collapsedEventPanel-heading:hover {
border: 1px solid #cfcece;
}
/* END handle popup displayed in fullpage */
\ No newline at end of file
/* END handle popup displayed in fullpage */
.arrow-down {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #777777;
display: inline-block;
}
#mypopover {
left: 50px !important;
max-width: 500px;
}
#mypopover .arrow {
left: 10% !important;
}
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