src/generic-components/dateRangeSelector/DateRangeSelector.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  *
  21  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  22  */
  23 import React, {Component} from 'react';
  24 import {connect} from 'react-redux';
  25 import moment from 'moment-timezone';
  26
  27 import Button from 'react-bootstrap/lib/Button.js';
  28 import MenuItem from 'react-bootstrap/lib/MenuItem.js';
  29 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
  30 import Popover from 'react-bootstrap/lib/Popover.js';
  31
  32 import DateRange from 'generic-components/dateRange/DateRange.jsx';
  33 import {DATE_PICKER_PLACEHOLDER} from 'generic-components/dateRange/DateRangeConstants.js';
  34 import DateRangeActions from 'generic-components/dateRange/DateRangeActions.js';
  35 import {
  36   TODAY,
  37   YESTERDAY,
  38   LAST_WEEK,
  39   LAST_MONTH,
  40   CUSTOM,
  41   LABEL_TODAY,
  42   LABEL_YESTERDAY,
  43   LABEL_LAST_WEEK,
  44   LABEL_LAST_MONTH,
  45   LABEL_CUSTOM_SEARCH,
  46   SEARCH_BUTTON_TEXT,
  47   ICON_CLASS_CALENDAR,
  48   ICON_CLASS_DOWN_CARET
  49 } from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js';
  50 import DateRangeSelectorActions from 'generic-components/dateRangeSelector/DateRangeSelectorActions.js';
  51 import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx';
  52
  53 import i18n from 'utils/i18n/i18n';
  54
  55 let currentDayWithTimeZone = moment(new Date()).tz(moment.tz.guess());
  56 let mapStateToProps = ({dataIntegrity: {dateRangeSelectorData}}) => {
  57
  58   let {
  59         startDate = currentDayWithTimeZone,
  60         endDate = currentDayWithTimeZone,
  61         period = TODAY,
  62         periodErrText,
  63         periodErrSev
  64       } = dateRangeSelectorData;
  65
  66   return {
  67     startDate,
  68     endDate,
  69     period,
  70     periodErrText,
  71     periodErrSev
  72   };
  73 };
  74
  75 let mapActionToProps = (dispatch) => {
  76   return {
  77     onNewDateSelection: (startMoment, endMoment, period) => {
  78       let periodChangeAction = DateRangeSelectorActions.onPeriodChange(
  79         startMoment, endMoment, period);
  80       // notify all listeners that the period has changed
  81       dispatch(periodChangeAction);
  82       // update the DateRange component with the newly selected dates
  83       dispatch(DateRangeActions.onStartDateChange(
  84         periodChangeAction.data.dateRange.startDate,
  85         periodChangeAction.data.dateRange.endDate));
  86     }
  87   };
  88 };
  89
  90 export class DateRangeSelector extends Component {
  91   static propTypes = {
  92     startDate: React.PropTypes.instanceOf(moment),
  93     endDate: React.PropTypes.instanceOf(moment),
  94     period: React.PropTypes.string,
  95     periodErrText: React.PropTypes.string,
  96     periodErrSev: React.PropTypes.string
  97   };
  98
  99   newDateSelection(period) {
 100     this.props.onNewDateSelection(this.props.startDate, this.props.endDate,
 101       period);
 102     this.refs.dateRangePopover.hide();
 103   }
 104
 105   componentDidMount() {
 106     let {startDate, endDate, period, onNewDateSelection} = this.props;
 107     // whenever the DateRangeSelector is first mounted, want it
 108     // initialized to today's date
 109     startDate = currentDayWithTimeZone;
 110     endDate = currentDayWithTimeZone;
 111     onNewDateSelection(startDate, endDate, period);
 112   }
 113
 114   render() {
 115     let {period, periodErrSev, periodErrText} = this.props;
 116     let displayDateRange = (this.props.startDate).format(
 117         DATE_PICKER_PLACEHOLDER) + ' - ' +
 118       (this.props.endDate).format(DATE_PICKER_PLACEHOLDER);
 119     return (
 120       <div className='dateRangeSelector'>
 121         <OverlayTrigger trigger='click' ref='dateRangePopover'
 122                         placement='bottom' overlay={
 123      <Popover id='dateRangeSelectorPopover'>
 124       <MenuItem active={period === TODAY ? true : false} onSelect={() =>
 125        this.newDateSelection(TODAY)}>{i18n(LABEL_TODAY)}</MenuItem>
 126       <MenuItem active={period === YESTERDAY ? true : false} onSelect={() =>
 127        this.newDateSelection(YESTERDAY)}>{i18n(LABEL_YESTERDAY)}</MenuItem>
 128       <MenuItem active={period === LAST_WEEK ? true : false} onSelect={() =>
 129        this.newDateSelection(LAST_WEEK)}>{i18n(LABEL_LAST_WEEK)}</MenuItem>
 130       <MenuItem active={period === LAST_MONTH ? true : false} onSelect={() =>
 131        this.newDateSelection(LAST_MONTH)}>{i18n(LABEL_LAST_MONTH)}</MenuItem>
 132       <OverlayTrigger trigger='click' placement='right' overlay={
 133        <Popover id='customSearchPopover'>
 134         <InlineMessage level={periodErrSev} messageTxt={periodErrText} />
 135         <DateRange />
 136         <Button className='dateRangeSearchButton' bsSize='xsmall'
 137           bsStyle='primary'
 138           disabled={periodErrText !== '' ? true : false}
 139           onClick={() => this.newDateSelection(CUSTOM)}>
 140           {i18n(SEARCH_BUTTON_TEXT)}
 141         </Button>
 142        </Popover>
 143       }>
 144        <MenuItem active={period === CUSTOM ? true : false} >
 145           {i18n(LABEL_CUSTOM_SEARCH)}
 146        </MenuItem>
 147       </OverlayTrigger>
 148      </Popover>}>
 149           <Button className='dateRangeSelectorSearchButton' bsStyle='default'>
 150             <i className={ICON_CLASS_CALENDAR} aria-hidden='true'></i>
 151             <span>{displayDateRange} </span>
 152             <i className={ICON_CLASS_DOWN_CARET} aria-hidden='true'></i>
 153           </Button>
 154         </OverlayTrigger>
 155       </div>
 156     );
 157   }
 158 }
 159 export default connect(mapStateToProps, mapActionToProps)(DateRangeSelector);