From ca007e933bcd9f63aa77801656ed9dd4142c432c Mon Sep 17 00:00:00 2001 From: ARULNA Date: Fri, 2 Jun 2017 16:27:25 -0400 Subject: Initial coomit for AAI-UI(sparky-fe) Change-Id: I9f8482824a52bac431c100939899e760c0fa4fdb Signed-off-by: ARULNA --- .../dateRangeSelector/DateRangeSelector.jsx | 162 +++++++++++++++++++++ .../dateRangeSelector/DateRangeSelectorActions.js | 118 +++++++++++++++ .../DateRangeSelectorConstants.js | 53 +++++++ .../dateRangeSelector/DateRangeSelectorReducer.js | 63 ++++++++ 4 files changed, 396 insertions(+) create mode 100644 src/generic-components/dateRangeSelector/DateRangeSelector.jsx create mode 100644 src/generic-components/dateRangeSelector/DateRangeSelectorActions.js create mode 100644 src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js create mode 100644 src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js (limited to 'src/generic-components/dateRangeSelector') 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 ( +
+ + + this.newDateSelection(TODAY)}>{i18n(LABEL_TODAY)} + + this.newDateSelection(YESTERDAY)}>{i18n(LABEL_YESTERDAY)} + + this.newDateSelection(LAST_WEEK)}>{i18n(LABEL_LAST_WEEK)} + + this.newDateSelection(LAST_MONTH)}>{i18n(LABEL_LAST_MONTH)} + + + + + + }> + + {i18n(LABEL_CUSTOM_SEARCH)} + + + }> + + +
+ ); + } +} +export default connect(mapStateToProps, mapActionToProps)(DateRangeSelector); diff --git a/src/generic-components/dateRangeSelector/DateRangeSelectorActions.js b/src/generic-components/dateRangeSelector/DateRangeSelectorActions.js new file mode 100644 index 0000000..5d786f7 --- /dev/null +++ b/src/generic-components/dateRangeSelector/DateRangeSelectorActions.js @@ -0,0 +1,118 @@ +/* + * ============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 { + dateRangeSelectorActionTypes, + ERROR_UNKNOWN_PERIOD, + TODAY, + YESTERDAY, + LAST_WEEK, + LAST_MONTH, + CUSTOM +} from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js'; + +function buildPeriodChangeAction(startMoment, endMoment, period) { + return { + type: dateRangeSelectorActionTypes.EVENT_PERIOD_CHANGE, + data: { + dateRange: { + startDate: startMoment, + endDate: endMoment + }, + period: period + } + }; +} + +function buildUnknownPeriodAction(startMoment, endMoment, period, errorMsg) { + return { + type: dateRangeSelectorActionTypes.EVENT_PERIOD_ERROR, + data: { + dateRange: { + startDate: startMoment, + endDate: endMoment + }, + period: period, + errorMsg: errorMsg + } + }; +} + +export default { + onPeriodChange(startMoment, endMoment, period) { + var moment = require('moment'); + let startPeriod = moment(new Date()); + let endPeriod = moment(new Date()); + let unknownPeriod = false; + + switch (period) { + case TODAY: + // already have today's date set + break; + case YESTERDAY: + startPeriod = moment(startPeriod).subtract(1, 'days'); + break; + case LAST_WEEK: + startPeriod = moment(startPeriod).subtract(7, 'days'); + break; + case LAST_MONTH: + startPeriod = moment(startPeriod).subtract(1, 'months'); + break; + case CUSTOM: + startPeriod = startMoment; + endPeriod = endMoment; + break; + default: + unknownPeriod = true; + break; + } + + if (unknownPeriod) { + let errorMsg = ERROR_UNKNOWN_PERIOD + ': ' + period; + return buildUnknownPeriodAction(startMoment, endMoment, period, errorMsg); + } else { + /* + Temp fix until we support time ... + - set start date time to 00:00:00 + - set end date time to 23:59:59 + this is to ensure we cover an entire day + (ex: start day May 26, end day May 26 ... expect to cover + 0:00:00 to 23:59:59 for that day) + */ + startPeriod.toDate(); + startPeriod.hour(0); + startPeriod.minute(0); + startPeriod.second(0); + + endPeriod.toDate(); + endPeriod.hour(23); + endPeriod.minute(59); + endPeriod.second(59); + + return buildPeriodChangeAction(startPeriod, endPeriod, period); + } + + } +}; diff --git a/src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js b/src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js new file mode 100644 index 0000000..14554a3 --- /dev/null +++ b/src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js @@ -0,0 +1,53 @@ +/* + * ============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 keyMirror from 'utils/KeyMirror.js'; + +export const dateRangeSelectorActionTypes = keyMirror({ + EVENT_PERIOD_CHANGE: null, + EVENT_PERIOD_ERROR: null, +}); + +// labels +export const LABEL_TODAY = 'Today'; +export const LABEL_YESTERDAY = 'Since Yesterday'; +export const LABEL_LAST_WEEK = 'Since Last Week'; +export const LABEL_LAST_MONTH = 'Since Last Month'; +export const LABEL_CUSTOM_SEARCH = 'Custom'; +export const SEARCH_BUTTON_TEXT = 'Search'; + +// Periods +export const TODAY = 'today'; +export const YESTERDAY = 'yesterday'; +export const LAST_WEEK = 'lastWeek'; +export const LAST_MONTH = 'lastMonth'; +export const CUSTOM = 'custom'; + +// classes +export const ICON_CLASS_CALENDAR = 'fa fa-calendar fa-lg'; +export const ICON_CLASS_DOWN_CARET = 'fa fa-caret-down fa-lg'; + +// errors +export const ERROR_UNKNOWN_PERIOD = 'The specified period is unknown'; diff --git a/src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js b/src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js new file mode 100644 index 0000000..5fa85da --- /dev/null +++ b/src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js @@ -0,0 +1,63 @@ +/* + * ============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 {dateRangeActionTypes} from 'generic-components/dateRange/DateRangeConstants.js'; +import {dateRangeSelectorActionTypes} from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js'; +import {MESSAGE_LEVEL_DANGER} from 'utils/GlobalConstants.js'; + +export default (state = {}, action) => { + + switch (action.type) { + + case dateRangeActionTypes.DATE_RANGE_CHANGE: + return { + ...state, + startDate: action.data.dateRange.startDate, + endDate: action.data.dateRange.endDate, + periodErrText: '', + periodErrSev: '' + }; + + case dateRangeActionTypes.INVALID_DATE_RANGE: + return { + ...state, + startDate: action.data.dateRange.startDate, + endDate: action.data.dateRange.endDate, + periodErrText: action.data.errorMsg, + periodErrSev: MESSAGE_LEVEL_DANGER + }; + + case dateRangeSelectorActionTypes.EVENT_PERIOD_CHANGE: + return { + ...state, + startDate: action.data.dateRange.startDate, + endDate: action.data.dateRange.endDate, + period: action.data.period, + periodErrText: '', + periodErrSev: '' + }; + } + return state; +}; -- cgit 1.2.3-korg