summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx283
1 files changed, 175 insertions, 108 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
index fd5c04db92..01ca50cd4f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
@@ -19,126 +19,193 @@ import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {notificationType} from './UserNotificationsConstants.js';
+import { notificationType } from './UserNotificationsConstants.js';
import ShowMore from 'react-show-more';
-const Notification = ({notification, users, onActionClicked, getNotificationTypeDesc}) => {
- const {eventType, read, eventAttributes, dateTime} = notification;
- const {itemName, userId, description, versionName, permission, granted} = eventAttributes;
- const {fullName: userName} = users.find(user => user.userId === userId);
- return (
- <div className={classnames('notification', {'unread': !read})}>
- <div className='notification-data'>
- <div className='item-name'>
- {itemName}
- {versionName && <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>}
- {!read && <div className='unread-circle-icon'></div> }
- </div>
- <div className='flex-items'>
- <div className='type'>{getNotificationTypeDesc(eventType, permission, granted)}</div>
- <div className='separator'/>
- <div className='user-name'>{`${i18n('By')} ${userName}`}</div>
- </div>
- {(description || versionName) && <div className='description'>
- {description && <ShowMore anchorClass='more-less' lines={2} more={i18n('More')} less={i18n('Less')}>
- {description}
- </ShowMore>}
- {eventType === notificationType.ITEM_CHANGED.SUBMIT &&
- <div>
- <div>{i18n('Version {versionName} was submitted.', {versionName: versionName})}</div>
- </div>
- }
- </div>
- }
- <div className='date'>{dateTime}</div>
- </div>
- <div className='notification-action'>
- <div className={classnames('action-button', {'hidden': read})} onClick={() => onActionClicked(notification)}>
- {eventType === notificationType.PERMISSION_CHANGED
- || eventType === notificationType.ITEM_DELETED
- || eventType === notificationType.ITEM_ARCHIVED
- || eventType === notificationType.ITEM_RESTORED ? i18n('OK') : i18n('Sync')}
- </div>
- </div>
- </div>
- );
+const Notification = ({
+ notification,
+ users,
+ onActionClicked,
+ getNotificationTypeDesc
+}) => {
+ const { eventType, read, eventAttributes, dateTime } = notification;
+ const {
+ itemName,
+ userId,
+ description,
+ versionName,
+ permission,
+ granted
+ } = eventAttributes;
+ const { fullName: userName } = users.find(user => user.userId === userId);
+ return (
+ <div className={classnames('notification', { unread: !read })}>
+ <div className="notification-data">
+ <div className="item-name">
+ {itemName}
+ {versionName && (
+ <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>
+ )}
+ {!read && <div className="unread-circle-icon" />}
+ </div>
+ <div className="flex-items">
+ <div className="type">
+ {getNotificationTypeDesc(
+ eventType,
+ permission,
+ granted
+ )}
+ </div>
+ <div className="separator" />
+ <div className="user-name">{`${i18n(
+ 'By'
+ )} ${userName}`}</div>
+ </div>
+ {(description || versionName) && (
+ <div className="description">
+ {description && (
+ <ShowMore
+ anchorClass="more-less"
+ lines={2}
+ more={i18n('More')}
+ less={i18n('Less')}>
+ {description}
+ </ShowMore>
+ )}
+ {eventType === notificationType.ITEM_CHANGED.SUBMIT && (
+ <div>
+ <div>
+ {i18n(
+ 'Version {versionName} was submitted.',
+ { versionName: versionName }
+ )}
+ </div>
+ </div>
+ )}
+ </div>
+ )}
+ <div className="date">{dateTime}</div>
+ </div>
+ <div className="notification-action">
+ <div
+ className={classnames('action-button', { hidden: read })}
+ onClick={() => onActionClicked(notification)}>
+ {eventType === notificationType.PERMISSION_CHANGED ||
+ eventType === notificationType.ITEM_DELETED ||
+ eventType === notificationType.ITEM_ARCHIVED ||
+ eventType === notificationType.ITEM_RESTORED
+ ? i18n('OK')
+ : i18n('Sync')}
+ </div>
+ </div>
+ </div>
+ );
};
function getNotificationTypeDesc(eventType, permission, granted) {
- switch (eventType) {
- case notificationType.PERMISSION_CHANGED:
- const grantedStr = granted ? i18n('Granted') : i18n('Taken');
- return `${i18n('Permission')} ${grantedStr}: ${permission}`;
- case notificationType.ITEM_CHANGED.COMMIT:
- return i18n('Your Copy Is Out Of Sync');
- case notificationType.ITEM_CHANGED.SUBMIT:
- return i18n('Version Submitted');
- case notificationType.ITEM_DELETED:
- return i18n('Item was deleted');
- case notificationType.ITEM_ARCHIVED:
- return i18n('Item was archived');
- case notificationType.ITEM_RESTORED:
- return i18n('Item was restored from archive');
- }
+ switch (eventType) {
+ case notificationType.PERMISSION_CHANGED:
+ const grantedStr = granted ? i18n('Granted') : i18n('Taken');
+ return `${i18n('Permission')} ${grantedStr}: ${permission}`;
+ case notificationType.ITEM_CHANGED.COMMIT:
+ return i18n('Your Copy Is Out Of Sync');
+ case notificationType.ITEM_CHANGED.SUBMIT:
+ return i18n('Version Submitted');
+ case notificationType.ITEM_DELETED:
+ return i18n('Item was deleted');
+ case notificationType.ITEM_ARCHIVED:
+ return i18n('Item was archived');
+ case notificationType.ITEM_RESTORED:
+ return i18n('Item was restored from archive');
+ }
}
class UserNotifications extends React.Component {
+ static propTypes = {
+ currentScreen: PropTypes.object,
+ notificationsList: PropTypes.array,
+ usersList: PropTypes.array,
+ lastScanned: PropTypes.string,
+ endOfPage: PropTypes.string,
+ onLoadPrevNotifications: PropTypes.func,
+ onSync: PropTypes.func,
+ updateNotification: PropTypes.func,
+ onLoadItemsLists: PropTypes.func
+ };
- static propTypes = {
- currentScreen: PropTypes.object,
- notificationsList: PropTypes.array,
- usersList: PropTypes.array,
- lastScanned: PropTypes.string,
- endOfPage:PropTypes.string,
- onLoadPrevNotifications: PropTypes.func,
- onSync: PropTypes.func,
- updateNotification: PropTypes.func,
- onLoadItemsLists: PropTypes.func
- };
+ render() {
+ const {
+ notificationsList = [],
+ usersList,
+ lastScanned,
+ endOfPage
+ } = this.props;
- render() {
- const {notificationsList = [], usersList, lastScanned, endOfPage} = this.props;
+ return (
+ <div className="user-notifications">
+ <div className="notifications-title">
+ {i18n('Notifications')}
+ </div>
+ <div
+ className="notifications-list"
+ ref="notificationList"
+ onScroll={() =>
+ this.loadPrevNotifications(lastScanned, endOfPage)
+ }>
+ {notificationsList.map(notification => (
+ <Notification
+ key={notification.eventId}
+ notification={notification}
+ users={usersList}
+ onActionClicked={notification =>
+ this.onActionClicked(notification)
+ }
+ getNotificationTypeDesc={getNotificationTypeDesc}
+ />
+ ))}
+ </div>
+ </div>
+ );
+ }
- return (
- <div className='user-notifications'>
- <div className='notifications-title'>{i18n('Notifications')}</div>
- <div className='notifications-list' ref='notificationList' onScroll={() => this.loadPrevNotifications(lastScanned, endOfPage)}>
- {
- notificationsList.map(notification => (
- <Notification key={notification.eventId} notification={notification} users={usersList}
- onActionClicked={notification => this.onActionClicked(notification)}
- getNotificationTypeDesc={getNotificationTypeDesc}/>))
- }
- </div>
- </div>
- );
- }
+ onActionClicked(notification) {
+ const {
+ onSync,
+ updateNotification,
+ currentScreen,
+ onLoadItemsLists
+ } = this.props;
+ const {
+ eventType,
+ eventAttributes: { itemId, itemName, versionId, versionName }
+ } = notification;
+ if (
+ eventType !== notificationType.PERMISSION_CHANGED &&
+ eventType !== notificationType.ITEM_DELETED &&
+ eventType !== notificationType.ITEM_ARCHIVED &&
+ eventType !== notificationType.ITEM_RESTORED
+ ) {
+ onSync({ itemId, itemName, versionId, versionName, currentScreen });
+ } else {
+ onLoadItemsLists();
+ }
+ updateNotification(notification);
+ }
- onActionClicked(notification) {
- const {onSync, updateNotification, currentScreen, onLoadItemsLists} = this.props;
- const {eventType, eventAttributes: {itemId, itemName, versionId, versionName}} = notification;
- if(eventType !== notificationType.PERMISSION_CHANGED &&
- eventType !== notificationType.ITEM_DELETED &&
- eventType !== notificationType.ITEM_ARCHIVED &&
- eventType !== notificationType.ITEM_RESTORED) {
- onSync({itemId, itemName, versionId, versionName, currentScreen});
- }
- else {
- onLoadItemsLists();
- }
- updateNotification(notification);
- }
+ loadPrevNotifications(lastScanned, endOfPage) {
+ if (endOfPage && lastScanned) {
+ let element = ReactDOM.findDOMNode(this.refs['notificationList']);
+ const { onLoadPrevNotifications } = this.props;
- loadPrevNotifications(lastScanned, endOfPage) {
- if(endOfPage && lastScanned) {
- let element = ReactDOM.findDOMNode(this.refs['notificationList']);
- const {onLoadPrevNotifications} = this.props;
-
- if (element && element.clientHeight + element.scrollTop === element.scrollHeight) {
- onLoadPrevNotifications(lastScanned, endOfPage);
- }
- }
- }
+ if (
+ element &&
+ element.clientHeight + element.scrollTop ===
+ element.scrollHeight
+ ) {
+ onLoadPrevNotifications(lastScanned, endOfPage);
+ }
+ }
+ }
}
-export default UserNotifications; \ No newline at end of file
+export default UserNotifications;