Commit bc6efa5b authored by Maxime Chaillet's avatar Maxime Chaillet

Merge branch 'issue166' into 'master'

Issue166

Closes #166

See merge request !151
parents f8084ff3 50d384b2
Pipeline #11541 passed with stages
in 2 minutes and 30 seconds
......@@ -9,7 +9,7 @@ import _ from 'lodash';
/**
* React component used to edit or create a tag
*/
class TagEditor extends React.Component {
class NewOrEditTagPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
......@@ -27,11 +27,8 @@ class TagEditor extends React.Component {
<Row className='show-grid'>
<Col xs={0} md={1}> </Col>
<Col xs={12} md={10}>
<h3> Editing Tag </h3>
<Panel bsStyle='primary'>
<Panel.Heading>
<strong>Please update tag details </strong>
</Panel.Heading>
<Panel.Heading> <strong> {this.props.panelHeaderText} </strong> </Panel.Heading>
<Panel.Body>
<FormGroup controlId='formControlTagLabel'>
<ControlLabel>Label <Mandatory></Mandatory></ControlLabel>
......@@ -139,7 +136,7 @@ class TagEditor extends React.Component {
class Mandatory extends React.Component {
render() {
return ( <span style={{ color: 'red' }}>*</span> );
return (<span style={{ color: 'red' }}>*</span>);
}
};
......@@ -150,11 +147,13 @@ const PopoverColorPickerBottom = (callback) => {
);
};
TagEditor.propTypes = {
NewOrEditTagPanel.propTypes = {
/** Text display in the panel header */
panelHeaderText: PropTypes.string,
/** callback function used to show the tag list */
showAvailableTags: PropTypes.func,
/* if present, it corresponds to the tag to edit. If absent, it indcates that a tag is being created*/
tag: PropTypes.object
};
export default TagEditor;
\ No newline at end of file
export default NewOrEditTagPanel;
\ No newline at end of file
......@@ -6,46 +6,31 @@ import EventListMenuButton from '../EventListMenuButton';
/**
* The menu displayed above the tag list
*/
class TagActionBar extends React.Component {
constructor(props) {
super(props);
this.showTagEditor = this.showTagEditor.bind(this);
}
class TagListMenu extends React.Component {
render() {
return (
<Grid fluid={true} style={{ marginTop: '10px' }}>
<Row>
<Col xs={2}>
<ButtonToolbar>
<EventListMenuButton
isNewComponentVisible={false}
onClick={this.showTagEditor}
/>
<div onClick={this.props.onNewTagButtonClicked}>
<EventListMenuButton
text='New'
tooltipText='Create a new tag'
glyph='plus'
isEnabled={true} />
</div>
</ButtonToolbar>
</Col>
</Row>
</Grid >
);
}
/** Callback triggered when the user click to create a new tag */
showTagEditor() {
this.props.showNewTag();
}
}
TagActionBar.propTypes = {
TagListMenu.propTypes = {
/** Callback function used to display new tag form */
showNewTag: PropTypes.func
onNewTagClicked: PropTypes.func
};
export default TagActionBar;
\ No newline at end of file
export default TagListMenu;
\ No newline at end of file
......@@ -30,8 +30,8 @@ export const EVENT_HISTORY_ORIGINAL_VERSION_CONTEXT = 'eventHistoryOriginalVersi
export const EVENT_HISTORY_LATEST_VERSION_CONTEXT = 'eventHistoryLatestVersionContext';
export const EVENT_HISTORY_MIDDLE_VERSION_CONTEXT = 'eventHistoryNotOriginalAndNotLatestVersionContext';
export const TAG_MANAGER_CONTEXT = 'tagManagerContext';
export const TAG_EDITOR_CONTEXT = 'tagEditorContext';
export const TAG_CREATOR_CONTEXT = 'tagCreatorContext';
export const EDIT_TAG_CONTEXT = 'editTagContext';
export const NEW_TAG_CONTEXT = 'newTagContext';
export const INFO_MESSAGE_TYPE = 'info';
export const ERROR_MESSAGE_TYPE = 'error';
......
......@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
import axios from 'axios';
import { connect } from 'react-redux';
import TagList from '../components/Event/Tag/TagList';
import TagEditor from '../components/Event/Tag/TagEditor';
import NewOrEditTagPanel from '../components/Event/Tag/NewOrEditTagPanel';
import { getTagsByInvestigationId, createTagsByInvestigationId, updateTagsByInvestigationId } from '../api/icat/icatPlus';
import _ from 'lodash';
import { INFO_MESSAGE_TYPE, ERROR_MESSAGE_TYPE, TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, TAG_EDITOR_CONTEXT, TAG_CREATOR_CONTEXT, NEW_EVENT_CONTEXT, EDIT_EVENT_CONTEXT, FETCHED_STATUS, FETCHING_STATUS } from '../constants/EventTypes';
import TagActionBar from '../components/Event/Tag/TagActionBar';
import { INFO_MESSAGE_TYPE, ERROR_MESSAGE_TYPE, TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, EDIT_TAG_CONTEXT, NEW_TAG_CONTEXT, NEW_EVENT_CONTEXT, EDIT_EVENT_CONTEXT, FETCHED_STATUS, FETCHING_STATUS } from '../constants/EventTypes';
import TagListMenu from '../components/Event/Tag/TagListMenu';
import UserMessage from '../components/UserMessage';
import { SUCCESS_MESSAGE_TYPE } from '../constants/UserMessages';
import { setAvailableTagAction } from '../actions/logbook';
......@@ -33,13 +33,11 @@ class TagContainer extends React.Component {
this.addTagToSelection = this.addTagToSelection.bind(this);
this.createNewTag = this.createNewTag.bind(this);
this.editTag = this.editTag.bind(this);
this.getTagsByInvestigationId = this.getTagsByInvestigationId.bind(this);
this.removeTagFromSelection = this.removeTagFromSelection.bind(this);
this.setMessage = this.setMessage.bind(this);
this.setSelectedTagsFromProps = this.setSelectedTagsFromProps.bind(this);
this.showAvailableTags = this.showAvailableTags.bind(this);
this.showNewTag = this.showNewTag.bind(this);
this.updateTags = this.updateTags.bind(this);
}
......@@ -80,25 +78,26 @@ class TagContainer extends React.Component {
if (this.state.context === TAG_MANAGER_CONTEXT) {
return (<div>
{userMessage}
<TagActionBar showNewTag={this.showNewTag} />
<TagListMenu onNewTagButtonClicked={this.onNewTagButtonClicked} />
<TagList
availableTags={this.props.availableTags}
context={TAG_MANAGER_CONTEXT}
editTag={this.editTag}
editTag={this.onEditTagButtonClicked}
investigationId={investigationId}
updateTags={this.updateTags}
/>
</div>);
}
if (this.state.context === TAG_EDITOR_CONTEXT || this.state.context === TAG_CREATOR_CONTEXT) {
if (this.state.context === EDIT_TAG_CONTEXT || this.state.context === NEW_TAG_CONTEXT) {
// if (this.state.selectedTags && this.state.selectedTags.length != 0) {
return (<div>
{userMessage}
<TagEditor
<NewOrEditTagPanel
createNewTag={this.createNewTag}
panelHeaderText={this.state.context === NEW_TAG_CONTEXT ? 'New tag' : 'Editing tag'}
showAvailableTags={this.showAvailableTags}
tag={this.state.selectedTags.length !== 0 ? this.state.selectedTags[0] : null}
createNewTag={this.createNewTag}
updateTags={this.updateTags}
/>
</div>);
......@@ -232,7 +231,7 @@ class TagContainer extends React.Component {
createNewTag(newTag) {
let _this = this;
let nextContext = (this.props.context === TAG_CREATOR_CONTEXT) ? TAG_MANAGER_CONTEXT : this.props.context;
let nextContext = (this.props.context === NEW_TAG_CONTEXT) ? TAG_MANAGER_CONTEXT : this.props.context;
// POST the new tag to the server
if (newTag) {
axios({
......@@ -345,19 +344,19 @@ class TagContainer extends React.Component {
* Edit a given tag
* @param {*} tag the tag to be edited
*/
editTag(tag) {
onEditTagButtonClicked = (tag) => {
if (tag) {
this.setState({
context: TAG_EDITOR_CONTEXT,
context: EDIT_TAG_CONTEXT,
message: null,
selectedTags: [tag],
});
};
}
showNewTag() {
onNewTagButtonClicked = () => {
this.setState({
context: TAG_CREATOR_CONTEXT,
context: NEW_TAG_CONTEXT,
message: null,
});
}
......
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