Skip to content

D
Datahub
Commit f038f7ed authored by Maxime Chaillet's avatar Maxime Chaillet
Browse files
Options

Refactor the code for the event list menu.

parent fcea94ee
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 117 deletions
src/components/Event/EventListMenu.js
View file @ f038f7ed
import React from 'react';
import { Well, Button, ButtonToolbar, Glyphicon, Tooltip, OverlayTrigger, ToggleButtonGroup, ToggleButton, Navbar, Nav, NavItem, NavDropdown, MenuItem, DropdownButton, Radio } from 'react-bootstrap';
import NewButton from './NewButton';
import { Well, Navbar, Nav, NavItem, MenuItem, DropdownButton, Radio } from 'react-bootstrap';
import EventListMenuButton from './EventListMenuButton';
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';
import { DOC_VIEW, LIST_VIEW, SORT_EVENTS_FROM_YOUNGEST, SORT_EVENTS_FROM_OLDEST, NEW_EVENT_VISIBLE } from '../../constants/EventTypes';
// styles
require('./react-datetime.css');
......@@ -54,24 +53,18 @@ class EventListMenu extends React.Component {
<Navbar.Header>
<Navbar.Toggle />
<Nav style={{ marginLeft: '0px' }}>
<NavItem eventKey={1} href="#" className="logbookNavItem" >
<NewButton
isNewComponentVisible={isNewEventVisible}
onClick={setNewEventVisibility} />
<span style={{ width: '12px', display: 'inline-block' }} />
<CameraButton investigationId={investigationId} />
<NavItem eventKey={1} href="#" className="logbookNavItem" onClick={() => setNewEventVisibility(NEW_EVENT_VISIBLE)}>
<EventListMenuButton text='New' glyph='plus' tooltipText='Create a new event' isEnabled={!isNewEventVisible} />
</NavItem>
<NavItem eventKey={2} href={'/investigation/' + this.props.investigationId + '/camera'} target='_blank' className="logbookNavItem" >
<EventListMenuButton text='Take a photo' glyph='camera' tooltipText='Take a photo' isEnabled={true} />
</NavItem>
</Nav>
</Navbar.Header>
<Navbar.Collapse>
<Nav>
{/* <NavItem eventKey={1} href="#" className="logbookNavItem" >
<NewButton
isNewComponentVisible={isNewEventVisible}
onClick={setNewEventVisibility} />
</NavItem> */}
<NavItem eventKey={2} href="#" className="logbookNavItem" >
<DropdownButton onClick={(e) => { e.stopPropagation() }}
bsStyle={'primary'}
......@@ -84,21 +77,14 @@ class EventListMenu extends React.Component {
<MenuItem eventKey="4" onSelect={() => this.sortByDate(SORT_EVENTS_FROM_YOUNGEST)} > {getCurrentlyPressedSortButton() === SORT_EVENTS_FROM_YOUNGEST ? <Radio checked> Latest log on top</Radio> : <Radio checked={false}> Latest log on top</Radio>} </MenuItem>
</DropdownButton>
</NavItem>
<NavItem eventKey={3} href="#" className="logbookNavItem" >
<PDFButton
investigationId={investigationId}
isNewEventVisible={isNewEventVisible}
numberOfMatchingEventsFound={numberOfMatchingEventsFound}
selectionFilter={selectionFilter}
sessionId={sessionId}
/>
<NavItem eventKey={3} href={getPDF(sessionId, investigationId, selectionFilter)} target='_blank' className="logbookNavItem" >
<EventListMenuButton text='PDF' glyph='download' tooltipText='Download as PDF' isEnabled={!(isNewEventVisible === undefined || isNewEventVisible === true || numberOfMatchingEventsFound === 0)} />
</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={6} href="#" className="logbookNavItem">
<div className='comboSearchContainer'>
<ComboSearch
onSearch={this.onSearch}
selectData={[
......@@ -162,55 +148,6 @@ class EventListMenu extends React.Component {
}
}
/* 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'
>
<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'
disabled={(isNewEventVisible === undefined || isNewEventVisible === true || numberOfMatchingEventsFound === 0)}
>
<Glyphicon glyph='download' style={{ marginRight: '3px' }} /> PDF
</Button>
</OverlayTrigger>);
}
}
EventListMenu.propTypes = {
/** the identifier of the current investigation */
investigationId: PropTypes.string,
......
src/components/Event/EventListMenuButton.js 0 → 100644
View file @ f038f7ed
import React from 'react'
import { Button, Glyphicon, Tooltip, OverlayTrigger } from 'react-bootstrap'
import PropTypes from 'prop-types';
/* A React component which renders a button in the event list menu. It does not handle event associated to the button.*/
class EventListMenuButton extends React.Component {
render() {
let { isEnabled, text, glyph, tooltipText } = this.props;
if (isEnabled === false) {
return (<Button bsSize="small" bsStyle="primary" disabled > <Glyphicon glyph={glyph} />{text} </Button>);
}
// default behavior
return (<OverlayTrigger placement="bottom" overlay={<Tooltip id="tooltip"> {tooltipText} </Tooltip>}>
<Button bsSize="small" bsStyle="primary" disabled={false} > <Glyphicon glyph={glyph} /> {text} </Button>
</OverlayTrigger>
)
}
}
export default EventListMenuButton;
EventListMenuButton.propTypes = {
/** the text displayed in the button */
text: PropTypes.string.isRequired,
/** glyphicon added on the left side of the displayed text */
glyph: PropTypes.string.isRequired,
/** text of the tooltip when the user hover the mouse over the button */
tooltipText: PropTypes.string,
/** Whether the button is enabled or disabled */
isEnabled: PropTypes.bool.isRequired
}
\ No newline at end of file
src/components/Event/NewButton.js deleted 100644 → 0
View file @ fcea94ee
import React from 'react'
import { Well, Button, ButtonToolbar, Glyphicon, Tooltip, OverlayTrigger, Grid, Row, Col, ToggleButtonGroup, ToggleButton } from 'react-bootstrap'
import { URL } from '../../api/icat/icatPlus'
import { ComboSearch } from 'react-combo-search'
import PropTypes from 'prop-types';
import { NEW_EVENT_VISIBLE, } from '../../constants/EventTypes';
/* A React component which renders the 'New' button */
class NewButton extends React.Component {
render() {
if (this.props.isNewComponentVisible === undefined || this.props.isNewComponentVisible === true) {
return (<Button bsSize="small" bsStyle="primary" disabled >
<Glyphicon glyph="plus" />New
</Button>)
}
const tooltip = (text) => (
<Tooltip id="tooltip">
{text}
</Tooltip>
);
// default behavior
return (<OverlayTrigger placement="bottom" overlay={tooltip("Create a new event")}>
<Button bsSize="small" bsStyle="primary" onClick={() => this.props.onClick(NEW_EVENT_VISIBLE)} disabled={false} >
<Glyphicon glyph="plus" /> New
</Button>
</OverlayTrigger>
)
}
}
export default NewButton;
NewButton.propTypes = {
/** True when the user has clicked the button which in turn is displaying the new component */
isNewComponentVisible: PropTypes.bool,
/** Callback function triggered when the user clicks on the button */
onClick: PropTypes.func,
}
\ No newline at end of file
src/components/Event/Tag/TagActionBar.js
View file @ f038f7ed
import React from 'react';
import PropTypes from 'prop-types';
import { ButtonToolbar, Grid, Row, Col } from 'react-bootstrap';
import NewButton from '../NewButton';
import EventListMenuButton from '../EventListMenuButton';
/**
* The menu displayed above the tag list
......@@ -19,9 +19,16 @@ class TagActionBar extends React.Component {
<Row>
<Col xs={2}>
<ButtonToolbar>
<NewButton
<EventListMenuButton
isNewComponentVisible={false}
onClick={this.showTagEditor}
/>
</ButtonToolbar>
</Col>
......
src/components/Event/event.css
View file @ f038f7ed
......@@ -268,6 +268,10 @@ div.collapsedEventPanel-heading:hover {
/* Logbook menu related */
.logbookNavItem{
display:inline-block!important;
}
.logbookNavItem>a {
padding-top: 8px!important;
padding-bottom: 5px!important;
......
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