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.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 }}
-                  value={dateFilter && dateFilter.toDate()}
-                  placeholder="Filter by start date"
-                  format={INVESTIGATION_DATE_FORMAT}
-                  formatDate={formatDate}
-                  parseDate={parseDate}
-                  onDayChange={handleStartDateChange}
-                />
-                <Button
-                  disabled={!dateFilter}
-                  onClick={handleDateFilterClear}
-                  bsStyle="link"
-                  className={styles.clearButton}
-                >
-                  <Glyphicon glyph="remove" />
-                </Button>
-              </div>
+              <InvestigationDateFilter
+                rootClassName={styles.filter}
+                value={dateFilter && dateFilter.toDate()}
+                onDayChange={handleStartDateChange}
+                onClear={handleDateFilterClear}
+              />
             )}
           </div>
           <ResponsiveTable

src/components/Parcels/ParcelTable.module.css

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