Commit 4f94d870 authored by Loic Huder's avatar Loic Huder
Browse files

Added date filter to InvestigationTable

parent 145b91d2
Pipeline #32046 passed with stage
in 3 minutes and 10 seconds
import React from 'react'; import React, { useState } from 'react';
import { Col, Glyphicon, Grid, Row } from 'react-bootstrap'; import { Col, Glyphicon, Grid, Row } from 'react-bootstrap';
import moment from 'moment';
import { import {
DATASET_COUNT, DATASET_COUNT,
FILE_COUNT, FILE_COUNT,
...@@ -10,6 +11,8 @@ import ResponsiveTable from '../Table/ResponsiveTable'; ...@@ -10,6 +11,8 @@ import ResponsiveTable from '../Table/ResponsiveTable';
import InvestigationWidget from './InvestigationWidget'; import InvestigationWidget from './InvestigationWidget';
import { beamlineFormatter, dateFormatter, nameFormatter } from './utils'; import { beamlineFormatter, dateFormatter, nameFormatter } from './utils';
import { stringifyBytesSize } from '../../helpers'; import { stringifyBytesSize } from '../../helpers';
import InvestigationDateFilter from './InvestigationDateFilter';
import styles from './InvestigationTable.module.css';
function volumeFormatter(cell, investigation) { function volumeFormatter(cell, investigation) {
const volume = investigation.parameters.find((o) => o.name === VOLUME); const volume = investigation.parameters.find((o) => o.name === VOLUME);
...@@ -228,6 +231,7 @@ function getColumns(props) { ...@@ -228,6 +231,7 @@ function getColumns(props) {
function InvestigationTable(props) { function InvestigationTable(props) {
const { expanded, user, investigations } = props; const { expanded, user, investigations } = props;
const [dateFilter, setDateFilter] = useState();
const expandRow = { const expandRow = {
showExpandColumn: true, showExpandColumn: true,
...@@ -262,11 +266,23 @@ function InvestigationTable(props) { ...@@ -262,11 +266,23 @@ function InvestigationTable(props) {
}; };
return ( return (
<ResponsiveTable <>
data={investigations} <div className={styles.wrapper}>
columns={getColumns(props)} <InvestigationDateFilter
expandRow={expandRow} rootClassName={styles.filter}
/> value={dateFilter && dateFilter.toDate()}
onDayChange={(date) => setDateFilter(moment(date))}
onClear={() => setDateFilter(undefined)}
/>
</div>
<ResponsiveTable
data={investigations.filter(
(inv) => !dateFilter || dateFilter.isSame(inv.startDate, 'day')
)}
columns={getColumns(props)}
expandRow={expandRow}
/>
</>
); );
} }
......
.wrapper {
position: relative;
}
@media (min-width: 50em) {
.filter {
display: flex;
align-items: center;
position: absolute;
left: 0;
top: 0;
}
}
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