Commit 0dd9797d authored by Loic Huder's avatar Loic Huder
Browse files

Merge branch 'investigation-date-filter' into 'master'

Adds a date filter to the InvestigationTable (single day pick)

See merge request !424
parents db08287a 4f94d870
Pipeline #32081 passed with stages
in 7 minutes and 32 seconds
import React from 'react';
import { Glyphicon, Button } from 'react-bootstrap';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { formatDate, parseDate } from 'react-day-picker/moment';
import { INVESTIGATION_DATE_FORMAT } from '../../constants';
import styles from './InvestigationDateFilter.module.css';
function InvestigationDateFilter(props) {
const { rootClassName, value, onDayChange, onClear } = props;
return (
<div className={rootClassName}>
<DayPickerInput
inputProps={{ className: styles.dateFilterInput }}
value={value}
placeholder="Filter by start date"
format={INVESTIGATION_DATE_FORMAT}
formatDate={formatDate}
parseDate={parseDate}
onDayChange={onDayChange}
/>
<Button
disabled={!value}
onClick={onClear}
bsStyle="link"
className={styles.clearButton}
>
<Glyphicon glyph="remove" />
</Button>
</div>
);
}
export default InvestigationDateFilter;
.clearButton {
color: inherit;
padding-left: 6px;
}
.clearButton:hover {
color: darkslategray;
}
.dateFilterInput {
padding: 7px 0;
}
import React from 'react';
import React, { useState } from 'react';
import { Col, Glyphicon, Grid, Row } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import moment from 'moment';
import {
DATASET_COUNT,
FILE_COUNT,
SAMPLE_COUNT,
VOLUME,
} from '../../constants/parameterTypes';
import DOIBadge from '../doi/DOIBadge';
......@@ -12,24 +11,17 @@ import ResponsiveTable from '../Table/ResponsiveTable';
import InvestigationWidget from './InvestigationWidget';
import { beamlineFormatter, dateFormatter, nameFormatter } from './utils';
import { stringifyBytesSize } from '../../helpers';
import InvestigationDateFilter from './InvestigationDateFilter';
import styles from './InvestigationTable.module.css';
class InvestigationTable extends React.Component {
logbookFormatter(cell, investigation) {
return (
<Link to={`/investigation/${investigation.id}/events`}>
<Glyphicon glyph="list-alt" />
</Link>
);
}
volumeFormatter(cell, investigation) {
function volumeFormatter(cell, investigation) {
const volume = investigation.parameters.find((o) => o.name === VOLUME);
if (volume && volume.value && volume.value !== 0) {
return stringifyBytesSize(volume.value);
}
}
}
experimentFormatter(cell, investigation, rowIndex, extraData) {
function experimentFormatter(cell, investigation, rowIndex, extraData) {
return (
<Grid style={{ textAlign: 'center' }}>
<Row className="show-grid">
......@@ -62,47 +54,39 @@ class InvestigationTable extends React.Component {
</Row>
</Grid>
);
}
}
/**
/**
* This looks into the parameters of the investigation
*/
getParameter(investigation, parameterName) {
function getParameter(investigation, parameterName) {
const parameter = investigation.parameters.find(
(o) => o.name === parameterName
);
if (parameter && parameter.value) {
return parameter.value;
}
}
}
sampleCountFormatter(cell, investigation, extraData) {
const sampleCount = extraData.getParameter(investigation, SAMPLE_COUNT);
if (sampleCount) {
if (sampleCount !== 0) {
return sampleCount;
}
}
function fileCountFormatter(cell, investigation) {
const fileCount = getParameter(investigation, FILE_COUNT);
if (!fileCount) {
return undefined;
}
fileCountFormatter(cell, investigation, rowIndex, extraData) {
const fileCount = extraData.getParameter(investigation, FILE_COUNT);
if (fileCount) {
if (fileCount !== 0) {
return (
<span style={{ width: 50, textAlign: 'right', float: 'left' }}>
{fileCount}
</span>
);
}
}
}
}
datasetCountFormatter(cell, investigation, rowIndex, extraData) {
function datasetCountFormatter(cell, investigation) {
const datasetCount = investigation.parameters.find(
(o) => o.name === DATASET_COUNT
);
if (datasetCount && datasetCount.value && datasetCount.value !== 0) {
if (datasetCount && datasetCount.value) {
return (
<>
<span style={{ width: 40, textAlign: 'right', float: 'left' }}>
......@@ -118,30 +102,23 @@ class InvestigationTable extends React.Component {
fontSize: 12,
}}
>
({extraData.volumeFormatter(cell, investigation, extraData)})
({volumeFormatter(cell, investigation)})
</span>
</>
);
}
}
/**
* It return true if releaseDate < now
*/
isReleased(investigation) {
return !!investigation && !!investigation.releaseDate;
}
}
getColumns() {
function getLgHeaderStyle(width, hidden) {
function getLgHeaderStyle(width, hidden) {
return {
xs: { hidden: true },
sm: { hidden: true },
md: { hidden: true },
lg: { hidden, width, textAlign: 'center' },
};
}
}
function getColumns(props) {
return [
{
text: 'id',
......@@ -151,8 +128,8 @@ class InvestigationTable extends React.Component {
{
text: 'Experiment',
dataField: 'name',
formatter: this.experimentFormatter,
formatExtraData: this,
formatter: experimentFormatter,
formatExtraData: props,
sort: true,
hidden: false,
headerStyle: () => ({ width: '50%', textAlign: 'center' }),
......@@ -172,7 +149,7 @@ class InvestigationTable extends React.Component {
props.withProposalLinks,
props.user.isAdministrator
),
formatExtraData: this.props,
formatExtraData: props,
sort: true,
hidden: false,
headerStyle: () => ({ width: '50%', textAlign: 'center' }),
......@@ -218,23 +195,21 @@ class InvestigationTable extends React.Component {
{
text: 'Datasets',
dataField: 'datasets',
formatter: this.datasetCountFormatter,
formatExtraData: this,
formatter: datasetCountFormatter,
responsiveHeaderStyle: getLgHeaderStyle(
130,
!this.props.showInvestigationStats
!props.showInvestigationStats
),
},
{
text: 'Files',
hidden: !this.props.user.isAdministrator,
hidden: !props.user.isAdministrator,
dataField: 'dummy-1',
isDummyField: true,
formatter: this.fileCountFormatter,
formatExtraData: this,
formatter: fileCountFormatter,
responsiveHeaderStyle: getLgHeaderStyle(
80,
!this.props.showInvestigationStats
!props.showInvestigationStats
),
},
{
......@@ -252,13 +227,15 @@ class InvestigationTable extends React.Component {
responsiveHeaderStyle: getLgHeaderStyle(260, false),
},
];
}
}
function InvestigationTable(props) {
const { expanded, user, investigations } = props;
const [dateFilter, setDateFilter] = useState();
render() {
const expandRow = {
showExpandColumn: true,
//expandByColumnOnly: true,
expanded: this.props.expanded,
expanded,
expandColumnPosition: 'right',
expandHeaderColumnRenderer: ({ isAnyExpands }) => {
if (isAnyExpands) {
......@@ -283,19 +260,30 @@ class InvestigationTable extends React.Component {
renderer: (investigation) => (
<InvestigationWidget
investigation={investigation}
sessionId={this.props.user.sessionId}
sessionId={user.sessionId}
/>
),
};
return (
<>
<div className={styles.wrapper}>
<InvestigationDateFilter
rootClassName={styles.filter}
value={dateFilter && dateFilter.toDate()}
onDayChange={(date) => setDateFilter(moment(date))}
onClear={() => setDateFilter(undefined)}
/>
</div>
<ResponsiveTable
data={this.props.investigations}
columns={this.getColumns()}
data={investigations.filter(
(inv) => !dateFilter || dateFilter.isSame(inv.startDate, 'day')
)}
columns={getColumns(props)}
expandRow={expandRow}
/>
</>
);
}
}
export default InvestigationTable;
.wrapper {
position: relative;
}
@media (min-width: 50em) {
.filter {
display: flex;
align-items: center;
position: absolute;
left: 0;
top: 0;
}
}
......@@ -7,9 +7,7 @@ import ResponsiveTable from '../Table/ResponsiveTable';
import StatusFilterDropdown from './StatusFilterDropdown';
import styles from './ParcelTable.module.css';
import moment from 'moment';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { formatDate, parseDate } from 'react-day-picker/moment';
import { INVESTIGATION_DATE_FORMAT } from '../../constants';
import InvestigationDateFilter from '../Investigation/InvestigationDateFilter';
function getActionColumn(handleView) {
return {
......@@ -170,25 +168,12 @@ function ParcelTable(props) {
</Button>
</div>
{investigations && (
<div className={styles.filter}>
<DayPickerInput
inputProps={{ className: styles.dateFilterInput }}
<InvestigationDateFilter
rootClassName={styles.filter}
value={dateFilter && dateFilter.toDate()}
placeholder="Filter by start date"
format={INVESTIGATION_DATE_FORMAT}
formatDate={formatDate}
parseDate={parseDate}
onDayChange={handleStartDateChange}
onClear={handleDateFilterClear}
/>
<Button
disabled={!dateFilter}
onClick={handleDateFilterClear}
bsStyle="link"
className={styles.clearButton}
>
<Glyphicon glyph="remove" />
</Button>
</div>
)}
</div>
<ResponsiveTable
......
......@@ -31,10 +31,6 @@
color: darkslategray;
}
.dateFilterInput {
padding: 7px 0;
}
.clickable {
cursor: pointer;
}
Supports Markdown
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