src/generic-components/dateRangeSelector/DateRangeSelector.jsx

   1 /*
   2  * ============LICENSE_START===================================================
   3  * SPARKY (AAI UI service)
   4  * ============================================================================
   5  * Copyright © 2017 AT&T Intellectual Property.
   6  * Copyright © 2017 Amdocs
   7  * All rights reserved.
   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
  12  *
  13  *      http://www.apache.org/licenses/LICENSE-2.0
  14  *
  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=====================================================
  21  *
  22  * ECOMP and OpenECOMP are trademarks
  23  * and service marks of AT&T Intellectual Property.
  24  */
  25
  26 import React, {Component} from 'react';
  27 import {connect} from 'react-redux';
  28 import moment from 'moment-timezone';
  29
  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';
  34
  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';
  38 import {
  39   TODAY,
  40   YESTERDAY,
  41   LAST_WEEK,
  42   LAST_MONTH,
  43   CUSTOM,
  44   LABEL_TODAY,
  45   LABEL_YESTERDAY,
  46   LABEL_LAST_WEEK,
  47   LABEL_LAST_MONTH,
  48   LABEL_CUSTOM_SEARCH,
  49   SEARCH_BUTTON_TEXT,
  50   ICON_CLASS_CALENDAR,
  51   ICON_CLASS_DOWN_CARET
  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';
  55
  56 import i18n from 'utils/i18n/i18n';
  57
  58 let currentDayWithTimeZone = moment(new Date()).tz(moment.tz.guess());
  59 let mapStateToProps = ({dataIntegrity: {dateRangeSelectorData}}) => {
  60
  61   let {
  62         startDate = currentDayWithTimeZone,
  63         endDate = currentDayWithTimeZone,
  64         period = TODAY,
  65         periodErrText,
  66         periodErrSev
  67       } = dateRangeSelectorData;
  68
  69   return {
  70     startDate,
  71     endDate,
  72     period,
  73     periodErrText,
  74     periodErrSev
  75   };
  76 };
  77
  78 let mapActionToProps = (dispatch) => {
  79   return {
  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));
  89     }
  90   };
  91 };
  92
  93 export class DateRangeSelector extends Component {
  94   static propTypes = {
  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
 100   };
 101
 102   newDateSelection(period) {
 103     this.props.onNewDateSelection(this.props.startDate, this.props.endDate,
 104       period);
 105     this.refs.dateRangePopover.hide();
 106   }
 107
 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);
 115   }
 116
 117   render() {
 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);
 122     return (
 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} />
 138         <DateRange />
 139         <Button className='dateRangeSearchButton' bsSize='xsmall'
 140           bsStyle='primary'
 141           disabled={periodErrText !== '' ? true : false}
 142           onClick={() => this.newDateSelection(CUSTOM)}>
 143           {i18n(SEARCH_BUTTON_TEXT)}
 144         </Button>
 145        </Popover>
 146       }>
 147        <MenuItem active={period === CUSTOM ? true : false} >
 148           {i18n(LABEL_CUSTOM_SEARCH)}
 149        </MenuItem>
 150       </OverlayTrigger>
 151      </Popover>}>
 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>
 156           </Button>
 157         </OverlayTrigger>
 158       </div>
 159     );
 160   }
 161 }
 162 export default connect(mapStateToProps, mapActionToProps)(DateRangeSelector);