analytics/webcontent/bi/js/notifications/views/notificationView.js

/*
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: SHARE
 *
 * (C) Copyright IBM Corp. 2015, 2018
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */

define([
	'underscore',
	'jquery',
	"q",
	"bi/sharecommon/utils/simpledoT",
	'text!bi/notifications/templates/notification.html',
	'text!bi/notifications/templates/emptyMessageList.html',
	'text!bi/notifications/templates/loadingMessagesPopUp.html',
	"bi/sharecommon/utils/translator",
	"bi/glass/app/ContentView",
	"bi/notifications/views/messageListView",
	'bi/commons/utils/Utils',
	"bi/notifications/app/n10nController",
	"../../admin/ba-graphics/dist/illustrations-js/notifications_128",
], function(_, $, Q, dot, Template, emptyMsgTemplate, loadingTemplate, t, View, MessageListView, Utils, n10nController, notifications_128) {

	var __notificationView_firstRender = true;
	var __currentMessageList = null;

	var notificationView = View.extend({

		/**
						 * Constructor. Expect
						 * { context: context, maxFetch: maximum_number_of_items_to_retrieve }
						 */
		init: function(options) {
			notificationView.inherited('init', this, arguments);

			$.extend(this, options);

			this.offset = 0;
			this.prependLoading = false;
			this.currentTopUnreadId = '';
			this.currentTopReadId = '';
			this.isShowingEmptyMessageList = false;

			this.loadingAnimation = Utils.getLoadingAnimation(1);
			this.$loadingMessagePopUp = $(dot.template(loadingTemplate)());
		},

		/**
						 * Automatically called when render is done. Sets the focus
						 * to the first message in the notifications list.
						 */
		setFocus: function() {
			this.$el.find('.n10n_message_container .n10n_message:first .n10n_message_inner').focus();
		},

		_setEvents: function() {
			this.offset = 0;
			var $messageList = this.$el.find('.n10n_message_container');
			var lastScrollTopPosition = 0;
			var isLoading = false;

			$messageList.on('keypress', function(event) {
				var key = event.keyCode || event.charCode || event.which || 0;
				// This little bit is to prevent space from scrolling the notification list
				if (key == 32) {
					event.preventDefault();
				}
			});

			$messageList.scroll(function() {
				var currentScrollTopPostion = $messageList.scrollTop();

				if (currentScrollTopPostion > lastScrollTopPosition) {
					if (!isLoading && (currentScrollTopPostion >= $messageList[0].scrollHeight - $messageList.innerHeight())) {
						isLoading = true;

						this._checkForMoreMessages($messageList).then(function() {
							isLoading = false;
						});
					}
				}
				lastScrollTopPosition = currentScrollTopPostion;
			}.bind(this));
		},

		_checkForMoreMessages: function($messageList) {
			$messageList.find('.n10n_message:last').after(this.$loadingMessagePopUp.append(this.loadingAnimation));
			return this.glassContext.getSvc('.Notification').then(function(notificationSvc) {
				return notificationSvc.getNotifications(n10nController.MAX_DISPLAY, this.offset);
			}.bind(this)).then(function(data) {
				__currentMessageList.appendNewMessages(data);
				this.$loadingMessagePopUp.remove();
				this.offset += data.length;
				return true;
			}.bind(this))
			.catch(function() {
				/* swallow */
			});
		},

		_loadNewMessages: function(newData) {
			var $messageList = this.$el.find('.n10n_message_container');
			var newMessagesOffset = 0;
			var topMessageLocation = n10nController.MAX_DISPLAY;
			var loadingAnimation = Utils.getLoadingAnimation(1);
			var $loadingMessagePopUp = $(dot.template(loadingTemplate)());
			var newMessages = [];

			function checkMessages(offset, notificationView, newData) {
				for (var i = 0; i < newData.length; i++) {
					if (newData[i].id === notificationView.currentTopUnreadId) {
						topMessageLocation = i;
						break;
					} else if (newData[i].id === notificationView.currentTopReadId) {
						topMessageLocation = i;
						break;
					}
				}

				newMessages = newMessages.concat(newData.slice(0, topMessageLocation));

				if (newMessages.length === 0) {
					notificationView.prependLoading = false;
					$('.n10n_loading_messages_popup:first').remove();
					return;
				} else {
					if (newMessages.length < newMessagesOffset + n10nController.MAX_DISPLAY) {
						// Current top message is found, prepend to messageListView
						$('.n10n_loading_messages_popup:first').remove();
						notificationView.currentTopUnreadId = newMessages[0].id;
						notificationView.prependLoading = false;
						__currentMessageList.prependNewMessages(newMessages);
					} else {
						// Current Top message not found yet, meaning there is more new messages than MAX_DISPLAY
						newMessagesOffset += n10nController.MAX_DISPLAY;
						notificationView.glassContext.getSvc('.Notification').then(function(notificationSvc) {
							return notificationSvc.getNotifications(n10nController.MAX_DISPLAY, newMessagesOffset);
						}).then(function(data) {
							checkMessages(newMessagesOffset, notificationView, data);
						});
					}
				}
			} // end checkMessages

			if (!this.prependLoading) {
				$messageList.scrollTop(0);
				this.prependLoading = true;
				$('.n10n_message:first').before($loadingMessagePopUp.append(loadingAnimation));
				checkMessages(newMessagesOffset, this, newData);
			}
		},

		render: function() {
			var html = dot.template(Template);

			var labels = {
				n10n_label: t.translate("n10n_label")
			};

			this.$el.addClass("share_message_panel");
			this.$el.html(html(labels));

			this._setEvents();

			return this.glassContext.getSvc('.Notification').then(function(notificationSvc) {
				return notificationSvc.getNotifications(n10nController.MAX_DISPLAY, this.offset).then(function(data) {
					if (!this.isShowingEmptyMessageList && data.length === 0) {
						var sHtml = dot.template(emptyMsgTemplate)({'text': t.translate("empty_notification_list")});
						this.$el.find('.n10n_message_container').append(sHtml);
						this.isShowingEmptyMessageList = true;
						var $icon = this.$el.find('.empty_notifications_illustration_128');
						Utils.setIcon($icon, notifications_128.default.id);
					}

					if (this.isShowingEmptyMessageList && data.length > 0) {
						this.$el.find('.emptyTableContent').remove();
						this.isShowingEmptyMessageList = false;
					}

					this.offset += data.length;

					__currentMessageList = new MessageListView({
						$el: this.$el.find('.n10n_message_container'),
						glassContext: this.glassContext,
						data: data,
						slideout: this.slideout,
						loadMessagesCallback: this._checkForMoreMessages.bind(this)
					});
					__currentMessageList.render();
					this._getNewTopMsgIds();

					if (__notificationView_firstRender) {
						notificationSvc.on("notifications:deleted", this._getNewTopMsgIds.bind(this));
						notificationSvc.on("notifications:read", this._getNewTopMsgIds.bind(this));
						notificationSvc	.on('notifications:new', function(newData) {
							var newMessages = newData;
							// checks
							var noUnreadMessages = (!this.currentTopUnreadId);
							var mixedMessages = !noUnreadMessages;

							var checkNoUnreadMessages = (noUnreadMessages && newData.length);
							var checkMixed = (mixedMessages && (newData[0].id !== this.currentTopUnreadId) && (newData[0].id !== this.currentTopReadId));

							var checkNewMessages = (checkNoUnreadMessages || checkMixed);

							if (checkNewMessages && $('#share_message_list').length && !this.prependLoading) {
								this.glassContext.appController.showToast(t.translate('toast_new_notifications'), {
									'type': 'info',
									'onclick': function(event) {
										event.preventDefault();
										this._loadNewMessages(newMessages);
									}.bind(this),
									'timeOut': 0,
									'extendedTimeOut': 0
								});
							}
						}.bind(this));

						__notificationView_firstRender = false;
					}

					return this;
				}.bind(this));
			}.bind(this));
			// show messages
		},

		_getNewTopMsgIds: function(data) {
			this.currentTopUnreadId = this.$el.find('.n10n_message:has(.unread)').first().attr('id') || '';
			this.currentTopReadId = this.$el.find('.n10n_message:has(.read)').first().attr('id') || '';
		},

		// Method for unit tests; DO NOT TEST
		__setNotificationViewFirstRender: function(value) {
			__notificationView_firstRender = value;
		}

	});

	return notificationView;
});