Including build.sh to run gulp-webpack
[aai/sparky-fe.git] / 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);

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use