Commit 684452e3 authored by Maxime Chaillet's avatar Maxime Chaillet

edit event in a modal.

parent 9da58bfd
......@@ -4,7 +4,7 @@ import { getOriginalEvent, getEventIcon, getLastCommentContent, getEventCreation
import EventContentDisplayer from './EventContentDisplayer';
import { ANNOTATION, NOTIFICATION, EDIT_MODE, DOC_VIEW, BASIC_EVENT_CONTEXT } from '../../constants/EventTypes';
import { OverlayTrigger, Tooltip, Dropdown, MenuItem } from 'react-bootstrap';
import { OverlayTrigger, Tooltip, Dropdown, MenuItem, Button } from 'react-bootstrap';
import TagContainer from '../../containers/TagContainer';
require('./event.css');
......@@ -41,8 +41,8 @@ class BasicEvent extends React.Component {
return (
<div
id='contentDocList'
onDoubleClick={() => { toggleMode(EDIT_MODE); }}
style={{ display: 'flex' }} >
<Button onClick={() => { this.props.onEventClicked(event); }} />
<div
id={(this.props.isSelected === true) ? 'selectedEvent' : ''}
style={{ flexGrow: '0', flexShrink: '0' }}
......
This diff is collapsed.
import React from 'react';
import { READ_MODE, EDIT_MODE, ANNOTATION, NOTIFICATION } from '../../constants/EventTypes';
import BasicEvent from './BasicEvent';
import DetailedEvent from './DetailedEvent';
import EditEvent from './EditEvent';
import PropTypes from 'prop-types'
/**
......@@ -26,20 +26,21 @@ class Event extends React.Component {
event={event}
investigationId={investigationId}
isSelected={this.props.isSelected}
onEventClicked={this.props.onEventClicked}
toggleMode={this.toggleMode}
user={user}
reverseEventsSortingByCreationDate={this.props.reverseEventsSortingByCreationDate}
view={view}
/>
} else if (this.state.mode === EDIT_MODE)
return <DetailedEvent
event={event}
investigationId={investigationId}
onEventUpdated={onEventUpdated}
toggleMode={this.toggleMode}
user={user}
updateEvent={this.props.updateEvent}
/>
} else if (this.state.mode === EDIT_MODE){}
// return <DetailedEvent
// event={event}
// investigationId={investigationId}
// onEventUpdated={onEventUpdated}
// toggleMode={this.toggleMode}
// user={user}
// updateEvent={this.props.updateEvent}
// />
} else {
console.log("[ERROR] the view is not set. This should not happen.");
return null;
......
......@@ -50,6 +50,7 @@ class EventList extends React.Component {
events,
investigationId,
onEventUpdated,
onEventClicked,
reverseEventsSortingByCreationDate,
selectedEventId,
user,
......@@ -83,10 +84,12 @@ class EventList extends React.Component {
investigationId={investigationId}
isSelected={event._id && event._id === selectedEventId}
onEventUpdated={onEventUpdated}
onEventClicked={onEventClicked}
reverseEventsSortingByCreationDate={reverseEventsSortingByCreationDate}
user={user}
updateEvent={updateEvent}
view={view}
/>
</div>)
}
......
......@@ -295,7 +295,7 @@ div.collapsedEventPanel-heading:hover {
background-color: transparent;
top: unset;
bottom: 60px;
height: 428px;
height: 429px;
width: 850px;
left: unset;
padding-right: 0px;
......@@ -308,7 +308,7 @@ div.collapsedEventPanel-heading:hover {
height: 100%;
padding: unset;
}
.myOverlayClass2 {
.editEventOverlayClass {
background-color: transparent;
top: unset;
bottom: 570px;
......@@ -316,7 +316,7 @@ div.collapsedEventPanel-heading:hover {
width: 850px;
left: unset;
}
.myModalClass2 {
.editEventModalClass {
max-width: unset;
margin: unset;
}
......
......@@ -25,7 +25,7 @@ export function GUI_CONFIG() {
},
/** Panel maximum height during logbook event creation */
NEW_EVENT_MAX_HEIGHT: "500px",
NEW_EVENT_MAX_HEIGHT: "250px",
/* Default tag color used in the logbook when tag color is not set */
DEFAULT_TAG_COLOR: "#a6bded"
......
......@@ -16,6 +16,8 @@ import UserMessage from '../../components/UserMessage.js';
import { getSelectionFiltersBySearchCriteria, getSelectionFiltersForMongoQuery } from './SelectionFilterHelper.js';
import { clearAvailableTagAction } from '../../actions/logbook.js';
import OverlayBox from '../../components/Event/OverlayBox.js';
import EditEvent from '../../components/Event/EditEvent';
/**
* This class represents the event container component. It's role is to retrieve events from the server asynchronuously.
......@@ -32,6 +34,7 @@ class EventContainer extends React.Component {
errorMessage: '',
eventReceptionStatus: 'idle', //idle, fetched, countFetched, allFetched; Used to handle asynchronous data retrieval from the server
eventCountReceptionStatus: 'idle', //idle, fetched, countFetched, allFetched; Used to handle asynchronous data retrieval from the server
eventBeingEdited: null,
isNewEventVisible: false,
pageEvents: [], // events currently displayed on the page
selectedEventId: 0,
......@@ -98,6 +101,17 @@ class EventContainer extends React.Component {
/>
</OverlayBox>
<OverlayBox open={this.state.eventBeingEdited ? true : false} classNames={{ overlay: 'editEventOverlayClass', modal: 'editEventModalClass' }}>
<EditEvent
event={this.state.eventBeingEdited}
investigationId={investigationId}
onEventUpdated={this.onEventUpdated}
toggleMode={this.toggleMode}
user={user}
updateEvent={this.updateEvent} />
</OverlayBox>
{(!isDataFetched(this)) ?
<Loading message='Loading logbook'></Loading>
: <div>
......@@ -110,6 +124,7 @@ class EventContainer extends React.Component {
events={this.state.pageEvents}
investigationId={investigationId}
onEventUpdated={this.onEventUpdated}
onEventClicked={this.onEventClicked}
reloadEvents={this.downloadEvents}
reverseEventsSortingByCreationDate={this.reverseEventsSortingByCreationDate}
selectedEventId={this.state.selectedEventId}
......@@ -133,6 +148,9 @@ class EventContainer extends React.Component {
}
}
onEventClicked = (event) => {
this.setState({ eventBeingEdited: event });
}
/**
* Executed the first time the component is mounted
*/
......
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