Deliver centralized role management feature

Repair multiple defects also.
Revise deployment to use docker-compose.
Remove all zip archives.

Issue: PORTAL-21, PORTAL-25, PORTAL-28, PORTAL-52, PORTAL-69,
    PORTAL-74, PORTAL-76, PORTAL-80, PORTAL-82
Change-Id: Ie72fec7d35ba78beb162bba6ed27b2caee340c61
Signed-off-by: Christopher Lott (cl778h) <clott@research.att.com>

9 files changed, 867 insertions, 713 deletions

diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js
index 5fc2d894..a691887f 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js
@@ -22,12 +22,17 @@
 (function () {
 
     class userNotificationCtrl {
-        constructor($scope,   message,  ngDialog) {
-    		$scope.messageData=message.text;
-   			//alert("message.text" + $scope.messageData);
+        constructor($scope,  ngDialog,items) {
+    		$scope.messageData=items.text;
+    		$scope.messageObject=items.messageObject;
+    		$scope.selectedAdminNotification=items.selectedAdminNotification;
+    		$scope.messageRecipients=items.messageRecipients;
+    		$scope.notifiHyperlink=function(ticket){
+     	    	window.open(ticket);
+    		}
          }
     }
-    userNotificationCtrl.$inject = ['$scope',  'message', 'ngDialog'];
+    userNotificationCtrl.$inject = ['$scope','ngDialog','items'];
     angular.module('ecompApp').controller('userNotificationCtrl', userNotificationCtrl);
 })();
 
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html
index 5e5c55db..45c73518 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html
@@ -17,32 +17,58 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="w-ecomp-user-json-notification-details-admin"
-	ng-style="{bottom: tabBottom}">
-	 <div class="w-ecomp-main-container" >
-	<div class="user-notification" >
-		<div id="'widgets-details-title" class="w-ecomp-main-json-view-title"> Message Notification Details </div>
-	
-	
-<div class="notifications-properties-main">
-		
-		<div ng-bind-html="messageData"></div>
-		</div>
-		
-            <div class="dialog-control-close">
-               
-                <button id="div-cancel-button" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>
-            </div>
-		
+
+<div class="b2b-modal-header">
+			<h2 class="w-ecomp-main-json-view-title" id="notification-details-title">Message Notification Details</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="user-notification-button-cancel"
+					ng-click="$dismiss('cancel')"></button>
 			</div>
+		</div>
+
+		<div class="b2b-modal-body">
+		<div class="notifications-properties-main">
+
+				<div>
 
-</div>
-</div>
+					<p>Message Source :{{selectedAdminNotification.msgSource}}</p>
+					<p>Message Title :{{selectedAdminNotification.msgHeader}}</p>
+					<p>Message Recipient :{{messageRecipients}}</p>
+					Notification Hyperlink :<a
+						ng-click="notifiHyperlink('{{selectedAdminNotification.notificationHyperlink}}')">{{selectedAdminNotification.notificationHyperlink}}</a>
 
-<script type="application/javascript">
-    $(document).ready(function(){
-        $(".ngdialog-content").css("width","40%")
-        $(".ngdialog-content").css("height","450px")
+					<div ng-repeat="(key, data) in messageObject">
 
-    });
-</script>
+						<div ng-switch on="key">
+							<div ng-switch-when="ticketNum">
+								{{key}} : <a
+									ng-click="notifiHyperlink('{{selectedAdminNotification.notificationHyperlink}}')">{{data}}
+								</a>
+							</div>
+							<div ng-switch-when="eventDate">
+								<p>{{key}} : {{data | date:'yyyy-MM-dd HH:mm:ss Z'}}</p>
+							</div>
+							<div ng-switch-when="lastModifiedDate">
+								<p>{{key}} : {{data | date:'yyyy-MM-dd HH:mm:ss Z'}}</p>
+							</div>
+							<div ng-switch-default>
+								<p>{{key}} :{{data}}</p>
+							</div>
+						</div>
+					</div>
+
+
+				</div>
+			</div>
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="dialog-control">
+				<button id="div-cancel-button" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')"role="button" tabindex="0">Close</button>
+						
+					</div>
+			</div>
+			
+			
+			
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js
index 4207bc6e..146bc523 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js
@@ -22,7 +22,7 @@
 (function () {
 
     class userNotificationsCtrl {
-        constructor($scope, $log, notificationService, confirmBoxService, $modal, ngDialog, $state) {
+        constructor($scope, $log, notificationService, filterFilter,confirmBoxService, $modal, ngDialog, $state) {
 
         	var priorityItems={"1":"Normal","2":"Important"};
         	$scope.priorityItems=priorityItems;
@@ -33,7 +33,8 @@
         	$scope.totalPages1 = 0;
         	$scope.viewPerPage1 = 15;
         	$scope.currentPage1 = 1;
-        	$scope.showLoader = false;
+            $scope.startIndex=0;
+            $scope.showLoader = false;
         	$scope.firstPlay = true;
         	// Start with empty list to silence error in console
         	$scope.tableData = [];
@@ -44,33 +45,35 @@
                 $scope.adminNotifications = res.data;
                 $scope.isLoadingTable = false;
                 $scope.tableData = res.data;
-    			var totalItems = $scope.tableData.length;
+                var totalItems = $scope.tableData.length;
     			$scope.totalPages1  = Math.ceil(totalItems / $scope.viewPerPage1);
     			$scope.showLoader = false;
     			$scope.currentPage1=1;
-    			var endIndex = 1 * $scope.viewPerPage1;
-    			var startIndex = endIndex - $scope.viewPerPage1;
-    			$scope.tableAdminNotifItems = $scope.tableData.slice(startIndex, endIndex); 
+    			$scope.tableAdminNotifItems = $scope.tableData; 
             	}).catch(err => {
                 $log.error('userNotificationsCtrl:getAdminNotifications:: error ', err);
                 $scope.isLoadingTable = false;
             });
              }
         	 
+        	
       	   getAdminNotifications();           
-
-        	$scope.customPageHandler = function(num) {
-        		$scope.currentPage1=num;
-        		var endIndex = num * $scope.viewPerPage1;
-        		var startIndex = endIndex - $scope.viewPerPage1;
-        		$scope.tableAdminNotifItems = $scope.tableData.slice(startIndex, endIndex);
-        	};
-        	  
-
+      	   
+        	
+        	  $scope.$watch('searchString', function (searchKey) {
+                  var search = searchKey;               
+                  this.totalPage1 = filterFilter($scope.tableData, search);
+                  var resultLen = this.totalPage1.length;
+                  $scope.totalPage1 = Math.ceil(resultLen/$scope.viewPerPage1);
+                  $scope.currentPage1 = 1;
+              });
           
-
+        	  $scope.updateTable = (num) => {
+                  this.startIndex=this.viewPerPage1*(num-1);
+                  this.currentPage1 = num;
+              };
            	
-           $scope.removeUserNotification = function (selectedAdminNotification) {
+           this.removeUserNotification = (selectedAdminNotification) => {
                 selectedAdminNotification.activeYn = 'N';
                 confirmBoxService.deleteItem(selectedAdminNotification.msgHeader)
                     .then(isConfirmed => {
@@ -114,41 +117,27 @@
            
 
           
-        	 $scope.showDetailedJsonMessage=function (selectedAdminNotification) {
+           this.showDetailedJsonMessage = (selectedAdminNotification) => {
         		 notificationService.getMessageRecipients(selectedAdminNotification.notificationId).then(res =>{
                      $scope.messageRecipients = res;
 				 var messageObject=JSON.parse(selectedAdminNotification.msgDescription);
-				 var html="";
-				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.msgSource+'</p>';
-				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.msgHeader+'</p>';
-				 html+='<p>'+'Message Recipient'+' : '+$scope.messageRecipients+'</p>';
-
-				 for(var field in  messageObject){
-					 if(field=='eventDate'||field=='lastModifiedDate'){
-						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';
-						  
-					 }else{
-					 html+='<p>'+field+' : '+messageObject[field]+'</p>';
-					 
-					 }
-				 }
-
- 		     var modalInstance = ngDialog.open({
- 				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',
- 				    controller: 'userNotificationCtrl',
- 				    resolve: {
- 				    	message: function () {
- 				    		var message = {
- 				    			   title:    '',
- 		                       		text:    html
- 		                       		
- 		                           	};
- 				          return message;
- 				        },
- 				     
- 				      }
- 				  }); 
- 		     
+				  var modalInstance = $modal.open({
+	                    templateUrl: 'app/views/user-notifications-admin/user.notifications.json.details.modal.page.html',
+	                    controller: 'userNotificationCtrl',
+	                    sizeClass: 'modal-large', 
+	                    resolve: {
+	    					items: function () {
+	    						var items = {
+	  				    			   title:    '',
+	 	                       		    selectedAdminNotification:selectedAdminNotification,messageObject:messageObject,messageRecipients:$scope.messageRecipients
+	  		                       		
+	  		                           	};
+	  				          return items;
+	    			        	}
+	    		        }
+	                })
+		     
+      	 
         	 }).catch(err => {
                  $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);
                  $scope.isLoadingTable = false;
@@ -157,7 +146,7 @@
  			 };
     
 			 
-            $scope.editUserNotificationModal = function (selectedAdminNotification) {
+            this.editUserNotificationModal = (selectedAdminNotification) => {
 
                 // retrieve roleIds here
                 selectedAdminNotification.roleIds = null;
@@ -165,32 +154,44 @@
                     .then(res => {
                         selectedAdminNotification.roleIds = res.data;
 
-                        $scope.openUserNotificationModal(selectedAdminNotification);
+                        this.openUserNotificationModal(selectedAdminNotification);
                     }).catch(err => {
                         $log.error('UserNotifCtlr:getNotificationRoles:: error ', err);
 
                     });
             }
 
-            $scope.openUserNotificationModal = function (selectedAdminNotification) {
+            this.openUserNotificationModal = (selectedAdminNotification) => {
                 let data = null;
                 if (selectedAdminNotification) {
                     data = {
                         notif: selectedAdminNotification
                     }
                 }
-                ngDialog.open({
+             
+                
+                var modalInstance = $modal.open({
                     templateUrl: 'app/views/user-notifications-admin/user.notifications.modal.page.html',
-                    controller: 'userNotificationsModalCtrl',
-                    controllerAs: 'userNotifModal',
-                    data: data
-                }).closePromise.then(function (needUpdate) {
-                    getAdminNotifications();
-                });
+                    controller: 'userNotificationsModalCtrl as userNotifModal',
+                    sizeClass: 'modal-large', 
+                    resolve: {
+    					items: function () {
+        	        	  return data;
+    			        	}
+    		        }
+                })
+                
+                modalInstance.result.finally(function () {
+                		getAdminNotifications();
+     	        });
             }
-
+            $scope.customPageHandler = function(num) {
+        		$scope.currentPage1=num;
+        		this.startIndex=$scope.viewPerPage1*(num-1);
+        	};
+        	  
         }
     }
-    userNotificationsCtrl.$inject = ['$scope', '$log', 'notificationService', 'confirmBoxService', '$modal', 'ngDialog', '$state'];
+    userNotificationsCtrl.$inject = ['$scope', '$log', 'notificationService','filterFilter', 'confirmBoxService', '$modal', 'ngDialog', '$state'];
     angular.module('ecompApp').controller('userNotificationsCtrl', userNotificationsCtrl);
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less
index e17ec46f..57926695 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less
@@ -14,11 +14,15 @@
     margin-left: 220px;
   .w-ecomp-main-json-view-title {
     //.n18r;
-    .dGray18r;  //AT&T Dark Gray
+    .dGray18r;  
     border-bottom: @portalDBlue 3px solid;
     width:100%;
   }
   
+   a:hover {
+  cursor:pointer;
+ }
+  
   .notifications-properties-main{
      padding-top: 16px;
     font-size: 14px;
@@ -27,15 +31,12 @@
       
   }
 input:not([type="button"]) {
-  height: 22px; }
+  height: 22px; 
+  }
   .widget-properties-main {
     padding: 16px;
     height: 460px;
     overflow-y: auto;
-
-
-    
-
   }
 
 .dialog-control-close {
@@ -44,5 +45,27 @@ input:not([type="button"]) {
     right: 16px;
 }
 
+.notifcation-label-user-requiredId {
+	color: red;
+}
+
+.user-enddate-error-txt {
+	color: #cf2a2a; 
+	font-size: 10px;
+}
+
+.user-enddate-error-small {
+	position: absolute;
+}
+
+.add-notification-input-title-ht {
+	height: 50px;
+}
+
+
+
+}
 
-}
\ No newline at end of file
+  a:hover {
+  cursor:pointer;
+ }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.less b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.less
index ee5f9e4d..3be148c8 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.less
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.less
@@ -124,5 +124,21 @@ p {
     width: 160px;
     margin-bottom: 11px;
   }
+}
+
 
+.tree-div{
+	height:300px;
+	overflow:auto;
+	.checkbox .skin{
+		left: 0px; 
+	    top: 0px; 
+	}
+	.checkbox input[type=checkbox]{
+		 margin-left: 0px;
+	}
+	.checkbox {
+	    display: inline !important;
+	    vertical-align: middle; 
+	}
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js
index 7821e070..48f7d9df 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js
@@ -22,18 +22,19 @@
 (function () {
 
     class userNotificationsModalCtrl {
-        constructor($scope, $log, functionalMenuService, confirmBoxService, notificationService, $modal, ngDialog, $state, $filter) {
-
-            let newNotifModel = {
+        constructor($scope, $log, functionalMenuService, confirmBoxService, notificationService, $modal, ngDialog, $state, $filter,items) {
+        	this.debug = false;
+            $scope.newNotifModel = {
                 'isOnlineUsersOnly': null,
                 'isForAllRolesOptions': null,
                 'selectedPriority': null,
                 'isActive': null,
-                'startTime': null,
-                'endTime': null,
+                'startTime': '',
+                'endTime': '',
                 'msgHeader': null,
                 'msgDescription': null,
                 'roleIds': null,
+                'anyTreeItemSelected':false,
                 'roleObj': {notificationRoleIds:null}
             };
             
@@ -65,52 +66,52 @@
                 { "index": 0, "value": "Y", "title": "Yes" },
                 { "index": 1, "value": "N", "title": "No" }
             ];
-            $scope.isActive = $scope.isActiveOptions[0];
-            $scope.selectPriority = $scope.priorityOptions[0];
-            $scope.isOnlineUsersOnly = $scope.onlineAllUsersOptions[1];
-          $scope.isForAllRoles=$scope.isForAllRolesOptions[0].value;
-          $scope.isFunctionalMenu ="Y";
-
-          $scope.selectedPriority=$scope.priorityOptions[0].value;
-
-            // $scope.notificationRoleIds = [];
-            $scope.msgHeader = '';
-            $scope.msgDescription = '';
-            $scope.treeTitle="Functional Menu";
-            $scope.notifObj= {isCategoriesFunctionalMenu:true};
+            $scope.newNotifModel.isActive = $scope.isActiveOptions[0];
+            $scope.newNotifModel.selectPriority = $scope.priorityOptions[0];
+            $scope.newNotifModel.isOnlineUsersOnly = $scope.onlineAllUsersOptions[1];
+            $scope.newNotifModel.isForAllRoles=$scope.isForAllRolesOptions[0].value;
+          $scope.newNotifModel.isFunctionalMenu ="Y";
+
+          $scope.newNotifModel.selectedPriority=$scope.priorityOptions[0].value;
+          $scope.newNotifModel.msgHeader = '';
+          $scope.newNotifModel.msgDescription = '';
+            $scope.newNotifModel.treeTitle="Functional Menu";
+            $scope.newNotifModel.notifObj= {isCategoriesFunctionalMenu:true};
 
             let init = () => {
-                // $log.info('userNotificationsModalCtrl::init');
+            	if(this.debug)
+            		$log.debug('userNotificationsModalCtrl::init');
                 this.isSaving = false;
                 var today = new Date();
                 $scope.minDate = today.toISOString().substring(0, 10);
                 var threeMonthsFromNow = new Date();
                 threeMonthsFromNow.setMonth(threeMonthsFromNow.getMonth() + 3);
                 $scope.maxDate = threeMonthsFromNow.toISOString().substring(0, 10);
-                if ($scope.ngDialogData && $scope.ngDialogData.notif) {
-                    // $log.debug('userNotificationsModalCtrl:init:: Edit
-					// notification mode for', $scope.ngDialogData.notif);
+                if (items && items.notif) {
+                	if(this.debug)
+                		$log.debug('userNotificationsModalCtrl:init:: Edit notification mode for', items.notif);
                     $scope.isEditMode = true;
                     $scope.editModeObj = {isEditMode: true};
-                    this.notif = _.clone($scope.ngDialogData.notif);
+                    this.notif = _.clone(items.notif);
                     $scope.modalPgTitle = 'View Notification'
-                    $scope.isOnlineUsersOnly = $scope.onlineAllUsersOptions[this.YN_index_mapping[this.notif.isForOnlineUsers]];
-                    $scope.isForAllRoles = $scope.isForAllRolesOptions[this.YN_index_mapping[this.notif.isForAllRoles]].value;
-                    $scope.isActive = $scope.isActiveOptions[this.YN_index_mapping[this.notif.activeYn]];
-                    $scope.selectedPriority = $scope.priorityOptions[this.notif.priority - 1].value;
-                    $scope.startTime = new Date(this.notif.startTime);
-                    $scope.endTime = new Date(this.notif.endTime);
-                    $scope.msgHeader = this.notif.msgHeader;
-                    $scope.msgDescription = this.notif.msgDescription;
+                    $scope.newNotifModel.isOnlineUsersOnly = $scope.onlineAllUsersOptions[this.YN_index_mapping[this.notif.isForOnlineUsers]];
+                    $scope.newNotifModel.isForAllRoles = $scope.isForAllRolesOptions[this.YN_index_mapping[this.notif.isForAllRoles]].value;
+                    $scope.newNotifModel.isActive = $scope.isActiveOptions[this.YN_index_mapping[this.notif.activeYn]];
+                    $scope.newNotifModel.selectedPriority = $scope.priorityOptions[this.notif.priority - 1].value;
+                    $scope.newNotifModel.startTime = new Date(this.notif.startTime);
+                    $scope.newNotifModel.endTime = new Date(this.notif.endTime);
+                    $scope.newNotifModel.msgHeader = this.notif.msgHeader;
+                    $scope.newNotifModel.msgDescription = this.notif.msgDescription;
                     $scope.notificationId = this.notif.notificationId;
-                    $scope.notificationRoleIds = this.notif.roleIds;
+                    $scope.newNotifModel.notificationRoleIds = this.notif.roleIds;
                     $scope.roleObj = {notificationRoleIds:this.notif.roleIds};
                 } else {
-                	// $log.debug('AppDetailsModalCtrl:init:: New app mode');
+                	if(this.debug)
+                		$log.debug('AppDetailsModalCtrl:init:: New app mode');
                     $scope.isEditMode = false;
                     $scope.editModeObj = {isEditMode: false};
                     $scope.modalPgTitle = 'Add a New Notification'
-                    this.notif = _.clone(newNotifModel);
+                    this.notif = _.clone($scope.newNotifModel);
                     $scope.roleObj = {notificationRoleIds:null};
                 }
             };
@@ -143,291 +144,347 @@
                 }
             };
             $scope.addUserNotificationValidation = function () {
-                // // pre-processing
-                if (!($scope.isEditMode)) {                    
-                    var validation=false;
-
-               if($scope.startTime && $scope.endTime && $scope.msgHeader != '' && $scope.msgDescription != '' && ($scope.startTime<$scope.endTime)){
-            	   validation=true;
-            	   if( $scope.isForAllRoles=='N'){
-                       validation =  $scope.checkBoxObj.isAnyRoleSelected;
-                   }
-               }
-               else{
-            	   validation=false;
-            	   }
-                    
-                    	
-                   return !validation; 
-                }
-            }
+				// // pre-processing
+				if (!($scope.isEditMode)) {                    
+					var validation=false;
+					if($scope.isDateValid($scope.newNotifModel.startTime) && $scope.isDateValid($scope.newNotifModel.endTime) && $scope.newNotifModel.msgHeader != '' && $scope.newNotifModel.msgDescription != '' && ($scope.newNotifModel.startTime<$scope.newNotifModel.endTime)){
+						validation=true;
+						if( $scope.newNotifModel.isForAllRoles=='N'){
+							validation =  $scope.checkTreeSelect();
+						}
+					}
+					else{
+						validation=false;
+					}
+					return !validation; 
+				}
+			}
             
             /* format the value for viewing a notification */
             $scope.formatStartDate = function () {
-            	if ($scope.startTime) {
-            		$scope.startTime = $filter('date')($scope.startTime, 'medium'); 
+            	if ($scope.newNotifModel.startTime) {
+            		$scope.newNotifModel.startTime = $filter('date')($scope.startTime, 'medium'); 
            	}            	
             }
             
             /* format the value for viewing a notification */
             $scope.formatEndDate = function () {
-            	if($scope.endTime){
-            		$scope.endTime = $filter('date')($scope.endTime, 'medium');
+            	if($scope.newNotifModel.endTime){
+            		$scope.newNotifModel.endTime = $filter('date')($scope.endTime, 'medium');
             	}
             }
             
-            $scope.addUserNotification = function () {
-                $scope.notificationRoleIds = [];
-                // pre-processing
-                for (var key in $scope.checkboxIdDict) {
-                    if ($scope.checkboxIdDict[key].is_box_checked && ($scope.checkboxIdDict[key].role_id != null)) {
-                        var role_ids = $scope.checkboxIdDict[key].role_id;
-                        for (var i in role_ids) {
-                            if (!($scope.notificationRoleIds.indexOf(role_ids[i]) > -1)) {
-                                $scope.notificationRoleIds.push(role_ids[i]);
-                            }
-                        }
-                    }
-                }
-
-                $scope.notificationRoleIds.sort();
-                if (($scope.isOnlineUsersOnly) && ($scope.isForAllRoles) && ($scope.selectedPriority) && ($scope.isActive)
-                    && ($scope.startTime) && ($scope.endTime) && ($scope.msgHeader != '') && ($scope.msgDescription != '')) {
-                    this.newUserNotification =
-                        {
-                            'notificationId':$scope.notificationId,
-                            'isForOnlineUsers': $scope.isOnlineUsersOnly.value,
-                            'isForAllRoles': $scope.isForAllRoles,
-                            'priority': $scope.selectedPriority,
-                            'activeYn': $scope.isActive.value,
-                            'startTime': $scope.startTime,
-                            'endTime': $scope.endTime,
-                            'msgHeader': $scope.msgHeader,
-                            'msgDescription': $scope.msgDescription,
-                            'roleIds': $scope.notificationRoleIds,
-                            'createdDate': new Date()
-                        };
-
-                    // POST ajax call here;
-                    if ($scope.isEditMode) {
-                        notificationService.updateAdminNotification(this.newUserNotification)
-                            .then(() => {
-                                //$log.debug('NotificationService:updateAdminNotification:: Admin notification update succeeded!');
-                                $scope.closeThisDialog(true);
-                                // emptyCookies();
-                            }).catch(err => {
-                                $log.error('notificationService.updateAdminNotfication failed: ' + JSON.stringify(err));
-                                switch (err.status) {
-                                    case '409':         // Conflict
-                                        // handleConflictErrors(err);
-                                        break;
-                                    case '500':         // Internal Server Error
-                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +
-                                            'Please try again later. Error: ' + err.status).then(isConfirmed => { });
-                                        break;
-                                    case '403':         // Forbidden... possible
-														// webjunction error to
-														// try again
-                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +
-                                            'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
-                                        break;
-                                    default:
-                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +
-                                            'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
-                                }
-                            }).finally(() => {
-                                // for bug in IE 11
-                                var objOffsetVersion = objAgent.indexOf("MSIE");
-                                if (objOffsetVersion != -1) {
-                                    $log.debug('AppDetailsModalCtrl:updateOnboardingApp:: Browser is IE, forcing Refresh');
-                                    $window.location.reload();   
-                                }
-                                // for bug in IE 11
-                            });
-
-                    } else {
-                        notificationService.addAdminNotification(this.newUserNotification)
-                            .then((res) => {
-                                $log.debug('notificationService:addAdminNotification:: Admin notification creation succeeded!,',res);
-                                if(res.status=='ERROR'){
-                                	 confirmBoxService.showInformation('There was a problem adding the notification. ' +
-                                             ' Error: ' + res.response).then(isConfirmed => { });
-
-                                	
-                                }
-                                else{
-                                	 $scope.closeThisDialog(true);
-                                }
-                               
-                                // emptyCookies();
-                            }).catch(err => {
-                                switch (err.status) {
-                                    case '409':         // Conflict
-                                        // handleConflictErrors(err);
-                                        break;
-                                    case '500':         // Internal Server Error
-                                        confirmBoxService.showInformation('There was a problem adding the notification. ' +
-                                            'Please try again later. Error: ' + err.status).then(isConfirmed => { });
-                                        break;
-                                    default:
-                                        confirmBoxService.showInformation('There was a problem adding the notification. ' +
-                                            'Please try again. If the problem persists, then try again later. Error: ' +
-                                            err.status).then(isConfirmed => { });
-                                }
-                                $log.error('notificationService:addAdminNotification error:: ' + JSON.stringify(err));
-                            })
-                    }
-
-                   
-                } else {
-                    $log.warn('please fill in all required fields');
-                	confirmBoxService.showInformation('Please fill in all required fields').then(isConfirmed => { });
+            $scope.isDateValid = function (time) {
+            	if(time == undefined){
+                    return false;
                 }
+            	if(typeof time == 'object'){
+            		return true;
+            	}
+                var startDateformat	=time.split('/');
+                if (startDateformat.length != 3) return false;
+                var day = startDateformat[1];
+                var month = startDateformat[0];
+                 month= parseInt(month)-1;
+                var year = startDateformat[2];
+                if(year.length!=4) return false;
+                var composedDate = new Date(year, month, day);
+                 return composedDate.getDate() == day &&
+                         composedDate.getMonth() == month &&
+                         composedDate.getFullYear() == year;
+              
+            };
+            
+           
+            $scope.addUserNotification = function () {
+            	$scope.notificationRoleIds = [];
+				// pre-processing
+
+				for(var fi=0;fi<$scope.treedata.length;fi++){
+					var fLevel = $scope.treedata[fi];
+					if(fLevel){
+						var fLevelChild = fLevel.child;
+						for(var si=0;si<fLevelChild.length;si++){
+							var sLevel = fLevelChild[si];
+							if(sLevel){
+								var sLevelChild = sLevel.child;
+								if(sLevelChild){
+									for(var ti=0;ti< sLevelChild.length;ti++){
+										var tLevel = sLevelChild[ti];
+										if(tLevel.isSelected && tLevel.roleId){
+											$scope.newNotifModel.anyTreeItemSelected=true;
+											for(var i in tLevel.roleId)
+												$scope.notificationRoleIds.push(tLevel.roleId[i]);
+										}
+									}
+								}
+							}
+							if(sLevel.isSelected && sLevel.roleId){
+								for(var i in sLevel.roleId)
+									$scope.notificationRoleIds.push(sLevel.roleId[i]);
+							}
+						}
+					}               	
+				}
+
+				$scope.notificationRoleIds.sort();
+				if (($scope.newNotifModel.isOnlineUsersOnly) && ($scope.newNotifModel.isForAllRoles) && ($scope.newNotifModel.selectedPriority) && ($scope.newNotifModel.isActive)
+						&& ($scope.newNotifModel.startTime) && ($scope.newNotifModel.endTime) && ($scope.newNotifModel.msgHeader != '') && ($scope.newNotifModel.msgDescription != '')) {
+					this.newUserNotification =
+					{
+							'notificationId':$scope.notificationId,
+							'isForOnlineUsers': $scope.newNotifModel.isOnlineUsersOnly.value,
+							'isForAllRoles': $scope.newNotifModel.isForAllRoles,
+							'priority': $scope.newNotifModel.selectedPriority,
+							'activeYn': $scope.newNotifModel.isActive.value,
+							'startTime': $scope.newNotifModel.startTime,
+							'endTime': $scope.newNotifModel.endTime,
+							'msgHeader': $scope.newNotifModel.msgHeader,
+							'msgDescription': $scope.newNotifModel.msgDescription,
+							'roleIds': $scope.notificationRoleIds,
+							'createdDate': new Date()
+					};
+
+					// POST ajax call here;
+					if ($scope.isEditMode) {
+						notificationService.updateAdminNotification(this.newUserNotification)
+						.then(() => {
+							if(this.debug)
+								$log.debug('NotificationService:updateAdminNotification:: Admin notification update succeeded!');
+							$scope.closeThisDialog(true);
+						}).catch(err => {
+							$log.error('notificationService.updateAdminNotfication failed: ' + JSON.stringify(err));
+							switch (err.status) {
+							case '409':         // Conflict
+								// handleConflictErrors(err);
+								break;
+							case '500':         // Internal Server Error
+								confirmBoxService.showInformation('There was a problem updating the notification. ' +
+										'Please try again later. Error: ' + err.status).then(isConfirmed => { });
+								break;
+							case '403':         // Forbidden... possible
+								// webjunction error to
+								// try again
+								confirmBoxService.showInformation('There was a problem updating the notification. ' +
+										'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
+								break;
+							default:
+								confirmBoxService.showInformation('There was a problem updating the notification. ' +
+										'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
+							}
+						}).finally(() => {
+							// for bug in IE 11
+							var objOffsetVersion = objAgent.indexOf("MSIE");
+							if (objOffsetVersion != -1) {
+								if(this.debug)
+									$log.debug('AppDetailsModalCtrl:updateOnboardingApp:: Browser is IE, forcing Refresh');
+								$window.location.reload();   
+							}
+							// for bug in IE 11
+						});
+
+					} else {
+						notificationService.addAdminNotification(this.newUserNotification)
+						.then((res) => {
+							if(this.debug)
+								$log.debug('notificationService:addAdminNotification:: Admin notification creation succeeded!,',res);
+							if(res.status=='ERROR'){
+								confirmBoxService.showInformation('There was a problem adding the notification. ' +
+										' Error: ' + res.response).then(isConfirmed => { });
+
+
+							}
+							else{
+								//$scope.closeThisDialog(true);
+								$scope.$dismiss('cancel');
+							}
+
+							// emptyCookies();
+						}).catch(err => {
+							switch (err.status) {
+							case '409':         // Conflict
+								// handleConflictErrors(err);
+								break;
+							case '500':         // Internal Server Error
+								confirmBoxService.showInformation('There was a problem adding the notification. ' +
+										'Please try again later. Error: ' + err.status).then(isConfirmed => { });
+								break;
+							default:
+								confirmBoxService.showInformation('There was a problem adding the notification. ' +
+										'Please try again. If the problem persists, then try again later. Error: ' +
+										err.status).then(isConfirmed => { });
+							}
+							$log.error('notificationService:addAdminNotification error:: ' + JSON.stringify(err));
+						})
+					}
+
+
+				} else {
+					$log.warn('please fill in all required fields');
+					confirmBoxService.showInformation('Please fill in all required fields').then(isConfirmed => { });
+				}
             }
+            $scope.functionalMenuRes={};
+            $scope.checkTreeSelect = function(){
+				if($scope.treedata){
+					for(var fi=0; fi<$scope.treedata.length;fi++){
+						var fLevel = $scope.treedata[fi];
+						if(fLevel.isSelected){
+							return true;
+						}                		
+						var sLevel = fLevel.child;
+						if(sLevel){
+							for(var si=0;si<sLevel.length;si++){
+								if(sLevel[si].isSelected){
+									return true;
+								}  
+								var tLevel = sLevel[si].child;
+								if(tLevel){
+									for(var ti=0;ti<tLevel.length;ti++){
+										if(tLevel[ti].isSelected){
+											return true;
+										}	
+									}                   		
+								}	
+							}
+						}
+					} 
+				}
+				return false;
+			}
             // Populate the category list for category dropdown list
             let getFunctionalMenu = () => {
-                this.isLoadingTable = true;
-                $scope.notifObj= {isCategoriesFunctionalMenu:true};
-                functionalMenuService.getFunctionalMenuRole().then(role_res => {
-                    var menu_role_dict = {};
-                    for (var i in role_res) {
-                        // if first time appear in menu_role_dict
-                        if (!(role_res[i].menuId in menu_role_dict)) {
-                            menu_role_dict[role_res[i].menuId] = [role_res[i].roleId];
-                        } else {
-                            menu_role_dict[role_res[i].menuId].push(role_res[i].roleId);
-                        }
-                    }
-                    functionalMenuService.getManagedFunctionalMenuForNotificationTree().then(res => {
-                        let actualData = [];
-                        var exclude_list = ['Favorites']
-                        // Adding children and label attribute to all objects in
-                        $scope.checkboxIdDict = {};
-                        $scope.checkBoxObj = {isAnyRoleSelected:false};
-                        for (let i = 0; i < res.length; i++) {
-                            res[i].children = [];
-                            res[i].label = res[i].text;
-                            res[i].id = res[i].text;
-                            // res[i].is_box_checked = false;
-                            res[i].can_check = true;
-                            res[i].roleId = menu_role_dict[res[i].menuId];
-                            $scope.checkboxIdDict[res[i].id] = { 'is_box_checked': false, 'role_id': res[i].roleId };
-                        }
-
-                        // Adding actual child items to children array in res
+            	this.isLoadingTable = true;
+            	if(this.debug)
+            		$log.debug('getFunctionalMenu:init');
+
+				functionalMenuService.getFunctionalMenuRole().then(role_res => {
+					var menu_role_dict = {};
+					if(this.debug)
+	            		$log.debug('functionalMenuService:getFunctionalMenuRole:: getting result', role_res);
+
+					for (var i in role_res) {
+						// if first time appear in menu_role_dict
+						if (!(role_res[i].menuId in menu_role_dict)) {
+							menu_role_dict[role_res[i].menuId] = [role_res[i].roleId];
+						} else {
+							menu_role_dict[role_res[i].menuId].push(role_res[i].roleId);
+						}
+					}
+					
+					functionalMenuService.getManagedFunctionalMenuForNotificationTree().then(res => {
+						if(this.debug)
+		            		$log.debug('functionalMenuService:getManagedFunctionalMenuForNotificationTree:: getting result', res);
+						var exclude_list = ['Favorites'];
+						let actualData=[];
+						$scope.functionalMenuRes=res;
+						
+						//Adding children and label attribute to all objects in res
+						for(let i = 0; i < res.length; i++){
+							res[i].child=[];
+							res[i].name=res[i].text;
+							res[i].id=res[i].text;
+							res[i].displayCheckbox= true;	                         
+							$scope.checkBoxObj = {isAnyRoleSelected:false};
+							res[i].roleId = menu_role_dict[res[i].menuId];
+							res[i].onSelect = function () {
+								$scope.$apply(function () {
+									$scope.newNotifModel.anyTreeItemSelected=$scope.checkTreeSelect();
+								})
+							};
+							
+							if (res[i].roleId && res[i].roleId.length==_.intersection(res[i].roleId, $scope.roleObj.notificationRoleIds).length){
+								res[i].isSelected= true;
+								res[i].selected= true;	
+								res[i].indeterminate= false;
+							}else{
+								/*default*/
+								res[i].isSelected= false;
+								res[i].selected= false;
+								res[i].indeterminate= false;		                     
+							}
+						}
+
+						// Adding actual child items to children array in res
 						// objects
-                        $scope.parentChildDict ={};
-                        $scope.parentChildRoleIdDict ={};
-                        for (let i = 0; i < res.length; i++) {
-                            let parentId = res[i].menuId;
-                            $scope.parentChildDict[parentId] = [];
-                            $scope.parentChildRoleIdDict[parentId]=[];
-                            for (let j = 0; j < res.length; j++) {
-                                let childId = res[j].parentMenuId;
-                                if (parentId === childId) {
-                                    res[i].children.push(res[j]);
-                                    $scope.parentChildDict[parentId].push(res[j].menuId);
-                                    //if res[j].roleId is defined
-                                    if (res[j].roleId) {
-                                    	for (let k in res[j].roleId) {
-                                            $scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
-                                    	}
-                                    	
-                                    }
-                                }
-                            }
-                        }
-                        
-                        //check if grand children exist
-                            for (var key in $scope.parentChildDict){
-                            	var children = $scope.parentChildDict[key];
-                            	var isGrandParent = false;
-                            	if (children.length>0) {
-                            		for (var i in children) {
-                            			if ($scope.parentChildDict[children[i]].length>0){
-                            				isGrandParent = true;
-                            				break;
-                            			}
-                            		}
-                            	}
-                            	if (isGrandParent) {
-                                	for (var i in children) {
-                                		// if the child has children
-                                		if ($scope.parentChildDict[children[i]].length>0) {
-                                			for (var j in $scope.parentChildRoleIdDict[children[i]]) {
-                                				
-                                				if ($scope.parentChildRoleIdDict[key].indexOf($scope.parentChildRoleIdDict[children[i]][j]) === -1) {
-                                					$scope.parentChildRoleIdDict[key].push($scope.parentChildRoleIdDict[children[i]][j]);
-                                				}
-                                			}
-                                		} else {
-                                			 
-                                		}
-                                	}
-                            	}
-
-                            };                            
-                                                        
-
-                                var ListMenuIdToRemove = [];
-                        //$scope.parentObj = {ListMenuIdToRemove : []};
-                        //get the list of menuId that needs to be removed 
-                        for (let i = 0; i < res.length; i++) {
-                            if ((res[i].children.length==0)&&(!res[i].roleId)) {
-                                var menuIdToRemove = res[i].menuId;
-                                if (ListMenuIdToRemove.indexOf(menuIdToRemove) === -1){
-                                    ListMenuIdToRemove.push(menuIdToRemove);
-                                }
-                            }
-                        }
-
-                        // a scope variable that marks whether each functional menu item should be displayed.
-                        $scope.toShowItemDict = {};                        
-                        for (let i = 0; i < res.length; i++) {
-                            if (res[i].roleId==null) {
-                                if (res[i].children.length==0) {
-                                    $scope.toShowItemDict[res[i].menuId]=false;                                
-                                } else if(res[i].children.length>0){
-                                    if($scope.parentChildDict[res[i].menuId].length === _.intersection($scope.parentChildDict[res[i].menuId], ListMenuIdToRemove).length){
-                                        $scope.toShowItemDict[res[i].menuId]=false;                                
-                                    } else {
-                                        $scope.toShowItemDict[res[i].menuId]=true;                                
-                                    }
-                                }
-                            } else {
-                                $scope.toShowItemDict[res[i].menuId]=true;
-                            }
-                        }
- 
-                        // Sort the top-level menu items in order based on the
-						// column
-                        res.sort(function (a, b) {
-                            return a.column - b.column;
-                        });
-
-                        // Sort all the children in order based on the column
-                        for (let i = 0; i < res.length; i++) {
-                            res[i].children.sort(function (a, b) {
-                                return a.column - b.column;
-                            });
-                        }
-
-                        // Forming actual parent items
-                        for (let i = 0; i < res.length; i++) {
-                            let parentId = res[i].parentMenuId;
-                            if (parentId === null) {
-                                actualData.push(res[i]);
-                            }
-                        }
-
-                        // $scope.treedata = actualData;
-                        var treedata = actualData[0].children;
-                        $scope.treedata = [];
-                        for (var i in treedata) {
-                            if (!(treedata[i].label.indexOf(exclude_list) > -1)) {
-                                $scope.treedata.push(treedata[i])
-                            }
-                        }
+						$scope.parentChildDict ={};
+						$scope.parentChildRoleIdDict ={};
+						for (let i = 0; i < res.length; i++) {
+							let parentId = res[i].menuId;
+							$scope.parentChildDict[parentId] = [];
+							$scope.parentChildRoleIdDict[parentId]=[];
+							for (let j = 0; j < res.length; j++) {
+								let childId = res[j].parentMenuId;
+								if (parentId === childId) {
+									res[i].child.push(res[j]);
+									$scope.parentChildDict[parentId].push(res[j].menuId);
+									//if res[j].roleId is defined
+									if (res[j].roleId) {
+										for (let k in res[j].roleId) {
+											$scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
+										}
+
+									}
+								}
+							}
+						}
+						//check if grand children exist
+						for (var key in $scope.parentChildDict){
+							var child = $scope.parentChildDict[key];
+							var isGrandParent = false;
+							if (child.length>0) {
+								for (var i in child) {
+									if ($scope.parentChildDict[child[i]].length>0){
+										isGrandParent = true;
+										break;
+									}
+								}
+							}
+							if (isGrandParent) {
+								for (var i in child) {
+									// if the child has children
+									if ($scope.parentChildDict[child[i]].length>0) {
+										for (var j in $scope.parentChildRoleIdDict[child[i]]) {
+											if ($scope.parentChildRoleIdDict[key].indexOf($scope.parentChildRoleIdDict[child[i]][j]) === -1) {
+												$scope.parentChildRoleIdDict[key].push($scope.parentChildRoleIdDict[child[i]][j]);
+											}
+										}
+									} 
+								}
+							}
+
+						};     
+
+						// Sort the top-level menu items in order based on the column
+						res.sort(function(a, b) {
+							return a.column-b.column;
+						});
+
+						// Sort all the child in order based on the column
+						for(let i = 0; i < res.length; i++){
+							res[i].child.sort(function(a, b){
+								return a.column-b.column;
+							});
+						}
+
+						//Forming actual parent items
+						for(let i = 0; i < res.length; i++){
+							let parentId=res[i].parentMenuId;
+							if(parentId===null){
+								actualData.push(res[i]);
+							}
+						}
+						var treedata = actualData[0].child;
+						$scope.treedata = [];
+
+						/*Remove favorite from the list */
+						for (var i in treedata) {
+							if (!(treedata[i].name.indexOf(exclude_list) > -1)) {
+								$scope.treedata.push(treedata[i])
+							}
+						}
+						//setting b2b tree parameter
+						$scope.settingTreeParam();
 
                     }).catch(err => {
                         $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);
@@ -443,71 +500,91 @@
      
             
             let getAppRoleIds = () => {
-                $scope.notifObj= {isCategoriesFunctionalMenu:false};
-                notificationService.getAppRoleIds().then(res => {
-                	
-                    res = res.data;
-                    let actualData = [];
-                    // var exclude_list = ['Favorites']
-                    var app_id_name_list = {};
-                        $scope.checkboxIdDict = {};
-                        $scope.checkBoxObj = {isAnyRoleSelected:false};
-
-                    for (let i = 0; i < res.length; i++) {
-                        if (!(res[i].appId in app_id_name_list)) {
-                            app_id_name_list[res[i].appId] = res[i].appName;
-                        }
-
-                        res[i].children = [];
-                        res[i].label = res[i].roleName;
-                        res[i].id = res[i].roleId;
-                        res[i].menuId = res[i].roleId;
-                        res[i].parentMenuId = res[i].appId;
-                        res[i].can_check = true;
-                        res[i].roleId = [res[i].roleId];
-                        $scope.checkboxIdDict[res[i].id] = { 'is_box_checked': false, 'role_id': res[i].roleId};   
-                    }
-                    
-                    for (var app_id in app_id_name_list) {
-                        var new_res = {};
-                        new_res.children = [];
-                        new_res.label = app_id_name_list[app_id];
-                        new_res.id = app_id;
-                        new_res.menuId = app_id;
-                        new_res.parentMenuId = null;
-                        new_res.appId = null;
-                        new_res.can_check = true;
-                        new_res.roleId = null;
-                        $scope.checkboxIdDict[new_res.id]= { 'is_box_checked': false, 'role_id': new_res.roleId };
-                        res.push(new_res);
-                    }
-                    $scope.parentChildRoleIdDict ={};
-                    //Adding actual child items to children array in res objects
-                    for (let i = 0; i < res.length; i++) {
-                        let parentId = res[i].menuId;
-                        $scope.parentChildRoleIdDict[parentId]=[];
-                        for (let j = 0; j < res.length; j++) {
-                            let childId = res[j].parentMenuId;
-                            if (parentId == childId) {
-                                res[i].children.push(res[j]);
-                                if (res[j].roleId) {
-                                	for (let k in res[j].roleId) {
-                                        $scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
-                                	}
-                                	
-                                }
-                            }
-                        }
-                    }
-                    //Forming actual parent items
-                    for (let i = 0; i < res.length; i++) {
-                        let parentId = res[i].parentMenuId;
-                        if (parentId === null) {
-                            actualData.push(res[i]);
-                        }
-                    }
-
-                    $scope.treedata = actualData;
+            	$scope.notifObj= {isCategoriesFunctionalMenu:false};
+				notificationService.getAppRoleIds().then(res => {
+					if(this.debug)
+	            		$log.debug('notificationService:getAppRoleIds:: getting result', res);
+					res = res.data;
+					let actualData = [];
+					var app_id_name_list = {};
+					$scope.checkBoxObj = {isAnyRoleSelected:false};
+					for (let i = 0; i < res.length; i++) {
+						if (!(res[i].appId in app_id_name_list)) {
+							app_id_name_list[res[i].appId] = res[i].appName;
+						}
+						res[i].child=[];
+						res[i].name=res[i].roleName;
+						res[i].displayCheckbox= true;
+						res[i].id = res[i].roleId;
+						res[i].menuId = res[i].roleId;
+						res[i].parentMenuId = res[i].appId;
+						res[i].can_check = true;
+						res[i].roleId = [res[i].roleId];
+						res[i].onSelect = function () {
+							$scope.$apply(function () {
+								$scope.newNotifModel.anyTreeItemSelected=$scope.checkTreeSelect();
+							})
+						};
+						/*assigning selected value*/
+						if (res[i].roleId && res[i].roleId.length==_.intersection(res[i].roleId, $scope.roleObj.notificationRoleIds).length){
+							res[i].isSelected= true;
+							res[i].selected= true;	
+							res[i].indeterminate= false;
+						}else{
+							/*default*/
+							res[i].isSelected= false;
+							res[i].selected= false;
+							res[i].indeterminate= false;		                     
+						}  
+					}
+
+					for (var app_id in app_id_name_list) {
+						var new_res = {};
+						new_res.child = [];
+						new_res.name = app_id_name_list[app_id];
+						new_res.id = app_id;
+						new_res.displayCheckbox= true;
+						new_res.menuId = app_id;
+						new_res.parentMenuId = null;
+						new_res.appId = null;
+						new_res.can_check = true;
+						new_res.roleId = null;
+						new_res.onSelect = function () {
+							$scope.$apply(function () {
+								$scope.newNotifModel.anyTreeItemSelected=$scope.checkTreeSelect();
+							})
+						};
+						res.push(new_res);
+					}
+					$scope.parentChildRoleIdDict ={};
+					//Adding actual child items to child array in res objects
+					for (let i = 0; i < res.length; i++) {
+						let parentId = res[i].menuId;
+						$scope.parentChildRoleIdDict[parentId]=[];
+						for (let j = 0; j < res.length; j++) {
+							let childId = res[j].parentMenuId;
+							if (parentId == childId) {
+								res[i].child.push(res[j]);
+								if (res[j].roleId) {
+									for (let k in res[j].roleId) {
+										$scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
+									}
+
+								}
+							}
+						}
+					}
+					//Forming actual parent items
+					for (let i = 0; i < res.length; i++) {
+						let parentId = res[i].parentMenuId;
+						if (parentId === null) {
+							actualData.push(res[i]);
+						}
+					}
+
+					$scope.treedata = actualData;                       
+					//setting correct parameters for b2b tree
+					$scope.settingTreeParam();
                 }).catch(err => {
                     $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);
                 }).finally(() => {
@@ -523,6 +600,114 @@
                 getAppRoleIds();
             }
              
+            
+            
+            $scope.settingTreeParam = function(){
+            	/**************first level****************/
+				for(var fi=0; fi<$scope.treedata.length;fi++){
+					var fLevel = $scope.treedata[fi];
+					var sLevel = $scope.treedata[fi].child;
+					var sLevelSelectedCount =0;
+					var sLevelChildNumber =0
+					if(fLevel.child.length==0 && fLevel.roleId==null){
+						delete fLevel.child;
+					}else if(sLevel){
+						/**************Second level****************/
+						var sLevelDelArray=[]; 
+						for(var si=0;si<sLevel.length;si++){     
+							var deletThisSLev= false;
+							if(sLevel[si].child.length==0 && sLevel[si].roleId==null){
+								sLevel[si].displayCheckbox=false;
+								sLevelDelArray.push(sLevel[si].name);
+								sLevel[si].name = '';
+								sLevel[si].active=false;
+								delete sLevel[si].child;
+							} else if(sLevel[si].child.length==0){
+								delete sLevel[si].child;
+							}else{
+								/**************Third level****************/
+								var tLevel = sLevel[si].child;
+								var tLevelSelectedCount =0;
+								var tLevelChildNumber =0;
+								if(tLevel){
+									var tLevelDelArray=[]; 
+									var tLevelLen = tLevel.length;
+									var tLevelRoleIdUndefined =0;
+									for(var ti=0;ti<tLevel.length;ti++){
+										delete tLevel[ti].child;
+										if(tLevel[ti].roleId==null){
+											tLevel[ti].displayCheckbox=false;
+											tLevelDelArray.push(tLevel[ti].name);
+											tLevel[ti].name = '';
+											tLevel[ti].active=false;										
+											tLevelRoleIdUndefined++
+										}else{
+											if(tLevel[ti].isSelected)
+												tLevelSelectedCount++;
+
+											if(tLevel[ti].displayCheckbox)
+												tLevelChildNumber++;
+										} 	
+									}
+									if(tLevelRoleIdUndefined==tLevelLen)
+										deletThisSLev=true;
+									if(tLevelSelectedCount==tLevelChildNumber){
+										sLevel[si].isSelected=true;
+										sLevel[si].indeterminate=false;
+										sLevel[si].active=true;
+									}else if(tLevelSelectedCount>0){
+										sLevel[si].indeterminate=true;
+										sLevel[si].active=true;
+									}	
+									
+									/*Cleanup unused third level items*/
+									for(var i=0;i<tLevelDelArray.length;i++){
+										var name = tLevelDelArray[i];
+										for(var ti=0;ti<tLevel.length;ti++){
+											if(name==tLevel[ti].text){
+												tLevel.splice(ti,1);
+												break;
+											}
+										}
+									}
+								}	
+							}
+							if(deletThisSLev){ //remove the whole second level item if all it's child has no roleId
+								sLevel[si].displayCheckbox=false;
+								sLevelDelArray.push(sLevel[si].name);
+								sLevel[si].name = '';
+								sLevel[si].active=false;
+							}else{
+								if(sLevel[si].isSelected)
+									sLevelSelectedCount++;	
+								if(sLevel[si].displayCheckbox)
+									sLevelChildNumber++;
+							}
+						}
+						if(sLevelSelectedCount==sLevelChildNumber && sLevelChildNumber!=0){
+							fLevel.isSelected=true;
+							fLevel.indeterminate=false;
+							fLevel.active=true;
+						}else if(sLevelSelectedCount>0){
+							fLevel.indeterminate=true;
+							fLevel.active=true;
+						}else{
+							//fLevel.active=false;
+							fLevel.indeterminate=false;
+						}
+						/*Cleanup unused second level items*/
+						for(var i=0;i<sLevelDelArray.length;i++){
+							var name = sLevelDelArray[i];
+							for(var si=0;si<sLevel.length;si++){
+								if(name==sLevel[si].text){
+									sLevel.splice(si,1);
+									break;
+								}
+							}
+						}
+					}
+				}
+            }
             init();
             getFunctionalMenu();
 
@@ -530,7 +715,7 @@
         
     }
     
-    userNotificationsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'confirmBoxService', 'notificationService', '$modal', 'ngDialog', '$state', '$filter'];
+    userNotificationsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'confirmBoxService', 'notificationService', '$modal', 'ngDialog', '$state', '$filter','items'];
     angular.module('ecompApp').controller('userNotificationsModalCtrl', userNotificationsModalCtrl);
     
     angular.module('ecompApp').directive('attDatepickerCustom', ['$log', function($log) {
@@ -583,165 +768,5 @@
         };
     }]);
 
-    angular.module('ecompApp').directive('jqTreeUserNotif', ['functionalMenuService', '$log', 'confirmBoxService', '$compile', function (functionalMenuService, $log, confirmBoxService, $compile) {
-        return {
-            scope: true,
-            templateUrl: 'jq-tree-tmpl-user-notif.html',
-            link: function (scope, el, attrs) {
-
-                var $jqTree = el.find('#jqTreeUserNotif').tree({
-                    data: scope.treedata,
-                    autoOpen: scope.editModeObj.isEditMode,
-                    dragAndDrop: false,
-                    onCreateLi: function (node, $li) {
-                        node.is_checked = false;
-                        if (node.roleId&&scope.roleObj.notificationRoleIds) {
-                            node.is_checked = (node.roleId.length === _.intersection(node.roleId, scope.roleObj.notificationRoleIds).length);
-                        }                        
-                        if (typeof node.id =="string"){
-                            $li.attr('id', node.id.replace(/\s+/g, '_'));
-                        }
-                        var isChecked = '';
-                        if (node.is_checked) {
-                            isChecked = 'checked="checked"';
-                        }
-                        if (node.can_check) {
-                            var toShow = true;
-                            if (scope.notifObj.isCategoriesFunctionalMenu) {
-                                toShow = scope.toShowItemDict[node.menuId];
-                            }
-                            var isDisabled = "";
-                            if (scope.editModeObj.isEditMode) {
-                                isDisabled = " disabled"
-                                	
-                                	//if node is a parent/grandparent node
-                                    if (node.children.length>0){
-                                             	//whether to show node first
-                                    	if (_.intersection(scope.parentChildRoleIdDict[node.menuId], scope.roleObj.notificationRoleIds).length) {
-                                    		toShow=true;
-                                    		if (scope.parentChildRoleIdDict[node.menuId].length==_.intersection(scope.parentChildRoleIdDict[node.menuId], scope.roleObj.notificationRoleIds).length) {
-                                                isChecked = 'checked="checked"';                                			
-                                    		}
-                                    	} else {
-                                    		toShow=false;
-                                    	}
-                                    } 
-                                    //if node is a child node
-                                    else {
-                                    	if (node.is_checked) {
-                                        	toShow=true;                                	
-                                    	} else {
-                                    		toShow=false;
-                                    	}
-                                    }
-
-                              }
-
-                            
-
-                            var template = '<input ng-click="thisCheckboxClicked($event)" type="checkbox" class="edit js-node-check" data-node-menu-id="' + node.menuId + '"  data-node-id="' + node.id + '" ' + isChecked + ' ng-show="' + toShow + '"' + isDisabled+ '/>'
-
-                            var templateEl = angular.element(template);
-                            var $jqCheckbox = $compile(templateEl)(scope);
-							if (toShow){
-									$li.find('.jqtree-element').prepend($jqCheckbox);
-								} else {
-									$li.find('.jqtree-element').remove();
-									}
-                        }
-                    }
-                });
-
-                scope.thisCheckboxClicked = function (e) {
-                
-                	var nodeId = e.target.attributes[4].value;
-                	
-             
-               
-                	var sBrowser, sUsrAg = window.navigator.userAgent;
-                	//if (sUsrAg.indexOf("Firefox") > -1) {
-                	
-                	if (sUsrAg.indexOf("Trident") > -1) {
-                		nodeId = e.target.attributes[5].value;
-                	}
-                    
-//                	if (sUsrAg.indexOf("MSIE") > 1) {
-//                		alert("hELLO tHIS IS IE10");
-//                		nodeId = e.target.attributes[3].value;
-//                		alert('nodeId 26 of IE 45 : '+nodeId);
-//                	}
-//                	
-                	var version = navigator.userAgent.match(/Firefox\/(.*)$/);
-                	
-                	if(version && version.length > 1){
-                	if(parseInt(version[1]) >= 50){
-                		nodeId = e.target.attributes[3].value;
-                	} else if(parseInt(version[1]) >= 45){
-                		
-                		nodeId = e.target.attributes[2].value;
-                	}
-                }
-                	var thisNode = el.find('#jqTreeUserNotif').tree('getNodeById', nodeId);
-                    var isChecked = e.target.checked;
-                    scope.checkboxIdDict[nodeId]['is_box_checked'] = isChecked;
-
-                    thisNode = angular.element(thisNode);
-                    if (thisNode[0].hasOwnProperty('children') && thisNode[0].children.length > 0) {
-                        var jsNodeCheckList = angular.element(e.target).parent().next().find('.js-node-check')
-                        // check/uncheck children items
-                        jsNodeCheckList.prop('checked', isChecked);
-
-                        for (var i in jsNodeCheckList) {
-                            var singlediv = jsNodeCheckList[i];
-                            if (typeof singlediv == 'object' & (!singlediv.length)) {
-                            	
-                            	var tempNodeId = angular.element(singlediv)[0].attributes[4].value;
-                            
-                                
-                                
-                                if (sUsrAg.indexOf("Trident") > -1) {
-                                	
-                                	var tempNodeId = angular.element(singlediv)[0].attributes[5].value;
-                                	
-                               
-                                }
-                                
-//                                if (sUsrAg.indexOf("MSIE") > 0) {
-//                                    var tempNodeId = angular.element(singlediv)[0].attributes[3].value;
-//                                    alert('tempNodeId 2 FF 45 : '+tempNodeId);
-//                                    }
-                                if(version && version.length > 1){
-                                	if(parseInt(version[1]) >= 50){
-                                		tempNodeId = angular.element(singlediv)[0].attributes[3].value;
-                                	} 
-                                	else if(parseInt(version[1]) >= 45){
-                                		tempNodeId = angular.element(singlediv)[0].attributes[2].value;
-                                	}
-                                }
-                                scope.checkboxIdDict[tempNodeId]['is_box_checked'] = isChecked;
-                            }
-                        }
-                    }
-
-                    scope.checkBoxObj.isAnyRoleSelected = false;
-                    for (var key in scope.checkboxIdDict) {
-                        if (scope.checkboxIdDict[key]['is_box_checked']&&scope.checkboxIdDict[key]['role_id']) {
-                            scope.checkBoxObj.isAnyRoleSelected = true;
-                            break;
-                        }
-                    }
-                }
-
-
-
-                scope.$watch('treedata', function (oldValue, newValue) {
-                    if (oldValue !== newValue) {
-                        $jqTree.tree('loadData', scope.treedata);
-                        $jqTree.tree('reload', function () {
-                        });
-                    }
-                });
-            }
-        };
-    }]);
+    
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.less b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.less
index b712ed26..e648c1d6 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.less
@@ -1,13 +1,16 @@
 
 .user-notification-details-modal {
-    width: 595px;
+   // width: 595px;
     margin:auto;
     background-color:white;
   .title {
-    .dGray18r;  //AT&T Dark Gray
+    .dGray18r; 
     border-bottom: @blue-active 3px solid;
 
   }    
+  .btn-calendar-icon{
+  	z-index:1;
+  }
     input:not([type="button"]) {
     height: 13px;
 } 
@@ -41,6 +44,11 @@
     width: 80px;
 }
 
+.radio {
+   
+    margin-bottom: 12px;
+}
+
     .left-container{
       display: inline-block;
       width: 48%;
@@ -59,7 +67,8 @@
 	position:absolute;
 	
 	}
-      
+
+
       .notif-input{
       width:302px;
       height:50px;
@@ -148,10 +157,15 @@
      }
       }
       
-   #datepicker{
-      z-index: 10000 !important;
-      width: 302px;
-      padding-left: 6px;
-  }     
-        
       
+ .radio input:checked + .skin:after{ 
+	width:22px; 
+	height:22px; 
+}          
+
+.btn-calendar-icon{
+    width: 10px;
+    position: absolute;
+    right: 25px;
+    top: 8px;
+}     
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html
index ac7f4895..57433c1c 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html
@@ -18,38 +18,64 @@
   ================================================================================
   -->
 <div class="user-notification-details-modal">
-	<!--<div class="functional-menu-container">-->
-	<div id="app-title" class="title">{{modalPgTitle}}</div>
-	<div class="user-notification-details-contents">
+
+		<div class="b2b-modal-header">
+			<h2 class="account-details-title" id="account-add-details-title">{{modalPgTitle}}</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="user-notification-button-close"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
+
+		<div class="b2b-modal-body">
+					<div class="user-notification-details-contents">
 		<div class="left-container">
 			<div class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">
 				<div class="user-notif-label">Broadcast to All Categories</div>
-				<label id="label-yes" class="simulateCatGridHeaderRadioButton"> <input
-					id="radio-button-yes" type="radio" ng-model="isForAllRoles" value="Y"> Yes
-				</label> <label id="label-no" class="simulateCatGridHeaderRadioButton"> <input
-					id="radio-button-no" type="radio" ng-model="isForAllRoles" value="N"> No
-				</label>
+				<div class="user-notif-label">
+					<label for="radio-button-yes" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.isForAllRoles" id="radio-button-yes" name="YES" value="Y" > 
+		                <i class="skin"></i> 
+		                <span>Yes</span> 
+		            </label>
+				</div>
+				<div class="user-notif-label">
+		            <label for="radio-button-no" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.isForAllRoles" id="radio-button-no" name="NO" value="N" > 
+		                <i class="skin"></i> 
+		                <span>No</span> 
+		            </label>
+		        </div> 
 			</div>
 			<div 
-				style="padding-left: 10px; {{(! isForAllRoles ||isForAllRoles=='Y')? 'opacity : 0.6; pointer-events: none;':' '}} {{isEditMode? 'opacity : 0.6;':' '}} "
+				style="padding-left: 10px; {{(! newNotifModel.isForAllRoles ||newNotifModel.isForAllRoles=='Y')? 'opacity : 0.6; pointer-events: none;':' '}} {{isEditMode? 'opacity : 0.6;':' '}} "
 				class="user-notif-label">
 				<div id="notifcation-label-user" class="user-notif-label">
-					<span ng-show="isForAllRoles=='N'" runat="server" ID="required" style="color: Red;">*</span>
+					<span ng-show="newNotifModel.isForAllRoles=='N'" runat="server" ID="required" class="notifcation-label-user-requiredId">*</span>
 					Categories
 				</div>
 				<div>
 
 				<div id="notifcation-label-user-div" class="user-notif-label"></div>
-				<label id="funcMenu-label-yes" > <input id="radio-button-funcMenu"
-				type="radio" ng-model="isFunctionalMenu" ng-click="getFunctionalMenu()" value="Y"> Functional Menu
-				<br/>
-				</label> <label id="approles-label-no" > <input id="radio-button-approles"
-				type="radio" ng-model="isFunctionalMenu" ng-click="getAppRoleIds()" value="N"> Application Roles
-				</label>
+				<div class="user-notif-label">
+		            <label for="funcMenu-label-yes" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.isFunctionalMenu" ng-click="getFunctionalMenu()" id="funcMenu-label-yes" name="FUNCTIONAL MENU" value="Y" > 
+		                <i class="skin"></i> 
+		                <span>Functional Menu</span> 
+		            </label>
+		        </div>
+				<div class="user-notif-label">
+		            <label for="approles-label-no" class="radio"> 
+		                <input type="radio"ng-model="newNotifModel.isFunctionalMenu" ng-click="getAppRoleIds()" id="approles-label-no" name="APPLICATION ROLES" value="N" > 
+		                <i class="skin"></i> 
+		                <span>Application Roles</span> 
+		            </label>
+		        </div>
 
-				<div id="approles-checkbox" ng-show="!checkBoxObj.isAnyRoleSelected&&(isForAllRoles=='N')&&(!isEditMode)">
+				<div id="approles-checkbox" ng-show="!newNotifModel.anyTreeItemSelected&&(newNotifModel.isForAllRoles=='N')&&(!newNotifModel.isEditMode)">
 					
-					<div id="approles-checkbox-required" ng-show="!checkBoxObj.isAnyRoleSelected" >
+					<div id="approles-checkbox-required" ng-show="!newNotifModel.anyTreeItemSelected" >
 						
 
 						<small class="checkbox-categories">At least
@@ -60,64 +86,74 @@
 				
 				</div>
 				
-				<div  id="tree1">
-					<div id="Service_Creation"></div>
-				</div>
-				<div 
-					
-					id="jq-tree-div" jq-tree-user-notif ></div>
-
-					
-
-				<script type="text/ng-template" id="jq-tree-tmpl-user-notif.html">
-            	<div  id="jqTreeUserNotif" class="tree"></div>
-        	</script>
+				
+        	
+        	<br>
+        		 <div id="user-notif-tree-div" class="tree-div" >
+	        		 <div id="user-notif-tree" class="b2b-tree-checkbox" style="{{isEditMode? 'pointer-events: none;':' '}}">
+	                    <b2b-tree-node-checkbox  id="jqTreeUserNotif" collection="treedata" set-role="tree" group-it="false" ></b2b-tree-node-checkbox>
+	                </div>
+        		 </div>  
 			</div>
 			<div>
 
-				<div id="add-user-notif-priority" class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">
-					<div id="user-notification-priority-label" class="user-notif-label">Priority</div>
-					<label id="label-important" class="simulateCatGridHeaderRadioButton"> <input
-						id="radio-button-normal" type="radio" ng-model="selectedPriority" value="1"> Normal
-					</label> <label id="label-normal" class="simulateCatGridHeaderRadioButton"> <input
-						id="radio-button-important" type="radio" ng-model="selectedPriority" value="2">
-						Important
-					</label>
-				</div>
+				
 			</div>
 		</div>
 		<div id="app-conatiner-right" class="right-container">
+		<div id="add-user-notif-priority" class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">
+					<div id="user-notification-priority-label" class="user-notif-label">Priority</div>
+					<div class="user-notification-priority-label">
+		            <label for="label-important" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.selectedPriority" id="label-important" name="NORMAL" value="1" > 
+		                <i class="skin"></i> 
+		                <span>Normal</span> 
+		            </label>
+		            </div>
+					<div class="user-notification-priority-label">
+		            <label for="label-normal" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.selectedPriority" id="label-normal" name="IMPORTANT" value="2" > 
+		                <i class="skin"></i> 
+		                <span>Important</span> 
+		            </label>
+		            </div>
+				</div>
 
 			<div id="add-user-notif-startdate" class="add-widget-field"
 				style="padding-bottom: 12px; width: 301px !important;{{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
 				<div id="user-notification-startdate-label" class="user-notif-label">
 					<div class="user-notif-label">
-						<span runat="server" ID="required" style="color: Red;">*</span>
+						<span runat="server" ID="required" class="notifcation-label-user-requiredId">*</span>
 						Start Date (Local Time)
 					</div>
-					<input class="notif-input-calendar" id="datepicker-start" type="text" 
-						ng-model="startTime" b2b-datepicker min="minDate" max="maxDate" 
-						required />
-					<div id="user-startdate-required" ng-show="!startTime">
-						<small class="mandatory-categories">Start Date is Required</small>
+					<div class="datepicker-container">
+						<input class="notif-input-calendar" id="datepicker-start" type="text" 
+							ng-model="newNotifModel.startTime" b2b-datepicker min="minDate" max="maxDate" 
+							required />
+					</div>
+					<div id="user-startdate-required" ng-show="!isDateValid(newNotifModel.startTime)">
+						<small class="mandatory-categories">Please enter valid date in MM/DD/YYYY format!</small>
 					</div>
+					
 				</div>
 				<div ng-show="!isEditMode" ng-init="formatStartDate()"></div> 
 			</div>			
 
 			<div id="add-user-notif-enddate" class="add-widget-field"
-				style="padding-bottom: 12px;     width: 301px !important; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
+				style="padding-bottom: 12px; width: 301px !important; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
 				<div id="user-notification-enddate-label" class="user-notif-label">
-					<span runat="server" ID="required" style="color: Red;">*</span> End	Date (Local Time)
+					<span runat="server" ID="required" class="notifcation-label-user-requiredId">*</span> End	Date (Local Time)
 				</div>
-				<input class="notif-input-calendar" type="text" id="datepicker-end" 
-					ng-model="endTime" b2b-datepicker min="minDate" max="maxDate" 
-					required />
-				<div id="user-enddate-required" ng-show="!endTime" >
-					<small class="mandatory-categories">End Date is Required</small>
+				<div class="datepicker-container">
+					<input class="notif-input-calendar" type="text" id="datepicker-end" 
+						ng-model="newNotifModel.endTime" b2b-datepicker min="minDate" max="maxDate" 
+						required />
 				</div>
-				<div id="user-enddate-error" ng-show="endTime&&startTime&&startTime.getTime()>=endTime.getTime()" style="color: #cf2a2a; font-size: 10px;">
-					<small style="position: absolute;">End Date must be greater than start Date</small>
+				<div id="user-endDate-required" ng-show="!isDateValid(newNotifModel.endTime)">
+						<small class="mandatory-categories">Please enter valid date in MM/DD/YYYY format!</small>
+					</div>
+				<div id="user-enddate-error" ng-show="newNotifModel.endTime&&newNotifModel.startTime&&newNotifModel.startTime.getTime()>=newNotifModel.endTime.getTime()" class="user-enddate-error-txt">
+					<small class="mandatory-categories">End Date must be greater than start Date</small>
 				</div>
 				<div ng-show="!isEditMode" ng-init="formatEndDate()" ></div> 
 			</div>
@@ -125,12 +161,12 @@
 			<div id="add-user-notif-title" class="add-widget-field"
 				style="padding-bottom: 12px; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
 				<div id="user-notification-title-label" class="user-notif-label">
-					<span runat="server" ID="required" style="color: Red;"
+					<span runat="server" ID="required" class="notifcation-label-user-requiredId"
 						visible="false"> *</span> Title
 				</div>
-				<textarea id="add-notification-input-title" class="notif-input" ng-model="msgHeader" name="content" style="height: 50px;">
+				<textarea id="add-notification-input-title" class="notif-input" ng-model="newNotifModel.msgHeader" name="content" class="add-notification-input-title-ht">
                 </textarea>
-				<div id="user-title-required" ng-show="msgHeader.length == 0">
+				<div id="user-title-required" ng-show="newNotifModel.msgHeader.length == 0">
 					<small class="mandatory-categories">Title is Required</small>
 				</div>
 			</div>
@@ -138,30 +174,39 @@
 			<div id="add-user-notif-message" class="add-widget-field"
 				style="padding-bottom: 12px; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
 				<div id="user-notif-message-label" class="user-notif-label">
-					<span runat="server" ID="required" style="color: Red;"
+					<span runat="server" ID="required" class="notifcation-label-user-requiredId"
 						visible="false"> *</span> Message
 				</div>
-				<textarea id="user-notif-input-message" class="notif-input" style="height: 150px"
-					ng-model="msgDescription" name="content">
+				<textarea id="user-notif-input-message" class="notif-input" class="add-notification-input-title-ht"
+					ng-model="newNotifModel.msgDescription" name="content">
 				</textarea>
-				<div id="user-notif-message-required" ng-show="msgDescription.length ==0 ">
+				<div id="user-notif-message-required" ng-show="newNotifModel.msgDescription.length ==0 ">
 				<small class="mandatory-categories">Message is Required</small>
 				</div>
 			</div>
 
-			<div class="dialog-control">
-				<a ng-show="!isEditMode">
-				<button id="button-notification-save" class="btn btn-alt btn-small" size="small" ng-disabled="addUserNotificationValidation()"
-					ng-click="addUserNotification()">Save</button></a> 						
-				<button id="button-notification-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()" role="button" tabindex="0">Cancel</button>
-			</div>
+		
 			
 		</div>
 	</div>
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="dialog-control">
+				<a ng-show="!isEditMode">
+				<button id="button-notification-save" class="btn btn-alt btn-small" size="small" ng-disabled="addUserNotificationValidation()" ng-click="addUserNotification()">Save</button></a> 	
+						<button id="button-notification-cancel" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')"role="button" tabindex="0">Cancel</button>
+						
+					</div>
+			</div>
+			
+			
+			
+
 </div>
 
 <script>
 $(document).ready(function(){
     $(".ngdialog-close").attr('id','dialog-close');
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html
index 72c92c21..f7973f71 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html
@@ -31,16 +31,15 @@
 						placeholder="Search in entire table" ng-model="searchString" />
 					</div>
 			  <div class="table-control-buttons" ng-controller="userNotificationsCtrl">
-						<button class="btn btn-alt btn-small"id="button-openAddNewApp"   ng-click="openUserNotificationModal()" >
+						<button class="btn btn-alt btn-small"id="button-openAddNewApp"   ng-click="userNotifications.openUserNotificationModal()" >
 		                	<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Notification
 		                </button> 
 					</div>
 		
 			<span class="ecomp-spinner" ng-show="isLoadingTable"></span>
-			<div class="b2b-table-div"
-				ng-hide="isLoadingTable" id="table-main">
-				<table b2b-table id="table-main" table-data="adminNotifications" search-string="searchString"
-					current-page="ignoredCurrentPage">
+			<div class="b2b-table-div" b2b-table table-data="adminNotifications"
+				ng-hide="isLoadingTable" id="table-main" search-string="searchString">
+				<table  id="table-main" >
 					<thead b2b-table-row type="header">
 						<tr>
 							<th id="th-notif-0" b2b-table-header key="msgSource"
@@ -63,7 +62,7 @@
 						</tr>
 					</thead>
 					<tbody b2b-table-row type="body" class="table-body"
-						row-repeat="rowData in tableAdminNotifItems">
+				row-repeat="rowData in tableAdminNotifItems | filter:searchString | startFrom:(currentPage1-1)*viewPerPage1 | limitTo:viewPerPage1 "track-by="$index">
 						<tr>
 							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
 								<div  id="{{$index}}-msgSource">{{rowData.msgSource}}</div>
@@ -96,9 +95,9 @@
 							</td>
 							<td b2b-table-body style="{{rowData.expired?' color:lightgray !important':''}}">
 							
-							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource==='EP'" ng-click="editUserNotificationModal(rowData)"class="icon-overview"  >  /</p> 
-							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource!=='EP'" ng-click="showDetailedJsonMessage(rowData)"class="icon-overview"  >/ </p> 
-							<p id="{{$index}}-notification-delete" ng-click="removeUserNotification(rowData)" class="icon-misc-trash"></p> 
+							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource==='EP'" ng-click="userNotifications.editUserNotificationModal(rowData)"class="icon-overview"  >  /</p> 
+							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource!=='EP'" ng-click="userNotifications.showDetailedJsonMessage(rowData)"class="icon-overview"  >/ </p> 
+							<p id="{{$index}}-notification-delete" ng-click="userNotifications.removeUserNotification(rowData)" class="icon-misc-trash"></p> 
 							
 						
 							</td>