rref 5392. Add unread messages indicator. Open messaging window when click on...

rref 5392. Add unread messages indicator. Open messaging window when click on header messaging icons

app/components/messaging/messaging.js

@@ -30,9 +30,9 @@ angular.module("ulakbus.messaging")
             restrict: 'E',
             scope: {},
             link: function(iScope, iElem, iAttrs){
-                iScope.chatAppIsHidden = true;
-                // track if user is logged in
+                var channelsMap = {};
 
+                iScope.chatAppIsHidden = true;
 
                 // reset state when user log in/log out
                 $rootScope.$watch('loggedInUser', function(v){
@@ -47,6 +47,7 @@ angular.module("ulakbus.messaging")
 
                 function reset(){
                     iScope.selectedChannel = null;
+                    MessagingService.reset_current_channel();
                     iScope.publicChannels = [];
                     iScope.notificationsChannel = [];
                     iScope.directChannels = [];
@@ -81,7 +82,14 @@ angular.module("ulakbus.messaging")
                         if (channel.messages){
                             channel.messages.push(message);
                         }
+                    } else {
+                        // update unread counter
+                        var ch = channelsMap[message.channel_key];
+                        if (ch){
+                            ch.unread += 1;
                         }
+                    }
+
                     updateLastMessage(message);
                 }
 
@@ -104,7 +112,13 @@ angular.module("ulakbus.messaging")
                     // FIXME: change to proper moment processing
                     // var ts = iScope.lastMessage.moment.toISOString();
                     var ts = iScope.lastMessage.moment.format("YYYY-MM-DDTHH:mm:ss");
-                    MessagingService.report_last_seen_message(getKey(iScope.selectedChannel), iScope.lastMessage.key, ts);
+                    MessagingService.report_last_seen_message(getKey(iScope.selectedChannel), iScope.lastMessage.key, ts).then(function(){
+                        // set unread to 0 in channels list
+                        var ch = channelsMap[getKey(iScope.selectedChannel)];
+                        if (ch){
+                            ch.unread = 0;
+                        }
+                    })
                 };
 
                 iScope.deleteConfirmation = function(title){
@@ -122,6 +136,16 @@ angular.module("ulakbus.messaging")
                         iScope.publicChannels = groupedChannels[MessagingService.CHANNEL_TYPE.PUBLIC];
                         iScope.notificationsChannel = groupedChannels[MessagingService.CHANNEL_TYPE.NOTIFICATION][0];
                         iScope.directChannels = groupedChannels[MessagingService.CHANNEL_TYPE.DIRECT];
+                        // add all channels to channels map
+                        for(var key in groupedChannels){
+                            if (groupedChannels.hasOwnProperty(key)){
+                                var channels = groupedChannels[key];
+                                channels.forEach(function(channel){
+                                    channelsMap[channel.key] = channel;
+                                })
+                            }
+                        }
+                        console.error("CHALLL : ", channelsMap);
                     });
                 }
 
@@ -138,11 +162,13 @@ angular.module("ulakbus.messaging")
 
                 iScope.hideApp = function(){
                     iScope.chatAppIsHidden = true;
+                    MessagingService.toggle_messaging_window_visibility(false);
                 };
 
                 iScope.showApp = function(){
                     iScope.chatAppIsHidden = false;
-                    iScope.updateChannelsList();
+                    MessagingService.toggle_messaging_window_visibility(true);
+                    return iScope.updateChannelsList();
                 }
 
                 iScope.searchUser = function(){
@@ -326,6 +352,16 @@ angular.module("ulakbus.messaging")
                     reset();
                     iScope.hideApp();
                 });
+
+                $rootScope.$on(MessagingService.SHOW_MESSAGING_WINDOW_EVENT, function(e, channelKey){
+                    if (iScope.chatAppIsHidden){
+                        iScope.showApp().then(function(){
+                            if (channelKey){
+                                iScope.selectChannel(channelKey);
+                            }
+                        })
+                    }
+                })
             }
         };
     })

app/components/messaging/messaging_service.js

@@ -25,6 +25,16 @@ angular.module('ulakbus.messaging', ['ui.bootstrap'])
             "NOTIFICATION": 5
         };
 
+        msg.SHOW_MESSAGING_WINDOW_EVENT = "show_messaging_window";
+
+        var unread = {
+            messages: {count: 0},
+            notifications: {count: 0}
+        };
+        var currentChannelKey;
+        // track messaging app state for proper unread messages count
+        var messagingAppIsHidden = true;
+
         function wsReady () {
             /**
              * wait until websocket will be open
@@ -52,6 +62,14 @@ angular.module('ulakbus.messaging', ['ui.bootstrap'])
             }
         }
 
+        function increaseUnread(message, messageType){
+            // skip current channel messages. Don't update counters
+            if (!messagingAppIsHidden && message.channel_key == currentChannelKey){
+                return;
+            }
+            unread[messageType].count += 1;
+        }
+
         // prepare message to show in UI
         msg.prepareMessage = function(message){
             if (!message.timestamp){
@@ -67,6 +85,25 @@ angular.module('ulakbus.messaging', ['ui.bootstrap'])
             return notificationsChannelKey;
         };
 
+        msg.get_unread_counters = function(){
+            return unread;
+        };
+
+        msg.reset_current_channel = function(){
+            currentChannelKey = null;
+        }
+
+        msg.toggle_messaging_window_visibility = function(visibility, resetCurrentChannel){
+            messagingAppIsHidden = !visibility;
+            if (resetCurrentChannel){
+                msg.reset_current_channel();
+            }
+        };
+
+        msg.show_messaging_window = function(channelKey){
+            $rootScope.$broadcast(msg.SHOW_MESSAGING_WINDOW_EVENT, channelKey);
+        }
+
         /**
          * API
          *
@@ -226,6 +263,19 @@ angular.module('ulakbus.messaging', ['ui.bootstrap'])
             };
             return wsRequest(outgoing).then(function(result){
                 $log.info("Show channel ", channelKey, ": ", result);
+                // decrease unread messages for current channel
+                if (result.unread){
+                    var counter;
+                    if (result.type == msg.CHANNEL_TYPE.NOTIFICATION){
+                         counter = unread.notifications
+                    } else {
+                        counter = unread.messages;
+                    }
+                    counter.count -= result.unread;
+                    if (counter.count < 0) counter.count = 0;
+                }
+                // save current channel key
+                currentChannelKey = result.key;
                 prepareMessages(result.last_messages);
                 return result;
             })
@@ -249,6 +299,9 @@ angular.module('ulakbus.messaging', ['ui.bootstrap'])
             };
             return wsRequest(outgoing).then(function(result){
                 $log.info("Get unread messages count: ", result);
+                // update internal unread messages counters
+                unread.messages.count = result.messages;
+                unread.notifications.count = result.notifications;
                 return result;
             })
         };
@@ -379,6 +432,18 @@ angular.module('ulakbus.messaging', ['ui.bootstrap'])
             });
         };
 
+        /**
+         * Event listeners
+         */
+
+        $rootScope.$on("message", function(e, message){
+            increaseUnread(message, 'messages');
+        });
+
+        $rootScope.$on("notifications", function(e, message){
+            increaseUnread(message, 'notifications');
+        });
+
         return msg;
     })
 

app/components/messaging/templates/conversation.html

@@ -40,7 +40,6 @@
 
             <div class="conversation-block clearfix" ng-repeat="msg in selectedChannel.messages">
                 <div class="conversation-actions">
-                    <div class="action"><span class="glyphicon glyphicon-star-empty"></span></div>
                     <div class="action dropdown-toggle" data-toggle="dropdown" ng-click="getMessageActions(msg)">
                         <span class="glyphicon glyphicon-option-horizontal"></span>
                     </div>

app/components/messaging/templates/index.html

@@ -11,12 +11,12 @@
 
                 <ul class="channels">
                     <li class="title">KANALLAR <span class="add-action glyphicon glyphicon-plus-sign" ng-click="createChannel()"></span></li>
-                    <li ng-class="{'notification': ch.unread, 'active': isChannelSelected(ch)}" title="{{ch.description}}" ng-repeat="ch in publicChannels" ng-click="selectChannel(ch)">{{ch.name}}</li>
+                    <li ng-class="{'unread': ch.unread, 'active': isChannelSelected(ch)}" title="{{ch.description}}" ng-repeat="ch in publicChannels" ng-click="selectChannel(ch)">{{ch.name}}</li>
                 </ul>
 
                 <ul class="direct-messages">
                     <li class="title">MESAJLAR <span class="add-action glyphicon glyphicon-plus-sign" ng-click="searchUser()"></span></li>
-                    <li ng-class="{'notification': userChannel.unread, 'active': isChannelSelected(userChannel), 'online': userChannel.is_online}" ng-repeat="userChannel in directChannels" ng-click="selectChannel(userChannel)">{{userChannel.name}}</li>
+                    <li ng-class="{'unread': userChannel.unread, 'active': isChannelSelected(userChannel), 'online': userChannel.is_online}" ng-repeat="userChannel in directChannels" ng-click="selectChannel(userChannel)">{{userChannel.name}}</li>
                 </ul>
 
             </div>

app/shared/directives.js

@@ -42,18 +42,17 @@ angular.module('ulakbus')
             replace: true,
             scope: {},
             controller: function ($scope, $log) {
-                $scope.count = {
-                    messages: 0,
-                    notifications: 0
-                };
-                function initCounters(){
-                    MessagingService.get_unread_messages_count()
-                        .then(function(result){
-                            $scope.count.messages = result.messages;
-                            $scope.count.notifiations = result.notifications;
-                        })
+                $scope.count = MessagingService.get_unread_counters();
+                // initialize counters
+                MessagingService.get_unread_messages_count();
+
+                $scope.showMessagesWindow = function(type){
+                    if (type == 'notifications'){
+                        var channelKey = MessagingService.get_notifications_channel_key();
+                        return MessagingService.show_messaging_window(channelKey);
+                    }
+                    MessagingService.show_messaging_window();
                 }
-                initCounters();
             }
         };
     })

app/shared/templates/directives/header-notification.html

@@ -31,8 +31,8 @@
         <!– /.dropdown-messages –>
     </li>-->
     <li uib-dropdown auto-close="outsideClick">
-        <a uib-dropdown-toggle>
-            <div class="badge" ng-show="count.messages > 0">{{count.messages}}</div>
+        <a uib-dropdown-toggle ng-click="showMessagesWindow('messages')">
+            <div class="badge" ng-show="count.messages.count > 0">{{count.messages.count}}</div>
             <i class="fa fa-envelope fa-fw" tooltip-placement="bottom" uib-tooltip="Mesajlar"></i>
             <!--<i class="fa fa-caret-down"></i>-->
         </a>
@@ -99,8 +99,8 @@
     </li>
     <!-- /.dropdown -->
     <li uib-dropdown auto-close="outsideClick">
-        <a uib-dropdown-toggle>
-        	<div class="badge" ng-if="count.notifications > 0">{{count.notifications}}</div>
+        <a uib-dropdown-toggle ng-click="showMessagesWindow('notifications')">
+            <div class="badge" ng-if="count.notifications.count > 0">{{count.notifications.count}}</div>
             <i class="fa fa-bell fa-fw" tooltip-placement="bottom" uib-tooltip="Duyurular"></i>
             <!--<i class="fa fa-caret-down"></i>-->
         </a>