Commit 122b9475 authored by Maxime Chaillet's avatar Maxime Chaillet

Refactor TagLabel. Create TagListInLine and TagListTableLine.

parent bf99a061
......@@ -8,7 +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';
import TagListInLine from '../Tag/TagListInLine';
require("./eventList.css");
/**
......@@ -142,7 +142,7 @@ class Event extends React.Component {
{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 style={{ width:'200px', border: 0 }}>
<TagsLine tags={this.getTags(event)} />
<TagListInLine tags={this.getTags(event)} />
</td>
<td style={{ width: '50px', border: 0 }}>
<Button bsStyle="link" bsSize="small" style={{ padding: '0px' }} onClick={() => this.props.onEventClicked(event)}>
......
import React from 'react'
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, EVENTLIST_CONTEXT } from '../../../constants/EventTypes';
/** React component which renders a tag label */
class TagLabel extends React.Component {
render() {
let { context, tag } = this.props;
let { context, tag, showDeleteButton } = this.props;
if (context === EDIT_EVENT_CONTEXT || context === EVENTLIST_CONTEXT) {
return (<div style={{ display: 'inline-block', marginRight: '4px' }}>
<Label
style={{
backgroundColor: tag.color,
borderTopLeftRadius: '10px',
borderTopRightRadius: '0px',
borderBottomRightRadius: '0px',
borderBottomLeftRadius: '10px',
display: 'inline-block',
marginBottom: '2px'
}}>
{tag.name}
</Label>
return (<div style={{ display: 'inline-block', marginRight: '4px' }}>
<Label
style={{
backgroundColor: tag.color,
borderBottomLeftRadius: '10px',
borderBottomRightRadius: showDeleteButton === true ? '0px' : '10px',
borderTopLeftRadius: '10px',
borderTopRightRadius: showDeleteButton === true ? '0px' : '10px',
display: 'inline-block',
marginBottom: '2px'
}}>
{tag.name}
</Label>
{showDeleteButton === true ?
<Label
style={{
backgroundColor: '#777777',
......@@ -45,67 +44,8 @@ class TagLabel extends React.Component {
}}
onClick={() => this.props.removeTag(tag)}
/>
</Label>
</div>)
} else if (context === TAG_MANAGER_CONTEXT) {
let { editTag } = this.props;
//set the tag scope
let tagScope = null;
if (tag.investigationId) {
tagScope = <span style={{ padding: '5px', backgroundColor: '#f2f2f2' }}> proposal </span>
} else if (tag.beamlineName) {
tagScope = <span style={{ padding: '5px', backgroundColor: '#f2f2f2' }}> beamline </span>
}
return (
<div>
<Row>
<div style={{ alignItems: 'center' }}>
<Col xs={12} sm={2} style={{ textAlign: 'center' }}>
<Label
style={{
backgroundColor: tag.color,
borderRadius: '10px',
display: 'inline-block',
paddingBottom: '5px',
fontSize: '14px'
}}>
{tag.name}
</Label>
</Col>
<Col xs={12} sm={6} style={{ alignItems: 'stretch', }}>
{tag.description ? <span> {tag.description} </span> : <span style={{ color: 'gray', fontStyle: 'italic' }}> No description yet</span>}
</Col>
<Col xs={12} sm={3}>
{tagScope}
</Col>
<Col xs={12} sm={1}>
<Button bsStyle="primary" bsSize="small" onClick={() => editTag(tag)}>Edit</Button>
</Col>
</div>
</Row>
<hr />
</div>
)
} else if (context === BASIC_EVENT_CONTEXT) {
return (
<Label
style={{
backgroundColor: tag.color,
borderTopLeftRadius: '10px',
borderTopRightRadius: '10px',
borderBottomRightRadius: '10px',
borderBottomLeftRadius: '10px',
display: 'inline-block',
marginRight: '5px'
}}>
{tag.name}
</Label>)
}
</Label> : null}
</div>)
}
}
......@@ -117,7 +57,13 @@ TagLabel.propTypes = {
/* the tag to render */
tag: PropTypes.object.isRequired,
/* Callback function used to remove a tag from the selection. Used in EVENT context only */
removeTag: PropTypes.func
removeTag: PropTypes.func,
/* Whether the delete button is displayed or not */
showDeleteButton: PropTypes.bool
}
TagLabel.defaultProps = {
showDeleteButton: false,
}
export default TagLabel;
\ No newline at end of file
......@@ -9,6 +9,7 @@ import { GUI_CONFIG } from '../../../config/gui.config';
import UserMessage from '../../UserMessage';
import ScrollMenu from 'react-horizontal-scrolling-menu';
import './TagList.css';
import TagListTableLine from './TagListTableLine';
/**
* React component which displays a list of tags
......@@ -111,7 +112,7 @@ class TagList extends React.Component {
} else {
let detailedTags = [];
let sortedAvailableTags = _.sortBy(availableTags, ['name']);
detailedTags = sortedAvailableTags.map((tag, index) => { return (<TagLabel context={TAG_MANAGER_CONTEXT} tag={tag} editTag={this.props.editTag} key={index} />); });
detailedTags = sortedAvailableTags.map((tag, index) => { return (<TagListTableLine tag={tag} editTag={this.props.editTag} key={index} />); });
return (
<div style={{ paddingBottom: '70px' }}>
<Grid fluid={true} >
......
......@@ -4,7 +4,7 @@ import TagLabel from './TagLabel';
import { EVENTLIST_CONTEXT } from '../../../constants/EventTypes';
/** React component which renders tags in line */
class TagsLine extends React.Component {
class TagListInLine extends React.Component {
render() {
let tagViewerList = [];
......@@ -16,8 +16,8 @@ class TagsLine extends React.Component {
}
}
TagsLine.proptype = {
TagListInLine.proptype = {
/** all tag objects to be rendered */
tags: Proptype.array
}
export default TagsLine;
\ No newline at end of file
export default TagListInLine;
\ No newline at end of file
import React from 'react';
import Proptypes from 'prop-types';
import { Row, Col, Button, Label } from "react-bootstrap"
/** React compoent which renders a line in the TagListTable */
class TagListTableLine extends React.Component {
render() {
let { tag, editTag } = this.props;
//set the tag scope
let tagScope = null;
if (tag.investigationId) {
tagScope = <span style={{ padding: '5px', backgroundColor: '#f2f2f2' }}> proposal </span>
} else if (tag.beamlineName) {
tagScope = <span style={{ padding: '5px', backgroundColor: '#f2f2f2' }}> beamline </span>
}
return (
<div>
<Row>
<div style={{ alignItems: 'center' }}>
<Col xs={12} sm={2} style={{ textAlign: 'center' }}>
<Label
style={{
backgroundColor: tag.color,
borderRadius: '10px',
display: 'inline-block',
paddingBottom: '5px',
fontSize: '14px'
}}>
{tag.name}
</Label>
</Col>
<Col xs={12} sm={6} style={{ alignItems: 'stretch', }}>
{tag.description ? <span> {tag.description} </span> : <span style={{ color: 'gray', fontStyle: 'italic' }}> No description yet</span>}
</Col>
<Col xs={12} sm={3}>
{tagScope}
</Col>
<Col xs={12} sm={1}>
<Button bsStyle="primary" bsSize="small" onClick={() => editTag(tag)}>Edit</Button>
</Col>
</div>
</Row>
<hr />
</div>
)
}
}
export default TagListTableLine;
TagListTableLine.proptype = {
/** tag object */
tag: Proptypes.object,
/** callback function when the user click the edit button */
editTag: Proptypes.func
}
\ 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