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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # chat21-ionic ver 3.0
 
+### 3.0.73-rc.1
+- bug-fixed: topic.split is not a function while a conversataion is closed by an agent in MQTT-conversations-handler.service
+- removed: user id from contact-directory component
+
+### 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

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",
+    "version": "3.0.73-rc.1",
     "license": "AGPL-3.0",
     "homepage": "https://tiledesk.com/",
     "repository": {

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

@@ -10,10 +10,16 @@
         <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>
+        <!-- <p>{{ user.uid }}</p> -->
       </ion-label>
       
     </ion-item>

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/providers/mqtt/mqtt-conversations-handler.ts

@@ -169,13 +169,14 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
         const handlerConversationDeleted = this.chat21Service.chatClient.onConversationDeleted( (conv, topic) => {
             this.logger.debug('[MQTTConversationsHandler] conversation deleted:', conv, topic);
             // example topic: apps.tilechat.users.ME.conversations.CONVERS-WITH.clientdeleted
-            const topic_parts = topic.split("/")
-            this.logger.debug('[MQTTConversationsHandler] topic and parts', topic_parts)
-            if (topic_parts.length < 7) {
-                this.logger.error('[MQTTConversationsHandler] Error. Not a conversation-deleted topic:', topic);
-                return
-            }
-            const convers_with = topic_parts[5];
+            // const topic_parts = topic.split("/")
+            // this.logger.debug('[MQTTConversationsHandler] topic and parts', topic_parts)
+            // if (topic_parts.leßngth < 7) {
+            //     this.logger.error('[MQTTConversationsHandler] Error. Not a conversation-deleted topic:', topic);
+            //     return
+            // }
+            // const convers_with = topic_parts[5];
+            const convers_with = topic.conversWith;
             this.removed({
                 uid: convers_with
             });

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
 }