@chat21/chat21-ionic 3.0.71-rc.1 → 3.0.72

package/CHANGELOG.md

@@ -1,9 +1,17 @@
 # chat21-ionic ver 3.0
 
+### 3.0.72 in PROD
+
+### 3.0.72-rc.1
+- added: user presence on contact-directory component
+
+### 3.0.71 in PROD
+
 ### 3.0.71-rc.1
 - changed: native downloadURL on new file uploaded
 - added: update lead info in conversation-detail and conversation-header when agent updates 
 - added: private message UI when agent receive a private message from other agents
+- removed: scroll-bar from conversation-list page
 
 ### 3.0.70 in PROD
 

package/deploy_amazon_prod.sh

@@ -26,5 +26,5 @@ cd ../../../
 # aws cloudfront create-invalidation --distribution-id E36UIP90GOSFPM --paths "/*"
 
 # echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
-echo new version deployed on s3://tiledesk-console/v2/chat-ionic5/$version/
-echo available on https://console.tiledesk.com/v2/chat-ionic5/$version/index.html
+echo new version deployed on s3://tiledesk-console/v2/chat/$version/
+echo available on https://console.tiledesk.com/v2/chat/$version/index.html

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.71-rc.1",
+    "version": "3.0.72",
     "license": "AGPL-3.0",
     "homepage": "https://tiledesk.com/",
     "repository": {

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

@@ -16,6 +16,17 @@ export class InfoMessageComponent implements OnInit, OnChanges {
 
   public message_text: string
   private logger: LoggerService = LoggerInstance.getInstance()
+
+  tooltipOptions = {
+    'show-delay': 500,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
+  
   constructor() { }
 
   ngOnInit() {

package/src/app/components/contacts-directory/contacts-directory.component.html

@@ -10,7 +10,13 @@
         <div #avatarPlaceholder class="avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user.color + ')'}" [innerHTML]="user.avatar"></div>
         <div *ngIf="user.imageurl" #avatarImage class="avatar-profile" [style.background-image]="'url(' + user.imageurl + ')'"></div>
         <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
+        <div class="user-presence">
+          <app-presence
+          [isOnline]="user.online">
+          </app-presence>
+        </div>
       </ion-avatar>
+      
       <ion-label>
         <h2>{{ user.fullname }}</h2>
         <p>{{ user.uid }}</p>

package/src/app/components/contacts-directory/contacts-directory.component.scss

@@ -52,6 +52,13 @@ ion-item {
             border-style: solid;
             border-width: 0px;
         }
+        .user-presence{
+            position: absolute;
+            width: 100%;
+            height: 40px;
+            top: 30px;
+            left: calc(50% + 15px);
+        }
     }
     ion-label {
         flex: 1 1 0px;
@@ -81,6 +88,8 @@ ion-item {
         }
         
     }
+    
+
     ion-note {
         position: absolute;
         right: 8px;

package/src/app/components/contacts-directory/contacts-directory.component.ts

@@ -1,3 +1,4 @@
+import { PresenceService } from 'src/chat21-core/providers/abstract/presence.service';
 import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 import { UserModel } from 'src/chat21-core/models/user';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
@@ -5,6 +6,7 @@ import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'component-contacts-directory',
@@ -12,6 +14,7 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
   styleUrls: ['./contacts-directory.component.scss'],
 })
 export class ContactsDirectoryComponent implements OnInit, OnChanges {
+
   @Input() contacts: Array<UserModel>;
   @Output() onOpenNewChat = new EventEmitter<UserModel>();
 
@@ -20,7 +23,8 @@ export class ContactsDirectoryComponent implements OnInit, OnChanges {
   private logger: LoggerService = LoggerInstance.getInstance();
  
   constructor(
-    public imageRepoService: ImageRepoService
+    public imageRepoService: ImageRepoService,
+    public presenceService: PresenceService
   ) { }
 
   /**
@@ -35,6 +39,7 @@ export class ContactsDirectoryComponent implements OnInit, OnChanges {
     if(this.contacts){
       this.contacts.forEach(contact => {
         contact.imageurl = this.imageRepoService.getImagePhotoUrl(contact.uid)
+        this.presenceService.userIsOnline(contact.uid).pipe(filter((isOnline) => isOnline !== null)).subscribe((status)=> {contact.online = status.isOnline })
       });
     }
   }

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

@@ -10,6 +10,7 @@ export class OptionHeaderComponent implements OnInit {
 
   @Input() headerTitle: string
   @Output() onBackButton = new EventEmitter<boolean>();
+  static UserPresenceComponent: any[] | any;
 
   constructor() { }
 

package/src/app/components/conversation-info/info-group/info-group.component.ts

@@ -148,10 +148,7 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
         for (const [key, value] of Object.entries(this.groupDetail.members)) {
           this.logger.log('CONVERSATION-DETAIL group detail Key:', key, ' -Value: ', value);
 
-          this.presenceService.userIsOnline(key)
-            .pipe(takeUntil(this.unsubscribe$))
-            .pipe(filter((isOnline) => isOnline !== null))
-            .subscribe((isOnline: any) => {
+          this.presenceService.userIsOnline(key).pipe(takeUntil(this.unsubscribe$)).pipe(filter((isOnline) => isOnline !== null)).subscribe((isOnline: any) => {
               this.logger.log('InfoGroupComponent group detail BSIsOnline isOnline', isOnline)
               members_isonline_array[key]['isSignin'] = isOnline.isOnline
               if (this.member_array.length > 0) {

package/src/app/components/utils/presence/presence.component.html

@@ -0,0 +1,2 @@
+<div class="status-icon" [class.online]="isOnline" [style.border-color]="borderColor"></div>
+<!-- <div class="online-point" [style.color]="fontColor">{{status}}</div> -->

package/src/app/components/utils/presence/presence.component.scss

@@ -0,0 +1,24 @@
+.status-icon {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    top: 0px;
+    left: 0;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    background-color: #f44336;
+    &.online {
+        background-color: #4caf50;
+    }
+    
+}
+.online-point {
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    left: 20px;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 12px;
+    line-height: 14px;
+    text-align: left;
+}

package/src/app/components/utils/presence/presence.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PresenceComponent } from './presence.component';
+
+describe('PresenceComponent', () => {
+  let component: PresenceComponent;
+  let fixture: ComponentFixture<PresenceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PresenceComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PresenceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/utils/presence/presence.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-presence',
+  templateUrl: './presence.component.html',
+  styleUrls: ['./presence.component.scss'],
+})
+export class PresenceComponent implements OnInit {
+
+  @Input() isOnline: boolean = false;
+  @Input() translationMap: Map<string, string>;
+  // @Input() fontColor: string;
+  // @Input() borderColor: string;
+  
+  borderColor = '#ffffff';
+  fontColor = '#949494';
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

package/src/app/pages/contacts-directory/contacts-directory.module.ts

@@ -1,8 +1,9 @@
+import { PresenceComponent } from '../../components/utils/presence/presence.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
-import {TranslateLoader, TranslateModule, TranslatePipe} from '@ngx-translate/core';
+import {TranslateModule} from '@ngx-translate/core';
 
 import { ContactsDirectoryPageRoutingModule } from './contacts-directory-routing.module';
 import { ContactsDirectoryComponent } from '../../components/contacts-directory/contacts-directory.component';
@@ -10,7 +11,6 @@ import { ContactsDirectoryComponent } from '../../components/contacts-directory/
 import { ContactsDirectoryPage } from './contacts-directory.page';
 // import { ContactsDirectoryService } from '../../services/contacts-directory.service';
 // import { TiledeskContactsDirectoryService } from '../../services/tiledesk/tiledesk-contacts-directory.service';
-import { HttpClient } from '@angular/common/http';
 
 
 // export function contactsFactory(http: HttpClient) {
@@ -36,7 +36,8 @@ import { HttpClient } from '@angular/common/http';
   ],
   declarations: [
     ContactsDirectoryPage,
-    ContactsDirectoryComponent
+    ContactsDirectoryComponent,
+    PresenceComponent
   ]
 })
 export class ContactsDirectoryPageModule {}

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

@@ -974,7 +974,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     subscriptionKey = 'messageInfo'
     subscription = this.subscriptions.find((item) => item.key === subscriptionKey)
     if (!subscription) {
-      subscription = this.conversationHandlerService.messageInfo.subscribe((msg: any) => {
+      subscription = this.conversationHandlerService.messageInfo.pipe(takeUntil(this.unsubscribe$)).subscribe((msg: any) => {
         this.logger.log('[CONVS-DETAIL] subscribe to messageInfo - messageId ', msg)
         if (msg) {
           that.updateLeadInfo(msg)

package/src/app/shared/shared.module.ts

@@ -1,3 +1,4 @@
+import { ContactsDirectoryComponent } from './../components/contacts-directory/contacts-directory.component';
 import { HtmlComponent } from './../chatlib/conversation-detail/message/html/html.component';
 import { BubbleOthersMessageComponent } from './../components/conversation-detail/bubble-others-message/bubble-others-message.component';
 
@@ -91,7 +92,7 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     AutofocusDirective,
     HtmlEntitiesEncodePipe,
     SafeHtmlPipe,
-    OptionHeaderComponent
+    OptionHeaderComponent,
   ],
   exports: [
     // MessageTextAreaComponent,

package/src/chat21-core/utils/utils-message.ts

@@ -85,6 +85,37 @@ export function messageType(msgType: string, message: any) {
   }
 }
 
+/** */
+export function getSizeImg(message: any, maxWidthImage?: number): any {
+  try {
+    const metadata = message.metadata;
+    const sizeImage = {
+      width: metadata.width,
+      height: metadata.height
+    };
+    if (!maxWidthImage) {
+      maxWidthImage = MAX_WIDTH_IMAGES;
+    }
+    if (metadata.width && metadata.width > maxWidthImage) {
+      const rapporto = (metadata['width'] / metadata['height']);
+      sizeImage.width = maxWidthImage;
+      sizeImage.height = maxWidthImage / rapporto;
+    }
+    return sizeImage;
+  } catch (err) {
+    console.error('error: ', err);
+    return;
+  }
+}
+
+/** */
+export function isChannelTypeGroup(channelType: string) {
+  if (channelType === CHANNEL_TYPE_GROUP || channelType === TYPE_SUPPORT_GROUP) {
+    return true;
+  }
+  return false;
+}
+
 export function isEmojii(message: any){
   
   // let emoji = '';
@@ -115,38 +146,24 @@ export function isEmojii(message: any){
   }
 }
 
-
-
-
-/** */
-export function getSizeImg(message: any, maxWidthImage?: number): any {
-  try {
-    const metadata = message.metadata;
-    const sizeImage = {
-      width: metadata.width,
-      height: metadata.height
-    };
-    if (!maxWidthImage) {
-      maxWidthImage = MAX_WIDTH_IMAGES;
-    }
-    if (metadata.width && metadata.width > maxWidthImage) {
-      const rapporto = (metadata['width'] / metadata['height']);
-      sizeImage.width = maxWidthImage;
-      sizeImage.height = maxWidthImage / rapporto;
-    }
-    return sizeImage;
-  } catch (err) {
-    console.error('error: ', err);
-    return;
+export function checkIfIsMemberJoinedGroup(msg, loggedUser): boolean{
+  if(msg && msg.attributes && msg.attributes.messagelabel
+      && msg.attributes.messagelabel['key']=== "MEMBER_JOINED_GROUP" 
+      && msg.attributes.messagelabel.parameters['member_id'] !== loggedUser.uid
+      && !msg.attributes.messagelabel.parameters['member_id'].includes('bot') 
+      && !msg.attributes.messagelabel.parameters['member_id'].includes('system')){
+          return true
   }
+  return false
+  
 }
 
-/** */
-export function isChannelTypeGroup(channelType: string) {
-  if (channelType === CHANNEL_TYPE_GROUP || channelType === TYPE_SUPPORT_GROUP) {
-    return true;
+export function hideInfoMessage(msg, infoMessageKeyEnabled): boolean{
+  if(msg && msg.attributes && msg.attributes.messagelabel
+    && infoMessageKeyEnabled.includes(msg.attributes.messagelabel['key'])){
+      return false
   }
-  return false;
+  return true
 }