implement notifications name filter and slightly change the way we load notification to the ui

3 files changed, 56 insertions, 11 deletions

diff --git a/view/css/widgets.css b/view/css/widgets.css
index 76e829b04..576445dd6 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -178,6 +178,14 @@ a.wikilist {
 	max-height: 70vh;
 	overflow: auto;
 }
+.notifications-textinput input {
+	font-family: FontAwesome, sans-serif;
+}
+
+
+.notifications-textinput {
+	padding: .75rem 0.85rem;
+}
 
 .notification-content.collapsing {
 	overflow: hidden;
diff --git a/view/js/main.js b/view/js/main.js
index 77b8e91e7..52b836936 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -881,10 +881,11 @@ function notify_popup_loader(notifyType) {
 	/* notifications template - different for navbar and notifications widget */
 	var navbar_notifications_tpl= unescape($("#navbar-notifications-template[rel=template]").html());
 	var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
-	var notifications_all = unescape($('<div>').append( $("#nav-" + notifyType + "-see-all").clone() ).html()); //outerHtml hack
-	var notifications_mark = unescape($('<div>').append( $("#nav-" + notifyType + "-mark-all").clone() ).html()); //outerHtml hack
-	var notifications_tt_only = unescape($('<div>').append( $("#tt-" + notifyType + "-only").clone() ).html()); //outerHtml hack
-	var notifications_empty = unescape($("#nav-" + notifyType + "-menu").html());
+	//var notifications_all = unescape($('<div>').append( $("#nav-" + notifyType + "-see-all").clone() ).html()); //outerHtml hack
+	//var notifications_mark = unescape($('<div>').append( $("#nav-" + notifyType + "-mark-all").clone() ).html()); //outerHtml hack
+	//var notifications_tt_only = unescape($('<div>').append( $("#tt-" + notifyType + "-only").clone() ).html()); //outerHtml hack
+	//var notifications_cn_only = unescape($('<div>').append( $("#cn-" + notifyType + "-only").clone() ).html()); //outerHtml hack
+	//var notifications_empty = unescape($("#nav-" + notifyType + "-menu").html());
 
 	var notify_menu = $("#nav-" + notifyType + "-menu");
 
@@ -895,11 +896,13 @@ function notify_popup_loader(notifyType) {
 			window.location.href=window.location.href;
 		}
 
-		$("#navbar-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only);
-		$("#nav-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only);
+		//$("#navbar-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only + notifications_cn_only);
+		//$("#nav-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only + notifications_cn_only);
 
 		$("." + notifyType + "-update").html(data.notify.length);
 
+		notify_menu.html('');
+
 		$(data.notify).each(function() {
 			html = navbar_notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid,this.notify_id,this.thread_top);
 			$("#navbar-" + notifyType + "-menu").append(html);
@@ -915,11 +918,23 @@ function notify_popup_loader(notifyType) {
 
 		if($('#tt-' + notifyType + '-only').hasClass('active'))
 			$('#nav-' + notifyType + '-menu [data-thread_top=false]').hide();
+
+		var filter = $('#cn-' + notifyType + '-input').val();
+
+		if(filter) {
+			$('#nav-' + notifyType + '-menu .notification').each(function(i, el){
+				var cn = $(el).data('contact_name').toLowerCase();
+				if(cn.indexOf(filter) === -1)
+					$(this).addClass('d-none');
+				else
+					$(this).removeClass('d-none');
+			});
+		}
 	});
 
 
 	setTimeout(function() {
-		if(notify_menu.hasClass('show')) {
+		if($('#nav-' + notifyType + '-sub').hasClass('show')) {
 			console.log('updating ' + notifyType + ' notifications...');
 			setTimeout(notify_popup_loader, updateInterval, notifyType);
 		}
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 9d2e08c41..9489e850c 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -65,6 +65,23 @@
 		$('#nav-{{$notification.type}}-menu [data-thread_top=false]').toggle();
 		$(this).toggleClass('active sticky-top');
 	});
+	$(document).on('keyup', '#cn-{{$notification.type}}-input', function(e) {
+		var val = $('#cn-{{$notification.type}}-input').val().toLowerCase();
+
+		if(val)
+			$('#cn-{{$notification.type}}-only').addClass('active sticky-top');
+		else
+			$('#cn-{{$notification.type}}-only').removeClass('active sticky-top');
+
+		$("#nav-{{$notification.type}}-menu .notification").each(function(i, el){
+			var cn = $(el).data('contact_name').toLowerCase();
+
+			if(cn.indexOf(val) === -1)
+				$(this).addClass('d-none');
+			else
+				$(this).removeClass('d-none');
+		});
+	});
 	{{/if}}
 	{{/foreach}}
 
@@ -90,7 +107,7 @@
 	</div>
 	<div id="notifications" class="navbar-nav" data-children=".nav-item">
 		<div id="nav-notifications-template" rel="template">
-			<a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}" data-notify_id="{7}" data-thread_top="{8}">
+			<a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}" data-notify_id="{7}" data-thread_top="{8}" data-contact_name="{2}">
 				<img class="menu-img-3" data-src="{1}">
 				<span class="contactname">{2}</span>
 				<span class="dropdown-sub-text">{3}<br>{4}</span>
@@ -98,11 +115,11 @@
 		</div>
 		{{foreach $notifications as $notification}}
 		<div class="collapse {{$notification.type}}-button">
-			<a class="list-group-item" href="#nav-{{$notification.type}}-menu" title="{{$notification.title}}" data-toggle="collapse" data-parent="#notifications" rel="#nav-{{$notification.type}}-menu">
+			<a class="list-group-item" href="#nav-{{$notification.type}}-sub" title="{{$notification.title}}" data-toggle="collapse" data-parent="#notifications" rel="#nav-{{$notification.type}}-menu">
 				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
 				<span class="float-right badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
 			</a>
-			<div id="nav-{{$notification.type}}-menu" class="collapse notification-content" rel="{{$notification.type}}">
+			<div id="nav-{{$notification.type}}-sub" class="collapse notification-content">
 				{{if $notification.viewall}}
 				<a class="list-group-item text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
 					<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
@@ -117,8 +134,13 @@
 				<div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only">
 					<i class="fa fa-fw fa-filter"></i> {{$notification.filter.label}}
 				</div>
+				<div class="list-group-item notifications-textinput" id="cn-{{$notification.type}}-only">
+					<input id="cn-{{$notification.type}}-input" type="text" class="form-control form-control-sm" placeholder="&#xf0b0;  Filter by name">
+				</div>
 				{{/if}}
-				{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
+				<div id="nav-{{$notification.type}}-menu" class="" rel="{{$notification.type}}">
+					{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
+				</div>
 			</div>
 		</div>
 		{{/foreach}}