@chat21/chat21-ionic 3.0.61-rc2 → 3.0.61-rc5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # chat21-ionic ver 3.0
 
+### 3.0.61-rc5
+- Fixes the bug: on mobile devices the chat content is shifted to the right
+- Adds the ability to open and close the "user detail sidebar" by clicking on the avatar of the logged teammate present on the sidebar
+- Fixes the bug: canned responses remain visible even if, after making a filter, the backslash is deleted
+- Prevents the "open canned responses" button from inserting a backslash if another one exists before
+- Hides the badge that displays the number of unassigned conversations if there are none
+- Improves custom scrollbar displayed in the sidebar and in user detail sidebar 
+- Adds custom scrollbars to the conversation list and to the conversation detail
+
+### 3.0.61-rc4
+- Hides the item showing unassigned conversations in the list of archived conversations
+- Adds in the list of conversations to the "archive" button the tooltip "Resolve" if the conversation is of type "support" and the tooltip "Archive" if the conversation is of type "direct" or "group"
+- Changes all occurrences of the "teammatesButton" environment variable to "writeToButton"
+- Fixes the bug: if the sidebar is visible and the window width is less than 768px, the content of the conversation detail is not completely visible
+- Moves for conversations of type "support" the "Resolve conversation" button from the dropdown menu to the header of the conversation detail
+
+### 3.0.61-rc3
+- Replaces console.log with custom loggers 
+- Fixes the bug: the info support sidebar is no more displayed
+
 ### 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

package/env.sample

@@ -11,7 +11,7 @@ FILE_UPLOAD_ACCEPT=*/*
 TENANT=tilechat
 LOG_LEVEL=INFO
 SUPPORT_MODE=false
-TEAMMATES_BUTTON=false,
+WRITE_TO_BUTTON=false,
 ARCHIVED_BUTTON=false,
 
 # For MQTT Chat Engine

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.61-rc2",
+    "version": "3.0.61-rc5",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {

package/src/app/app.component.html

@@ -20,7 +20,8 @@
       <!-- <app-details></app-details> -->
       <!-- </ion-router-outlet> -->
       <!-- the main content -->
-      <ion-router-outlet id="main" #detailNav animated="false">
+      <!--  -->
+      <ion-router-outlet id="main" #detailNav animated="false" [ngClass]="{'router-outlet-margin-left': platformIs === 'mobile' &&  SUPPORT_MODE === true && IS_ON_MOBILE_DEVICE === false}">
       </ion-router-outlet>
     </ion-split-pane>
   </div>

package/src/app/app.component.scss

@@ -15,6 +15,10 @@
     display: none;
 }
 
+.router-outlet-margin-left {
+    left: 60px
+}
+
 // @media (min-width: 768px) {
 //     .split-pane-md.split-pane-visible > .split-pane-side {
 //         min-width: 312px;

package/src/app/app.component.ts

@@ -78,7 +78,7 @@ export class AppComponent implements OnInit {
   public sidebarPage: any;
   public notificationsEnabled: boolean;
   public zone: NgZone;
-  private platformIs: string;
+  public platformIs: string;
   private doitResize: any;
   private timeModalLogin: any;
   public tenant: string;
@@ -158,7 +158,7 @@ export class AppComponent implements OnInit {
     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)
+    this.logger.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
     return this.IS_ON_MOBILE_DEVICE;
   }
 
@@ -298,10 +298,10 @@ export class AppComponent implements OnInit {
    */
   ngOnInit() {
     const appconfig = this.appConfigProvider.getConfig();
-    console.log('[APP-COMP] appconfig', appconfig)
+    // 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)
+      // console.log('[APP-COMP] appconfig > SUPPORT_MODE', this.SUPPORT_MODE)
     } else {
       this.SUPPORT_MODE = false;
     }
@@ -850,13 +850,13 @@ export class AppComponent implements OnInit {
           // if (this.isOnline === false) {
           // if (AUTH_STATE_ONLINE) {
           this.IS_ONLINE = true;
-          console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
+          // 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)
+          // console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
           this.goOffLine()
         }
       }, error => {

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

@@ -118,12 +118,17 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived"  tooltip="{{ archive_btn_tooltip }}" [options]="tooltipOptions" placement="bottom"
+    <ion-button *ngIf="!conversation.archived" [tooltip]="archiveTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"
       [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>
       <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}"
         color="close-conversation" name="archive-outline" item-end></ion-icon>
+
+        <ng-template #archiveTooltip>
+          <span *ngIf="conversation?.recipient.startsWith('support-group')"> {{ resolve_btn_tooltip}} </span>
+          <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ archive_btn_tooltip }} </span>
+        </ng-template>
     </ion-button>
     <!-- <ion-button *ngIf="conversation.archived" class="close-conversation-button" ion-button clear item-end disabled padding>
       <!- - <ion-icon  style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" color="close-conversation" name="archive-outline" item-end></ion-icon> - ->

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

@@ -9,12 +9,11 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { TranslateService } from '@ngx-translate/core';
 
 import * as moment from 'moment';
-// import { EventsService } from 'src/app/services/events-service';
-// import { TiledeskService } from '../../../services/tiledesk/tiledesk.service';
 import { NetworkService } from '../../../services/network-service/network.service';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { DomSanitizer } from '@angular/platform-browser'
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -36,15 +35,16 @@ export class IonListConversationsComponent extends ListConversationsComponent im
 
   public PROJECT_FOR_PANEL: any;
   public archive_btn_tooltip: string;
+  public resolve_btn_tooltip: string;
 
-  tooltipOptions = {
-    'show-delay': 1500,
+  tooltip_options = {
+    'show-delay': 0,
     'tooltip-class': 'chat-tooltip',
     'theme': 'light',
     'shadow': false,
     'hide-delay-mobile': 0,
     'hideDelayAfterClick': 3000,
-    'hide-delay': 200
+    'hide-delay': 100
   };
   /**
    * 
@@ -57,12 +57,11 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     public kvDiffers: KeyValueDiffers,
     public platform: Platform,
     private translate: TranslateService,
-    // private events: EventsService,
-    // private tiledeskService: TiledeskService,
     private networkService: NetworkService,
     private appConfigProvider: AppConfigProvider,
     private sanitizer: DomSanitizer,
-    public tiledeskAuthService: TiledeskAuthService
+    public tiledeskAuthService: TiledeskAuthService,
+  
   ) {
     super(iterableDiffers, kvDiffers)
     this.setMomentLocale();
@@ -88,18 +87,24 @@ 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();
+    this.translateLbls();
+    
   }
 
-  translateLbl() {
+
+  translateLbls() {
     this.translate.get('Resolve')
       .subscribe((text: string) => {
         // this.deleteContact_msg = text;
-        
+        this.resolve_btn_tooltip = text;
+        //  console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', text)
 
+      });
+      this.translate.get('Archive')
+      .subscribe((text: string) => {
+        // this.deleteContact_msg = text;
         this.archive_btn_tooltip = text;
-       console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', text)
-       
+        //  console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', text)
       });
   }
 

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

@@ -1,49 +1,39 @@
-
 <ion-header no-border class="ion-no-border">
   <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> 
+      </ion-back-button>
     </ion-buttons>
 
     <ion-title [class.info-open]="openInfoConversation || openInfoMessage">
 
       <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr">
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div *ngIf="conversationAvatar" class="avatar-container" [ngClass] = "{ 'avatar-container-ios': platformName === 'ios' }">
-          <app-avatar-profile
-            [itemAvatar] = conversationAvatar
-          ></app-avatar-profile>
+        <div *ngIf="conversationAvatar" class="avatar-container"
+          [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
+          <app-avatar-profile [itemAvatar]=conversationAvatar></app-avatar-profile>
         </div>
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
-        <div *ngIf="isDirect" class="user-presence" [ngClass] = "{ 'user-presence-ios': platformName === 'ios' }">
-          <app-user-presence 
-            [idUser] = conversationAvatar.conversation_with
-            [translationMap] = translationMap
-            [borderColor] = borderColor
-            [fontColor] = fontColor>
+        <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
+          <app-user-presence [idUser]=conversationAvatar.conversation_with [translationMap]=translationMap
+            [borderColor]=borderColor [fontColor]=fontColor>
           </app-user-presence>
         </div>
 
         <div *ngIf="conversationAvatar" class="user-typing">
-          <app-user-typing 
-            [idConversation] = conversationAvatar.uid
-            [idCurrentUser] = idLoggedUser
-            [isDirect] = isDirect
-            [translationMap] = translationMap
-            [color] = fontColor
-            [membersConversation] = membersConversation
-          ></app-user-typing>
+          <app-user-typing [idConversation]=conversationAvatar.uid [idCurrentUser]=idLoggedUser [isDirect]=isDirect
+            [translationMap]=translationMap [color]=fontColor [membersConversation]=membersConversation>
+          </app-user-typing>
         </div>
 
       </div>
       <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
-      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()" 
-      [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' }">        
+      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()"
+        [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
         <!-- <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span> -->
         <span class="tile-username">{{ conversation_with_fullname }} </span>
-        
+
       </div>
 
       <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
@@ -54,15 +44,22 @@
     <!-- openInfoConversation  {{openInfoConversation}} -->
     <ion-buttons slot="end">
 
-          <ion-button  *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
-            <ion-icon slot="icon-only"  name="information-circle-outline"></ion-icon>
-            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
-          
-          </ion-button>
-          <ion-button  *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-            <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
-          </ion-button>
+      <ion-button *ngIf="idConv.startsWith('support-group')" ion-button fill="clear" color="primary" size="small" (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" style="">
+        <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+        <ion-icon name="archive-outline"></ion-icon>
+        <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+        <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
+      </ion-button>
+
+      <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+        <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+        <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+        <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+
+      </ion-button>
+      <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+        <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+      </ion-button>
 
     </ion-buttons>
 

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

@@ -158,4 +158,8 @@ ion-header {
 
 .avatar-container-ios {
     left: 55px;
+}
+
+.resolve-conv-margin-right {
+    margin-right: 52px;
 }

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

@@ -7,6 +7,10 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { setConversationAvatar, setChannelType } from 'src/chat21-core/utils/utils';
 import { Platform } from '@ionic/angular';
+// import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+// import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+import { EventsService } from 'src/app/services/events-service';
+
 @Component({
   selector: 'app-header-conversation-detail',
   templateUrl: './header-conversation-detail.component.html',
@@ -44,7 +48,10 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
     public platform: Platform,
-    private router: Router
+    private router: Router,
+    // public tiledeskAuthService: TiledeskAuthService,
+    // public tiledeskService: TiledeskService,
+    public events: EventsService,
   ) {
     this.route.paramMap.subscribe(params => {
 
@@ -58,6 +65,10 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     });
   }
 
+ 
+
+
+
   // ----------------------------------------------------
   // @ Lifehooks
   // ----------------------------------------------------
@@ -113,7 +124,10 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
       this.platformName = 'android'
       this.logger.log('getPlatformName platformName', this.platformName) 
     }
+  }
 
+  closeConversation() {
+    this.events.publish('hasclosedconversation', this.idConv);
   }
 
   onOpenCloseInfoConversation() {

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

@@ -19,9 +19,9 @@
       <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
     </ion-button>
 
-    <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 *ngIf="writeto_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>
 

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

@@ -9,7 +9,7 @@ export class DdpHeaderComponent implements OnInit {
   @Input() numberOpenConv: number;
   @Input() supportMode: boolean;
   @Input() archived_btn: boolean;
-  @Input() teammates_btn: boolean;
+  @Input() writeto_btn: boolean;
   @Output() openContactsDirectory = new EventEmitter();
   @Output() openProfileInfo = new EventEmitter();
   IS_ON_MOBILE_DEVICE: boolean;
@@ -25,7 +25,7 @@ export class DdpHeaderComponent implements OnInit {
     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)
+    // console.log('[DDP-HEADER] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
     return this.IS_ON_MOBILE_DEVICE;
   }
 

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

@@ -23,7 +23,7 @@
                   </g>
                 </svg>
               </div>
-              <div class="unassigned-notifications-badge">
+              <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
                 <!-- || currentUserRequestCount > 0  -->
                 <!-- <span *ngIf="unservedRequestCount > 0 "> -->
                 <!-- + currentUserRequestCount -->

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

@@ -71,7 +71,7 @@ export class ProjectItemComponent implements OnInit {
     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)
+    // console.log('[PROJECT-ITEM] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
     return this.IS_ON_MOBILE_DEVICE;
   }
 

package/src/app/components/sidebar/sidebar.component.scss

@@ -8,4 +8,15 @@
   color: #feb92c;
   background-color: #2d323e;
   border-radius: 50%;
-}
+}
+
+// #sidebar_wrapper::-webkit-scrollbar {
+//   width: 6px;
+// }
+// #sidebar_wrapper::-webkit-scrollbar-track {
+//   background-color: #1c2b45;
+// }
+// #sidebar_wrapper::-webkit-scrollbar-thumb {
+//   background-color: #3c485b;
+//   border-radius: 3px;
+// }