X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=src%2Fgeneric-components%2FdateRangeSelector%2FDateRangeSelector.jsx;fp=src%2Fgeneric-components%2FdateRangeSelector%2FDateRangeSelector.jsx;h=09b892faf4ff772e7dffaa852bcce8f1c3fa7e6c;hp=0000000000000000000000000000000000000000;hb=ca007e933bcd9f63aa77801656ed9dd4142c432c;hpb=42b788b852f0604748828e9e325e4a0f01152c75

diff --git a/src/generic-components/dateRangeSelector/DateRangeSelector.jsx b/src/generic-components/dateRangeSelector/DateRangeSelector.jsx
new file mode 100644
index 0000000..09b892f
--- /dev/null
+++ b/src/generic-components/dateRangeSelector/DateRangeSelector.jsx
@@ -0,0 +1,162 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import moment from 'moment-timezone';
+
+import Button from 'react-bootstrap/lib/Button.js';
+import MenuItem from 'react-bootstrap/lib/MenuItem.js';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
+import Popover from 'react-bootstrap/lib/Popover.js';
+
+import DateRange from 'generic-components/dateRange/DateRange.jsx';
+import {DATE_PICKER_PLACEHOLDER} from 'generic-components/dateRange/DateRangeConstants.js';
+import DateRangeActions from 'generic-components/dateRange/DateRangeActions.js';
+import {
+  TODAY,
+  YESTERDAY,
+  LAST_WEEK,
+  LAST_MONTH,
+  CUSTOM,
+  LABEL_TODAY,
+  LABEL_YESTERDAY,
+  LABEL_LAST_WEEK,
+  LABEL_LAST_MONTH,
+  LABEL_CUSTOM_SEARCH,
+  SEARCH_BUTTON_TEXT,
+  ICON_CLASS_CALENDAR,
+  ICON_CLASS_DOWN_CARET
+} from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js';
+import DateRangeSelectorActions from 'generic-components/dateRangeSelector/DateRangeSelectorActions.js';
+import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx';
+
+import i18n from 'utils/i18n/i18n';
+
+let currentDayWithTimeZone = moment(new Date()).tz(moment.tz.guess());
+let mapStateToProps = ({dataIntegrity: {dateRangeSelectorData}}) => {
+
+  let {
+        startDate = currentDayWithTimeZone,
+        endDate = currentDayWithTimeZone,
+        period = TODAY,
+        periodErrText,
+        periodErrSev
+      } = dateRangeSelectorData;
+
+  return {
+    startDate,
+    endDate,
+    period,
+    periodErrText,
+    periodErrSev
+  };
+};
+
+let mapActionToProps = (dispatch) => {
+  return {
+    onNewDateSelection: (startMoment, endMoment, period) => {
+      let periodChangeAction = DateRangeSelectorActions.onPeriodChange(
+        startMoment, endMoment, period);
+      // notify all listeners that the period has changed
+      dispatch(periodChangeAction);
+      // update the DateRange component with the newly selected dates
+      dispatch(DateRangeActions.onStartDateChange(
+        periodChangeAction.data.dateRange.startDate,
+        periodChangeAction.data.dateRange.endDate));
+    }
+  };
+};
+
+export class DateRangeSelector extends Component {
+  static propTypes = {
+    startDate: React.PropTypes.instanceOf(moment),
+    endDate: React.PropTypes.instanceOf(moment),
+    period: React.PropTypes.string,
+    periodErrText: React.PropTypes.string,
+    periodErrSev: React.PropTypes.string
+  };
+
+  newDateSelection(period) {
+    this.props.onNewDateSelection(this.props.startDate, this.props.endDate,
+      period);
+    this.refs.dateRangePopover.hide();
+  }
+
+  componentDidMount() {
+    let {startDate, endDate, period, onNewDateSelection} = this.props;
+    // whenever the DateRangeSelector is first mounted, want it
+    // initialized to today's date
+    startDate = currentDayWithTimeZone;
+    endDate = currentDayWithTimeZone;
+    onNewDateSelection(startDate, endDate, period);
+  }
+
+  render() {
+    let {period, periodErrSev, periodErrText} = this.props;
+    let displayDateRange = (this.props.startDate).format(
+        DATE_PICKER_PLACEHOLDER) + ' - ' +
+      (this.props.endDate).format(DATE_PICKER_PLACEHOLDER);
+    return (
+      <div className='dateRangeSelector'>
+        <OverlayTrigger trigger='click' ref='dateRangePopover'
+                        placement='bottom' overlay={
+     <Popover id='dateRangeSelectorPopover'>
+      <MenuItem active={period === TODAY ? true : false} onSelect={() =>
+       this.newDateSelection(TODAY)}>{i18n(LABEL_TODAY)}</MenuItem>
+      <MenuItem active={period === YESTERDAY ? true : false} onSelect={() =>
+       this.newDateSelection(YESTERDAY)}>{i18n(LABEL_YESTERDAY)}</MenuItem>
+      <MenuItem active={period === LAST_WEEK ? true : false} onSelect={() =>
+       this.newDateSelection(LAST_WEEK)}>{i18n(LABEL_LAST_WEEK)}</MenuItem>
+      <MenuItem active={period === LAST_MONTH ? true : false} onSelect={() =>
+       this.newDateSelection(LAST_MONTH)}>{i18n(LABEL_LAST_MONTH)}</MenuItem>
+      <OverlayTrigger trigger='click' placement='right' overlay={
+       <Popover id='customSearchPopover'>
+        <InlineMessage level={periodErrSev} messageTxt={periodErrText} />
+        <DateRange />
+        <Button className='dateRangeSearchButton' bsSize='xsmall'
+          bsStyle='primary'
+          disabled={periodErrText !== '' ? true : false}
+          onClick={() => this.newDateSelection(CUSTOM)}>
+          {i18n(SEARCH_BUTTON_TEXT)}
+        </Button>
+       </Popover>
+      }>
+       <MenuItem active={period === CUSTOM ? true : false} >
+          {i18n(LABEL_CUSTOM_SEARCH)}
+       </MenuItem>
+      </OverlayTrigger>
+     </Popover>}>
+          <Button className='dateRangeSelectorSearchButton' bsStyle='default'>
+            <i className={ICON_CLASS_CALENDAR} aria-hidden='true'></i>
+            <span>{displayDateRange} </span>
+            <i className={ICON_CLASS_DOWN_CARET} aria-hidden='true'></i>
+          </Button>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
+export default connect(mapStateToProps, mapActionToProps)(DateRangeSelector);