@chat21/chat21-ionic 3.0.58 → 3.0.59-rc15

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -40,6 +40,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TiledeskService } from '../../services/tiledesk/tiledesk.service';
 import { NetworkService } from '../../services/network-service/network.service';
+import { EventsService } from '../../services/events-service';
 
 @Component({
   selector: 'app-conversation-detail',
@@ -51,6 +52,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   @ViewChild('ionContentChatArea', { static: false }) ionContentChatArea: IonContent;
   @ViewChild('rowMessageTextArea', { static: false }) rowTextArea: ElementRef;
 
+
+
   // @ViewChild('info_content', { static: false }) info_content_child : InfoContentComponent;
 
   showButtonToBottom = false; // indica lo stato del pulsante per scrollare la chat (showed/hidden)
@@ -90,6 +93,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   public tagsCanned: any = [];
   public tagsCannedFilter: any = [];
+  public HIDE_CANNED_RESPONSES: boolean = false;
+
 
   public window: any = window;
   public styleMap: Map<string, string> = new Map();
@@ -164,7 +169,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     public presenceService: PresenceService,
     public toastController: ToastController,
     public tiledeskService: TiledeskService,
-    private networkService: NetworkService
+    private networkService: NetworkService,
+    private events: EventsService
   ) {
 
     // Change list on date change
@@ -533,23 +539,27 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     if (this.conversationWith && this.conversationsHandlerService && this.conv_type === 'active') {
       this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail CALLING')
       this.conversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
-        this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (active)', this.conversationWith, conv)
-        this.conversationAvatar = setConversationAvatar(
-          conv.conversation_with,
-          conv.conversation_with_fullname,
-          conv.channel_type
-        );
+        if (conv) {
+          this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (active)', this.conversationWith, conv)
+          this.conversationAvatar = setConversationAvatar(
+            conv.conversation_with,
+            conv.conversation_with_fullname,
+            conv.channel_type
+          );
+        }
         this.logger.log('[CONVS-DETAIL] - setHeaderContent > conversationAvatar: ', this.conversationAvatar);
       })
     }
     else { //get conversation from 'conversations' firebase node
       this.archivedConversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
-        this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (archived)', this.conversationWith, conv)
-        this.conversationAvatar = setConversationAvatar(
-          conv.conversation_with,
-          conv.conversation_with_fullname,
-          conv.channel_type
-        );
+        if (conv) {
+          this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (archived)', this.conversationWith, conv)
+          this.conversationAvatar = setConversationAvatar(
+            conv.conversation_with,
+            conv.conversation_with_fullname,
+            conv.channel_type
+          );
+        }
       })
     }
 
@@ -628,23 +638,23 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         msg = `[${metadata.name}](${metadata.src})`
       }
     }
-    
+
     // else if (type === 'image') {
     //   if (msg) {
     //     // msg = msg + '<br>' + 'File: ' + metadata.src;
     //     msg = metadata.name + '\n' + msg
 
     //   } else {
-  
+
     //     msg = metadata.name
     //   }
- 
+
     // }
- 
+
 
     (metadata) ? metadata = metadata : metadata = '';
     this.logger.log('[CONVS-DETAIL] - SEND MESSAGE msg: ', msg, ' - messages: ', this.messages, ' - loggedUser: ', this.loggedUser);
- 
+
     if (msg && msg.trim() !== '' || type !== TYPE_MSG_TEXT) {
       this.conversationHandlerService.sendMessage(
         msg,
@@ -835,12 +845,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   logScrolling(event: any) {
     // EVENTO IONIC-NATIVE: SCATTA SEMPRE, QUINDI DECIDO SE MOSTRARE O MENO IL BADGE 
-    this.logger.log('[CONVS-DETAIL] logScrolling: ', event);
+    // this.logger.log('[CONVS-DETAIL] logScrolling: ', event);
     this.detectBottom()
   }
 
   logScrollEnd(event: any) {
-    this.logger.log('[CONVS-DETAIL] logScrollEnd: ', event);
+    // this.logger.log('[CONVS-DETAIL] logScrollEnd: ', event);
   }
 
 
@@ -882,17 +892,83 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // ----------------------------------------------------------
       setTimeout(() => {
         if (this.conversationWith.startsWith("support-group")) {
-          var pos = message.lastIndexOf("/");
-          this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / ", pos);
-          this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - pos:: ", pos);
+
+          const pos = message.lastIndexOf("/");
+          // console.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ", pos);
+
+          // test
+          // var rest = message.substring(0, message.lastIndexOf("/") + 1);
+          // var last = message.substring(message.lastIndexOf("/") + 1, message.length);
+          // console.log('[CONVS-DETAIL] - returnChangeTextArea rest', rest);
+          // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last);
+          // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last.length);
+          // if (last.length === 1 && last.trim() === '') {
+          //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is a white space ');
+          // } else if (last.length === 1 && last.trim() !== '') {
+          //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is NOT space ');
+          // }
+
 
           if (pos >= 0) {
-            // if (pos === 0) {
-            // && that.tagsCanned.length > 0
             var strSearch = message.substr(pos + 1);
             this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses strSearch ", strSearch);
+
+            // --------------------------------------------
+            // Load canned responses
+            // --------------------------------------------
             this.loadTagsCanned(strSearch, this.conversationWith);
 
+            // ------------------------------------------------------------------------------------------------------------------------------------------
+            // Hide / display Canned when the SLASH has POSITION POS 0 and checking if there is a space after the SLASH (in this case it will be hidden)
+            // ------------------------------------------------------------------------------------------------------------------------------------------
+
+            var after_slash = message.substring(message.lastIndexOf("/") + 1, message.length);
+            if (pos === 0 && after_slash.length === 1 && after_slash.trim() === '') {
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is a white space after ');
+              this.HIDE_CANNED_RESPONSES = true
+              this.tagsCannedFilter = []
+            } else if (pos === 0 && after_slash.length === 0) {
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is NOT a white space after');
+              this.HIDE_CANNED_RESPONSES = false
+            }
+
+
+            if (pos > 0) {
+
+              // ------------------------------------------------------------------------------------------------------------------------------------------
+              // Hide / display Canned when the SLASH has POSITION POS > and checking if there is a space after the SLASH (in this case they it be hidden)
+              // and if there is not a space before the SLASH (in this it will be hidden)
+              // ------------------------------------------------------------------------------------------------------------------------------------------
+
+              let beforeSlash = message.substr(pos - 1)
+              let afterSlash = message.substr(pos + 1)
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea * POS ', pos);
+
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash', beforeSlash);
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash', afterSlash);
+              var afterSlashParts = afterSlash.split("/")
+              var beforeSlashParts = beforeSlash.split("/")
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash parts', afterSlashParts);
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash parts', beforeSlashParts);
+
+              if (beforeSlashParts.length === 2) {
+                if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === '') {
+                  this.HIDE_CANNED_RESPONSES = false
+                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash there is a white space After Not');
+                  // if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0].indexOf(' ') >= 0)
+                } else if (beforeSlashParts[0].indexOf(' ') < 0 && afterSlashParts[0] === '') {
+                  this.HIDE_CANNED_RESPONSES = true;
+                  this.tagsCannedFilter = []
+                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After Not');
+                } else if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === ' ') {
+                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After YES');
+                  this.HIDE_CANNED_RESPONSES = true;
+                  this.tagsCannedFilter = []
+                }
+              }
+            }
+
+
           } else {
             this.tagsCannedFilter = [];
           }
@@ -974,7 +1050,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.log('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses RES', res);
 
       this.tagsCanned = res
-      this.showTagsCanned(strSearch);
+
+      if (this.HIDE_CANNED_RESPONSES === false) {
+        this.showTagsCanned(strSearch);
+      }
 
     }, (error) => {
       this.logger.error('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses - ERROR  ', error);
@@ -1030,12 +1109,20 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     return str;
   }
 
-  replaceTagInMessage(canned) {
+  replaceTagInMessage(canned, event) {
+    this.logger.log("[CONVS-DETAIL] replaceTagInMessage  event ", event);
     const elTextArea = this.rowTextArea['el'];
     const textArea = elTextArea.getElementsByTagName('ion-textarea')[0];
+
     this.logger.log("[CONVS-DETAIL] replaceTagInMessage  textArea ", textArea);
     this.logger.log("[CONVS-DETAIL] replaceTagInMessage  textArea value", textArea.value)
 
+    // var lastChar =  textArea.value.substr(-1); // Selects the last character
+    // if (lastChar === '/') {         
+    //   textArea.value = textArea.value.substring(0, textArea.value.length() - 1);
+    // }
+    // this.insertAtCursor(this.textArea, textArea.value)
+
 
     this.arrowkeyLocation = -1
     this.tagsCannedFilter = [];
@@ -1051,12 +1138,14 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
     var strTEMP = textArea.value.replace(strSearch, canned.text);
     strTEMP = this.replacePlaceholderInCanned(strTEMP);
+    this.logger.log("[CONVS-DETAIL] replaceTagInMessage strSearch ", strTEMP);
     // strTEMP = this.replacePlaceholderInCanned(strTEMP);
     // textArea.value = '';
     // that.messageString = strTEMP;
     textArea.value = strTEMP;
     setTimeout(() => {
-      textArea.focus();
+      // textArea.focus();
+      textArea.setFocus();
       this.resizeTextArea();
     }, 200);
   }
@@ -1088,9 +1177,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
       if (event.key === 'Enter') {
         const canned_selected = this.tagsCannedFilter[this.arrowkeyLocation]
-
+        this.logger.log('[CONVS-DETAIL] replaceTagInMessage  canned_selected ', canned_selected)
         if (canned_selected) {
-          this.replaceTagInMessage(canned_selected)
+
+          this.replaceTagInMessage(canned_selected, 'enter')
+          // event.preventDefault();
+          // return false;
         }
       }
     }

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -1,10 +1,6 @@
-
 <ion-header no-border class="ion-no-border">
-  <app-ddp-header *ngIf="conversationType ==='active'" 
-    [numberOpenConv]="numberOpenConv" 
-    [supportMode]="supportMode"
-    (openContactsDirectory)=openContactsDirectory($event) 
-    (openProfileInfo)=openProfileInfo($event)>
+  <app-ddp-header *ngIf="conversationType ==='active'" [numberOpenConv]="numberOpenConv" [supportMode]="supportMode"
+    (openContactsDirectory)=openContactsDirectory($event) (openProfileInfo)=openProfileInfo($event)>
   </app-ddp-header>
 
   <app-option-header *ngIf="conversationType !=='active'" [headerTitle]=headerTitle
@@ -17,35 +13,60 @@
   <div id="scrollbar2">
     <ion-list>
 
+                   <!-- -------------------------------------------------------------------------- -->
+        <!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
+        <!-- -------------------------------------------------------------------------- -->
+        <ion-item *ngIf="isOnline === false" style="padding-left:0px!important ;padding-right:0px!important" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+          <div tabindex="0"></div>
+          <ion-avatar item-start>
+            <div class="sk-fading-circle">
+              <div class="sk-circle1 sk-circle"></div>
+              <div class="sk-circle2 sk-circle"></div>
+              <div class="sk-circle3 sk-circle"></div>
+              <div class="sk-circle4 sk-circle"></div>
+              <div class="sk-circle5 sk-circle"></div>
+              <div class="sk-circle6 sk-circle"></div>
+              <div class="sk-circle7 sk-circle"></div>
+              <div class="sk-circle8 sk-circle"></div>
+              <div class="sk-circle9 sk-circle"></div>
+              <div class="sk-circle10 sk-circle"></div>
+              <div class="sk-circle11 sk-circle"></div>
+              <div class="sk-circle12 sk-circle"></div>
+            </div>
+          </ion-avatar>
+          <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
+        </ion-item>
+
+        <ion-item  *ngIf="supportMode && displayNewConvsItem" class="ion-no-padding open-iframe-item"
+        button="true"
+          (click)="openUnsevedConversationIframe()">
+          <div tabindex="0"></div>
+          <app-project-item (projectIdEvent)="getLastProjectId($event)"></app-project-item>
+        </ion-item>
+
       <span
         *ngIf="(conversations.length > 0 && conversationType ==='active') || (archivedConversations.length > 0  && conversationType ==='archived');then contentConversations else contentMessageWelcome">
         here is ignored
       </span>
 
+ 
+
       <ng-template #contentConversations>
         <!-- ---------------------------------- -->
         <!-- ACTIVE CONVERSATION LIST -->
         <!-- ---------------------------------- -->
-        <ion-list-conversations *ngIf="conversationType ==='active'" 
-          [uidConvSelected]="uidConvSelected"
-          [listConversations]="conversations" 
-          [stylesMap]="stylesMap" 
-          [translationMap]="translationMapConversation"
-          (onConversationSelected)=onConversationSelected($event) 
-          (onImageLoaded)="onImageLoaded($event)"
-          (onConversationLoaded)="onConversationLoaded($event)" 
-          (onCloseConversation)="onCloseConversation($event)">
+        <ion-list-conversations *ngIf="conversationType ==='active'" [uidConvSelected]="uidConvSelected"
+          [listConversations]="conversations" [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
+          (onConversationLoaded)="onConversationLoaded($event)" (onCloseConversation)="onCloseConversation($event)">
         </ion-list-conversations>
 
         <!-- ---------------------------------- -->
         <!-- ARCHIVED CONVERSATION LIST -->
         <!-- ---------------------------------- -->
-        <ion-list-conversations *ngIf="conversationType ==='archived'" 
-          [listConversations]="archivedConversations"
-          [stylesMap]="stylesMap" 
-          [translationMap]="translationMapConversation"
-          (onConversationSelected)=onConversationSelected($event) 
-          (onImageLoaded)="onImageLoaded($event)"
+        <ion-list-conversations *ngIf="conversationType ==='archived'" [listConversations]="archivedConversations"
+          [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
           (onConversationLoaded)="onConversationLoaded($event)">
         </ion-list-conversations>
       </ng-template>
@@ -84,8 +105,8 @@
             </ion-label>
           </ion-item>
         </div>
-        
+
       </ng-template>
     </ion-list>
   </div>
-</ion-content>
+</ion-content>