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

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # chat21-ionic ver 3.0
 
+### 3.0.72-rc.1
+- added: user presence on contact-directory component
+
 ### 3.0.71 in PROD
 
 ### 3.0.71-rc.1

package/package.json

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

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/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/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/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/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/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,