rref #5392. Move messaging to separate component

app/app.js

@@ -28,7 +28,7 @@ angular.module(
         'ngSanitize',
         'ngCookies',
         'ulakbus.formService',
-        'ulakbus.messagingService',
+        'ulakbus.messaging',
         'ulakbus.dashboard',
         'ulakbus.auth',
         'ulakbus.error_pages',

app/components/messaging/messaging.js

+angular.module("ulakbus.messaging")
+
+    .directive('messaging', function (Generator, MessagingService, $log, $rootScope) {
+        return {
+            templateUrl: 'components/messaging/templates/index.html',
+            restrict: 'E',
+            replace: true,
+            scope: {},
+            controller: function ($scope) {
+
+                $scope.hidden = false;
+
+                $scope.showSearch = {
+                    user: false
+                };
+
+                MessagingService.list_channels().then(function (groupedChannels) {
+                    $scope.publicChannels = groupedChannels[MessagingService.CHANNEL_TYPE.PUBLIC];
+                    $scope.notificationsChannel = groupedChannels[MessagingService.CHANNEL_TYPE.NOTIFICATION][0];
+                    $scope.directChannels = groupedChannels[MessagingService.CHANNEL_TYPE.DIRECT];
+                });
+
+                this.startDirectChannel = function(){
+
+                };
+
+                $scope.hideApp = function(){
+                    $scope.hidden = true;
+                };
+
+                $scope.selectChannel = function(channel){
+                    $scope.activeChannel = channel;
+                }
+
+            }
+        };
+    })

app/components/messaging/messaging_forms.js

+angular.module("ulakbus.messaging")
+
+    .directive("messagingSearchUser", function(MessagingService, $log){
+        return {
+            templateUrl: "components/messaging/templates/search_user.html",
+            restrict: 'E',
+            replace: true,
+            require: "^messaging",
+            scope: {
+                'showSearch': '=ngShow'
+            },
+            link: function(iScope, iElem, iAttrs, messagingCtrl){
+                iScope.selectUser = function(user){
+                    messagingCtrl.startDirectChannel(user);
+                    iScope.hide();
+                }
+            },
+            controller: function($scope){
+                $scope.searchResult = [];
+                $scope.hide = function(){
+                    $scope.showSearch = false;
+                    $scope.searchResult = [];
+                }
+
+                function search(query){
+                    $scope.loading = true;
+                    $scope.searchResult = [];
+                    MessagingService.search_user(query)
+                        .then(function(users){
+                            $scope.searchResult = users;
+                        })
+                        .finally(function(){
+                            $scope.loading = false;
+                        })
+                }
+
+                $scope.onChange = function(query){
+                    search(query);
+                };
+
+            }
+        }
+    })

app/zetalib/messagingService.js → app/components/messaging/messaging_service.js

@@ -7,10 +7,10 @@
  * @author Evren Kutar
  */
 
-angular.module('ulakbus.messagingService', ['ui.bootstrap'])
+angular.module('ulakbus.messaging', ['ui.bootstrap'])
 
 /**
- * @memberof ulakbus.formService
+ * @memberof ulakbus.messaging
  * @ngdoc factory
  * @name Generator
  * @description form service's Generator factory service handles all generic form operations
@@ -24,6 +24,20 @@ angular.module('ulakbus.messagingService', ['ui.bootstrap'])
             "NOTIFICATION": 5
         };
 
+        function wsReady () {
+            /**
+             * wait until websocket will be open
+             */
+                var deferred = $q.defer();
+            var dismissWatcher = $rootScope.$watch('websocketIsOpen', function(isOpen){
+                if (isOpen){
+                    dismissWatcher();
+                    deferred.resolve();
+                }
+            });
+            return deferred.promise;
+        }
+
         msg.send = function (msg) {
             /**
              * send the message as following structure;
@@ -192,9 +206,24 @@ angular.module('ulakbus.messagingService', ['ui.bootstrap'])
             var outgoing = {
                 view: '_zops_list_channels'
             };
-            return WSOps.request(outgoing).then(function (data) {
-                return Utils.groupBy(data.channels||[], "type");
+            return wsReady().then(function(){
+                return WSOps.request(outgoing).then(function (data) {
+                    return Utils.groupBy(data.channels||[], "type");
+                });
             });
         };
+
+        msg.search_user = function (query) {
+            var outgoing = {
+                view: '_zops_search_user',
+                query: query
+            };
+            return wsReady().then(function(){
+                return WSOps.request(outgoing).then(function (data) {
+                    return data.results
+                });
+            });
+        };
+
         return msg;
     });

app/components/messaging/templates/index.html

+<div>
+    <button class="chat-app-button" ng-show="hidden" ng-click="hidden = false"><i class="glyphicon glyphicon-comment"></i></button>
+    <div class="chat-app" ng-hide="hidden">
+
+        <div class="chat-app-container">
+
+            <div class="side-navigation">
+                <ul class="channels">
+                    <li class="title">NOTIFICATIONS <span class="badge" ng-show="notificationChannel.unread">{{notificationChannel.unread}}</span></li>
+                </ul>
+
+                <ul class="channels">
+                    <li class="title">CHANNELS <span class="add-action glyphicon glyphicon-plus-sign"></span></li>
+                    <li class="notification" ng-repeat="ch in publicChannels">{{ch.name}}</li>
+                </ul>
+
+                <ul class="direct-messages">
+                    <li class="title">DIRECT MESSAGES <span class="add-action glyphicon glyphicon-plus-sign" ng-click="showSearch.user = true"></span></li>
+                    <li class="online" ng-class="{'active':'active', 'notification': 'notification'}">Erkan Öğümsöğütlü</li>
+                </ul>
+
+            </div>
+
+            <div class="conversation-section">
+
+                <div class="conversation-header">
+                    <div class="conversation-user">
+                        <div class="user-photo"><img src="../../../img/erkan.jpg"></div>
+                        <div class="user-name">Erkan Öğümsöğütlü</div>
+                    </div>
+                    <div class="conversation-search">
+                        <input type="text" placeholder="Arama Yap">
+                    </div>
+                    <div class="close-chat-app" ng-click="hideApp()">
+                        <span class="glyphicon glyphicon-remove"></span>
+                    </div>
+                </div>
+
+                <div class="conversation-body">
+                    <div class="conversation-body-inner">
+
+                        <div class="beginning-of-conversation">
+                            This is the beginning of the conversation
+                        </div>
+
+                        <div class="conversation-block clearfix">
+
+                            <div class="conversation-actions">
+                                <div class="action">Edit</div>
+                                <div class="action">Delete</div>
+                            </div>
+
+                            <div class="user-photo">
+                                <img src="../../../img/erkan.jpg">
+                            </div>
+                            <div class="user-message">
+                                <div class="message-header clearfix">
+                                    <div class="user-name">Erkan Öğümsöğütlü</div>
+                                    <div class="message-time">13:16</div>
+                                </div>
+                                <div class="message-content">
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus mauris.
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div class="conversation-footer">
+
+                    <textarea placeholder="Mesajını buraya yaz..."></textarea>
+                    <div class="add-attachment">
+                        <span class="glyphicon glyphicon-file"></span>
+                        <span class="glyphicon glyphicon-picture"></span>
+                    </div>
+
+                </div>
+            </div>
+
+            <messaging-search-user ng-show="showSearch.user"></messaging-search-user>
+
+        </div>
+    </div>
+</div>

app/components/messaging/templates/search_user.html

+<div class="create-new-message-window">
+    <div class="close-create-new-message-window" ng-click="hide()"><span class="glyphicon glyphicon-remove"></span></div>
+    <input type="text" placeholder="Birini ismi ile ara..." ng-model="query" ng-change="onChange(query)">
+    <div class="search-results">
+        <span class="loader" ng-show="loading"></span>
+        <div class="user" ng-repeat="user in searchResult" ng-click="selectUser(user)">
+            <img ng-src="{{user[2]}}" ng-show="user[2]">
+            <div class="user-name">{{user[0]}}</div>
+        </div>
+    </div>
+</div>

app/index.html

@@ -113,7 +113,6 @@
 <script src="shared/directives.js"></script>
 <script src="zetalib/interceptors.js"></script>
 <script src="zetalib/form_service.js"></script>
-<script src="zetalib/messagingService.js"></script>
 <script src="zetalib/form_constraints.js"></script>
 <script src="zetalib/action_service.js"></script>
 <script src="zetalib/error_service.js"></script>
@@ -126,6 +125,9 @@
 <script src="components/auth/auth_service.js"></script>
 <script src="components/dashboard/dashboard_controller.js"></script>
 <script src="components/dashboard/dashboard_widgets_directives.js"></script>
+<script src="components/messaging/messaging_service.js"></script>
+<script src="components/messaging/messaging.js"></script>
+<script src="components/messaging/messaging_forms.js"></script>
 <script src="components/crud/crud_controller.js"></script>
 <script src="components/crud/crud_widgets.js"></script>
 <script src="components/debug/debug_controller.js"></script>
@@ -136,5 +138,7 @@
 <script src="components/version/version-directive.js"></script>
 <script src="components/version/version.js"></script>
 
+
+
 </body>
 </html>

app/main.html

@@ -120,7 +120,6 @@
 <script src="shared/directives.js"></script>
 <script src="zetalib/interceptors.js"></script>
 <script src="zetalib/form_service.js"></script>
-<script src="zetalib/messagingService.js"></script>
 <script src="zetalib/form_constraints.js"></script>
 <script src="zetalib/action_service.js"></script>
 <script src="zetalib/error_service.js"></script>
@@ -133,6 +132,9 @@
 <script src="components/auth/auth_service.js"></script>
 <script src="components/dashboard/dashboard_controller.js"></script>
 <script src="components/dashboard/dashboard_widgets_directives.js"></script>
+<script src="components/messaging/messaging_service.js"></script>
+<script src="components/messaging/messaging.js"></script>
+<script src="components/messaging/messaging_forms.js"></script>
 <script src="components/crud/crud_controller.js"></script>
 <script src="components/crud/crud_widgets.js"></script>
 <script src="components/debug/debug_controller.js"></script>

app/main.js

@@ -28,7 +28,7 @@ angular.module(
         'ngSanitize',
         'ngCookies',
         'ulakbus.formService',
-        'ulakbus.messagingService',
+        'ulakbus.messaging',
         'ulakbus.dashboard',
         'ulakbus.auth',
         'ulakbus.error_pages',

app/shared/directives.js

@@ -663,72 +663,6 @@ angular.module('ulakbus')
             }
         }
     })
-
-    // listen for message in directives below
-
-    .directive('messaging', function (Generator, MessagingService, $log, $rootScope) {
-        return {
-            templateUrl: 'shared/templates/directives/messaging/index.html',
-            restrict: 'E',
-            replace: true,
-            scope: {},
-            controller: function ($scope) {
-                var dismissWatcher = $scope.$watch(function(){
-                    return $rootScope.websocketIsOpen
-                }, function(isOpen){
-                    if (isOpen){
-                        dismissWatcher();
-                        MessagingService.list_channels().then(function (groupedChannels){
-                            $scope.publicChannels = groupedChannels[MessagingService.CHANNEL_TYPE.PUBLIC];
-                            $scope.notificationsChannels = groupedChannels[MessagingService.CHANNEL_TYPE.NOTIFICATION];
-                            $scope.directChannels = groupedChannels[MessagingService.CHANNEL_TYPE.DIRECT];
-                        });
-                    }
-                });
-
-                this.hideApp = function(){
-                    $scope.hidden = true;
-                }
-
-                $scope.messages = [];
-                $scope.$on("messages", function (event, data) {
-                    $log.debug("Message List Received", data);
-                    $scope.messages(data);
-                });
-
-                $scope.$on("message", function (event, data) {
-                    $log.debug("Message Received", data);
-                    // do relevant action here
-                });
-                
-            }
-        };
-    })
-
-    .directive('messageDetail', function (Generator, MessagingService, $log, $rootScope) {
-        return {
-            templateUrl: 'shared/templates/directives/messaging/detail.html',
-            restrict: 'E',
-            replace: true,
-            scope: {},
-            require: "^messaging",
-            link: function(iScope, iElem, iAttrs, messagingCtrl){
-                iScope.hideApp = messagingCtrl.hideApp;
-            },
-            controller: function ($scope) {
-                $scope.messages = [];
-                $scope.$on("detailMessages", function (event, data) {
-                    $log.debug("Detail Message Received", data);
-                    $scope.messages = data;
-                });
-                $scope.$on("message", function (event, data) {
-                    $log.debug("Message Received", data);
-                    // do relevant action here
-                    // if channel_key belongs to detail screen then append msg to the end of the thread
-                });
-            }
-        };
-    })
     .directive('timetableActionSelector', function($timeout){
         // Display/hide popover with actions
         // global listener used to close popover when user clicks outside of the popover