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

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;
}
.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 }}
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
......
......@@ -31,10 +31,6 @@
color: darkslategray;
}
.dateFilterInput {
padding: 7px 0;
}
.clickable {
cursor: pointer;
}
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