Plato on Github
Report Home
src/components/Event/EventActionBar.js
Maintainability
73.10
Lines of code
230
Difficulty
29.56
Estimated Errors
1.30
Function weight
By Complexity
By SLOC
import React from 'react' import { Well, Button, ButtonToolbar, Glyphicon, Tooltip, OverlayTrigger, Grid, Row, Col, ToggleButtonGroup, ToggleButton } from 'react-bootstrap' import NewButton from './NewButton' import { URL } from '../../api/icat/icatPlus' import { ComboSearch } from 'react-combo-search' import PropTypes from 'prop-types'; 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.onSearch = this.onSearch.bind(this); this.sortByDate = this.sortByDate.bind(this); } onTakePhoto (dataUri) { // Do stuff with the dataUri photo... console.log('takePhoto'); } render() { const { investigationId, isNewEventVisible, numberOfMatchingEventsFound, 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 ( <Grid fluid={true} style={{ marginTop: '20px', marginBottom: '20px' }}> <Row> <Col xs={12} md={4}> <ButtonToolbar> <NewButton isNewComponentVisible={isNewEventVisible} onClick={setNewEventVisibility} /> <CameraButton investigationId={investigationId}/> <PDFButton investigationId={investigationId} isNewEventVisible={isNewEventVisible} numberOfMatchingEventsFound={numberOfMatchingEventsFound} sessionId={sessionId} /> </ButtonToolbar> </Col> <Col xs={12} md={4}> <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> </Col> <Col xs={12} md={3}> <div style={{display: 'inline'}}> <ComboSearch onSearch={this.onSearch} selectData={['Everywhere', 'Content', 'Title', 'Type', 'Category', 'Author', 'Creation date']} datePickerCriteria='Creation date' /> </div> </Col> <Col xs={12} md={1}> <div> <Well style={{ padding: '4px', marginBottom: '0px', borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px' }}> <b> {numberOfMatchingEventsFound} found </b> </Well> </div> </Col> </Row> </Grid > ) } 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 'PDF' button */ class CameraButton extends React.Component { render() { const tooltip = (text) => ( <Tooltip id="tooltip"> {text} </Tooltip> ); var url = "/investigation/" + this.props.investigationId + "/camera"; return (<OverlayTrigger placement="bottom" overlay={tooltip("Take a photo")} > <Button bsSize="small" bsStyle="primary" href={url} target="_blank" disabled={false}> <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 } = this.props; if (isNewEventVisible === undefined || isNewEventVisible === true || numberOfMatchingEventsFound === 0) { return (<Button bsSize="small" bsStyle="primary" disabled > <Glyphicon glyph="download" style={{ marginRight: "3px" }} /> PDF </Button>) } //default behavior const tooltip = (text) => ( <Tooltip id="tooltip"> {text} </Tooltip> ); // this selectionFilter is used to query all events from a given logbook. It is currently not flexible, to be changed. let selectionFilter = { find: { $and: [{ $or: [ { type: "annotation" }, { type: "notification" } ] }] }, sort: { createdAt: -1 } } return (<OverlayTrigger placement="bottom" overlay={tooltip("Download the logbook as PDF")} > <Button bsSize="small" bsStyle="primary" href={URL.getPDF(sessionId, investigationId, selectionFilter)} target="_blank" disabled={false}> <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, /* 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;