Commit b40069d7 authored by Marjolaine Bodin's avatar Marjolaine Bodin
Browse files

Merge branch 'issue_504-adapt_ui_investigations' of...

Merge branch 'issue_504-adapt_ui_investigations' of https://gitlab.esrf.fr/icat/E-DataPortal into issue_504-adapt_ui_investigations
parents 91b05195 3a8f48d6
Pipeline #48522 passed with stage
in 4 minutes and 21 seconds
......@@ -35,15 +35,17 @@ function Event(props) {
const page = event.meta.search
? event.meta.search.page
: event.meta.page.currentPage;
const eventCreationDate = moment(getOriginalEvent(event).creationDate);
return (
<a
href={`events?page=${page}#${event._id}`}
style={{ fontWeight: 'bold' }}
className="text-muted"
>
{moment(getOriginalEvent(event).creationDate).format(
moment.HTML5_FMT.TIME_SECONDS
title={eventCreationDate.format(
moment.HTML5_FMT.DATETIME_LOCAL_SECONDS
)}
>
{eventCreationDate.format(moment.HTML5_FMT.TIME_SECONDS)}
</a>
);
};
......
......@@ -16,14 +16,18 @@ function collapse(items) {
const collapsed = [];
for (let i = 0; i < items.length; i++) {
const event = items[i];
if (event.category) {
if (event.category && !isEventSearchedResult(event)) {
if (
event.category.toLowerCase() === EVENT_CATEGORY_COMMANDLINE &&
!event.previousVersionEvent
) {
const lastEvent = collapsed[collapsed.length - 1];
if (lastEvent && lastEvent.category) {
if (lastEvent.category.toLowerCase() === EVENT_CATEGORY_COMMANDLINE) {
if (
lastEvent.category.toLowerCase() === EVENT_CATEGORY_COMMANDLINE &&
!isEventSearchedResult(lastEvent)
) {
if (!lastEvent.events) {
lastEvent.events = [event];
} else {
......@@ -41,6 +45,12 @@ function collapse(items) {
return collapsed;
}
function isEventSearchedResult(event) {
const { hash } = window.location;
const id = hash ? hash.replace('#', '') : undefined;
return id && id === event._id;
}
/** Returns the list of items to be displayed in the table: events + days */
function getItems(events, automaticCollapsing) {
const eventsCopy = cloneDeep(events);
......@@ -86,11 +96,14 @@ function EventList(props) {
return <UserMessage type="info" message="No log found." />;
}
const collapseEvents =
search && search.length > 0 ? false : automaticCollapsing;
return (
<>
<Table responsive style={{ border: 0 }}>
<tbody>
{getItems(events, automaticCollapsing).map((event, index) => {
{getItems(events, collapseEvents).map((event, index) => {
if (event.type === 'date') {
return (
<tr
......
......@@ -133,53 +133,57 @@ export default function SettingLogbookMenuPanel(props) {
</Row>
</Grid>
</Col>
<Col md={2} sm={6} xs={12}>
<h4>Display</h4>
<Grid>
{!isReleased && (
<Row>
<Col md={12} sm={12} xs={12}>
<Switch
onColor={toggleColor}
onChange={() => {
dispatch(setAutomaticRefresh(!automaticRefresh));
}}
checked={automaticRefresh}
width={switchWidth}
height={switchHeight}
className={styles.logbookSwitch}
/>
</Col>
<Col md={12} sm={12} xs={12}>
<div className={styles.logbookTextSwitch}>
Auto refresh logs
</div>
</Col>
</Row>
)}
{isCommandLineDisplayed() && (
<Row style={{ marginTop: 16 }}>
<Col md={12} sm={12} xs={12}>
<Switch
onColor={toggleColor}
onChange={() => {
dispatch(setAutomaticCollapsing(!automaticCollapsing));
}}
checked={automaticCollapsing}
width={switchWidth}
height={switchHeight}
className={styles.logbookSwitch}
/>
</Col>
<Col md={12} sm={12} xs={12}>
<div className={styles.logbookTextSwitch}>
Group together command lines
</div>
</Col>
</Row>
)}
</Grid>
</Col>
{isCommandLineDisplayed() && (
<Col md={2} sm={6} xs={12}>
<h4>Display</h4>
<Grid>
{!isReleased && false && (
<Row>
<Col md={12} sm={12} xs={12}>
<Switch
onColor={toggleColor}
onChange={() => {
dispatch(setAutomaticRefresh(!automaticRefresh));
}}
checked={automaticRefresh}
width={switchWidth}
height={switchHeight}
className={styles.logbookSwitch}
/>
</Col>
<Col md={12} sm={12} xs={12}>
<div className={styles.logbookTextSwitch}>
Auto refresh logs
</div>
</Col>
</Row>
)}
{isCommandLineDisplayed() && (
<Row>
<Col md={12} sm={12} xs={12}>
<Switch
onColor={toggleColor}
onChange={() => {
dispatch(
setAutomaticCollapsing(!automaticCollapsing)
);
}}
checked={automaticCollapsing}
width={switchWidth}
height={switchHeight}
className={styles.logbookSwitch}
/>
</Col>
<Col md={12} sm={12} xs={12}>
<div className={styles.logbookTextSwitch}>
Group together command lines
</div>
</Col>
</Row>
)}
</Grid>
</Col>
)}
<Col md={2} sm={6} xs={12}>
<h4>Sort</h4>
<Grid>
......
......@@ -11,6 +11,7 @@ import {
MenuItem,
Panel,
SplitButton,
Alert,
} from 'react-bootstrap';
import { getMintDOI } from '../../api/icat-plus/doi';
import BootstrapTable2 from 'react-bootstrap-table-next';
......@@ -25,6 +26,8 @@ class DOIForm extends React.Component {
selectedAuthors: [],
fetching: false,
fetched: false,
error: null,
successMessage: null,
};
this.addAuthor = this.addAuthor.bind(this);
......@@ -100,6 +103,11 @@ class DOIForm extends React.Component {
datasetIdList.push(this.props.datasets[i].id);
}
const url = getMintDOI(this.props.sessionId);
this.setState({
fetching: true,
fetched: false,
});
axios
.post(url, {
title,
......@@ -108,24 +116,20 @@ class DOIForm extends React.Component {
authors,
})
.then((response) => {
if (response) {
if (response.data) {
if (response.data.message) {
alert(`Your DOI has been created ${response.data.message}`);
}
}
}
this.setState({
fetching: false,
fetched: true,
error: null,
successMessage: `Your DOI has been created ${response.data.message}`,
});
})
.catch((error) => {
if (error) {
if (error.response) {
if (error.response.data) {
if (error.response.data.message) {
alert(error.response.data.message);
}
}
}
}
this.setState({
error: `There was an error during the minting the DOI. Contact administrators.${error}`,
fetching: false,
fetched: false,
successMessage: null,
});
});
}
......@@ -166,98 +170,126 @@ class DOIForm extends React.Component {
render() {
return (
<Form>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>
Title <Mandatory />
</ControlLabel>
<FormControl
inputRef={(ref) => {
this.title = ref;
}}
componentClass="textarea"
placeholder=""
/>
</FormGroup>
<>
<Alert bsStyle="info">
<h4>Important!</h4>
<p>Only Principal investigators can mint a DOI</p>
</Alert>
{this.state.error && (
<Alert bsStyle="danger">
<h4>Oh snap! You got an error!</h4>
<p>{this.state.error}</p>
</Alert>
)}
{this.state.successMessage && (
<Alert bsStyle="success">
<h4>DOI has been minted successfully</h4>
<p>{this.state.successMessage}</p>
</Alert>
)}
<Form>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>
Title <Mandatory />
</ControlLabel>
<FormControl
inputRef={(ref) => {
this.title = ref;
}}
componentClass="textarea"
placeholder=""
/>
</FormGroup>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>
Abstract <Mandatory />
</ControlLabel>
<FormControl
inputRef={(ref) => {
this.abstract = ref;
}}
componentClass="textarea"
placeholder=""
/>
</FormGroup>
<br />
<Panel bsStyle="primary">
<Panel.Heading>
<Panel.Title>Authors</Panel.Title>
</Panel.Heading>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>
Abstract <Mandatory />
</ControlLabel>
<FormControl
inputRef={(ref) => {
this.abstract = ref;
}}
componentClass="textarea"
placeholder=""
/>
</FormGroup>
<br />
<Panel bsStyle="primary">
<Panel.Heading>
<Panel.Title>Authors</Panel.Title>
</Panel.Heading>
<Panel.Body>
<Form inline componentClass="div">
<FormGroup controlId="formInlineName">
<ControlLabel>Name</ControlLabel>{' '}
<FormControl
inputRef={(ref) => {
this.name = ref;
}}
type="text"
/>
</FormGroup>{' '}
<FormGroup controlId="formInlineEmail" style={{ marginLeft: 10 }}>
<ControlLabel>Surname</ControlLabel>{' '}
<FormControl
inputRef={(ref) => {
this.surname = ref;
}}
/>
</FormGroup>{' '}
{this.renderButton()}
</Form>
<Panel.Body>
<Form inline componentClass="div">
<FormGroup controlId="formInlineName">
<ControlLabel>Name</ControlLabel>{' '}
<FormControl
inputRef={(ref) => {
this.name = ref;
}}
type="text"
/>
</FormGroup>{' '}
<FormGroup
controlId="formInlineEmail"
style={{ marginLeft: 10 }}
>
<ControlLabel>Surname</ControlLabel>{' '}
<FormControl
inputRef={(ref) => {
this.surname = ref;
}}
/>
</FormGroup>{' '}
{this.renderButton()}
</Form>
<br />
<br />
<Button
bsStyle="warning"
style={{ marginBottom: 10 }}
disabled={this.state.selectedAuthors.length === 0}
onClick={this.handleDeleteClick}
>
<Glyphicon glyph="trash" /> Delete
</Button>
<BootstrapTable2
keyField="id"
data={this.state.authors}
columns={[
{ dataField: 'id', text: '', hidden: true },
{ dataField: 'name', text: 'Name' },
{ dataField: 'surname', text: 'Surname' },
]}
selectRow={{
mode: 'checkbox',
clickToSelect: true,
selected: this.state.selectedAuthors,
onSelect: this.handleOnSelectUser,
onSelectAll: this.handleOnSelectAllUsers,
}}
striped
hover
condensed
/>
</Panel.Body>
</Panel>
<br />
{this.state.fetching && (
<Button className="btn btn-primary pull-right">
<Glyphicon className="spin" glyph="repeat" />
</Button>
)}
{!this.state.fetching && (
<Button
bsStyle="warning"
style={{ marginBottom: 10 }}
disabled={this.state.selectedAuthors.length === 0}
onClick={this.handleDeleteClick}
onClick={this.mint.bind(this)}
className="btn btn-primary pull-right"
>
<Glyphicon glyph="trash" /> Delete
Mint
</Button>
<BootstrapTable2
keyField="id"
data={this.state.authors}
columns={[
{ dataField: 'id', text: '', hidden: true },
{ dataField: 'name', text: 'Name' },
{ dataField: 'surname', text: 'Surname' },
]}
selectRow={{
mode: 'checkbox',
clickToSelect: true,
selected: this.state.selectedAuthors,
onSelect: this.handleOnSelectUser,
onSelectAll: this.handleOnSelectAllUsers,
}}
striped
hover
condensed
/>
</Panel.Body>
</Panel>
<br />
<Button
onClick={this.mint.bind(this)}
className="btn btn-primary pull-right"
>
Mint
</Button>
</Form>
)}
</Form>
</>
);
}
}
......
......@@ -11,6 +11,7 @@ import 'react-calendar-timeline/lib/Timeline.css';
import { Link } from 'react-router-dom';
import moment from 'moment';
import InstrumentResource from '../../resources/instrument';
import { useQuery } from '../../helpers/hooks';
const COLOR_EMPTY_SESSION = 'white';
const COLOR_NON_SCHEDULED_SESSION = 'red';
......@@ -52,13 +53,19 @@ function itemRenderer(props) {
);
}
const startPeriod = moment().startOf('month');
const endPeriod = moment().add(1, 'month').startOf('month');
function InvestigationsCalendarTimeLine() {
const dateFormat = 'YYYY-MM-DD';
const query = useQuery();
const startDate = query.get('startDate')
? moment(query.get('startDate'), dateFormat)
: moment().startOf('month');
const endDate = query.get('endDate')
? moment(query.get('endDate'), dateFormat)
: moment().add(1, 'month').startOf('month');
const investigations = useResource(InvestigationResource.listShape(), {
startDate: startPeriod.format('YYYY-MM-DD'),
endDate: endPeriod.format('YYYY-MM-DD'),
startDate: startDate.format(dateFormat),
endDate: endDate.format(dateFormat),
});
const instruments = useResource(InstrumentResource.listShape(), {});
......@@ -99,8 +106,8 @@ function InvestigationsCalendarTimeLine() {
<Timeline
groups={groups}
items={items}
defaultTimeStart={startPeriod}
defaultTimeEnd={endPeriod}
defaultTimeStart={startDate}
defaultTimeEnd={endDate}
stackItems
itemHeightRatio={0.65}
showCursorLine
......
......@@ -17,12 +17,7 @@ import EventListMenu from '../components/Logbook/Menu/EventListMenu';
import NewOrEditEventPanel from '../components/Logbook/NewOrEditEventPanel';
import OverlayBox from '../components/Logbook/OverlayBox';
const {
EVENTS_PER_PAGE,
EVENTS_PER_DOWNLOAD,
SORT_EVENTS_BY,
SORTING_ORDER,
} = UI.logbook;
const { EVENTS_PER_PAGE, EVENTS_PER_DOWNLOAD, SORT_EVENTS_BY } = UI.logbook;
function EventsPage() {
const [loading, setLoading] = useState(false);
......@@ -60,7 +55,7 @@ function EventsPage() {
skip: EVENTS_PER_PAGE * (page - 1),
limit: EVENTS_PER_DOWNLOAD,
sortBy: SORT_EVENTS_BY,
sortOrder: SORTING_ORDER,
sortOrder: isSortingLatestEventsFirst ? -1 : 1,
search,
types: categoryTypes?.map((cat) =>
cat.category ? `${cat.type}-${cat.category}` : `${cat.type}`
......
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