@chat21/chat21-ionic 2.0.13 → 3.0.5-9.2

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

@@ -0,0 +1,115 @@
+<!-- <pre style="font-size: 12px;"> {{ groupDetail | json }} </pre>  -->
+
+<ion-content class="group-profile">
+  <ion-card class="first-card">
+    <div class="chat21-box-profile chat21-box">
+      <div class="chat21-content">
+        <div class="image-profile">
+          <app-avatar-profile [itemAvatar]="groupDetail"></app-avatar-profile>
+        </div>
+
+        <div class="info-profile">
+          <div class="name">
+            <span class="read">{{groupDetail?.name}}</span>
+          </div>
+        </div>
+        <!-- <div class="member-email">
+          <a [href]="'mailto:' + member.email + '?Subject='">
+            {{member.email}}
+          </a>
+        </div> -->
+      </div>
+
+    </div>
+  </ion-card>
+  
+  <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
+    <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
+      <ion-avatar slot="start">
+        <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 60%;position: relative;top: 2px;height: 16px;"></ion-skeleton-text>
+        </h3>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
+  <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
+    <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
+      <ion-avatar  slot="start" style="margin-right: 12px;"> 
+        <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
+        <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }"></div>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          {{ member.fullname }}
+        </h3>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+
+
+
+  <div *ngIf="groupDetail" style="display:none">
+    <div *ngFor='let member of groupDetail?.member_array'>
+      <ion-grid>
+        <ion-row class="ion-align-items-center">
+          <ion-col size="3">
+            <div class="member-profile">
+              <!-- (click)="copyLoggedUserUID({member.userid)" -->
+              <!-- <div class="avatar-container" [tooltip]="useruidTooltip" [options]="tooltipOptions" placement="top"
+                content-type="template" > -->
+              <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
+              <!-- </div> -->
+              <!-- <ng-template #useruidTooltip>
+                <span> {{member.userid}}</span>
+              </ng-template> -->
+
+              <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }">
+              </div>
+            </div>
+
+
+          </ion-col>
+          <ion-col>
+            <ion-label>
+              {{ member.fullname }}
+            </ion-label>
+
+            <!-- <div class="info-group-member-email">
+              <a [href]="'mailto:' + member.email + '?Subject='">
+                {{member.email}}
+              </a>
+            </div> -->
+
+
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+      <!-- </ion-avatar>
+      </ion-item> -->
+      <!-- {{member | json}}
+    
+    >>>  {{member?.avatar}} -->
+    </div>
+  </div>
+
+  <!-- <ion-list> 
+
+
+  </ion-list> -->
+
+  <!-- </div> -->
+
+
+  <!-- <app-advanced-info-accordion 
+  [advancedAttributes]="advancedAttributes"
+  [translationMap]="translationMap">
+
+  </app-advanced-info-accordion> -->
+
+</ion-content>

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

@@ -0,0 +1,80 @@
+.group-profile {
+    ion-card {
+        width: 100%;
+        padding: 10px 20px;
+        margin: 0px 0 1px 0;
+        border-radius: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        border-bottom: 1px solid rgba(169, 169, 169, 0.2);
+    }
+
+    .image-profile {
+        padding: 0 0 0 0;
+        width: 100px;
+        height: 100px;
+        margin: auto;
+        line-height: 100px;
+        font-size: 40px;
+        color: white;
+    }
+
+    .member-profile {
+        padding: 0 0 0 0;
+        width: 55px;
+        height: 55px;
+        margin: auto;
+        line-height: 57px;
+        font-size: 25px;
+        color: white;
+        position: relative;
+    }
+
+    .user-online {
+        height: 11px;
+        width: 11px;
+        border-radius: 50%;
+        position: absolute;
+        top: 44px;
+        left: 40px;
+        border: 0.5px solid #fff;
+    }
+
+    .user-presence {
+        position: absolute;
+        top: 88px;
+        height: 12px;
+        left: calc(50% + 30px);
+        width: 100px;
+    }
+
+    .info-profile {
+        padding: 10px 0 0 0;
+        text-align: center;
+        .name {
+            -webkit-font-smoothing: antialiased;
+            text-rendering: optimizeLegibility;
+            text-size-adjust: none;
+            user-select: text;
+            font-family: "Roboto", "Helvetica Neue", sans-serif;
+            -webkit-box-direction: normal;
+            color: #333333;
+            font-weight: 500;
+            font-size: 17px;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+            display: block;
+            font-size: large;
+            font-weight: bold;
+        }
+    }
+
+    .info-group-member-email {
+        font-size: 13px;
+        margin-top: 2px;
+        white-space: nowrap;
+        width: 205px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

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

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

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

@@ -0,0 +1,218 @@
+import { TiledeskAuthService } from './../../../../chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { Component, OnInit, AfterViewInit, Input, OnChanges, Renderer2, EventEmitter, Output, SimpleChanges } from '@angular/core';
+import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
+import { PresenceService } from 'src/chat21-core/providers/abstract/presence.service';
+import { ContactsService } from 'src/app/services/contacts/contacts.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
+
+// Logger
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { Location, LocationStrategy, PathLocationStrategy, PopStateEvent } from '@angular/common';
+
+// import {avatarPlaceholder, getColorBck} from 'src/chat21-core/utils/utils-user';
+@Component({
+  selector: 'app-info-group',
+  templateUrl: './info-group.component.html',
+  styleUrls: ['./info-group.component.scss'],
+})
+export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
+  // objectKeys = Object.keys;
+
+  @Input() groupDetail: any;
+  // @Input() member_array: any;
+  public displaySkeletonScreen: boolean = true;
+  public member_array: any
+  private unsubscribe$: Subject<any> = new Subject<any>();
+
+
+  tooltip: HTMLElement;
+  tooltipOptions = {
+    'show-delay': 100,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  route: string;
+  previousUrl: string;
+  membersObjectLength: number;
+  // @Output() pleaseDeleteMeEvent = new EventEmitter();
+  constructor(
+    public imageRepoService: ImageRepoService,
+    public presenceService: PresenceService,
+    public tiledeskAuthService: TiledeskAuthService,
+    public contactsService: ContactsService,
+    public renderer: Renderer2,
+    private router: Router,
+    public location: Location,
+  ) {
+
+    this.logger.log('InfoGroupComponent >>> constructor HELLO !!!');
+    // this.router.events.subscribe((val) => {
+    //   if (this.location.path() !== '') {
+    //     this.route = this.location.path();
+    //      this.logger.log('InfoGroupComponent - route ', this.route);
+    //   }
+    // })
+
+    // const currentUrl = this.router.url;
+    // this.logger.log('InfoGroupComponent current_url ', currentUrl);
+    // .pipe(takeUntil(this.unsubscribe$))
+    router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+
+      .subscribe((event: NavigationEnd) => {
+        // console.log('InfoGroupComponent -  router.events prev url :', event.url);
+        this.previousUrl = event.url;
+
+
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+        this.member_array = []
+        // console.log('InfoGroupComponent -  router.events member_array :', this.member_array);
+        // this.pleaseDeleteMeEvent.emit();
+
+        if (this.groupDetail && this.groupDetail.hasOwnProperty("member_array")) {
+          // console.log('InfoGroupComponent - router.events has Property member_array  :', this.groupDetail.hasOwnProperty("member_array"));
+          delete this.groupDetail['member_array'];
+        }
+      });
+
+    // if (currentUrl !==  this.previousUrl) {
+
+    // }
+  }
+
+
+  ngOnInit() {
+    this.logger.log(' InfoGroupComponent - ngOnInit');
+  }
+
+  ngAfterViewInit() {
+    this.logger.log('InfoGroupComponent - ngAfterViewInit ');
+    // this.logger.log('InfoGroupComponent conversationWith', this.conversationWith);
+  }
+
+  ngOnDestroy() {
+    // this.logger.log('ngOnDestroy ConversationDetailPage: ');
+    this.logger.log('InfoGroupComponent >  ngOnDestroy');
+    this.displaySkeletonScreen = true
+
+  }
+
+  public generateFake(count: number): Array<number> {
+    const indexes = [];
+    for (let i = 0; i < count; i++) {
+      indexes.push(i);
+    }
+    return indexes;
+  }
+
+
+  ngOnChanges() {
+    this.displaySkeletonScreen = true
+    this.logger.log('InfoGroupComponent >>> ngOnChanges member_array', this.member_array);
+    // this.displaySkeletonScreen = true
+    this.logger.log('InfoGroupComponent ngOnChanges displaySkeletonScreen', this.displaySkeletonScreen);
+
+    this.logger.log('InfoGroupComponent ngOnChanges groupDetail', this.groupDetail);
+    this.membersObjectLength = null
+    if (this.groupDetail) {
+      this.membersObjectLength = Object.keys(this.groupDetail.members).length;
+      this.logger.log('InfoGroupComponent ngOnChanges groupDetail membersObjectLength', this.membersObjectLength);
+    }
+
+    if (this.groupDetail) {
+      if (this.groupDetail.uid.startsWith('group-')) {
+        const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
+
+        this.member_array = []
+        const members_isonline_array = []
+
+        for (const [key, value] of Object.entries(this.groupDetail.members)) {
+          this.logger.log('CONVERSATION-DETAIL group detail Key:', key, ' -Value: ', value);
+          members_isonline_array[key] = {};
+          members_isonline_array[key]['isSignin'] = false
+        }
+
+        // for (const [key, value] of Object.entries(this.groupDetail.membersinfo)) {
+        let count = 0
+        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.logger.log('InfoGroupComponent group detail BSIsOnline isOnline', isOnline)
+              members_isonline_array[key]['isSignin'] = isOnline.isOnline
+              if (this.member_array.length > 0) {
+                this.logger.log('InfoGroupComponent group detail BSIsOnline HERE YES')
+                // this.member_array.find(x => x.userid == isOnline.uid)['userOnline'] = isOnline.isOnline
+
+
+              }
+              this.logger.log('InfoGroupComponent group detail BSIsOnline  this.groupDetail 2', this.groupDetail)
+              this.logger.log('InfoGroupComponent group detail BSIsOnline isOnline member_array', this.member_array)
+            }, (error) => {
+              this.logger.error('InfoGroupComponent group detail BSIsOnline - ERROR  ', error);
+            }, () => {
+              this.logger.log('InfoGroupComponent group detail BSIsOnline /* COMPLETE */');
+
+            });
+
+          this.contactsService.loadContactDetail(tiledeskToken, key)
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(user => {
+              this.logger.log('InfoGroupComponent group detail loadContactDetail RES', user);
+              // this.logger.log('InfoGroupComponent group detail this.presenceService.BSIsOnline.value()', this.presenceService.BSIsOnline.getValue);
+
+              user.imageurl = this.imageRepoService.getImagePhotoUrl(key)
+              // this.member_array.push({ userid: user.uid, avatar: user.avatar, color: user.color, email: user.email, fullname: user.fullname, imageurl: user.imageurl, userOnline: isOnline })
+              var index = this.member_array.findIndex(m => m.userid === user.uid);
+              this.logger.log('InfoGroupComponent member_array first of push index', index);
+              this.logger.log('InfoGroupComponent member_array first of push', this.member_array);
+              if (index === -1) {
+                this.member_array.push(
+                  {
+                    userid: user.uid,
+                    avatar: user.avatar,
+                    color: user.color,
+                    email: user.email,
+                    fullname: user.fullname,
+                    imageurl: user.imageurl,
+                    userOnline: members_isonline_array[user.uid]['isSignin']
+                  })
+              } else {
+                this.logger.log('InfoGroupComponent member already exist in member_array');
+              }
+            }, (error) => {
+              this.logger.error('InfoGroupComponent group detail loadContactDetail - ERROR  ', error);
+            }, () => {
+              count = count + 1;
+              this.logger.log('InfoGroupComponent group detail loadContactDetail * COMPLETE * COUNT ', count);
+              this.logger.log('InfoGroupComponent group detail loadContactDetail * COMPLETE * membersObjectLength ', this.membersObjectLength);
+              if (count === this.membersObjectLength) {
+                this.displaySkeletonScreen = false
+              }
+            });
+
+        }
+
+        this.groupDetail['member_array'] = this.member_array
+        this.logger.log('InfoGroupComponent group detail after at the end', this.member_array);
+
+      }
+    }
+  } // ./ ngOnChanges
+
+
+}

package/src/app/components/conversation-info/info-support-group/info-support-group.component.html

@@ -0,0 +1,6 @@
+<iframe width="100%"
+        height="100%"
+        [src]="urlConversationSupportGroup"
+        frameborder="0"
+        allowfullscreen>
+</iframe>

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

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

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

@@ -0,0 +1,29 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+// Logger
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+@Component({
+  selector: 'app-info-support-group',
+  templateUrl: './info-support-group.component.html',
+  styleUrls: ['./info-support-group.component.scss'],
+})
+export class InfoSupportGroupComponent implements OnInit {
+
+  @Input() urlConversationSupportGroup: any;
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  constructor() { }
+
+  ngOnInit() {
+    this.logger.log('InfoSupportGroupComponent - urlConversationSupportGroup: ', this.urlConversationSupportGroup);
+  }
+
+  ngOnDestroy() {
+    // this.logger.log('ngOnDestroy ConversationDetailPage: ');
+    this.logger.log('InfoSupportGroupComponent - ngOnDestroy ');
+
+
+  }
+
+}

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

@@ -0,0 +1,31 @@
+
+<ion-toolbar>
+  
+  <ion-buttons slot="start">
+    <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">
+      <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+
+  <ion-title>
+    <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo">
+    <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
+  </ion-title>
+
+  <ion-buttons slot="end">
+
+    <ion-button *ngIf="supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
+      <ion-icon slot="icon-only" name="create-outline"></ion-icon>
+    </ion-button>
+
+    <!-- <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
+      <span class="material-icons">history</span>
+    </button>
+
+    <button ion-button icon-only > 
+      <span class="material-icons">more_vert</span>
+    </button> -->
+
+  </ion-buttons>
+
+</ion-toolbar>

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

@@ -0,0 +1,26 @@
+ion-title img {
+    height: 30px;
+}
+.number-open-conv {
+    display: inline-flex;
+    font-size: 12px;
+    line-height: 14px;
+    height: 14px;
+    margin: auto;
+    padding: 0px 4px;
+    vertical-align: super;
+    color: rgba(153, 153, 153, 1);
+}
+
+.material-icons {
+    padding: 0;
+    min-width: 20px;
+    font-size: 20px;
+    line-height: 1;
+    pointer-events: none;
+    color: #666666;
+}  
+
+.header-logo {
+    margin-top: 5px;
+}

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

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

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

@@ -0,0 +1,33 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@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;
+  @Output() openContactsDirectory = new EventEmitter();
+  @Output() openProfileInfo = new EventEmitter();
+
+  constructor(
+  ) { }
+
+  ngOnInit() {
+    // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
+  }
+
+  // START @Output() //
+  /** */
+  onOpenProfileInfo(e: any) {
+    this.openProfileInfo.emit(e);
+  }
+
+  /** */
+  onOpenContactsDirectory(e: any) {
+    this.openContactsDirectory.emit(e);
+  }
+  // END @Output() //
+
+}

package/src/app/components/image-viewer/image-viewer.component.html

@@ -0,0 +1,23 @@
+<div id="image-viewer-modal" class="modal">
+
+  <!-- The Close Button -->
+  <span class="close" (click)="closeImageViewerModal()">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+    </svg>
+  </span>
+  <span class="download-image" (click)="downloadImage()">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />
+    </svg>
+  </span>
+  <!-- Modal Content (The Image) [src]="metadata.src"-->
+  <img class="modal-content" id="image-viewer-img">
+
+  <!-- Modal Caption (Image Text) -->
+  <div id="caption"></div>
+</div>