Skip to content

U
ulakbus-ui
Commit 0dca3c1f authored by Vladimir Baranov's avatar Vladimir Baranov
Browse files
Options

rref #5392. Add header indicators for unread messages and notifications

parent 54e0861f
Show whitespace changes
Inline Side-by-side
Showing with 58 additions and 101 deletions
app/shared/directives.js
View file @ 0dca3c1f
...@@ -32,78 +32,28 @@ angular.module('ulakbus') ...@@ -32,78 +32,28 @@ angular.module('ulakbus')
* @ngdoc directive * @ngdoc directive
* @name headerNotification * @name headerNotification
* @description This directive is responsible to get and show notification. * @description This directive is responsible to get and show notification.
* It calls API's /notify path with given interval and broadcasts `notifications` application-wide. * It calls API's '_zops_unread_count' view to init its state and updates state when 'message' or 'notifications' broadcast message received *
* There are 4 types of notifications:
* 1: tasks, 2: messages, 3: announcements, 4: recents
* - Notifications can be disabled in /dev/settings page * - Notifications can be disabled in /dev/settings page
*/ */
.directive('headerNotification', function (WSOps, $rootScope, $cookies, $interval, RESTURL, $uibModal) { .directive('headerNotification', function ($rootScope, $uibModal, MessagingService) {
return { return {
templateUrl: 'shared/templates/directives/header-notification.html', templateUrl: 'shared/templates/directives/header-notification.html',
restrict: 'E', restrict: 'E',
replace: true, replace: true,
scope: {}, scope: {},
controller: function ($scope, $log) { controller: function ($scope, $log) {
// notification categories: $scope.count = {
// 1: tasks, 2: messages, 3: announcements, 4: recents messages: 0,
$scope.notifications = {1: [], 2: [], 3: [], 4: []}; notifications: 0
/** };
* Group notifications function initCounters(){
* @param notifications MessagingService.get_unread_messages_count()
*/ .then(function(result){
$scope.count.messages = result.messages;
$scope.popModal = function(item){ $scope.count.notifiations = result.notifications;
var modalInstance = $uibModal.open({ })
animation: true,
templateUrl: 'shared/templates/notificationsModalContent.html',
controller: function($scope){
$scope.notification = item;
$scope.cancel = function() {
modalInstance.dismiss('cancel');
};
},
size: 'lg'
});
} }
initCounters();
$scope.groupNotifications = function (notifications) {
$scope.notifications = {1: [], 2: [], 3: [], 4: []};
angular.forEach(notifications, function (value, key) {
$scope.notifications[value.type].push(value);
});
$scope.$apply();
};
/**
* When "notifications" send via websocket, parse notifications by type.
*/
$scope.$on("notifications", function (event, data) {
$log.debug("Notification!", data);
$scope.groupNotifications(data);
});
/**
* When clicked mark the notification as read.
* @param items
* @todo: do it in detail page of notification
*/
$scope.markAsRead = function (event,item, group, index) {
//Added event parameter to stop propagate, so that behaviour of outsideClick won't be interrupted.
event.stopPropagation();
WSOps.doSend(angular.toJson({data: {view: 'notify', id:item.id}}));
$scope.notifications[group].splice(index,1);
$event.preventDefault();
$event.stopPropagation();
return false;
};
// if markasread triggered outside the directive
// $scope.$on("markasread", function (event, data) {
// $scope.markAsRead(data);
// });
} }
}; };
}) })
......
app/shared/templates/directives/header-notification.html
View file @ 0dca3c1f
...@@ -32,9 +32,9 @@ ...@@ -32,9 +32,9 @@
</li>--> </li>-->
<li uib-dropdown auto-close="outsideClick"> <li uib-dropdown auto-close="outsideClick">
<a uib-dropdown-toggle> <a uib-dropdown-toggle>
<div class="badge" ng-show="notifications[2].length > 0">{{notifications[2].length}}</div> <div class="badge" ng-show="count.messages > 0">{{count.messages}}</div>
<i class="fa fa-envelope fa-fw" tooltip-placement="bottom" uib-tooltip="Mesajlar"></i> <i <i class="fa fa-envelope fa-fw" tooltip-placement="bottom" uib-tooltip="Mesajlar"></i>
class="fa fa-caret-down"></i> <!--<i class="fa fa-caret-down"></i>-->
</a> </a>
<ul class="dropdown-messages" uib-dropdown-menu ng-show="notifications[2].length > 0"> <ul class="dropdown-messages" uib-dropdown-menu ng-show="notifications[2].length > 0">
<li ng-repeat="notify in notifications[2] | limitTo: '8'"> <li ng-repeat="notify in notifications[2] | limitTo: '8'">
...@@ -62,47 +62,47 @@ ...@@ -62,47 +62,47 @@
<!-- /.dropdown-messages --> <!-- /.dropdown-messages -->
</li> </li>
<!-- /.dropdown --> <!-- /.dropdown -->
<li uib-dropdown auto-close="outsideClick"> <!--<li uib-dropdown auto-close="outsideClick">-->
<a uib-dropdown-toggle> <!--<a uib-dropdown-toggle>-->
<div class="badge" ng-if="notifications[1].length > 0">{{notifications[1].length}}</div> <!--<div class="badge" ng-if="notifications[1].length > 0">{{notifications[1].length}}</div>-->
<i class="fa fa-tasks fa-fw" tooltip-placement="bottom" uib-tooltip="Görevler"></i> <i <!--<i class="fa fa-tasks fa-fw" tooltip-placement="bottom" uib-tooltip="Görevler"></i> <i-->
class="fa fa-caret-down"></i> <!--class="fa fa-caret-down"></i>-->
</a> <!--</a>-->
<ul class="dropdown-tasks" uib-dropdown-menu ng-if="notifications[1].length > 0"> <!--<ul class="dropdown-tasks" uib-dropdown-menu ng-if="notifications[1].length > 0">-->
<li ng-repeat="notify in notifications[1] | limitTo: '8'"> <!--<li ng-repeat="notify in notifications[1] | limitTo: '8'">-->
<a href="{{notify.url}}"> <!--<a href="{{notify.url}}">-->
<div> <!--<div>-->
<p> <!--<p>-->
<strong>{{notify.title}}</strong> <!--<strong>{{notify.title}}</strong>-->
<span class="pull-right text-muted">{{notify.body}}</span> <!--<span class="pull-right text-muted">{{notify.body}}</span>-->
<span ng-click="markAsRead($event,notify, 1, $index)" class="pull-right fa fa-times"></span> <!--<span ng-click="markAsRead($event,notify, 1, $index)" class="pull-right fa fa-times"></span>-->
</p> <!--</p>-->
<!-- todo: progress bar will be used in future developments--> <!--&lt;!&ndash; todo: progress bar will be used in future developments&ndash;&gt;-->
<!--<div class="progress progress-striped active">--> <!--&lt;!&ndash;<div class="progress progress-striped active">&ndash;&gt;-->
<!--<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">--> <!--&lt;!&ndash;<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">&ndash;&gt;-->
<!--<span class="sr-only">40% Complete (success)</span>--> <!--&lt;!&ndash;<span class="sr-only">40% Complete (success)</span>&ndash;&gt;-->
<!--</div>--> <!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</div>--> <!--&lt;!&ndash;</div>&ndash;&gt;-->
</div> <!--</div>-->
</a> <!--</a>-->
</li> <!--</li>-->
<li class="divider"></li> <!--<li class="divider"></li>-->
<li> <!--<li>-->
<a class="text-center"> <!--<a class="text-center">-->
<strong>See All Tasks</strong> <!--<strong>See All Tasks</strong>-->
<i class="fa fa-angle-right"></i> <!--<i class="fa fa-angle-right"></i>-->
</a> <!--</a>-->
</li> <!--</li>-->
</ul> <!--</ul>-->
<!-- /.dropdown-tasks --> <!-- /.dropdown-tasks -->
</li> </li>
<!-- /.dropdown --> <!-- /.dropdown -->
<li uib-dropdown auto-close="outsideClick"> <li uib-dropdown auto-close="outsideClick">
<a uib-dropdown-toggle> <a uib-dropdown-toggle>
<div class="badge" ng-if="notifications[3].length > 0">{{notifications[3].length}}</div> <div class="badge" ng-if="count.notifications > 0">{{count.notifications}}</div>
<i class="fa fa-bell fa-fw" tooltip-placement="bottom" uib-tooltip="Duyurular"></i> <i <i class="fa fa-bell fa-fw" tooltip-placement="bottom" uib-tooltip="Duyurular"></i>
class="fa fa-caret-down"></i> <!--<i class="fa fa-caret-down"></i>-->
</a> </a>
<ul class="dropdown-alerts" uib-dropdown-menu ng-if="notifications[3].length > 0"> <ul class="dropdown-alerts" uib-dropdown-menu ng-if="notifications[3].length > 0">
<li ng-repeat="notify in notifications[3] | limitTo: '8'"> <li ng-repeat="notify in notifications[3] | limitTo: '8'">
...@@ -114,6 +114,13 @@ ...@@ -114,6 +114,13 @@
</div> </div>
</a> </a>
</li> </li>
<li class="divider"></li>
<li>
<a class="text-center">
<strong>See All Notifications</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul> </ul>
<!-- /.dropdown-alerts --> <!-- /.dropdown-alerts -->
</li> </li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment