Plato on Github
Report Home
src/components/Event/Tag/TagList.js
Maintainability
71.34
Lines of code
192
Difficulty
28.58
Estimated Errors
1.04
Function weight
By Complexity
By SLOC
import React from 'react' import PropTypes from 'prop-types'; import { Grid, Row, Col } from "react-bootstrap" import { TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, DETAILED_EVENT_CONTEXT, INFO_MESSAGE_TYPE } from '../../../constants/EventTypes'; import TagViewer from './TagViewer'; import CreatableSelect from 'react-select/lib/Creatable'; import _ from 'lodash'; import { GUI_CONFIG } from '../../../config/gui.config'; import UserMessage from '../../UserMessage'; /** * React component which handles tags (create, edit, remove) * @param {*} props tag as provided by the server */ class TagList extends React.Component { constructor(props) { super(props); this.onChange = this.onChange.bind(this); } render() { let { availableTags, context } = this.props; if (context === DETAILED_EVENT_CONTEXT) { // show tags inside a detailed event const customStyles = { dropdownIndicator: () => ({ display: 'none' }), indicatorSeparator: () => ({ display: 'none' }), control: (provided) => ({ ...provided, maxWidth: 140, minWidth: 100, minHeight: 32, }), container: (provided) => ({ ...provided, marginTop: '5px' }), } let selectedTags = this.props.selectedTags ? 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 })) : null; return ( <div> {selectedTags} <CreatableSelect isClearable={false} noOptionsMessage={() => "No existing tag"} onChange={this.onChange} styles={customStyles} options={availableTagsForSelect} isSearchable={true} /> </div> ) } else if (context === TAG_MANAGER_CONTEXT) { // show tags for management if (!availableTags || availableTags.length === 0) { return ( <Grid fluid={true} > <h3> Tags currently available in this proposal</h3> <Row style={{ marginLeft: '30px', marginRight: '30px', marginTop: '20px' }}> <UserMessage message="There is no tag in this proposal yet." isTextCentered={true} type={INFO_MESSAGE_TYPE} /> </Row> </Grid > ) } 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} /> }) return ( <div style={{ paddingBottom: '70px' }}> <Grid fluid={true} > <h3> Tags currently available in this proposal</h3> <Row style={{ marginTop: '20px' }}> <Col xs={0} md={1}> </Col> <Col xs={12} md={10}> {detailedTags} </Col> <Col xs={0} md={1}> </Col> </Row> </Grid > </div>) // <div style={{ display: 'flex', paddingBottom: '70px' }}> // <div style={{ flex: '1 1 10%' }}> </div> // <div style={{ flex: '0 0 80%' }}> // <h2> Tags currently available in this proposal</h2> // <br /> // <Grid> // <Row> // <Col xs={2}> </Col> // <Col xs={6}> // <b> Description</b> // </Col> // <Col xs={3}> // <b> Scope</b> // </Col> // </Row> // <br /> // {detailedTags} // </Grid> // </div> // <div style={{ flex: '1 1 10%' }}> </div> // </div >) } } else if (context === BASIC_EVENT_CONTEXT) { let selectedTags = this.props.selectedTags ? this.props.selectedTags.map((tag) => { return <TagViewer key={tag._id} context={BASIC_EVENT_CONTEXT} tag={tag} removeTag={this.props.removeTagFromSelection} /> }) : null return ( <div> {selectedTags} </div>) } return null; } /** * Callback function triggered when the input has changed. A new tag is being created * @param {*} value the new tag as provided by the react-select component */ onChange(option, action) { debugger if (option && action) { if (action.action === "create-option") { let newTag = { color: GUI_CONFIG().DEFAULT_TAG_COLOR, description: null, name: option.label, investigationId: this.props.investigationId }; this.props.createNewTag(newTag); } else if (action.action === "select-option") { this.props.addTagToSelection(_.find(this.props.availableTags, (tag) => { return tag._id === option.value })) } } } } TagList.propTypes = { /* List of available tags (can be null when there is no available tags yet)*/ availableTags: PropTypes.array, /* Context defining how tag list is rendered */ context: PropTypes.string.isRequired, /* investigation identifier */ investigatinoId: PropTypes.string, /* List of tags currently selected. Used only in the event context */ selectedTags: PropTypes.array, /* Callback function trigered when the user selects a tag from the available tags. Used only in the EVENT context.*/ addTagToSelection: PropTypes.func, /* Callback function used to create a new tag */ createNewTag: PropTypes.func, /* Callback function trigered when the user click to edit the tag. Used only in the contexct of tag management */ editTag: PropTypes.func, /* Callback function trigered when the user clicks the X on the tag label. Used only in Event context. */ removeTagFromSelection: PropTypes.func, } export default TagList;