openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16
  17 import React from 'react';
  18 import PropTypes from 'prop-types';
  19 import ReactDOM from 'react-dom';
  20 import classnames from 'classnames';
  21 import i18n from 'nfvo-utils/i18n/i18n.js';
  22 import {notificationType} from './UserNotificationsConstants.js';
  23 import ShowMore from 'react-show-more';
  24
  25 const Notification = ({notification, users, onActionClicked, getNotificationTypeDesc}) => {
  26         const {eventType, read, eventAttributes, dateTime} = notification;
  27         const {itemName, userId, description, versionName, permission, granted} = eventAttributes;
  28         const {fullName: userName} = users.find(user => user.userId === userId);
  29         return (
  30                 <div className={classnames('notification', {'unread': !read})}>
  31                         <div className='notification-data'>
  32                                 <div className='item-name'>
  33                                         {itemName}
  34                                         {versionName && <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>}
  35                                         {!read && <div className='unread-circle-icon'></div> }
  36                                 </div>
  37                                 <div className='flex-items'>
  38                                         <div className='type'>{getNotificationTypeDesc(eventType, permission, granted)}</div>
  39                                         <div className='separator'/>
  40                                         <div className='user-name'>{`${i18n('By')} ${userName}`}</div>
  41                                 </div>
  42                                 {(description || versionName) && <div className='description'>
  43                                         {description && <ShowMore anchorClass='more-less' lines={2} more={i18n('More')} less={i18n('Less')}>
  44                                                 {description}
  45                                         </ShowMore>}
  46                                         {eventType === notificationType.ITEM_CHANGED.SUBMIT &&
  47                                                 <div>
  48                                                         <div>{i18n('Version {versionName} was submitted.', {versionName: versionName})}</div>
  49                                                 </div>
  50                                         }
  51                                 </div>
  52                                 }
  53                                 <div className='date'>{dateTime}</div>
  54                         </div>
  55                         <div className='notification-action'>
  56                                 <div className={classnames('action-button', {'hidden': read})} onClick={() => onActionClicked(notification)}>
  57                                         {eventType === notificationType.PERMISSION_CHANGED ? i18n('Accept') : i18n('Sync')}
  58                                 </div>
  59                         </div>
  60                 </div>
  61         );
  62 };
  63
  64 function getNotificationTypeDesc(eventType, permission, granted) {
  65         switch (eventType) {
  66                 case notificationType.PERMISSION_CHANGED:
  67                         return i18n('Permission {granted}: {permission}', {granted: granted ? 'Granted' : 'Taken', permission: permission});
  68                 case notificationType.ITEM_CHANGED.COMMIT:
  69                         return i18n('Your Copy Is Out Of Sync');
  70                 case notificationType.ITEM_CHANGED.SUBMIT:
  71                         return i18n('Version Submitted');
  72         }
  73 }
  74
  75 class UserNotifications extends React.Component {
  76
  77         static propTypes = {
  78                 currentScreen: PropTypes.object,
  79                 notificationsList: PropTypes.array,
  80                 usersList: PropTypes.array,
  81                 lastScanned: PropTypes.string,
  82                 endOfPage:PropTypes.string,
  83                 onLoadPrevNotifications: PropTypes.func,
  84                 onSync: PropTypes.func,
  85                 updateNotification: PropTypes.func,
  86                 onLoadItemsLists: PropTypes.func
  87         };
  88
  89         render() {
  90                 const {notificationsList = [], usersList, lastScanned, endOfPage} = this.props;
  91
  92                 return (
  93                         <div className='user-notifications'>
  94                                 <div className='notifications-title'>{i18n('Notifications')}</div>
  95                                 <div className='notifications-list' ref='notificationList' onScroll={() => this.loadPrevNotifications(lastScanned, endOfPage)}>
  96                                 {
  97                                         notificationsList.map(notification => (
  98                                                 <Notification key={notification.eventId} notification={notification} users={usersList}
  99                                                         onActionClicked={notification => this.onActionClicked(notification)}
 100                                                         getNotificationTypeDesc={getNotificationTypeDesc}/>))
 101                                 }
 102                                 </div>
 103                         </div>
 104                 );
 105         }
 106
 107         onActionClicked(notification) {
 108                 const {onSync, updateNotification, currentScreen, onLoadItemsLists} = this.props;
 109                 const {eventType, eventAttributes: {itemId, itemName, versionId, versionName}} = notification;
 110                 if(eventType !== notificationType.PERMISSION_CHANGED) {
 111                         onSync({itemId, itemName, versionId, versionName, currentScreen});
 112                 }
 113                 else {
 114                         onLoadItemsLists();
 115                 }
 116                 updateNotification(notification);
 117         }
 118
 119         loadPrevNotifications(lastScanned, endOfPage) {
 120                 if(endOfPage && lastScanned) {
 121                         let element = ReactDOM.findDOMNode(this.refs['notificationList']);
 122                         const {onLoadPrevNotifications} = this.props;
 123
 124                         if (element && element.clientHeight + element.scrollTop === element.scrollHeight) {
 125                                 onLoadPrevNotifications(lastScanned, endOfPage);
 126                         }
 127                 }
 128         }
 129 }
 130
 131 export default UserNotifications;