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