Merge branch 'webchat-chat' of github.com:eciis/web into webchat-chat

webchat/app.js

@@ -8,11 +8,10 @@
         'firebase',
     ]);
 
-    const rootName = 'webchat';
+    const rootName = 'main';
     app.constant('STATES', {
-            abstract: 'webchat',
+            abstract: rootName,
             home: `${rootName}.home`,
-            chat: `${rootName}.chat`,
             login: 'login',
             error: 'error',
         });
@@ -37,9 +36,9 @@
                abstract: true,
                views: {
                     main: {
-                        templateUrl: "app/webchat/webchat.html",
-                        controller: "WebchatController",
-                        controllerAs: "webchatCtrl",
+                        templateUrl: "app/main/main.html",
+                        controller: "mainController",
+                        controllerAs: "mainCtrl",
                     },
                },
            })
@@ -53,15 +52,6 @@
                    },
                },
            })
-           .state(STATES.chat, {
-               url: "/chat",
-               views: {
-                   content: {
-                       templateUrl: "app/chat/chat.html",
-                       controller: "ChatController as controller",
-                   },
-               },
-           })
            .state(STATES.login, {
                url: "/login",
                views: {

webchat/auth/authService.js

@@ -152,6 +152,7 @@
             delete $window.localStorage.userInfo;
             userInfo = undefined;
             clearInterval(refreshInterval);
+            chatClient.closeClient();
 
             executeLogoutListeners();
 

webchat/components/contacts/contacts-sidenav.component.js

@@ -15,6 +15,7 @@
         controllerAs: "contactsSidenavCtrl",
         bindings: {
             contacts: "<",
+            openChat: "<",
         },
     });
 

webchat/components/contacts/contacts-sidenav.html

@@ -11,5 +11,6 @@
     <contacts-list
             class="contacts-sidenav__list custom-scrollbar"
             contacts="contactsSidenavCtrl.contacts"
+            open-chat="contactsSidenavCtrl.openChat"
             search-query="contactsSidenavCtrl.searchQuery"></contacts-list>
 </md-sidenav>

webchat/components/contacts/list/contacts-list.component.js

@@ -14,7 +14,8 @@
         controllerAs: "contactsListCtrl",
         bindings: {
             searchQuery: "<",
-            contacts: "<"
+            contacts: "<",
+            openChat: "<",
         },
     });
 

webchat/components/contacts/list/contacts-list.html

@@ -1,16 +1,16 @@
 <md-list
         class="contacts-list__container">
     <md-list-item
-            ng-repeat="user in contactsListCtrl.contacts | filter : contactsListCtrl.searchQuery | orderBy : ['name', 'description']"
+            ng-repeat="user in contactsListCtrl.contacts | filter : contactsListCtrl.searchQuery | orderBy : ['name', 'email[0]']"
             ng-click="contactsListCtrl.openChat(user)"
             aria-label="contacts-list__contact">
         <user-description
                 class="contacts-list__contact"
                 avatar="{{user.photo_url}}"
                 name="{{user.name}}"
-                text="{{user.current_institution.name}}">
+                text="{{user.email[0]}}">
         </user-description>
         <md-divider></md-divider>
     </md-list-item>
-    <h2 class="contacts-list__no-contacts-msg" ng-show="contactsListCtrl.isMessageShown">Não há contatos online no momento.</h2>
+    <h2 class="contacts-list__no-contacts-msg" ng-show="!contactsListCtrl.contacts">Não há contatos online no momento.</h2>
 </md-list>

webchat/components/expansive-search-bar/expansive-search-bar.html

@@ -1,6 +1,6 @@
 <div class="expansive-search__container">
     <input
-            class="expansive-search__input"
+            class="expansive-search__input custom-input"
             ng-model="expansiveSearchBarCtrl.searchQuery"
             ng-if="expansiveSearchBarCtrl.isExpanded"/>
     <icon-button

webchat/components/icon-button/icon-button.component.js

@@ -18,15 +18,21 @@
             icon: "@",
             iconColor: "@",
             action: '<',
+            disabled: '<',
         },
     });
 
     function iconButtonController() {
         const iconButtonCtrl = this;
 
         iconButtonCtrl.$onInit = () => {
-            iconButtonCtrl.iconColor = iconButtonCtrl.iconColor || "#EEE";
+            _.defaults(iconButtonCtrl, {
+                iconColor: "#EEE",
+                action: () => {},
+                disabled: false,
+            });
         };
+
     }
 
 })();

webchat/components/icon-button/icon-button.html

@@ -1,5 +1,5 @@
-<md-button class="md-icon-button" ng-click="iconButtonCtrl.action()">
-    <md-icon style="color: {{iconButtonCtrl.iconColor}}">
+<md-button class="md-icon-button" ng-click="iconButtonCtrl.action()" ng-disabled="iconButtonCtrl.disabled">
+    <md-icon style="color: {{iconButtonCtrl.iconColor}} ">
         {{iconButtonCtrl.icon}}
     </md-icon>
 </md-button>

webchat/components/toggle-button/toggle-button.component.js

@@ -0,0 +1,67 @@
+(function () {
+    'use strict';
+
+    /**
+     * Button that calls an action and changes its icon on click.
+     * It receives as a binding an icon to shown when on and an
+     * icon to show when off. Also it receives an action to be
+     * called on click and the icons color when on and off. If
+     * the icon color is not passed, its color will be a default
+     * one (#EEE).
+     * @class toggleButton
+     * @example
+     * <toggle-button
+     *     icon-on="anIcon"
+     *     icon-off="anotherIcon"
+     *     icon-color-on="aColor"
+     *     icon-color-off="anotherColor"
+     *     action="anAction">
+     *</toggle-button>
+     *
+     */
+    angular.module("webchat").component("toggleButton", {
+        templateUrl: "app/components/toggle-button/toggle-button.html",
+        controller: toggleButtonController,
+        controllerAs: "toggleButtonCtrl",
+        bindings: {
+            iconOn: '@',
+            iconOff: '@',
+            iconColorOn: '@',
+            iconColorOff: '@',
+            action: '<',
+        },
+    });
+
+    function toggleButtonController() {
+        const toggleButtonCtrl = this;
+
+        toggleButtonCtrl.$onInit = () => {
+            console.log(toggleButtonCtrl);
+            _.defaults(toggleButtonCtrl, {
+                active: true,
+                iconColorOn: "#EEE",
+                iconColorOff: "#EEE",
+                action: () => {}
+            });
+            console.log(toggleButtonCtrl);
+        };
+
+        toggleButtonCtrl.toggle = () => {
+            toggleButtonCtrl.active = !toggleButtonCtrl.active;
+            toggleButtonCtrl.action();
+        };
+
+        Object.defineProperty(toggleButtonCtrl, 'activeIcon', {
+            get: () => {
+                return toggleButtonCtrl.active ? toggleButtonCtrl.iconOn : toggleButtonCtrl.iconOff;
+            },
+        });
+
+        Object.defineProperty(toggleButtonCtrl, 'activeIconColor', {
+            get: () => {
+                return toggleButtonCtrl.active ? toggleButtonCtrl.iconColorOn : toggleButtonCtrl.iconColorOff;
+            },
+        });
+    }
+
+})();

webchat/components/toggle-button/toggle-button.html

@@ -0,0 +1,5 @@
+<icon-button
+        icon="{{ toggleButtonCtrl.activeIcon }}"
+        icon-color="{{ toggleButtonCtrl.activeIconColor }}"
+        action="toggleButtonCtrl.toggle">
+</icon-button>

webchat/ecis.css

@@ -1,9 +1,4 @@
-html, body {
-  height: 100%;
-  max-height: 100%;
-}
-
-#webchat {
+html, body, #main {
   height: 100%;
   max-height: 100%;
 }

webchat/index.html

@@ -29,6 +29,7 @@
   <link type="text/css" rel="stylesheet" href="app/styles/animations/simple-fade.css"/>
 
   <!-- E-cis Custom -->
+  <link type="text/css" rel="stylesheet" href="app/styles/custom/custom.css"/>
   <link type="text/css" rel="stylesheet" href="app/styles/custom/scrollbar.css"/>
 
   <!-- Responsive -->
@@ -43,7 +44,7 @@
   <link rel="stylesheet" type="text/css" href="app/auth/login.css">
   <link rel="stylesheet" type="text/css" href="app/error/error.css">
   <link rel="stylesheet" type="text/css" href="app/home/home.css">
-  <link rel="stylesheet" type="text/css" href="app/webchat/webchat.css">
+  <link rel="stylesheet" type="text/css" href="app/main/main.css">
 
   <!-- Components CSS -->
   <!-- General Components -->
@@ -61,7 +62,7 @@
 </head>
 <body ng-app="webchat" ng-cloak layout="column">
 
-  <div id="webchat" flex layout="column" ui-view="main"></div>
+  <div id="main" flex layout="column" ui-view="main"></div>
 
   <script>
     var $buoop = {notify:{i:14,f:-4,o:-4,s:-2,c:-4},insecure:true,api:5,noclose:true,l:"pt-br"};
@@ -110,13 +111,13 @@
   <script src="app/services/NavbarManagementService.js"></script>
 
   <script src="app/auth/loginController.js"></script>
-  <script src="app/chat/chatController.js"></script>
   <script src="app/home/homeController.js"></script>
-  <script src="app/webchat/webchatController.js"></script>
+  <script src="app/main/mainController.js"></script>
 
   <script src="app/components/header/ecis-header.component.js"></script>
   <script src="app/components/logo/logo.component.js"></script>
   <script src="app/components/icon-button/icon-button.component.js"></script>
+  <script src="app/components/toggle-button/toggle-button.component.js"></script>
   <script src="app/components/user-description/user-description.component.js"></script>
 
   <script src="app/components/contacts/contacts-sidenav.component.js"></script>

webchat/webchat/webchat.css → webchat/main/main.css

@@ -1,4 +1,4 @@
-.webchat__container {
+.main__container {
     height: 100%;
     display: grid;
     grid-template-columns: 100%;
@@ -10,10 +10,10 @@
     animation-duration: 0.5s;
 }
 
-.webchat__header {
+.main__header {
     grid-area: header;
 }
 
-.webchat__content {
+.main__content {
     grid-area: content;
 }

webchat/main/main.html

@@ -0,0 +1,4 @@
+<div class="main__container">
+    <ecis-header class="main__header" md-colors="{background: 'teal-900'}" user="mainCtrl.user"></ecis-header>
+    <div class="main__content" ui-view="content"></div>
+</div>

webchat/main/mainController.js

@@ -0,0 +1,12 @@
+(function () {
+    'use strict';
+
+    const webchat = angular.module('webchat');
+
+    webchat.controller('mainController', ['AuthService', function mainController (AuthService) {
+        const mainCtrl = this;
+
+        mainCtrl.user = AuthService.getCurrentUser();
+    }]);
+
+})();

webchat/styles/custom/custom.css

@@ -0,0 +1,8 @@
+.custom-input {
+    width: 100%;
+    border-radius: 50px;
+    padding: 0 20px;
+    background-color: #EEEEEE;
+    border: none;
+    outline: none;
+}

webchat/utils/chatClient.js

@@ -88,6 +88,11 @@
         }
       }
 
+      closeClient() {
+        this.ws.onclose = () => {};
+        this.ws.close();
+      }
+
       /**
        * Mimics node's on/emit event handlers.
        * Raises an event.