ES6 Plato on Github
Report Home
Summary Display
components/Event/EventActionBar.js
Maintainability
70.11
Lines of code
282
Difficulty
33.45
Estimated Errors
1.80
Function weight
By Complexity
By SLOC
import React from 'react'; import { Well, Button, ButtonToolbar, Glyphicon, Tooltip, OverlayTrigger, ToggleButtonGroup, ToggleButton, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'; import NewButton from './NewButton'; import { getPDF } from '../../api/icat/icatPlus'; import { ComboSearch } from 'react-combo-search'; import PropTypes from 'prop-types'; import _ from 'lodash'; import { DOC_VIEW, LIST_VIEW, SORT_EVENTS_FROM_YOUNGEST, SORT_EVENTS_FROM_OLDEST } from '../../constants/EventTypes'; import { GUI_CONFIG } from '../../config/gui.config'; // styles require('./react-datetime.css'); require('./react-combo-select.css'); require('./react-combo-search.css'); /** * The menu displayed above the event list */ class EventActionBar extends React.Component { constructor(props) { super(props); this.state = { isNavbarExpanded: true }; this.getSelectPickerData = this.getSelectPickerData.bind(this); this.onSearch = this.onSearch.bind(this); this.onSelectNavbar = this.onSelectNavbar.bind(this); this.onToggleNavbar = this.onToggleNavbar.bind(this); this.sortByDate = this.sortByDate.bind(this); } render() { const { investigationId, isNewEventVisible, numberOfMatchingEventsFound, selectionFilter, sessionId, setNewEventVisibility, setView, sortingFilter } = this.props; function getCurrentlyPressedSortButton() { if (sortingFilter && sortingFilter.createdAt) { return sortingFilter.createdAt; } } let defaultSortingOrder = (GUI_CONFIG().DEFAULT_SORTING_FILTER) ? GUI_CONFIG().DEFAULT_SORTING_FILTER.createdAt : 1; return ( <Navbar fluid expanded={this.state.isNavbarExpanded} onSelect={this.onSelectNavbar} onToggle={this.onToggleNavbar} style={{ background: 'none', border: 'none', webkitBoxShadow: 'none', boxShadow: 'none' }}> <Navbar.Header> <Navbar.Toggle /> </Navbar.Header> <Navbar.Collapse> <Nav> <NavItem eventKey={1} href="#" className="logbookNavItem" > <NewButton isNewComponentVisible={isNewEventVisible} onClick={setNewEventVisibility} /> </NavItem> <NavDropdown eventKey={2} title="More" className="logbookNavItem" id="basic-nav-dropdown" style={{ paddingTop: '5px' }}> <CameraButton investigationId={investigationId} /> <PDFButton investigationId={investigationId} isNewEventVisible={isNewEventVisible} numberOfMatchingEventsFound={numberOfMatchingEventsFound} selectionFilter={selectionFilter} sessionId={sessionId} /> </NavDropdown> <NavItem eventKey={4} href="#" className="logbookNavItem"> <OverlayTrigger placement="bottom" overlay={ <Tooltip id="tooltip"> <p> Select the view: </p> <div style={{ textAlign: 'left' }}> <ul> <li> LIST - show all events.</li> <li> DOC - show comments only.</li> </ul> </div> </Tooltip> }> <ButtonToolbar style={{ display: 'inline-block' }}> <ToggleButtonGroup defaultValue={1} name="view" type="radio" value={this.props.view}> <ToggleButton bsSize="small" value={LIST_VIEW} onClick={() => setView(LIST_VIEW)}><Glyphicon glyph="list" /> List</ToggleButton> <ToggleButton bsSize="small" value={DOC_VIEW} onClick={() => setView(DOC_VIEW)}><Glyphicon glyph="list-alt" /> Doc </ToggleButton> </ToggleButtonGroup> </ButtonToolbar> </OverlayTrigger> <ButtonToolbar style={{ display: 'inline-block', marginLeft: '10px' }}> <ToggleButtonGroup defaultValue={defaultSortingOrder} name="sort" type="radio" value={getCurrentlyPressedSortButton()}> <ToggleButton bsSize="small" onClick={() => this.sortByDate(SORT_EVENTS_FROM_YOUNGEST)} value={SORT_EVENTS_FROM_YOUNGEST}> <OverlayTrigger placement="right" overlay={ <Tooltip id="tooltip3"> <p> Sort events chronologically from youngest to oldest </p> </Tooltip> }> <Glyphicon glyph="sort-by-attributes-alt" /> </OverlayTrigger> </ToggleButton> <ToggleButton bsSize="small" onClick={() => this.sortByDate(SORT_EVENTS_FROM_OLDEST)} value={SORT_EVENTS_FROM_OLDEST}> <OverlayTrigger placement="right" overlay={ <Tooltip id="tooltip3"> <p> Sort events chronologically from oldest to youngest </p> </Tooltip> }> <Glyphicon glyph="sort-by-attributes" /> </OverlayTrigger> </ToggleButton> </ToggleButtonGroup> </ButtonToolbar> </NavItem> </Nav> <Nav pullRight> <NavItem eventKey={6} href="#" className="logbookNavItem"> <div className='comboSearchContainer'> <ComboSearch onSearch={this.onSearch} selectData={[ { value: 'Everywhere', text: 'Everywhere' }, { value: 'Content', text: 'Content' }, { value: 'Title', text: 'Title' }, { value: 'category', text: 'Category' }, { value: 'Author', text: 'Author' }, { value: 'Tag', text: 'Tag' }, { value: 'Creation date', text: 'Creation date' } ]} datePickerCriteria='Creation date' selectPickerData={this.getSelectPickerData()} /> </div> <Well style={{ display: 'inline-block', padding: '4px', marginBottom: '0px', borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px', color: '#666666' }}> <b> {numberOfMatchingEventsFound} found </b> </Well> </NavItem> </Nav> </Navbar.Collapse> </Navbar> ); } getSelectPickerData() { let selectPickerData = { category: ['Info', 'Error', 'Command', 'Comment', 'Debug'] }; if (this.props.availableTags) { selectPickerData['Tag'] = this.props.availableTags.map((tag) => ({ value: tag._id, text: tag.name })); } return selectPickerData; } /** * Callback triggered when the user clicks the button to expand the navbar in mobile layout */ onToggleNavbar() { this.setState({ isNavbarExpanded: !this.state.isNavbarExpanded }); } /** * Callback triggered when the user clicks an element of the navbar. * @param {*} eventKey key of the element */ onSelectNavbar(eventKey) { if (eventKey != 6) { this.onToggleNavbar(); } } onSearch(data) { return this.props.searchEvents(data); } sortByDate(sortingOrder) { if (sortingOrder && this.props.sortingFilter.createdAt !== sortingOrder) { //this.setState({ sortingOrder: sortingOrder }) this.props.reverseEventsSortingByCreationDate(); } } } /* A React component which renders the 'Camera' button */ class CameraButton extends React.Component { render() { const tooltip = (text) => ( <Tooltip id='tooltip'> {text} </Tooltip> ); let url = '/investigation/' + this.props.investigationId + '/camera'; return (<OverlayTrigger placement='bottom' overlay={tooltip('Take a photo')} > <Button bsSize='small' bsStyle='primary' href={url} target='_blank' style={{ marginTop: '5px', marginBottom: '5px', marginLeft: '10px', }} > <Glyphicon glyph='camera' style={{ marginRight: '3px' }} /> Take a photo </Button> </OverlayTrigger>); } } /* A React component which renders the 'PDF' button */ class PDFButton extends React.Component { render() { let { isNewEventVisible, numberOfMatchingEventsFound, investigationId, sessionId, selectionFilter } = this.props; const tooltip = (text) => ( <Tooltip id='tooltip'> {text} </Tooltip> ); return (<OverlayTrigger placement='bottom' overlay={tooltip('Download the logbook as PDF')} > <Button bsSize='small' bsStyle='primary' href={getPDF(sessionId, investigationId, selectionFilter)} target='_blank' style={{ marginTop: '5px', marginBottom: '5px', marginLeft: '10px', }} disabled={(isNewEventVisible === undefined || isNewEventVisible === true || numberOfMatchingEventsFound === 0)} > <Glyphicon glyph='download' style={{ marginRight: '3px' }} /> PDF </Button> </OverlayTrigger>); } } EventActionBar.propTypes = { /** the identifier of the current investigation */ investigationId: PropTypes.string, /** True when the user is writing a new event */ isNewEventVisible: PropTypes.bool, /** the number of events found */ numberOfMatchingEventsFound: PropTypes.number, /** callback function which reverse the sorting of events by date */ reverseEventsSortingByCreationDate: PropTypes.func.isRequired, /** Callback function which reloads the events based on search criteria*/ searchEvents: PropTypes.func, /** selection filter for mongo request */ selectionFilter: PropTypes.object, /* the sessionId*/ sessionId: PropTypes.string.isRequired, /** Callback function triggered when the user clicks on the new event button */ setNewEventVisibility: PropTypes.func, /** the callback function executed when the user clicks the view buttons */ setView: PropTypes.func, /** the filter used to sort event */ sortingFilter: PropTypes.object.isRequired }; export default EventActionBar;