Commit ed468033 authored by Maxime Chaillet's avatar Maxime Chaillet

Create an overlayBox component displaying a new event.

parent d2931edc
......@@ -10,6 +10,7 @@ import HTMLEditor from './HTMLEditor'
import EventHeader from './EventHeader'
import EventFooter from './EventFooter'
import { NEW_EVENT_INVISIBLE, ANNOTATION, NEW_EVENT_CONTEXT, EVENT_CATEGORY_COMMENT } from '../../constants/EventTypes';
import OverlayBox from './OverlayBox';
/* the possible status of the component */
const IDLE_STATUS = "idle";
......@@ -24,12 +25,6 @@ class NewEvent extends React.Component {
hasText: false,
status: IDLE_STATUS,
}
this.changeStateToUploaded = this.changeStateToUploaded.bind(this);
this.createEvent = this.createEvent.bind(this);
this.canEnableSaveButton = this.canEnableSaveButton.bind(this);
this.onCancelNewEventClicked = this.onCancelNewEventClicked.bind(this);
this.setTagContainer = this.setTagContainer.bind(this);
}
render() {
......@@ -41,7 +36,12 @@ class NewEvent extends React.Component {
return null;
} else {
return (
<Collapse in={isVisible}>
<OverlayBox open={isVisible} classNames={{ overlay: 'newEventOverlayClass', modal: 'newEventModalClass' }}>
<Panel bsStyle='primary' >
<EventHeader context={NEW_EVENT_CONTEXT} />
......@@ -97,17 +97,18 @@ class NewEvent extends React.Component {
</div>
</div >
</Panel>
</Collapse>
</OverlayBox>
)
}
}
changeStateToUploaded() {
changeStateToUploaded = () => {
this.setState({ status: UPLOADED_STATUS })
}
/** Fuction triggered when the user clicks the 'cancel' button */
onCancelNewEventClicked() {
onCancelNewEventClicked = () => {
localStorage.removeItem('plainText');
localStorage.removeItem('HTMLText');
this.props.setNewEventVisibility(NEW_EVENT_INVISIBLE);
......@@ -117,7 +118,7 @@ class NewEvent extends React.Component {
* Callback method called when the editor content changed from empty to not empty and vice versa.
* @param {*} change the object representing the change
*/
canEnableSaveButton(change) {
canEnableSaveButton = (change) => {
if (change) {
if ("hasText" in change) {
this.setState({ hasText: change.hasText })
......@@ -129,7 +130,7 @@ class NewEvent extends React.Component {
/**
* Create the new event
*/
createEvent() {
createEvent = () => {
let investigationId = this.props.investigationId;
let currentTagIds = this.tagContainer.state.selectedTags.map((tag) => tag._id);
......@@ -156,7 +157,7 @@ class NewEvent extends React.Component {
this.props.createEvent(newEvent, this.props.user.sessionId, this.props.investigationId, this.changeStateToUploaded)
}
setTagContainer(element) {
setTagContainer = (element) => {
this.tagContainer = element
}
}
......
//React components
import React from 'react'
import PropTypes from 'prop-types';
import { Grid, Row, Col, FormControl, Panel, Collapse, Label, InputGroup } from "react-bootstrap"
import TagContainer from '../../containers/TagContainer'
import HTMLEditor from './HTMLEditor'
import EventHeader from './EventHeader'
import EventFooter from './EventFooter'
import { NEW_EVENT_INVISIBLE, ANNOTATION, NEW_EVENT_CONTEXT, EVENT_CATEGORY_COMMENT } from '../../constants/EventTypes';
/* the possible status of the component */
const IDLE_STATUS = "idle";
//const UPLOADING_STATUS = "uploading"; // the data was successfully uploaded to the server
const UPLOADED_STATUS = "uploaded"; // the data is being uploaded
/* The class represents a new event which is being created */
class NewEvent extends React.Component {
constructor(props) {
super(props)
this.state = {
hasText: false,
status: IDLE_STATUS,
}
this.changeStateToUploaded = this.changeStateToUploaded.bind(this);
this.createEvent = this.createEvent.bind(this);
this.canEnableSaveButton = this.canEnableSaveButton.bind(this);
this.onCancelNewEventClicked = this.onCancelNewEventClicked.bind(this);
this.setTagContainer = this.setTagContainer.bind(this);
}
render() {
const { investigationId, isVisible, user, onNewEventUploaded } = this.props;
if (this.state.status === UPLOADED_STATUS) {
this.setState({ status: IDLE_STATUS });
onNewEventUploaded()
return null;
} else {
return (
<Collapse in={isVisible}>
<Panel bsStyle='primary' >
<EventHeader context={NEW_EVENT_CONTEXT} />
< div id="newEventBox" style={{ display: 'flex' }} >
{/* the left panel */}
< div style={{ flexGrow: '0', maxWidth: '155px' }}>
<div style={{ paddingLeft: '5px' }} >
<div style={{ height: '50px' }} />
<a href={"/investigation/" + this.props.investigationId + "/events/tagManager"} target="_blank" style={{ float: 'right', paddingRight: '10px' }}> manage </a>
<Label> Tags </Label>
<div style={{ paddingTop: '5px', marginRight: '10px' }}>
<TagContainer
canEnableSaveButton={this.canEnableSaveButton}
context={NEW_EVENT_CONTEXT}
investigationId={this.props.investigationId}
setTagContainer={this.setTagContainer}
/>
</div>
</div>
</div >
<div
style={{ flexGrow: '1' }}>
<div>
<HTMLEditor
user={user}
investigationId={investigationId}
isEditionMode={true}
canEnableSaveButton={this.canEnableSaveButton} />
<div style={{ paddingTop: '8px' }}>
<InputGroup>
<InputGroup.Addon style={{ backgroundColor: 'transparent', border: 'none' }}> <Label> Title </Label> </InputGroup.Addon>
<FormControl
type="text"
value={this.state.inputTitleValue}
onChange={this.onChangeInputValue}
placeholder="Optional title here"
inputRef={(FormControl) => this.inputTitle = FormControl} />
</InputGroup>
</div>
</div>
<EventFooter
isSaveButtonEnabled={this.state.hasText}
onCancelButtonClicked={this.onCancelNewEventClicked}
onSaveButtonClicked={this.createEvent} />
</div>
</div >
</Panel>
</Collapse>
)
}
}
changeStateToUploaded() {
this.setState({ status: UPLOADED_STATUS })
}
/** Fuction triggered when the user clicks the 'cancel' button */
onCancelNewEventClicked() {
localStorage.removeItem('plainText');
localStorage.removeItem('HTMLText');
this.props.setNewEventVisibility(NEW_EVENT_INVISIBLE);
}
/**
* Callback method called when the editor content changed from empty to not empty and vice versa.
* @param {*} change the object representing the change
*/
canEnableSaveButton(change) {
if (change) {
if ("hasText" in change) {
this.setState({ hasText: change.hasText })
}
}
}
/**
* Create the new event
*/
createEvent() {
let investigationId = this.props.investigationId;
let currentTagIds = this.tagContainer.state.selectedTags.map((tag) => tag._id);
let newEvent = {
category: EVENT_CATEGORY_COMMENT,
content: [
{
format: "plainText",
text: localStorage.getItem('plainText')
},
{
format: "html",
text: localStorage.getItem('HTMLText')
}
],
creationDate: Date(),
investigationId: investigationId,
title: this.inputTitle.value,
tag: currentTagIds,
type: ANNOTATION,
username: this.props.user.username,
}
this.props.createEvent(newEvent, this.props.user.sessionId, this.props.investigationId, this.changeStateToUploaded)
}
setTagContainer(element) {
this.tagContainer = element
}
}
NewEvent.propTypes = {
/** the investigationId indicating what investigation the new event will belong to*/
investigationId: PropTypes.string.isRequired,
/** whether this component is visible (ie panel is expanded) or not */
isVisible: PropTypes.bool.isRequired,
/** Callback function to reload events from the server */
reloadEvents: PropTypes.func,
// /** the callback function to change the visibility of this component */
setNewEventVisibility: PropTypes.func.isRequired,
/** the user who is currently logged in */
user: PropTypes.object.isRequired,
}
export default NewEvent;
\ No newline at end of file
import React from 'react';
import Modal from 'react-responsive-modal';
import PropTypes from 'prop-types';
import Loading from '../Loading';
/**
* React component used to render a box overlayed on top of the page
*/
class OverlayBox extends React.Component {
constructor(props) {
super(props);
this.state = {
isChildComponentVisible: false
};
}
render() {
return (<Modal
classNames={this.props.classNames}
onEntered={this.onEntered}
open={this.props.open}
blockScroll={false}
>
{this.state.isChildComponentVisible === true ? this.props.children : <Loading />}
</Modal>);
}
/** Callback triggered when the overlay box is opened. */
onEntered = () => {
/** this is a trick to circonvent a bug with tinymce in modals. the modal needs to be displayed first and tinymce shwn afterwards otherwise a bug occurs in tinymce. */
let timer = setTimeout(() => { this.setState({ isChildComponentVisible: true }) }, 500);
}
}
OverlayBox.proptypes = {
/** css classes used by the overlay box */
classNames: PropTypes.object,
/** when set to true the OverlayBox is opened. */
open: PropTypes.bool,
}
export default OverlayBox;
\ No newline at end of file
......@@ -288,3 +288,32 @@ div.collapsedEventPanel-heading:hover {
}
/* END Logbook menu related */
.newEventOverlayClass {
background-color: transparent;
top: unset;
bottom: 80px;
height: 500px;
width: 850px;
left:unset;
}
.newEventModalClass {
max-width: unset;
margin: unset;
}
.myOverlayClass2 {
background-color: transparent;
top: unset;
bottom: 570px;
height: 500px;
width: 850px;
left:unset;
}
.myModalClass2 {
max-width: unset;
margin: unset;
}
\ No newline at end of file
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