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

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

See merge request !424

src/components/Investigation/InvestigationDateFilter.js

+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;

src/components/Investigation/InvestigationDateFilter.module.css

+.clearButton {
+  color: inherit;
+  padding-left: 6px;
+}
+
+.clearButton:hover {
+  color: darkslategray;
+}
+
+.dateFilterInput {
+  padding: 7px 0;
+}

src/components/Investigation/InvestigationTable.js

-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;

src/components/Investigation/InvestigationTable.module.css

+.wrapper {
+  position: relative;
+}
+
+@media (min-width: 50em) {
+  .filter {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}

src/components/Parcels/ParcelTable.js

@@ -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

src/components/Parcels/ParcelTable.module.css

@@ -31,10 +31,6 @@
   color: darkslategray;
 }
 
-.dateFilterInput {
-  padding: 7px 0;
-}
-
 .clickable {
   cursor: pointer;
 }