2 * ============LICENSE_START===================================================
3 * SPARKY (AAI UI service)
4 * ============================================================================
5 * Copyright © 2017 AT&T Intellectual Property.
6 * Copyright © 2017 Amdocs
8 * ============================================================================
9 * Licensed under the Apache License, Version 2.0 (the "License");
10 * you may not use this file except in compliance with the License.
11 * You may obtain a copy of the License at
13 * http://www.apache.org/licenses/LICENSE-2.0
15 * Unless required by applicable law or agreed to in writing, software
16 * distributed under the License is distributed on an "AS IS" BASIS,
17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18 * See the License for the specific language governing permissions and
19 * limitations under the License.
20 * ============LICENSE_END=====================================================
22 * ECOMP and OpenECOMP are trademarks
23 * and service marks of AT&T Intellectual Property.
26 import React, {Component} from 'react';
27 import {connect} from 'react-redux';
28 import moment from 'moment-timezone';
30 import Button from 'react-bootstrap/lib/Button.js';
31 import MenuItem from 'react-bootstrap/lib/MenuItem.js';
32 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
33 import Popover from 'react-bootstrap/lib/Popover.js';
35 import DateRange from 'generic-components/dateRange/DateRange.jsx';
36 import {DATE_PICKER_PLACEHOLDER} from 'generic-components/dateRange/DateRangeConstants.js';
37 import DateRangeActions from 'generic-components/dateRange/DateRangeActions.js';
52 } from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js';
53 import DateRangeSelectorActions from 'generic-components/dateRangeSelector/DateRangeSelectorActions.js';
54 import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx';
56 import i18n from 'utils/i18n/i18n';
58 let currentDayWithTimeZone = moment(new Date()).tz(moment.tz.guess());
59 let mapStateToProps = ({dataIntegrity: {dateRangeSelectorData}}) => {
62 startDate = currentDayWithTimeZone,
63 endDate = currentDayWithTimeZone,
67 } = dateRangeSelectorData;
78 let mapActionToProps = (dispatch) => {
80 onNewDateSelection: (startMoment, endMoment, period) => {
81 let periodChangeAction = DateRangeSelectorActions.onPeriodChange(
82 startMoment, endMoment, period);
83 // notify all listeners that the period has changed
84 dispatch(periodChangeAction);
85 // update the DateRange component with the newly selected dates
86 dispatch(DateRangeActions.onStartDateChange(
87 periodChangeAction.data.dateRange.startDate,
88 periodChangeAction.data.dateRange.endDate));
93 export class DateRangeSelector extends Component {
95 startDate: React.PropTypes.instanceOf(moment),
96 endDate: React.PropTypes.instanceOf(moment),
97 period: React.PropTypes.string,
98 periodErrText: React.PropTypes.string,
99 periodErrSev: React.PropTypes.string
102 newDateSelection(period) {
103 this.props.onNewDateSelection(this.props.startDate, this.props.endDate,
105 this.refs.dateRangePopover.hide();
108 componentDidMount() {
109 let {startDate, endDate, period, onNewDateSelection} = this.props;
110 // whenever the DateRangeSelector is first mounted, want it
111 // initialized to today's date
112 startDate = currentDayWithTimeZone;
113 endDate = currentDayWithTimeZone;
114 onNewDateSelection(startDate, endDate, period);
118 let {period, periodErrSev, periodErrText} = this.props;
119 let displayDateRange = (this.props.startDate).format(
120 DATE_PICKER_PLACEHOLDER) + ' - ' +
121 (this.props.endDate).format(DATE_PICKER_PLACEHOLDER);
123 <div className='dateRangeSelector'>
124 <OverlayTrigger trigger='click' ref='dateRangePopover'
125 placement='bottom' overlay={
126 <Popover id='dateRangeSelectorPopover'>
127 <MenuItem active={period === TODAY ? true : false} onSelect={() =>
128 this.newDateSelection(TODAY)}>{i18n(LABEL_TODAY)}</MenuItem>
129 <MenuItem active={period === YESTERDAY ? true : false} onSelect={() =>
130 this.newDateSelection(YESTERDAY)}>{i18n(LABEL_YESTERDAY)}</MenuItem>
131 <MenuItem active={period === LAST_WEEK ? true : false} onSelect={() =>
132 this.newDateSelection(LAST_WEEK)}>{i18n(LABEL_LAST_WEEK)}</MenuItem>
133 <MenuItem active={period === LAST_MONTH ? true : false} onSelect={() =>
134 this.newDateSelection(LAST_MONTH)}>{i18n(LABEL_LAST_MONTH)}</MenuItem>
135 <OverlayTrigger trigger='click' placement='right' overlay={
136 <Popover id='customSearchPopover'>
137 <InlineMessage level={periodErrSev} messageTxt={periodErrText} />
139 <Button className='dateRangeSearchButton' bsSize='xsmall'
141 disabled={periodErrText !== '' ? true : false}
142 onClick={() => this.newDateSelection(CUSTOM)}>
143 {i18n(SEARCH_BUTTON_TEXT)}
147 <MenuItem active={period === CUSTOM ? true : false} >
148 {i18n(LABEL_CUSTOM_SEARCH)}
152 <Button className='dateRangeSelectorSearchButton' bsStyle='default'>
153 <i className={ICON_CLASS_CALENDAR} aria-hidden='true'></i>
154 <span>{displayDateRange} </span>
155 <i className={ICON_CLASS_DOWN_CARET} aria-hidden='true'></i>
162 export default connect(mapStateToProps, mapActionToProps)(DateRangeSelector);