@chat21/chat21-ionic 3.0.61-rc8 → 3.0.62

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.scss

@@ -44,8 +44,12 @@
         position: relative;
         // margin: 0 35px;
         // width: calc(100% - 70px);
-        margin: 0 70px;
-        width: calc(100% - 100px);
+        // ----- new after adding canned open /close canned responses
+        // margin: 0 70px;
+        // width: calc(100% - 100px);
+        // ----- new after adding emoji picker
+        margin: 0 108px;
+        width: calc(100% - 140px);
         ion-textarea {
             // border-radius: 4px;
             border-radius: 20px; // NK edited
@@ -68,8 +72,8 @@
         }
     }
     .text-message-no-cr {
-         margin: 0 35px !important;
-        width: calc(100% - 70px) !important;
+        margin: 0 72px !important;
+        width: calc(100% - 101px) !important;
     }
 }
 
@@ -106,7 +110,6 @@
     height: 33px !important;
 }
 
-
 .canned-responses-btn {
     --padding-bottom: 0px;
     --padding-top: 0px;
@@ -115,7 +118,17 @@
     --padding-start: 2px;
     height: 33px !important;
     width: 33px;
-} 
+}
+
+.emoji-picker-btn {
+    --padding-bottom: 0px;
+    --padding-top: 0px;
+    --border-radius: 50%;
+    --padding-end: 2px;
+    --padding-start: 2px;
+    height: 33px !important;
+    width: 33px;
+}
 
 .no-canned-responses-btn-badge {
     position: absolute;
@@ -129,7 +142,7 @@
     cursor: pointer;
 }
 .no-canned-responses-btn-badge:hover {
-    background-color: rgba(0, 0, 0, 0.05);;
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
 .canned-responses-btn-badge {
@@ -145,10 +158,9 @@
 }
 
 .canned-responses-btn-badge:hover {
-    background-color: rgba(0, 0, 0, 0.05);;
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
-
 .upload-image-btn .button-native {
     border-radius: 50%;
 }
@@ -163,6 +175,17 @@
     pointer-events: none;
 }
 
+.emoji-mart-desktop {
+    position: absolute;
+    bottom: 53px;
+    right: -246px;
+}
+.emoji-mart-mobile {
+    position: absolute;
+    bottom: 50px;
+    right: -123px;
+    width: 230px;
+}
 //   input[placeholder] { text-overflow: ellipsis; }
 // ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
 // input:-moz-placeholder { text-overflow: ellipsis; }

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -18,6 +18,7 @@ import { checkPlatformIsMobile } from 'src/chat21-core/utils/utils';
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { EventsService } from 'src/app/services/events-service';
 
 
 @Component({
@@ -45,6 +46,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() tagsCannedFilter: any = [];
   @Input() tagsCannedCount: number;
   @Input() areVisibleCAR: boolean;
+  @Input() support_mode: boolean;
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
@@ -68,9 +70,9 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   private logger: LoggerService = LoggerInstance.getInstance();
   public countClicks: number = 0;
   public IS_SUPPORT_GROUP_CONVERSATION: boolean;
-
+  public IS_ON_MOBILE_DEVICE: boolean;
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
-  msg : string
+  msg: string
 
   tooltipOptions = {
     'show-delay': 500,
@@ -82,7 +84,9 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     'hide-delay': 200
   };
 
-
+  showEmojiPicker: boolean = false; //To show/hide emoji picker
+  addWhiteSpaceBefore: boolean;
+  emojiPerLine: number = 9
   /**
    * Constructor
    * @param chooser 
@@ -96,6 +100,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     public uploadService: UploadService,
     public toastController: ToastController,
     private renderer: Renderer2,
+    public eventsService: EventsService
   ) { }
 
   // ---------------------------------------------------------
@@ -104,7 +109,12 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   ngOnInit() {
     // this.setSubscriptions();
+
     this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] HELLO !!!!! ");
+    this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] areVisibleCAR ", this.areVisibleCAR);
+    if (this.areVisibleCAR === false) {
+      this.emojiPerLine = 7
+    }
     // this.events.subscribe((cannedmessage) => {
     //   this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] events.subscribe cannedmessage ", cannedmessage);
     // })
@@ -112,12 +122,24 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] LONG_TEXAREA_PLACEHOLDER ", this.LONG_TEXAREA_PLACEHOLDER);
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORT_TEXAREA_PLACEHOLDER ", this.SHORT_TEXAREA_PLACEHOLDER);
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORTER_TEXAREA_PLACEHOLDER ", this.SHORTER_TEXAREA_PLACEHOLDER);
-
+    this.listenToNewCannedResponseCreated()
     this.getWindowWidth();
+    this.isOnMobileDevice()
+  }
+
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+      this.emojiPerLine = 7
+    }
+    // this.logger.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
   }
 
 
 
+
   ngOnChanges() {
     if (this.translationMap) {
       // this.LONG_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG')
@@ -125,7 +147,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       // this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
 
       this.TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
-   
+
     }
 
     if (this.conversationWith.startsWith("support-group")) {
@@ -133,11 +155,12 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } else {
       this.IS_SUPPORT_GROUP_CONVERSATION = false
     }
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges support_mode ', this.support_mode)
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges areVisibleCAR; ", this.areVisibleCAR);
-    
+
 
     this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length)
 
@@ -218,8 +241,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     // this.getIfTexareaIsEmpty('onResize')
-    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA]  event.target.innerWidth; ", event.target.innerWidth);
-    
+    //  console.log("[CONVS-DETAIL][MSG-TEXT-AREA]  event.target.innerWidth; ", event.target.innerWidth);
+
 
 
     // if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
@@ -349,7 +372,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
     // this.logger.log('presentModal e.target.files.length', e.target.files.length);
 
-    const attributes = { files: dataFiles, enableBackdropDismiss: false , msg: this.msg};
+    const attributes = { files: dataFiles, enableBackdropDismiss: false, msg: this.msg };
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] attributes', attributes);
     const modal: HTMLIonModalElement =
       await this.modalController.create({
@@ -546,28 +569,21 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       }
     }
   }
-  openCannedResponses() {
-    // console.log('[MSG-TEXT-AREA] has clicked OPEN-CANNED-RESPONSES messageString ', this.messageString)
-    // if (this.messageString) {
-    //   console.log('[MSG-TEXT-AREA] has clicked OPEN-CANNED-RESPONSES messageString.trim ', this.messageString.trim)
-    // }  
-    // if (this.messageString === undefined) {
-    //   this.messageString = '/'
-    // } else {
-
-    // }
 
-    // const elTextArea = this.message_text_area['el'];
-    // console.log('[MSG-TEXT-AREA]   textArea elTextArea ', elTextArea)
-    // const textArea = elTextArea.getElementsByTagName('ion-textarea')[0];
-    // console.log("[MSG-TEXT-AREA]   textArea textArea ", textArea);
-    // this.logger.log("[MSG-TEXT-AREA]   textArea value", textArea.value)
+  listenToNewCannedResponseCreated() {
+    this.eventsService.subscribe('newcannedresponse:created', (openCannedResponses) => {
+      this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - listenToNewCannedResponseCreated - openUserDetailsSidebar', openCannedResponses);
+      this.openCannedResponses()
+    });
+  }
 
+  openCannedResponses() {
     this.hasClickedOpenCannedResponses.emit(true);
   }
 
 
   sendMessage(text: string) {
+    this.showEmojiPicker = false;
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] sendMessage text', text);
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] sendMessage conve width', this.conversationWith);
     // text.replace(/\s/g, "")
@@ -578,6 +594,64 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
   }
 
+  addEmoji($event) {
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI $event', $event)
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI $event > emoji', $event.emoji)
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI $event > emoji  > native', $event.emoji.native)
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI messageString', this.messageString)
+    if (this.messageString === undefined) {
+      this.addWhiteSpaceBefore = false;
+      // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI addWhiteSpaceBefore ',  this.addWhiteSpaceBefore)
+    } else {
+      this.addWhiteSpaceBefore = true
+      // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI addWhiteSpaceBefore ',  this.addWhiteSpaceBefore)
+    }
+    const elTextArea = this.message_text_area['el'];
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI elTextArea ',  elTextArea)
+    this.insertAtCursor(elTextArea, $event.emoji.native)
+  }
+
+  insertAtCursor(myField, myValue) {
+    this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - myValue ', myValue);
+
+    if (this.addWhiteSpaceBefore === true) {
+      myValue = ' ' + myValue;
+      this.logger.log('[CANNED-RES-EDIT-CREATE] - GET TEXT AREA - QUI ENTRO myValue ', myValue);
+    }
+
+    //IE support
+    if (myField.selection) {
+      myField.focus();
+      let sel = myField.selection.createRange();
+      sel.text = myValue;
+      // this.cannedResponseMessage = sel.text;
+    }
+    //MOZILLA and others
+    else if (myField.selectionStart || myField.selectionStart == '0') {
+      var startPos = myField.selectionStart;
+      this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - startPos ', startPos);
+
+      var endPos = myField.selectionEnd;
+      this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - endPos ', endPos);
+
+      myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
+
+      // place cursor at end of text in text input element
+      myField.focus();
+      var val = myField.value; //store the value of the element
+      myField.value = ''; //clear the value of the element
+      myField.value = val + ' '; //set that value back. 
+
+
+      // myField.select();
+    } else {
+      myField.value += myValue;
+
+    }
+  }
+
+
+
   // --------------------------------
   // on mobile !
   // --------------------------------

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

@@ -13,13 +13,20 @@
 
   <ion-buttons slot="end">
 
-    <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()">
+    <ion-button ion-button fill="clear" (click)="presentCreateTicketModal()"
+      tooltip="{{translationMap?.get('CreateTicket')}}" [options]="tooltipOptions" placement="bottom">
+      <ion-icon slot="icon-only" name="ticket-outline"></ion-icon>
+    </ion-button>
+
+    <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()" 
+      tooltip="{{translationMap?.get('ViewArchivedConversations')}}" [options]="tooltipOptions" placement="bottom">
       <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>
 
-    <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
+    <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
+    tooltip="{{translationMap?.get('ViewContactsList')}}" [options]="tooltipOptions" placement="bottom">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
       <!-- <ion-icon slot="icon-only" name="people-outline"></ion-icon> -->
 

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

@@ -1,32 +1,76 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { EventsService } from 'src/app/services/events-service';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+import { EventsService } from 'src/app/services/events-service'
+import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service'
 @Component({
   selector: 'app-ddp-header',
   templateUrl: './ddp-header.component.html',
   styleUrls: ['./ddp-header.component.scss'],
 })
 export class DdpHeaderComponent implements OnInit {
-  @Input() numberOpenConv: number;
-  @Input() supportMode: boolean;
-  @Input() archived_btn: boolean;
-  @Input() writeto_btn: boolean;
-  @Output() openContactsDirectory = new EventEmitter();
-  @Output() openProfileInfo = new EventEmitter();
-  IS_ON_MOBILE_DEVICE: boolean;
-
+  @Input() numberOpenConv: number
+  @Input() supportMode: boolean
+  @Input() archived_btn: boolean
+  @Input() writeto_btn: boolean
+  @Output() openContactsDirectory = new EventEmitter()
+  @Output() openProfileInfo = new EventEmitter()
+  IS_ON_MOBILE_DEVICE: boolean
+  createTicketModal = null
+  public translationMap: Map<string, string>;
+  tooltipOptions = {
+    'show-delay': 0,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 0
+  };
   constructor(
     public events: EventsService,
-  ) { 
-    this.isOnMobileDevice()
+    public modalController: ModalController,
+    private translateService: CustomTranslateService,
+  ) {
+    this.isOnMobileDevice();
+    this.translations();
+    // this.listenToCloseCreateTicketModal() // published from create ticket page
+  }
+
+  public translations() {
+    const keys = [
+      'CreateTicket',
+      'ViewArchivedConversations',
+      'ViewContactsList'
+    ];
+    this.translationMap = this.translateService.translateLanguage(keys);
   }
 
+  // listenToCloseCreateTicketModal() {
+  //   this.events.subscribe('closeModalCreateTicket', (bool) => {
+  //     console.log('[HEADER-CONV] closeModalCreateTicket ', bool)
+  //     if (bool === true) {
+  //       this.closeCreateTicketModal()
+
+  //     }
+  //   })
+  // }
+
+  // closeCreateTicketModal() {
+  //   if (this.createTicketModal) {
+  //     this.createTicketModal.dismiss().then(() => {
+  //       this.createTicketModal = null;
+  //     });
+  //   }
+  // }
+
   isOnMobileDevice() {
-    this.IS_ON_MOBILE_DEVICE = false;
+    this.IS_ON_MOBILE_DEVICE = false
     if (/Android|iPhone/i.test(window.navigator.userAgent)) {
-      this.IS_ON_MOBILE_DEVICE = true;
+      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;
+    return this.IS_ON_MOBILE_DEVICE
   }
 
   ngOnInit() {
@@ -36,17 +80,48 @@ export class DdpHeaderComponent implements OnInit {
   // START @Output() //
   /** */
   onOpenProfileInfo(e: any) {
-    this.openProfileInfo.emit(e);
+    this.openProfileInfo.emit(e)
   }
 
   /** */
   onOpenContactsDirectory(e: any) {
-    this.openContactsDirectory.emit(e);
+    this.openContactsDirectory.emit(e)
   }
   // END @Output() //
 
   onClickArchivedConversation() {
-    this.events.publish('profileInfoButtonClick:changed', 'displayArchived');
+    this.events.publish('profileInfoButtonClick:changed', 'displayArchived')
   }
 
+  // PRESENT MODAL CREATE TICKET
+  // async presentCreateTicketModal(): Promise<any>{
+
+  //   // const attributes = {  enableBackdropDismiss: false };
+  //   const modal: HTMLIonModalElement =
+  //     await this.modalController.create({
+  //       component: CreateTicketPage,
+  //       // componentProps: attributes,
+  //       swipeToClose: false,
+  //       backdropDismiss: false
+  //     });
+  //   modal.onDidDismiss().then((detail: any) => {
+  //     console.log('[DDP-HEADER] ', detail.data);
+  //   });
+  //   return await modal.present();
+  // }
+
+  async presentCreateTicketModal() {
+    // const attributes = {  enableBackdropDismiss: false };
+    const modal = await this.modalController.create({
+      component: CreateTicketPage,
+      // componentProps: attributes,
+      swipeToClose: false,
+      backdropDismiss: false,
+    })
+    modal.onDidDismiss().then((detail: any) => {
+      // console.log('[DDP-HEADER] ', detail.data)
+    })
+    modal.present()
+    this.createTicketModal = modal
+  }
 }

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

@@ -88,7 +88,7 @@
                   {{translationMap?.get('Unavailable')}}
                 </span>
 
-                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="  {{translationMap?.get('Busy')}}"
+                <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

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

@@ -477,7 +477,7 @@
     width: 22px;
     height: 22px;
     color: #fff;
-    // left: 28px;
+   
     left: 34px;
     border: 1px solid #fff;
 }

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

@@ -179,8 +179,8 @@ export class ProjectItemComponent implements OnInit {
     }
 
 
-    if (!stored_project) {
-      this.logger.log('PROJECT-ITEM - THERE IS NOT STORED LAST PROJECT ', stored_project)
+    if (!stored_project || stored_project === 'undefined') {
+      this.logger.log('PROJECT-ITEM - THERE IS NOT STORED LAST PROJECT OR IS UNDEFINED ', stored_project)
       const tiledeskToken = this.appStorageService.getItem('tiledeskToken');
       this.logger.log('[PROJECT-ITEM] - GET PROJECTS - tiledeskToken', tiledeskToken);
       this.tiledeskService.getProjects(tiledeskToken).subscribe(projects => {
@@ -204,7 +204,7 @@ export class ProjectItemComponent implements OnInit {
     }
 
 
-    if (stored_project) {
+    if (stored_project && stored_project !== 'undefined') {
       this.logger.log('PROJECT-ITEM - THERE IS STORED LAST PROJECT ', stored_project)
       if (stored_project) {
         this.project = JSON.parse(stored_project)