Add collaboration feature
Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
new file mode 100644
index 0000000..de105d2
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
@@ -0,0 +1,106 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. 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.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import enhanceWithClickOutside from 'react-click-outside';
+import classnames from 'classnames';
+import {connect} from 'react-redux';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+import Overlay from 'nfvo-components/overlay/Overlay.jsx';
+import UserNotifications from 'sdc-app/onboarding/userNotifications/UserNotifications.jsx';
+import UserNotificationsActionHelper from 'sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js';
+import {actionTypes} from './UserNotificationsConstants.js';
+import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
+
+const mapStateToProps = ({currentScreen, notifications, users: {usersList}}) => {
+ return {currentScreen, notifications, usersList};
+};
+
+const mapActionToProps = (dispatch) => {
+ return {
+ resetNewNotifications: notificationId => UserNotificationsActionHelper.updateLastSeenNotification(dispatch, {notificationId}),
+ toggleOverlay: ({showNotificationsOverlay}) => dispatch({type: actionTypes.TOGGLE_OVERLAY, showNotificationsOverlay}),
+ onLoadPrevNotifications: (lastScanned, endOfPage) => UserNotificationsActionHelper.loadPreviousNotifications(dispatch, {lastScanned, endOfPage}),
+ onSync: ({itemId, itemName, versionId, versionName, currentScreen}) => UserNotificationsActionHelper.syncItem(dispatch, {itemId, itemName, versionId, versionName, currentScreen}),
+ updateNotification: notificationForUpdate => UserNotificationsActionHelper.updateNotification(dispatch, {notificationForUpdate}),
+ onLoadItemsLists: () => OnboardingActionHelper.loadItemsLists(dispatch)
+ };
+};
+
+
+class NotificationsView extends React.Component {
+
+ static propTypes = {
+ currentScreen: PropTypes.object,
+ notifications: PropTypes.object,
+ resetNewNotifications: PropTypes.func,
+ toggleOverlay: PropTypes.func,
+ onLoadPrevNotifications: PropTypes.func,
+ onSync: PropTypes.func,
+ updateNotification: PropTypes.func,
+ onLoadItemsLists: PropTypes.func
+ };
+
+ render() {
+ const {usersList, notifications, onLoadPrevNotifications, onSync, updateNotification, onLoadItemsLists, currentScreen} = this.props;
+ const {notificationsList, numOfNotSeenNotifications, showNotificationsOverlay, lastScanned, endOfPage} = notifications;
+
+ return (
+ <div className='onboarding-notifications'>
+ <div className='notifications-icon' onClick={() => this.onNotificationIconClick()}>
+ <SVGIcon name={numOfNotSeenNotifications > 0 ? 'notificationFullBell' : 'notificationBell'} color={numOfNotSeenNotifications > 0 ? 'primary' : ''}/>
+ <div className={classnames('notifications-count', {'hidden-count': numOfNotSeenNotifications === 0})}>
+ {numOfNotSeenNotifications}
+ </div>
+ </div>
+ {showNotificationsOverlay &&
+ <Overlay>
+ <UserNotifications notificationsList={notificationsList} usersList={usersList} lastScanned={lastScanned} endOfPage={endOfPage}
+ onLoadPrevNotifications={onLoadPrevNotifications} onSync={onSync} updateNotification={updateNotification} onLoadItemsLists={onLoadItemsLists}
+ currentScreen={currentScreen}/>
+ </Overlay>
+ }
+ </div>
+ );
+ }
+
+ handleClickOutside() {
+ const {notifications: {showNotificationsOverlay}} = this.props;
+ if(showNotificationsOverlay) {
+ this.onCloseOverlay();
+ }
+ }
+
+ onNotificationIconClick() {
+ const {notifications: {showNotificationsOverlay}, toggleOverlay} = this.props;
+ if (showNotificationsOverlay) {
+ this.onCloseOverlay();
+ } else {
+ toggleOverlay({showNotificationsOverlay: true});
+ }
+ }
+
+ onCloseOverlay() {
+ const {notifications: {numOfNotSeenNotifications, lastScanned}, resetNewNotifications, toggleOverlay} = this.props;
+ if (numOfNotSeenNotifications) {
+ resetNewNotifications(lastScanned);
+ }
+ toggleOverlay({showNotificationsOverlay: false});
+ }
+}
+
+export default connect(mapStateToProps, mapActionToProps)(enhanceWithClickOutside(NotificationsView));