@chat21/chat21-ionic 3.0.75-rc.2 → 3.0.76-rc.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # chat21-ionic ver 3.0
 
+### 3.0.76-rc.1
+- changed: senderFullName in list conversation for guest users with guest#uuid[0..5]
+- added: multi-language to MEMBER_LEFT_GROUP and LEAD_UPDATED info messages
+- added: onElementRendered event to image/frame/mesagge-attachment to scroll content after element is rendered
+- added: enabled possibility to edit or delete a canned response created by yourself
+- added: disable footer component of an archived conversation if it's been more than 10 days
+- removed: scrollBar from conversation-detail page
+
+## 3.0.75 in PROD
+
 ### 3.0.75-rc.2
 - bug-fixed: unserved request count not updated correctly after a request is assigned
 

package/deploy_amazon_beta.sh

@@ -12,7 +12,7 @@ sed -i -e "s/$URL_VER/g" src/utils/constants.ts
 
 ionic cordova platform add browser --save
 #ionic cordova build browser --prod --release
-ionic cordova build --env=pre browser #--prod  --verbose
+ionic cordova build --env=pre browser #--prod  --verbose 
 
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.75-rc.2",
+    "version": "3.0.76-rc.1",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -798,7 +798,7 @@ export class AppComponent implements OnInit {
         pageUrl += IDConv + '/' + FullNameConv + '/' + Convtype
       }
       // replace(/\(/g, '%28').replace(/\)/g, '%29') -> used for the encoder of any round brackets
-      this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29'));
+      this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29').replace( /#/g, "%23" ));
 
 
       // const DASHBOARD_URL = this.appConfigProvider.getConfig().DASHBOARD_URL;
@@ -1150,7 +1150,7 @@ export class AppComponent implements OnInit {
 
   subscribeUnservedRequestCount = (unservedRequestCount) => {
     if(unservedRequestCount && unservedRequestCount > 0){
-      console.log("hasToSoundUnservedRequestCount::::", this.hasToSoundUnservedRequestCount, this.isInitialized)
+      this.logger.debug("hasToSoundUnservedRequestCount::::", this.hasToSoundUnservedRequestCount, this.isInitialized)
       if(this.hasToSoundUnservedRequestCount){
         this.manageTabNotification(unservedRequestCount) //sound and alternate title
       } else {

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.ts

@@ -263,29 +263,29 @@ export class ConversationContentComponent implements OnInit {
 
   // ========= begin:: event emitter function ============//
 
-  returnOnAttachmentButtonClicked(event: any) {
+  onAttachmentButtonClickedFN(event: any) {
     this.onAttachmentButtonClicked.emit(event)
   }
 
-  returnOnBeforeMessageRender(event) {
+  onBeforeMessageRenderFN(event) {
     //decommentare se in html c'è solamente component tiledesk-text
     //const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component}
     this.onBeforeMessageRender.emit(event)
   }
 
-  returnOnAfterMessageRender(event) {
+  onAfterMessageRenderFN(event) {
     this.onAfterMessageRender.emit(event)
   }
 
-  onImageRenderedFN(event) {
-    const imageRendered = event;
-    if (imageRendered && this.scrollMe) {
+  onElementRenderedFN(event) {
+    const elementRendered = event;
+    if (elementRendered.status && this.scrollMe) {
       const divScrollMe = this.scrollMe.nativeElement;
       const checkContentScrollPosition = this.checkContentScrollPosition(divScrollMe);
       this.scrollToBottom() // SCROLLO SEMPRE
       // if (!checkContentScrollPosition) { // SE NON SONO ALLA FINE, SCROLLO CONTENT
       // }
-
+ 
     }
   }
 

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -87,9 +87,9 @@
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
-        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
-        (onImageRendered)="onImageRenderedFN($event)">
+        (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
+        (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
+        (onElementRendered)="onElementRenderedFN($event)">
       </chat-bubble-message>
 
       <!-- icon status message -->
@@ -126,10 +126,9 @@
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
-        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
-        (onImageRendered)="onImageRenderedFN($event)"
-        >
+        (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
+        (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
+        (onElementRendered)="onElementRenderedFN($event)">
       </chat-bubble-message>
     </div>
 
@@ -139,7 +138,8 @@
         [message]="message"
         [isLastMessage]="isLastMessage(message?.uid)" 
         [stylesMap]="stylesMap"
-        (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
+        (onElementRendered)="onElementRenderedFN($event)"
+        (onAttachmentButtonClicked)="onAttachmentButtonClickedFN($event)">
       </chat-message-attachment>
     </div>
   </div>

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.ts

@@ -24,7 +24,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Input() channelType: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
-  @Output() onImageRendered = new EventEmitter<boolean>()
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
 
   public public_Key: any
@@ -94,8 +94,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     // this.translate.getTranslation(chat_lang).subscribe((labels: string) => {
     //   console.log('[CONVS-DETAIL] translations: ', labels);
     // });
-    this.translate.get('AddAsCannedResponse')
-      .subscribe((text: string) => {
+    this.translate.get('AddAsCannedResponse').subscribe((text: string) => {
         // console.log('[CONVS-DETAIL] AddAsCannedResponse translated: ', text);
         this.addAsCannedResponseTooltipText = text
       })
@@ -132,9 +131,9 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onAddUploadingBubble.emit(value);
   }
 
-  onImageRenderedFN(event) {
-    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onImageRenderedFN:::ionic', event)
-    this.onImageRendered.emit(event)
+  onElementRenderedFN(event) {
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onElementRenderedFN:::ionic', event)
+    this.onElementRendered.emit(event)
   }
 
   /**

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -3,7 +3,7 @@
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
 <div id="bubble-message"
   [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px' : null }"
-  class="messages primary-color" [class.emoticon]="message?.emoticon">
+  class="messages primary-color">
 
 
   <div>
@@ -22,7 +22,7 @@
       [metadata]="message.metadata" 
       [width]="sizeImage?.width"
       [height]="sizeImage?.height"
-      (onImageRendered)="onImageRenderedFN($event)">
+      (onElementRendered)="onElementRenderedFN($event)">
     </chat-image>
 
     <!-- [width]="getMetadataSize(message.metadata).width"  -->
@@ -30,7 +30,8 @@
     <chat-frame *ngIf="isFrame(message)" 
       [metadata]="message.metadata" 
       [width]="message.metadata.width"
-      [height]="message.metadata.height">
+      [height]="message.metadata.height"
+      (onElementRendered)="onElementRenderedFN($event)">
     </chat-frame>
 
     <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
@@ -51,7 +52,6 @@
         [text]="message?.text" 
         [color]="textColor" 
         [message]="message"
-        [class.chat-text-emoticon]="message?.emoticon"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
       </chat-text>

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.scss

@@ -46,13 +46,6 @@
         }
     }
 
-    // &:hover .message-date{
-    //     display: flex;
-    // }
-
-    // .message-date {
-    //     display: none;
-    // }
 }
 // > .button-native
 .btn-add-msg-as-canned-response {
@@ -64,8 +57,5 @@
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
 }
 
-// .emoticon {
-//     padding: 35px 0px !important;
-// }
 
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -23,7 +23,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Input() supportMode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
-  @Output() onImageRendered = new EventEmitter<boolean>()
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
@@ -53,7 +53,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   }
 
   ngOnInit() {
-    this.setMomentLocale()
+    // this.setMomentLocale()
   }
 
 
@@ -140,14 +140,9 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
       sizeImage.width = MAX_WIDTH_IMAGES;
       sizeImage.height = MAX_WIDTH_IMAGES / ratio;
     }
-    // metadata.width = sizeImage.width
-    // metadata.height = sizeImage.height
     return sizeImage
   }
 
-
-
-
   /**
   * function customize tooltip
   */
@@ -195,8 +190,8 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     this.onAfterMessageRender.emit(messageOBJ)
   }
 
-  onImageRenderedFN(event) {
-    this.onImageRendered.emit(event)
+  onElementRenderedFN(event){
+    this.onElementRendered.emit({element: event.element, status: event.status})
   }
 
   async presentCreateCannedResponseModal(): Promise<any> {

package/src/app/chatlib/conversation-detail/message/frame/frame.component.ts

@@ -1,5 +1,5 @@
 import { DomSanitizer } from '@angular/platform-browser';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'chat-frame',
@@ -11,8 +11,10 @@ export class FrameComponent implements OnInit {
   @Input() metadata: any;
   @Input() width: string;
   @Input() height: string;
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   
   url: any;
+  loading: boolean = true
   constructor(private sanitizer: DomSanitizer) { }
 
   ngOnInit() {
@@ -23,11 +25,14 @@ export class FrameComponent implements OnInit {
     // this.height = this.getSizeImg(this.metadata).height;
   }
   
-
-
   ngOnDestroy(){
     this.url = null;
   }
 
+  onLoaded(event){
+    this.loading = false
+    this.onElementRendered.emit({element: "image", status:true})
+  }
+
 
 }

package/src/app/chatlib/conversation-detail/message/image/image.component.ts

@@ -10,7 +10,7 @@ export class ImageComponent implements OnInit {
   @Input() metadata: any;
   @Input() width: string;
   @Input() height: number;
-  @Output() onImageRendered = new EventEmitter<boolean>();
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
 
   loading: boolean = true
   tooltipMessage: string;
@@ -44,7 +44,7 @@ export class ImageComponent implements OnInit {
 
   onLoaded(event) {
     this.loading = false
-    this.onImageRendered.emit(true)
+    this.onElementRendered.emit({element: "image", status:true})
   }
 
   _downloadImage(url: string, fileName: string) {

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.ts

@@ -11,10 +11,11 @@ import { MessageModel } from 'src/chat21-core/models/message';
 export class MessageAttachmentComponent implements OnInit {
 
   // ========= begin:: Input/Output values ============//
-  @Output() onAttachmentButtonClicked = new EventEmitter<any>();
   @Input() message: MessageModel;
   @Input() isLastMessage: boolean;
   @Input() stylesMap: Map<string, string>;
+  @Output() onAttachmentButtonClicked = new EventEmitter<any>();
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>()
   // ========= end:: Input/Output values ============//
 
   public type: string;
@@ -45,6 +46,10 @@ export class MessageAttachmentComponent implements OnInit {
     }
   }
 
+  ngAfterViewInit(){
+    this.onElementRendered.emit({element: 'attachment', status: true})
+  }
+
   returnOnAttachmentButtonClicked(event: any){
     if ( event && event.target ) {
       const ev = {target: event.target, message: this.message, currentTarget: this }

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

@@ -68,9 +68,7 @@
               style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
             <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input"
               [accept]="fileUploadAccept">
-
           </ion-button>
-
         </div>
 
         <!-- <ion-icon (click)="showEmojiPicker = !showEmojiPicker" color="secondary" name="happy" style="zoom:2;"></ion-icon> -->

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

@@ -52,11 +52,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() isOpenInfoConversation: boolean;
   @Input() translationMap: Map<string, string>;
   @Input() dropEvent: any;
+  @Input() disableTextarea: boolean;
   @Output() eventChangeTextArea = new EventEmitter<object>();
   @Output() hasClickedOpenCannedResponses = new EventEmitter<boolean>();
   @Output() eventSendMessage = new EventEmitter<object>();
   @Output() onPresentModalScrollToBottom = new EventEmitter<boolean>();
-  @Input() disableTextarea: boolean;
 
   public conversationEnabled = false;
   public messageString: string;

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

@@ -311,10 +311,11 @@ export class ProjectItemComponent implements OnInit {
           }
         });
         //not sound if unservedRequest is already chached and web-sk is closed and restart again
-        if(this.unservedRequestCount !== count){  
-          this.unservedRequestCount = count;
+        if(count > this.unservedRequestCount ){  
           this.events.publish('unservedRequest:count', this.unservedRequestCount)
         }
+        this.unservedRequestCount = count;
+
       }
     }, error => {
       this.logger.error('[PROJECT-ITEM] UNSERVED REQUEST COUNT * error * ', error)

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

@@ -118,6 +118,7 @@
                 </ion-grid>
 
 
+
                 <ion-conversation-detail *ngIf="isHovering === false" #conversationContentDetail
                   [channelType]="channelType" 
                   [messages]="messages" 
@@ -126,12 +127,12 @@
                   [areVisibleCAR]="areVisibleCAR" 
                   [supportMode]= "supportMode" 
                   [stylesMap]="styleMap"
-                  (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-                  (onAfterMessageRender)="returnOnAfterMessageRender($event)"
-                  (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)"
+                  (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
+                  (onAfterMessageRender)="onAfterMessageRenderFN($event)"
+                  (onAttachmentButtonClicked)="onAttachmentButtonClickedFN($event)"
                   (onScrollContent)="returnOnScrollContent($event)" 
                   (onMenuOptionShow)="returnOnMenuOption($event)"
-                  (onImageRendered)="onImageRenderedFN($event)"
+                  (onElementRendered)="onElementRenderedFN($event)"
                   (onAddUploadingBubble)="addUploadingBubbleEvent($event)">
                 </ion-conversation-detail>
 
@@ -149,12 +150,27 @@
             <!-- ----------------------------------------------------------- -->
             <!-- Canned responses -->
             <!-- ----------------------------------------------------------- -->
+            <!-- <app-canned-response *ngIf="!HIDE_CANNED_RESPONSES"
+              [conversationWith]="conversationWith"
+              [conversationWithFullname]="conversationWithFullname"
+              [currentString]="messageStr"
+              [translationMap]="translationMap">
+            </app-canned-response> -->
+            
+            
             <div id="canned">
               <ion-list class="canned-list" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
                 <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
-                  class="canned-item" id="{{'canned-item_'+ i }}"
-                  *ngFor="let canned of tagsCannedFilter; let i = index;" [innerHtml]="canned.title"
+                  class="canned-item no-ripple" id="{{'canned-item_'+ i }}"
+                  *ngFor="let canned of tagsCannedFilter; let i = index;"
                   (click)="replaceTagInMessage(canned, $event)">
+                  <div class="cannedContent">
+                    <ion-input [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" [disabled]="canned.disabled"></ion-input>
+                    <ion-input [(ngModel)]="canned.text" class="text" [disabled]="canned.disabled"></ion-input>
+                  </div>
+                  <ion-icon class="canned-item-icon"  name="checkmark-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && !canned.disabled" (click)="onConfirmEditCanned(canned, $event)"></ion-icon>
+                  <ion-icon class="canned-item-icon"  name="pencil-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && canned.disabled" (click)="onEditCanned(canned, $event)"></ion-icon>
+                  <ion-icon class="canned-item-icon"  name="trash-bin-outline" slot=end *ngIf="canned.createdBy === loggedUser.uid" (click)="onDeleteCanned(canned, $event)"></ion-icon>
                 </ion-item>
                 <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="presentCreateCannedResponseModal()">
                   <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>

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

@@ -383,6 +383,16 @@ ion-content {
             }
         }
     }
+
+    #canned{
+        ion-input {
+            --padding-bottom:0px;
+            &.text{
+                font-style: italic;
+            }
+            
+        }
+    }
 }
 
 .chat-area-apps-sidebar-wide {