Commit 670cc5f0 authored by Maxime Chaillet's avatar Maxime Chaillet

Clean the code. Use a glyphicon to manage tags.

parent 07a55694
import React from 'react';
import { Row, Col, OverlayTrigger, Tooltip, Popover, Button, Well, Label, FormControl, InputGroup } from 'react-bootstrap';
import { Row, Col, OverlayTrigger, Tooltip, Popover, Button, Well, Label, FormControl, InputGroup, Glyphicon } from 'react-bootstrap';
import { getEventCreationDate, getEventHistoryCreationDate, getOriginalEvent, getPreviousVersionNumber, getEventIcon } from '../../helpers/EventHelpers';
import EventFooter from './EventFooter';
import { ANNOTATION, NOTIFICATION, READ_MODE } from '../../constants/EventTypes';
import { ANNOTATION, NOTIFICATION, READ_MODE, DETAILED_EVENT_CONTEXT } from '../../constants/EventTypes';
import PropTypes from 'prop-types';
import EventContentDisplayer from './EventContentDisplayer';
import Popup from 'reactjs-popup'
......@@ -50,11 +50,22 @@ class DetailedEvent extends React.Component {
<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>
<OverlayTrigger
placement="top"
overlay={<Tooltip id="tooltip"> <p> Manage tags </p> </Tooltip>}>
<a href={"/investigation/" + this.props.investigationId + "/events/tagManager"}
target="_blank"
style={{ float: 'right', paddingRight: '10px', color: '#777', marginTop: '2px' }}>
<Glyphicon glyph="cog" />
</a>
</OverlayTrigger>
<Label> Tags </Label>
<div style={{ paddingTop: '5px', marginRight: '10px' }}>
<TagContainer
canEnableSaveButton={this.canEnableSaveButton}
context={DETAILED_EVENT_CONTEXT}
event={event}
investigationId={this.props.investigationId}
setTagContainer={this.setTagContainer}
......@@ -165,7 +176,7 @@ class DetailedEvent extends React.Component {
/**
* Callback function triggered when the user click the cancel button
* @param {*} e the browser's event
*/
*/
onCancelButtonClicked(e) {
e.stopPropagation();
this.props.toggleMode(READ_MODE);
......@@ -174,9 +185,9 @@ class DetailedEvent extends React.Component {
/**
* Callback function called when the text of the editor changed from empty to something or vice versa
* @param {object} change an object containing the properties:
* -1- hasText boolean which indicates whether the editor content has text or not; not null
* -2- currentTextEqualsOriginal, boolean, which indicates whether the current content is the same as the original content; not null
*/
* -1- hasText boolean which indicates whether the editor content has text or not; not null
* -2- currentTextEqualsOriginal, boolean, which indicates whether the current content is the same as the original content; not null
*/
canEnableSaveButton(change) {
let hasEventTitleChangedFromItsOriginalValue =
this.inputTitle &&
......@@ -269,7 +280,7 @@ DetailedEvent.propTypes = {
/**
* Render the popup which displays all event versions of the event
* @param {*} event the event under investigation
*/
*/
function eventVersionsPopover(event) {
let e = event;
......@@ -338,7 +349,7 @@ function eventVersionsPopover(event) {
/**
* React component which represents the content of an annotation
* @param {*} props the props passed to this component
*/
*/
class AnnotationContent extends React.Component {
constructor(props) {
super(props);
......@@ -406,7 +417,7 @@ AnnotationContent.propTypes = {
/**
* React component which represents the content of an notification
* @param {*} props the props passed to this component
*/
*/
const NotificationContent = (props) => {
let { event, investigationId, user } = props;
......@@ -466,7 +477,7 @@ NotificationContent.propTypes = {
/**
* React component which represents the commentBy part.
* @param {*} props
*/
*/
const CommentBy = (props) => {
let { event } = props;
if (getPreviousVersionNumber(event) === 0) {
......@@ -497,7 +508,7 @@ const CommentBy = (props) => {
/**
* React component which represents on item of the event history
* @param {*} props the props passed to this component
*/
*/
class EventVersionItem extends React.Component {
render() {
......
......@@ -12,7 +12,6 @@ import { NEW_EVENT_CONTEXT, EVENT_HISTORY_ORIGINAL_VERSION_CONTEXT, EVENT_HISTOR
class EventHeader extends React.Component {
constructor(props) {
super(props)
this.showTags = this.showTags.bind(this);
}
render() {
......@@ -59,41 +58,9 @@ class EventHeader extends React.Component {
// happens when a new event is created
return (<Panel.Heading >
<b> New comment </b>
<div className="pull-right">
{this.showTags()}
</div>
</Panel.Heading>)
}
}
/**
* 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) {
function showNoTags() {
return (
<span>
<Glyphicon glyph='tag' style={{ marginRight: '2px' }} />
<span className='text-italic'> No tags </span>
<span > &nbsp; &nbsp; </span>
</span>
)
}
if (event) {
if (event.tag.length === 0) {
return showNoTags();
} else {
/* to be written*/
}
} else {
return showNoTags();
}
}
}
EventHeader.propTypes = {
......
......@@ -2,12 +2,14 @@
//React components
import React from 'react'
import PropTypes from 'prop-types';
import { Grid, Row, Col, FormControl, Panel, Collapse } from "react-bootstrap"
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 } from '../../constants/EventTypes';
import { NEW_EVENT_INVISIBLE, ANNOTATION, NEW_EVENT_CONTEXT, EVENT_CATEGORY_COMMENT } from '../../constants/EventTypes';
/* the possible status of the component */
const IDLE_STATUS = "idle";
......@@ -19,14 +21,15 @@ class NewEvent extends React.Component {
constructor(props) {
super(props)
this.state = {
hasText: false,
status: IDLE_STATUS,
hasText: false
}
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,38 +44,58 @@ class NewEvent extends React.Component {
<Collapse in={isVisible}>
<Panel bsStyle='primary' >
<EventHeader context={NEW_EVENT_CONTEXT} />
<Panel.Body>
<div style={{
padding: "10px",
backgroundColor: "#ffffff",
}}>
<Grid fluid={true} >
<Row>
<Col>
< 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"
placeholder="Write a title here (optional)"
value={this.state.inputTitleValue}
onChange={this.onChangeInputValue}
placeholder="Optional title here"
inputRef={(FormControl) => this.inputTitle = FormControl} />
<br />
</Col>
</Row>
<Row style={{ height: '55%' }}>
<Col style={{ height: '100%' }}>
<HTMLEditor
user={user}
investigationId={investigationId}
isEditionMode={true}
canEnableSaveButton={this.canEnableSaveButton} />
</Col>
</Row>
</Grid>
</InputGroup>
</div>
</div>
<EventFooter
isSaveButtonEnabled={this.state.hasText}
onCancelButtonClicked={this.onCancelNewEventClicked}
onSaveButtonClicked={this.createEvent} />
</div>
</Panel.Body>
<EventFooter
isSaveButtonEnabled={this.state.hasText}
onCancelButtonClicked={this.onCancelNewEventClicked}
onSaveButtonClicked={this.createEvent} />
</div >
</Panel>
</Collapse>
)
......@@ -102,18 +125,16 @@ class NewEvent extends React.Component {
}
}
/**
* Create the new event
*/
createEvent() {
let investigationId = this.props.investigationId;
let currentTagIds = this.tagContainer.state.selectedTags.map((tag) => tag._id);
let newEvent = {
investigationId: investigationId,
creationDate: Date(),
type: ANNOTATION,
category: 'comment',
title: this.inputTitle.value,
username: this.props.user.username,
category: EVENT_CATEGORY_COMMENT,
content: [
{
format: "plainText",
......@@ -123,11 +144,21 @@ class NewEvent extends React.Component {
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
}
}
......
......@@ -225,6 +225,13 @@ div.collapsedEventPanel-heading:hover {
margin-bottom: 10px;
}
#newEventBox {
position: relative;
padding-bottom: 3px;
padding-left: 7px;
background-color: #F9F9F9;
}
#editionBox:hover {
background-color: #F5F5F5;
}
......
import React from 'react'
import PropTypes from 'prop-types';
import { Grid, Row, Col, FormControl, Label, Popover, OverlayTrigger, Button } from "react-bootstrap"
import { EDIT_EVENT_CONTEXT, TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT } from '../../constants/EventTypes';
import { Grid, Row, Col } from "react-bootstrap"
import { TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, DETAILED_EVENT_CONTEXT } from '../../constants/EventTypes';
import TagViewer from './TagViewer';
import CreatableSelect from 'react-select/lib/Creatable';
import _ from 'lodash';
......@@ -22,7 +22,7 @@ class TagList extends React.Component {
let { availableTags, context } = this.props;
if (context === EDIT_EVENT_CONTEXT) {
if (context === DETAILED_EVENT_CONTEXT) {
// show tags inside a detailed event
const customStyles = {
dropdownIndicator: () => ({
......@@ -47,7 +47,7 @@ class TagList extends React.Component {
}
let selectedTags = this.props.selectedTags ?
this.props.selectedTags.map((tag) => { return <TagViewer key={tag._id} context={EDIT_EVENT_CONTEXT} tag={tag} removeTag={this.props.removeTagFromSelection} /> })
this.props.selectedTags.map((tag) => { return <TagViewer key={tag._id} context={DETAILED_EVENT_CONTEXT} tag={tag} removeTag={this.props.removeTagFromSelection} /> })
: null
let availableTagsForSelect = availableTags ?
availableTags.map((tag) => ({ value: tag._id, label: tag.name }))
......
......@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
import { Label, Glyphicon } from 'react-bootstrap';
import { Row, Col, Button } from "react-bootstrap"
import { EDIT_EVENT_CONTEXT, TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT } from '../../constants/EventTypes';
import { TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, DETAILED_EVENT_CONTEXT } from '../../constants/EventTypes';
class TagViewer extends React.Component {
render() {
let { context, tag } = this.props;
if (context === EDIT_EVENT_CONTEXT) {
if (context === DETAILED_EVENT_CONTEXT) {
return (<div style={{
marginRight: '4px',
}}>
......@@ -27,7 +27,7 @@ class TagViewer extends React.Component {
</Label>
<Label
style={{
backgroundColor: '#A6BDED',
backgroundColor: '#777777',
borderTopLeftRadius: '0px',
borderTopRightRadius: '10px',
borderBottomRightRadius: '10px',
......@@ -41,7 +41,7 @@ class TagViewer extends React.Component {
glyph="remove"
bsSize="xsmall"
style={{
backgroundColor: '#A6BDED',
backgroundColor: '#777777',
color: '#FFFFFF',
verticalAlign: 'bottom'
}}
......
......@@ -2,6 +2,8 @@
export const ANNOTATION = "annotation";
export const NOTIFICATION = "notification";
export const EVENT_CATEGORY_COMMENT = "comment";
export const LIST_VIEW = "list";
export const DOC_VIEW = "doc";
......@@ -14,8 +16,8 @@ export const SORT_EVENTS_FROM_OLDEST = 1;
export const READ_MODE = 'event in basic read mode';
export const EDIT_MODE = 'event in edition mode';
export const BASIC_EVENT_CONTEXT = 'basicEventConstext';
export const EDIT_EVENT_CONTEXT = "editEventContext"
export const BASIC_EVENT_CONTEXT = 'basicEventContext';
export const DETAILED_EVENT_CONTEXT = 'detailedEventContext';
export const NEW_EVENT_CONTEXT = "newEventContext"
export const EVENT_HISTORY_ORIGINAL_VERSION_CONTEXT = "eventHistoryOriginalVersionContext";
export const EVENT_HISTORY_LATEST_VERSION_CONTEXT = "eventHistoryLatestVersionContext";
......
......@@ -7,7 +7,7 @@ import TagList from '../components/Tag/TagList';
import TagEditor from '../components/Tag/TagEditor';
import { URL } from '../api/icat/icatPlus';
import _ from 'lodash';
import { INFO_MESSAGE_TYPE, ERROR_MESSAGE_TYPE, EDIT_EVENT_CONTEXT, TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, TAG_EDITOR_CONTEXT } from '../constants/EventTypes';
import { INFO_MESSAGE_TYPE, ERROR_MESSAGE_TYPE, TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, TAG_EDITOR_CONTEXT, NEW_EVENT_CONTEXT, DETAILED_EVENT_CONTEXT } from '../constants/EventTypes';
const TAGS_FETCHED_STATUS = "tagFetchedStatus";
const TAGS_FETCHING_STATUS = "fetchingTagsStatus";
......@@ -42,37 +42,37 @@ class TagContainer extends React.Component {
}
render() {
let { event, investigationId, context } = this.props;
let { event, investigationId } = this.props;
let errorMessage = null;
if (this.state.message) {
errorMessage = (<EventMessage type={this.state.message.type} message={this.state.message.text} > </EventMessage>);
}
if (this.state.tagsReceptionStatus === TAGS_FETCHED_STATUS) {
if (event) {
if (context === BASIC_EVENT_CONTEXT) {
return (<div>
{errorMessage}
<TagList
selectedTags={this.state.selectedTags}
context={BASIC_EVENT_CONTEXT}
/>
</div>)
} else {
// tag list displayed in detailed event
return (<div>
{errorMessage}
<TagList
availableTags={this.state.availableTags}
addTagToSelection={this.addTagToSelection}
context={EDIT_EVENT_CONTEXT}
createNewTag={this.createNewTag}
investigationId={investigationId}
removeTagFromSelection={this.removeTagFromSelection}
selectedTags={this.state.selectedTags}
/>
</div>)
}
if (this.state.context === BASIC_EVENT_CONTEXT) {
return (<div>
{errorMessage}
<TagList
selectedTags={this.state.selectedTags}
context={BASIC_EVENT_CONTEXT}
/>
</div>)
}
if (this.state.context === DETAILED_EVENT_CONTEXT || this.state.context === NEW_EVENT_CONTEXT) {
return (<div>
{errorMessage}
<TagList
availableTags={this.state.availableTags}
addTagToSelection={this.addTagToSelection}
context={DETAILED_EVENT_CONTEXT}
createNewTag={this.createNewTag}
investigationId={investigationId}
removeTagFromSelection={this.removeTagFromSelection}
selectedTags={this.state.selectedTags}
/>
</div>)
}
// no event is provided.
......
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