Commit bf99a061 authored by Maxime Chaillet's avatar Maxime Chaillet

display tags in event list.

parent c19915c9
......@@ -8,6 +8,7 @@ import { getOriginalEvent } from '../../../helpers/EventHelpers'
import EventIcon from './EventIcon.js';
import LazyLoad from 'react-lazyload';
import { EVENT_CATEGORY_COMMANDLINE, NOTIFICATION } from '../../../constants/EventTypes.js';
import TagsLine from '../Tag/TagsLine';
require("./eventList.css");
/**
......@@ -61,7 +62,7 @@ class EventList extends React.Component {
if (event.type === "date") {
return <tr key={index}><td style={{ borderTop: '1px solid #f2f2f2', textAlign: 'center', fontSize: '18px', fontWeight: 'bold' }} colSpan={4} ><a name={event.anchor}></a> {event.text}</td></tr>;
}
return <Event key={index} event={event} onEventClicked={this.props.onEventClicked} ></Event>
return <Event key={index} availableTags={this.props.availableTags} event={event} onEventClicked={this.props.onEventClicked} ></Event>
})}
</tbody>
</Table>
......@@ -84,6 +85,7 @@ class Event extends React.Component {
collapsed: true
}
this.handleClick = this.handleClick.bind(this);
this.getTags = this.getTags.bind(this);
}
handleClick(e) {
......@@ -96,6 +98,29 @@ class Event extends React.Component {
})}</tbody>);
}
/**
* Get the corresponding tags objects for that event
*/
getTags(event) {
let eventTags = [];
if (event && event.tag && event.tag.length !== 0) {
event.tag.forEach(tagId => {
let tag = _.find(this.props.availableTags, (availableTag) => _.isEqual(availableTag._id, tagId))
if (tag) {
eventTags.push(tag);
}
});
debugger;
return eventTags;
}
debugger;
return null;
}
render() {
let events = [this.props.event];
if (this.props.event.events && !this.state.collapsed) {
......@@ -116,16 +141,10 @@ class Event extends React.Component {
<LazyContentEvent event={event} />
{event.events && this.state.collapsed ? <Label style={{ color: "blue", backgroundColor: "white", cursor: "pointer" }} onClick={this.handleClick} >.... {event.events.length} command lines more</Label> : null}
</td>
<td>
<span> tags : </span>
{/* <div style={{ flexGrow: '1', flexShrink: '0', flexBasis: '100px' }}>
<div style={{ textAlign: 'right' }}>
<TagContainer context={BASIC_EVENT_CONTEXT} investigationId={investigationId} event={event} />
</div>
</div> */}
<td style={{ width:'200px', border: 0 }}>
<TagsLine tags={this.getTags(event)} />
</td>
<td className='eventActionBox' style={{ width: '50px', border: 0 }}>
<td style={{ width: '50px', border: 0 }}>
<Button bsStyle="link" bsSize="small" style={{ padding: '0px' }} onClick={() => this.props.onEventClicked(event)}>
<Glyphicon glyph={getPreviousVersionNumber(event) === 0 ? 'plus' : 'edit'} style={{ width: '40px', position: 'static' }} />
</Button>
......
......@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
import { Label, Glyphicon } from 'react-bootstrap';
import { Row, Col, Button } from "react-bootstrap"
import { TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, EDIT_EVENT_CONTEXT } from '../../../constants/EventTypes';
import { TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, EDIT_EVENT_CONTEXT, EVENTLIST_CONTEXT } from '../../../constants/EventTypes';
class TagViewer extends React.Component {
class TagLabel extends React.Component {
render() {
let { context, tag } = this.props;
if (context === EDIT_EVENT_CONTEXT) {
if (context === EDIT_EVENT_CONTEXT || context === EVENTLIST_CONTEXT) {
return (<div style={{ display: 'inline-block', marginRight: '4px' }}>
<Label
style={{
......@@ -109,7 +109,7 @@ class TagViewer extends React.Component {
}
}
TagViewer.propTypes = {
TagLabel.propTypes = {
/* the context the tag is rendered */
context: PropTypes.string.isRequired,
/* callback function which show that page to edit the tag */
......@@ -120,4 +120,4 @@ TagViewer.propTypes = {
removeTag: PropTypes.func
}
export default TagViewer;
\ No newline at end of file
export default TagLabel;
\ No newline at end of file
......@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Grid, Row, Col } from 'react-bootstrap';
import { TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, EDIT_EVENT_CONTEXT, INFO_MESSAGE_TYPE } from '../../../constants/EventTypes';
import TagViewer from './TagViewer';
import TagLabel from './TagLabel';
import CreatableSelect from 'react-select/lib/Creatable';
import _ from 'lodash';
import { GUI_CONFIG } from '../../../config/gui.config';
......@@ -63,7 +63,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 (<TagLabel key={tag._id} context={EDIT_EVENT_CONTEXT} tag={tag} removeTag={this.props.removeTagFromSelection} />); })
: null;
let availableTagsForSelect = availableTags ?
availableTags.map((tag) => ({ value: tag._id, label: tag.name }))
......@@ -111,7 +111,7 @@ class TagList extends React.Component {
} else {
let detailedTags = [];
let sortedAvailableTags = _.sortBy(availableTags, ['name']);
detailedTags = sortedAvailableTags.map((tag, index) => { return (<TagViewer context={TAG_MANAGER_CONTEXT} tag={tag} editTag={this.props.editTag} key={index} />); });
detailedTags = sortedAvailableTags.map((tag, index) => { return (<TagLabel context={TAG_MANAGER_CONTEXT} tag={tag} editTag={this.props.editTag} key={index} />); });
return (
<div style={{ paddingBottom: '70px' }}>
<Grid fluid={true} >
......
import React from 'react';
import Proptype from 'prop-types';
import TagLabel from './TagLabel';
import { EVENTLIST_CONTEXT } from '../../../constants/EventTypes';
/** React component which renders tags in line */
class TagsLine extends React.Component {
render() {
let tagViewerList = [];
if (this.props.tags && this.props.tags instanceof Array && this.props.tags.length !== null) {
return this.props.tags.map((tag) => { return (<TagLabel key={tag._id} context={EVENTLIST_CONTEXT} tag={tag} />); })
}
return null;
}
}
TagsLine.proptype = {
/** all tag objects to be rendered */
tags: Proptype.array
}
export default TagsLine;
\ No newline at end of file
......@@ -32,6 +32,8 @@ export const EVENT_HISTORY_MIDDLE_VERSION_CONTEXT = 'eventHistoryNotOriginalAndN
export const TAG_MANAGER_CONTEXT = 'tagManagerContext';
export const EDIT_TAG_CONTEXT = 'editTagContext';
export const NEW_TAG_CONTEXT = 'newTagContext';
export const LOGBOOK_CONTAINER_CONTEXT = 'logbookContainerContext';
export const EVENTLIST_CONTEXT = 'eventListContext';
export const INFO_MESSAGE_TYPE = 'info';
export const ERROR_MESSAGE_TYPE = 'error';
......@@ -46,4 +48,5 @@ export const LOCALSTORAGE_KEY_EDITED_EVENT_CONTENT_IN_PLAINTEXT_FORMAT = 'locals
export const LOCALSTORAGE_KEY_EDITED_EVENT_CONTENT_IN_HTML_FORMAT = 'localstorageKeyEditedEventContentInHtmlFormat';
export const PLAINTEXT_CONTENT_FORMAT = 'plainTextContentFormat';
export const HTML_CONTENT_FORMAT = 'htmlContentFormat';
\ No newline at end of file
export const HTML_CONTENT_FORMAT = 'htmlContentFormat';
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getEventsByInvestigationId, getEventCountByInvestigationId, createEvent, updateEvent } from './IORequests';
import { getEventsByInvestigationId, getEventCountByInvestigationId, createEvent, updateEvent, getTagsByInvestigationId } from './IORequests';
import _ from 'lodash';
import EventList from '../../components/Logbook/List/EventList';
import EventListMenu from '../../components/Logbook/Menu/EventListMenu.js';
import { NEW_EVENT_INVISIBLE, NEW_EVENT_VISIBLE, LIST_VIEW, ERROR_MESSAGE_TYPE, EDIT_EVENT_CONTEXT, EDIT_EVENT_VISIBLE, EDIT_EVENT_INVISIBLE, NEW_EVENT_CONTEXT } from '../../constants/EventTypes.js';
import { NEW_EVENT_INVISIBLE, NEW_EVENT_VISIBLE, LIST_VIEW, ERROR_MESSAGE_TYPE, EDIT_EVENT_CONTEXT, EDIT_EVENT_VISIBLE, EDIT_EVENT_INVISIBLE, NEW_EVENT_CONTEXT, LOGBOOK_CONTAINER_CONTEXT } from '../../constants/EventTypes.js';
import EventPager from '../../components/Logbook/EventPager.js';
import { convertPageToPageEventIndexes, isRangeAvailableOnTheClient } from '../../helpers/PaginationHelper.js';
import { GUI_CONFIG } from '../../config/gui.config.js';
......@@ -19,6 +19,7 @@ import NewOrEditEventPanel from '../../components/Logbook/NewOrEditEventPanel.js
import "../../components/Logbook/event.css"
import { INFO_MESSAGE_TYPE } from '../../constants/UserMessages.js';
import PeriodicRefresher from './PeriodicRefresher.js';
import TagContainer from './TagContainer';
/**
* This class represents the event container component. It's role is to retrieve events from the server asynchronuously.
......@@ -73,6 +74,9 @@ export class LogbookContainer extends React.Component {
if (this.isAppProperlyConfigured()) {
return (
<div style={{ marginBottom: '40px' }}>
<TagContainer context={LOGBOOK_CONTAINER_CONTEXT} investigationId={investigationId} />
<OverlayBox open={this.state.errorMessage ? true : false} onClose={() => { this.setState({ errorMessage: null }) }} classNames={{ modal: 'userMessageModalClass', closeButton: 'userMessageCloseButton' }}>
<UserMessage type={ERROR_MESSAGE_TYPE} message={this.state.errorMessage} />
</OverlayBox>
......@@ -144,6 +148,7 @@ export class LogbookContainer extends React.Component {
{(this.state.pageEvents.length === 0) ?
<UserMessage message='The logbook is empty.' type={INFO_MESSAGE_TYPE} isTextCentered={true} />
: <EventList
availableTags={this.props.availableTags}
events={this.state.pageEvents}
onEventClicked={this.onEventClicked} />
}
......
......@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import TagList from '../../components/Logbook/Tag/TagList';
import { createTagsByInvestigationId, updateTagsByInvestigationId } from '../../api/icat/icatPlus';
import _ from 'lodash';
import { INFO_MESSAGE_TYPE, ERROR_MESSAGE_TYPE, TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, NEW_EVENT_CONTEXT, EDIT_EVENT_CONTEXT, FETCHED_STATUS, FETCHING_STATUS, EDIT_TAG_CONTEXT, NEW_TAG_CONTEXT } from '../../constants/EventTypes';
import { INFO_MESSAGE_TYPE, ERROR_MESSAGE_TYPE, TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, NEW_EVENT_CONTEXT, EDIT_EVENT_CONTEXT, FETCHED_STATUS, FETCHING_STATUS, EDIT_TAG_CONTEXT, NEW_TAG_CONTEXT, LOGBOOK_CONTAINER_CONTEXT } from '../../constants/EventTypes';
import NewOrEditTagPanel from '../../components/Logbook/Tag/NewOrEditTagPanel';
import TagListMenu from '../../components/Logbook/Tag/TagListMenu';
import UserMessage from '../../components/UserMessage';
......@@ -50,6 +50,11 @@ class TagContainer extends React.Component {
if (this.state.message) {
userMessage = (<UserMessage type={this.state.message.type} message={this.state.message.text} > </UserMessage>);
}
if (this.props.context === LOGBOOK_CONTAINER_CONTEXT) {
// called by the logbook container to get the available tags
return null;
}
if (this.props.availableTagsReceptionStatus === FETCHED_STATUS) {
// if (this.state.context === BASIC_EVENT_CONTEXT) {
......
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