Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add presetted ranges to DateRange and DateTimeRange inputs #3781

Closed
wants to merge 4 commits into from
Closed

Add presetted ranges to DateRange and DateTimeRange inputs #3781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6215c9c
Add presetted ranges to Range Inputs
gabrieldutra May 8, 2019
be0bc04
Merge branch 'master' into date-ranges-predefined-ranges
gabrieldutra May 15, 2019
efeb892
Use functions and remove 'This' entries
gabrieldutra May 16, 2019
3043ba1
Merge branch 'master' into date-ranges-predefined-ranges
gabrieldutra May 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions client/app/components/DateRangeInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,39 @@
import { isArray } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
import { Moment } from '@/components/proptypes';

const { RangePicker } = DatePicker;

export const PRESETTED_RANGES = {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seemed interesting to export here since Date Time Ranges will basically have the same Presetted ranges + its specific ones (with time included in the ranges).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With this implementation the presets could go "stale" since they're calculated on page load (right?). Ideally should be calculated on preset click / calendar open. But it's unlikely so let's just keep it in mind.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can use the function notation instead to avoid this :)

Yesterday: () => [moment().subtract(1, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')],
'Last week': () => [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
'Last month': () => [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Last year': () => [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
'Last 7 days': () => [moment().subtract(7, 'days'), moment()],
'Last 30 days': () => [moment().subtract(30, 'days'), moment()],
};

export function DateRangeInput({
value,
onSelect,
className,
showPresettedRanges,
}) {
const format = clientConfig.dateFormat || 'YYYY-MM-DD';
const additionalAttributes = {};
if (isArray(value) && value[0].isValid() && value[1].isValid()) {
additionalAttributes.defaultValue = value;
}

if (showPresettedRanges) {
additionalAttributes.ranges = PRESETTED_RANGES;
}

return (
<RangePicker
className={className}
Expand All @@ -32,12 +48,14 @@ DateRangeInput.propTypes = {
value: PropTypes.arrayOf(Moment),
onSelect: PropTypes.func,
className: PropTypes.string,
showPresettedRanges: PropTypes.bool,
};

DateRangeInput.defaultProps = {
value: null,
onSelect: () => {},
className: '',
showPresettedRanges: true,
};

export default function init(ngModule) {
Expand Down
9 changes: 9 additions & 0 deletions client/app/components/DateTimeRangeInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
import { Moment } from '@/components/proptypes';
import { PRESETTED_RANGES } from './DateRangeInput';

const { RangePicker } = DatePicker;

Expand All @@ -13,13 +14,19 @@ export function DateTimeRangeInput({
withSeconds,
onSelect,
className,
showPresettedRanges,
}) {
const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
(withSeconds ? ' HH:mm:ss' : ' HH:mm');
const additionalAttributes = {};
if (isArray(value) && value[0].isValid() && value[1].isValid()) {
additionalAttributes.defaultValue = value;
}

if (showPresettedRanges) {
additionalAttributes.ranges = PRESETTED_RANGES;
}

const currentValueRef = useRef(additionalAttributes.defaultValue);
return (
<RangePicker
Expand All @@ -45,13 +52,15 @@ DateTimeRangeInput.propTypes = {
withSeconds: PropTypes.bool,
onSelect: PropTypes.func,
className: PropTypes.string,
showPresettedRanges: PropTypes.bool,
};

DateTimeRangeInput.defaultProps = {
value: null,
withSeconds: false,
onSelect: () => {},
className: '',
showPresettedRanges: true,
};

export default function init(ngModule) {
Expand Down