Commit dbc7ab2d authored by Maxime Chaillet's avatar Maxime Chaillet
Browse files

set a new layout for the eventListMenu.

parent a75224e6
import React from 'react';
import { Well, Button, ButtonToolbar, Glyphicon, Tooltip, OverlayTrigger, ToggleButtonGroup, ToggleButton, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
import { Well, Button, ButtonToolbar, Glyphicon, Tooltip, OverlayTrigger, ToggleButtonGroup, ToggleButton, Navbar, Nav, NavItem, NavDropdown, MenuItem, DropdownButton, Radio } from 'react-bootstrap';
import NewButton from './NewButton';
import { getPDF } from '../../api/icat/icatPlus';
import { ComboSearch } from 'react-combo-search';
......@@ -16,19 +16,13 @@ require('./react-combo-search.css');
/**
* The menu displayed above the event list
*/
class EventActionBar extends React.Component {
class EventListMenu 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() {
......@@ -39,7 +33,8 @@ class EventActionBar extends React.Component {
sessionId,
setNewEventVisibility,
setView,
sortingFilter } = this.props;
sortingFilter,
view } = this.props;
function getCurrentlyPressedSortButton() {
if (sortingFilter && sortingFilter.createdAt) {
......@@ -47,7 +42,7 @@ class EventActionBar extends React.Component {
}
}
let defaultSortingOrder = (GUI_CONFIG().DEFAULT_SORTING_FILTER) ? GUI_CONFIG().DEFAULT_SORTING_FILTER.createdAt : 1;
//let defaultSortingOrder = (GUI_CONFIG().DEFAULT_SORTING_FILTER) ? GUI_CONFIG().DEFAULT_SORTING_FILTER.createdAt : 1;
return (
<Navbar
fluid
......@@ -65,12 +60,22 @@ class EventActionBar extends React.Component {
<NavItem eventKey={1} href="#" className="logbookNavItem" >
<NewButton
isNewComponentVisible={isNewEventVisible}
onClick={setNewEventVisibility}
/>
onClick={setNewEventVisibility} />
</NavItem>
<NavDropdown eventKey={2} title="More" className="logbookNavItem" id="basic-nav-dropdown" style={{ paddingTop: '5px' }}>
<CameraButton investigationId={investigationId} />
<NavItem eventKey={2} href="#" className="logbookNavItem" >
<DropdownButton onClick={(e)=> {e.stopPropagation()}}
bsStyle={'primary'}
title={'View'}
bsSize='small'>
<MenuItem eventKey="1" onSelect={() => setView(DOC_VIEW)} > {view === DOC_VIEW ? <Radio checked> Classic (user's input)</Radio> : <Radio checked={false}> Classic (user's input)</Radio>} </MenuItem>
<MenuItem eventKey="2" onSelect={() => setView(LIST_VIEW)} > {view === LIST_VIEW ? <Radio checked> Full (all logs)</Radio> : <Radio checked={false}> Full (all logs)</Radio>} </MenuItem>
<MenuItem divider />
<MenuItem eventKey="3" onSelect={() => this.sortByDate(SORT_EVENTS_FROM_OLDEST)} > {getCurrentlyPressedSortButton() === SORT_EVENTS_FROM_OLDEST ? <Radio checked> Oldest log on top</Radio> : <Radio checked={false}> Oldest log on top</Radio>} </MenuItem>
<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}
......@@ -78,56 +83,9 @@ class EventActionBar extends React.Component {
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>
<NavItem eventKey={4} href="#" className="logbookNavItem" >
<CameraButton investigationId={investigationId} />
</NavItem>
</Nav>
......@@ -160,7 +118,7 @@ class EventActionBar extends React.Component {
);
}
getSelectPickerData() {
getSelectPickerData = () => {
let selectPickerData = { category: ['Info', 'Error', 'Command', 'Comment', 'Debug'] };
if (this.props.availableTags) {
......@@ -172,7 +130,7 @@ class EventActionBar extends React.Component {
/**
* Callback triggered when the user clicks the button to expand the navbar in mobile layout
*/
onToggleNavbar() {
onToggleNavbar = () => {
this.setState({ isNavbarExpanded: !this.state.isNavbarExpanded });
}
......@@ -180,17 +138,17 @@ class EventActionBar extends React.Component {
* Callback triggered when the user clicks an element of the navbar.
* @param {*} eventKey key of the element
*/
onSelectNavbar(eventKey) {
onSelectNavbar = (eventKey) =>{
if (eventKey != 6) {
this.onToggleNavbar();
}
}
onSearch(data) {
onSearch = (data) =>{
return this.props.searchEvents(data);
}
sortByDate(sortingOrder) {
sortByDate = (sortingOrder) => {
if (sortingOrder && this.props.sortingFilter.createdAt !== sortingOrder) {
//this.setState({ sortingOrder: sortingOrder })
this.props.reverseEventsSortingByCreationDate();
......@@ -198,6 +156,7 @@ class EventActionBar extends React.Component {
}
}
/* A React component which renders the 'Camera' button */
class CameraButton extends React.Component {
render() {
......@@ -213,11 +172,6 @@ class CameraButton extends React.Component {
bsStyle='primary'
href={url}
target='_blank'
style={{
marginTop: '5px',
marginBottom: '5px',
marginLeft: '10px',
}}
>
<Glyphicon glyph='camera' style={{ marginRight: '3px' }} /> Take a photo
</Button>
......@@ -242,11 +196,7 @@ class PDFButton extends React.Component {
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
......@@ -255,7 +205,7 @@ class PDFButton extends React.Component {
}
}
EventActionBar.propTypes = {
EventListMenu.propTypes = {
/** the identifier of the current investigation */
investigationId: PropTypes.string,
/** True when the user is writing a new event */
......@@ -278,4 +228,4 @@ EventActionBar.propTypes = {
sortingFilter: PropTypes.object.isRequired
};
export default EventActionBar;
export default EventListMenu;
......@@ -6,7 +6,7 @@ import { getEventsByInvestigationId, getEventCountByInvestigationId, createEvent
import _ from 'lodash';
import EventList from '../../components/Event/List/EventList';
import EventActionBar from '../../components/Event/EventActionBar.js';
import EventListMenu from '../../components/Event/EventListMenu.js';
import { NEW_EVENT_INVISIBLE, NEW_EVENT_VISIBLE, LIST_VIEW, ERROR_MESSAGE_TYPE, EDIT_EVENT_CONTEXT, EDIT_EVENT_VISIBLE, EDIT_EVENT_INVISIBLE, NEW_EVENT_CONTEXT } from '../../constants/EventTypes.js';
import EventPager from '../../components/Event/EventPager.js';
import { convertPageToPageEventIndexes, isRangeAvailableOnTheClient } from '../../helpers/PaginationHelper.js';
......@@ -76,7 +76,7 @@ class LogbookContainer extends React.Component {
<div style={{ marginBottom: '40px' }}>
<UserMessage type={ERROR_MESSAGE_TYPE} message={this.state.errorMessage} />
<EventActionBar
<EventListMenu
availableTags={this.props.availableTags}
investigationId={investigationId}
isNewEventVisible={this.state.isNewEventVisible}
......
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