@chat21/chat21-ionic 3.0.60 → 3.0.61-rc2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # chat21-ionic ver 3.0
 
+### 3.0.61-rc2
+- Fixes the bug: Profile picture in the sidebar does not update when logged in with another user after logging out
+- Bug Fix: in the "info-profile" page avoid the "uid of undefined" error
+- Adds the "user details" sidebar
+- Adds the languages flags images
+- Allows to close the "user details" sidebar by clicking outside it
+- Adds the tooltips to the links of the sidebar
+- Hides the sidebar when the teammate logs out, if the app is on a mobile device and if the environment variable "supportMode" is set to false
+- Hides in the item showing unassigned conversations the button to pin a project if the app is not on a mobile device 
+- Gets in the sidebar the feature tokens from the environment variables
+- Install the "Roboto" font
+- Changes font priority in global.scss: replace "Helvetica Neue" font with "Roboto" font
+- Imports the "Poppins" font family into index.html
+- Adds the "Resolve" tooltip to the "archive" button available in the conversation list
+- Displays the "Resolved Conversations" button and the "Teammates" button in the header of the conversation list  based on how the "teammatesButton" and "archivedButton" environment variables are set
+- Adds "teammatesButton" and "archivedButton" variables to the environments
+- Adds the "TEAMMATES_BUTTON" and the "ARCHIVED_BUTTON" variables to the env.sample file
+- Adds the "teammatesButton" and the "archivedButton" variables to the "chat-config-template.json" file and to "the chat-config.json" file
+- Updates the section "Configuration" of the "README.md" file with the new variables "teammatesButton" and the "archivedButton" 
+
+### 3.0.61-rc1
+- Adds a sidebar that allows navigation to the dashboard
+
 ### 3.0.60
 - Deploys in production
 

package/README.md

@@ -61,6 +61,8 @@ In progress git
         fileUploadAccept:"*/*",
         logLevel":"<YOUR-PREFERRED-LOG-LEVEL>",
         supportMode: false,
+        teammatesButton: false,
+        archivedButton: false,
         firebaseConfig: {
             tenant:"tilechat",
             apiKey: '123ABC..',

package/angular.json

@@ -41,6 +41,8 @@
               "src/chat-config-dev.json"
             ],
             "styles": [
+              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
               {
                 "input": "src/theme/variables.scss"
               },

package/env.sample

@@ -3,7 +3,7 @@ DASHBOARD_URL=https://YOUR_DASHBOARD_URL
 WS_URL=wss://YOUR_TILEDESK_SERVER_URL?token=
 WS_URL_RELATIVE=********
 SERVER_BASE_URL=http://localhost:3000/
-FEATURES_TOKEN=CAR:F
+FEATURES_TOKEN=CAR:F-PAY:F-ANA:F-ACT:F-APP:F
 CHAT21_ENGINE=mqtt
 UPLOAD_ENGINE=native
 PUSH_ENGINE=none
@@ -11,6 +11,8 @@ FILE_UPLOAD_ACCEPT=*/*
 TENANT=tilechat
 LOG_LEVEL=INFO
 SUPPORT_MODE=false
+TEAMMATES_BUTTON=false,
+ARCHIVED_BUTTON=false,
 
 # For MQTT Chat Engine
 MQTT_APPID=tilechat

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.60",
+    "version": "3.0.61-rc2",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {
@@ -13,10 +13,13 @@
     },
     "private": false,
     "dependencies": {
+        "@angular/animations": "^8.2.14",
+        "@angular/cdk": "^8.2.3",
         "@angular/common": "~8.2.14",
         "@angular/core": "~8.2.14",
         "@angular/forms": "~8.2.14",
         "@angular/http": "^7.2.16",
+        "@angular/material": "^8.2.3",
         "@angular/platform-browser": "~8.2.14",
         "@angular/platform-browser-dynamic": "~8.2.14",
         "@angular/router": "~8.2.14",
@@ -59,6 +62,7 @@
         "ngx-logger": "^4.2.1",
         "ngx-perfect-scrollbar": "^9.0.0",
         "perfect-scrollbar": "^1.5.0",
+        "roboto-fontface": "^0.10.0",
         "rxjs": "~6.5.1",
         "tslib": "^1.9.0",
         "zone.js": "~0.9.1"

package/src/app/app.component.html

@@ -1,10 +1,19 @@
 <ion-app>
   <div>
-    <!-- (click)="hideAlert()" -->
+
     <app-image-viewer></app-image-viewer>
+
+    <div class="sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
+      <app-sidebar></app-sidebar>
+    </div>
+    
+    <div class="user-details-sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
+      <app-sidebar-user-details> </app-sidebar-user-details>
+    </div>
+ 
     <ion-split-pane when="md" contentId="main">
 
-      <ion-nav #sidebarNav [root]="sidebarPage"></ion-nav>
+      <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true,  'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></ion-nav>
       <!--  our side menu  -->
       <!-- <ion-router-outlet id="sidebar" name='sidebar' animated="false" #masterNav> -->
       <!-- <app-conversations-list></app-conversations-list> -->

package/src/app/app.component.scss

@@ -1,8 +1,20 @@
-.split-pane-md.split-pane-visible > .split-pane-side { 
+.split-pane-md.split-pane-visible > .split-pane-side {
     min-width: 312px;
     display: block; // Safari bug fix
 }
 
+.sidebar-visible {
+    margin-left: 60px;
+}
+
+.sidebar-hidden {
+    margin-left: 0px;
+}
+
+.hide-sidebar {
+    display: none;
+}
+
 // @media (min-width: 768px) {
 //     .split-pane-md.split-pane-visible > .split-pane-side {
 //         min-width: 312px;

package/src/app/app.component.ts

@@ -58,6 +58,7 @@ import * as PACKAGE from 'package.json';
 import { filter } from 'rxjs/operators'
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { Location } from '@angular/common'
+
 // import { filter } from 'rxjs/operators';
 
 @Component({
@@ -98,7 +99,9 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private version: string;
-
+  IS_ONLINE: boolean;
+  IS_ON_MOBILE_DEVICE: boolean;
+  SUPPORT_MODE: boolean;
   // private isOnline: boolean = false;
 
   wsService: WebSocketJs;
@@ -145,11 +148,20 @@ export class AppComponent implements OnInit {
 
     this.saveInStorageNumberOfOpenedChatTab();
     this.listenChatAlreadyOpenWithoutParamsInMobileMode()
-
+    this.isOnMobileDevice()
     // this.listenToUrlChanges();
     // this.getPageState();
   }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    console.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
+
 
 
   listenChatAlreadyOpenWithoutParamsInMobileMode() {
@@ -286,6 +298,13 @@ export class AppComponent implements OnInit {
    */
   ngOnInit() {
     const appconfig = this.appConfigProvider.getConfig();
+    console.log('[APP-COMP] appconfig', appconfig)
+    if (appconfig && appconfig.supportMode) {
+      this.SUPPORT_MODE = appconfig.supportMode
+      console.log('[APP-COMP] appconfig > SUPPORT_MODE', this.SUPPORT_MODE)
+    } else {
+      this.SUPPORT_MODE = false;
+    }
     this.persistence = appconfig.authPersistence;
     this.appStorageService.initialize(environment.storage_prefix, this.persistence, '')
     // this.logger.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
@@ -647,7 +666,7 @@ export class AppComponent implements OnInit {
       })
     } else {
       this.logger.warn('[APP-COMP] >>> I AM NOT LOGGED IN <<<')
-
+      this.IS_ONLINE = false;
       // clearTimeout(this.timeModalLogin);
       // this.timeModalLogin = setTimeout(() => {
       if (!this.hadBeenCalledOpenModal) {
@@ -830,10 +849,14 @@ export class AppComponent implements OnInit {
           // const user = this.tiledeskAuthService.getCurrentUser();
           // if (this.isOnline === false) {
           // if (AUTH_STATE_ONLINE) {
+          this.IS_ONLINE = true;
+          console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
           this.goOnLine();
           // }
         } else if (state === AUTH_STATE_OFFLINE) {
           // this.checkTokenAndGoOffline() //se c'è un tiledeskToken salvato, allora aspetta, altrimenti vai offline
+          this.IS_ONLINE = false;
+          console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
           this.goOffLine()
         }
       }, error => {

package/src/app/app.module.ts

@@ -96,7 +96,7 @@ import { Network } from '@ionic-native/network/ngx';
 import { ConnectionService } from 'ng-connection-service';
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { UnassignedConversationsPageModule } from './pages/unassigned-conversations/unassigned-conversations.module';
-
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -251,6 +251,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
     IonicModule.forRoot(),

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -118,7 +118,7 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived"
+    <ion-button *ngIf="!conversation.archived"  tooltip="{{ archive_btn_tooltip }}" [options]="tooltipOptions" placement="bottom"
       [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
@@ -142,7 +142,7 @@
       {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
-    <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
+    <!-- <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i> -->
   </div>
 
   <!-- && !conversation?.archived -->

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -35,7 +35,17 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public browserLang: string;
 
   public PROJECT_FOR_PANEL: any;
-
+  public archive_btn_tooltip: string;
+
+  tooltipOptions = {
+    'show-delay': 1500,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
   /**
    * 
    * @param iterableDiffers 
@@ -78,6 +88,19 @@ export class IonListConversationsComponent extends ListConversationsComponent im
 
     // console.log('[ION-LIST-CONVS-COMP] - DASHBOARD_BASE_URL ', DASHBOARD_BASE_URL)
     this.PROJECT_FOR_PANEL = this.sanitizer.bypassSecurityTrustResourceUrl(DASHBOARD_BASE_URL + '#/project-for-panel');
+    this.translateLbl();
+  }
+
+  translateLbl() {
+    this.translate.get('Resolve')
+      .subscribe((text: string) => {
+        // this.deleteContact_msg = text;
+        
+
+        this.archive_btn_tooltip = text;
+       console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', text)
+       
+      });
   }
 
   setMomentLocale() {

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -1,8 +1,7 @@
 
 <ion-header no-border class="ion-no-border">
-  <ion-toolbar>
-    
-    <ion-buttons slot="start">
+  <ion-toolbar style="height:60px">
+    <ion-buttons slot="start" style="height:60px">
       <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
       <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
       </ion-back-button> 

package/src/app/components/conversation-info/info-content/info-content.component.html

@@ -10,9 +10,9 @@
     [groupDetail]="groupDetail">
   </app-info-group>
 
-  <app-info-support-group *ngIf="panelType === 'support-group-panel'"
+  <!-- <app-info-support-group *ngIf="panelType === 'support-group-panel'"
     [urlConversationSupportGroup]="urlConversationSupportGroup">
-  </app-info-support-group>
+  </app-info-support-group> -->
 
 
 </ion-content>

package/src/app/components/ddp-header/ddp-header.component.html

@@ -1,24 +1,31 @@
+<ion-toolbar style="height:60px" [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
 
-<ion-toolbar>
-  
-  <ion-buttons slot="start">
+  <ion-buttons *ngIf="IS_ON_MOBILE_DEVICE === true || supportMode === false" slot="start" style="height:60px">
     <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">
       <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
     </ion-button>
   </ion-buttons>
 
   <ion-title>
-    <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo">
+    <!-- <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo"> -->
     <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
   </ion-title>
 
   <ion-buttons slot="end">
 
-    <ion-button *ngIf="supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
-      <ion-icon slot="icon-only" name="create-outline"></ion-icon>
+    <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()">
+      <ion-icon slot="icon-only" name="file-tray-full-outline"></ion-icon>
+      <!-- <ion-icon name="file-tray-stacked-outline"></ion-icon> -->
+      <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
     </ion-button>
 
-    <!-- <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
+    <ion-button *ngIf="teammates_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
+      <!-- <ion-icon slot="icon-only" name="create-outline"></ion-icon> -->
+      <ion-icon slot="icon-only" name="people-outline"></ion-icon>
+
+    </ion-button>
+
+    <!--   <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
       <span class="material-icons">history</span>
     </button>
 

package/src/app/components/ddp-header/ddp-header.component.scss

@@ -23,4 +23,8 @@ ion-title img {
 
 .header-logo {
     margin-top: 5px;
+}
+
+.bottom-border-on-mobile {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

package/src/app/components/ddp-header/ddp-header.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
+import { EventsService } from 'src/app/services/events-service';
 @Component({
   selector: 'app-ddp-header',
   templateUrl: './ddp-header.component.html',
@@ -8,11 +8,26 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 export class DdpHeaderComponent implements OnInit {
   @Input() numberOpenConv: number;
   @Input() supportMode: boolean;
+  @Input() archived_btn: boolean;
+  @Input() teammates_btn: boolean;
   @Output() openContactsDirectory = new EventEmitter();
   @Output() openProfileInfo = new EventEmitter();
+  IS_ON_MOBILE_DEVICE: boolean;
 
   constructor(
-  ) { }
+    public events: EventsService,
+  ) { 
+    this.isOnMobileDevice()
+  }
+
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    console.log('[DDP-HEADER] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
 
   ngOnInit() {
     // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
@@ -30,4 +45,8 @@ export class DdpHeaderComponent implements OnInit {
   }
   // END @Output() //
 
+  onClickArchivedConversation() {
+    this.events.publish('profileInfoButtonClick:changed', 'displayArchived');
+  }
+
 }

package/src/app/components/project-item/project-item.component.html

@@ -48,7 +48,7 @@
 
 
             <div class="flex-child-right">
-              <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName"
+              <div class="project-name-project-for-panel" [ngClass]="{'project-name-project-for-panel-on-desktop': IS_ON_MOBILE_DEVICE === false}" [tooltip]="conversationsInQueueOnProjectName"
                 [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
                 <div class="project---name"> {{ project?.id_project?.name }} </div>
               </div>
@@ -87,7 +87,9 @@
                   [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
                   {{translationMap?.get('Unavailable')}}
                 </span>
-                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true">
+
+                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="  {{translationMap?.get('Busy')}}"
+                [options]="tooltipOptions" placement="top" >
                   <!-- <span class="material-icons project-item--isBusy-icon">
                       access_time
                     </span> -->
@@ -102,14 +104,14 @@
                     </g>
                   </svg>
                 </div>
-                <span *ngIf="project?.ws_projct_user_isBusy === true"
+                <!-- <span *ngIf="project?.ws_projct_user_isBusy === true"
                   class="project-item--isBusy-busy-text text-pulse-animation">
                   {{translationMap?.get('Busy')}}
-                </span>
+                </span> -->
               </div>
             </div>
 
-            <div class="flex-child-view-all-convs">
+            <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
               <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
                 [options]="tooltipOptions" placement="top" content-type="template">
 
@@ -153,7 +155,6 @@
               </div>
               <ng-template #viewAllConvs>
                 <span>
-
                   {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
               </ng-template>
             </div>

package/src/app/components/project-item/project-item.component.scss

@@ -311,7 +311,7 @@
     color: #1e2129;
     font-weight: 400;
     margin-left: 10px;
-    width: 185px !important;
+    width: 185px ;
     // width: 220px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
@@ -323,6 +323,11 @@
     cursor: pointer;
 }
 
+
+.project-name-project-for-panel-on-desktop {
+    width: 217px
+}
+
 // .project-name-project-for-panel:hover span {
 //     color: rgba(0, 0, 0, 0.35);
 //     // display: none;

package/src/app/components/project-item/project-item.component.ts

@@ -17,6 +17,8 @@ import { AppConfigProvider } from 'src/app/services/app-config';
   styleUrls: ['./project-item.component.scss'],
 })
 export class ProjectItemComponent implements OnInit {
+  private logger: LoggerService = LoggerInstance.getInstance();
+
   @Output() projectIdEvent = new EventEmitter<string>()
   @Output() openUnsevedConvsEvent = new EventEmitter<any>()
 
@@ -29,7 +31,7 @@ export class ProjectItemComponent implements OnInit {
   ROLE_IS_AGENT: boolean;
   currentUserId: string;
   public translationMap: Map<string, string>;
-  private logger: LoggerService = LoggerInstance.getInstance();
+ 
   window_width_is_60: boolean;
   newInnerWidth: any;
   avaialble_status_for_tooltip: string;
@@ -42,7 +44,7 @@ export class ProjectItemComponent implements OnInit {
     'hideDelayAfterClick': 3000,
     'hide-delay': 200
   };
-
+  IS_ON_MOBILE_DEVICE: boolean;
   constructor(
     public wsService: WebsocketService,
     public appStorageService: AppStorageService,
@@ -59,9 +61,20 @@ export class ProjectItemComponent implements OnInit {
     this.translations();
     this.listenToPostMsgs();
     this.onInitWindowWidth();
+
+    this.isOnMobileDevice()
     // console.log('[PROJECT-ITEM] - on INIT')
   }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    console.log('[PROJECT-ITEM] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
+
   openUnservedConvs() {
     this.openUnsevedConvsEvent.emit('notificationsorprjctbtn')
   }