@chat21/chat21-ionic 3.0.61-rc3 → 3.0.61-rc7

package/src/app/components/sidebar-user-details/sidebar-user-details.component.ts

@@ -10,15 +10,15 @@ import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { skip } from 'rxjs/operators';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { EventsService } from 'src/app/services/events-service';
-
-
+import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
+import { avatarPlaceholder,  getColorBck} from 'src/chat21-core/utils/utils-user';
 @Component({
   selector: 'app-sidebar-user-details',
   templateUrl: './sidebar-user-details.component.html',
   styleUrls: ['./sidebar-user-details.component.scss'],
 })
 export class SidebarUserDetailsComponent implements OnInit, OnChanges {
-  HAS_CLICKED_OPEN_USER_DETAIL: boolean = false;
+  // HAS_CLICKED_OPEN_USER_DETAIL: boolean = false;
   // @Output() onCloseUserDetailsSidebar = new EventEmitter();
 
 
@@ -53,6 +53,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   public_Key: any
   plan_name: string;
   plan_subscription_is_active: boolean;
+   USER_PHOTO_PROFILE_EXIST: boolean;
+ 
   constructor(
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
@@ -71,34 +73,102 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.listenTocurrentProjectUserUserAvailability$();
     this.getCurrentStoredProject();
     this.getOSCODE();
-    this.listenOpenUserSidebarEvent();
+    // this.listenOpenUserSidebarEvent();
+  }
+
+  subcribeToAuthStateChanged() {
+    this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] BSAuthStateChanged ', state)
+
+      if (state === 'online') {
+        const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
+        this.logger.log('[SIDEBAR-USER-DETAILS] currentUser ', currentUser)
+        if (currentUser) {
+          this.user = currentUser;
+          this.createUserAvatar(this.user)
+          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(currentUser.uid)
+          this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL ', this.photo_profile_URL);
+          this.checkIfExistPhotoProfile(this.photo_profile_URL)
+        }
+      }
+    })
+  }
+
+  checkIfExistPhotoProfile(imageUrl) {
+    this.verifyImageURL(imageUrl,  (imageExists) => {
+
+      if (imageExists === true) {
+        this.USER_PHOTO_PROFILE_EXIST = true;
+        this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL IMAGE EXIST ', imageExists)
+      
+      } else {
+        this.USER_PHOTO_PROFILE_EXIST = false;
+        this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL IMAGE EXIST ', imageExists)
+      }
+    })
   }
 
-  listenOpenUserSidebarEvent() {
-    this.events.subscribe('userdetailsidebar:opened', (openUserDetailsSidebar) => {
-      this.logger.log('[SIDEBAR-USER-DETAILS] - listenOpenUserSidebarEvent - openUserDetailsSidebar', openUserDetailsSidebar);
-    this.HAS_CLICKED_OPEN_USER_DETAIL = true;
-    });
+
+  createUserAvatar(currentUser) {
+    this.logger.log('[SIDEBAR-USER-DETAILS] - createProjectUserAvatar ', currentUser)
+    let fullname = ''
+    if (currentUser && currentUser.firstname && currentUser.lastname) {
+      fullname = currentUser.firstname + ' ' + currentUser.lastname
+      currentUser['fullname_initial'] = avatarPlaceholder(fullname)
+      currentUser['fillColour'] = getColorBck(fullname)
+    } else if (currentUser && currentUser.firstname) {
+      fullname = currentUser.firstname
+      currentUser['fullname_initial'] = avatarPlaceholder(fullname)
+      currentUser['fillColour'] = getColorBck(fullname)
+    } else {
+      currentUser['fullname_initial'] = 'N/A'
+      currentUser['fillColour'] = 'rgb(98, 100, 167)'
+    }
+}
+
+  verifyImageURL(image_url, callBack) {
+    const img = new Image();
+    img.src = image_url;
+    img.onload = function () {
+      callBack(true);
+    };
+    img.onerror = function () {
+      callBack(false);
+    };
   }
 
+  // listenOpenUserSidebarEvent() {
+  //   this.events.subscribe('userdetailsidebar:opened', (openUserDetailsSidebar) => {
+  //     this.logger.log('[SIDEBAR-USER-DETAILS] - listenOpenUserSidebarEvent - openUserDetailsSidebar', openUserDetailsSidebar);
+  //   this.HAS_CLICKED_OPEN_USER_DETAIL = true;
+  //   });
+  // }
+
   @HostListener('document:click', ['$event'])
   clickout(event) {
-    this.logger.log('[SIDEBAR-USER-DETAILS] clickout event.target)', event.target)
-    this.logger.log('[SIDEBAR-USER-DETAILS] clickout event.target)', event.target.id)
+    this.logger.log('[SIDEBAR-USER-DETAILSS-CHAT] clickout event.target)', event.target)
+    this.logger.log('[SIDEBAR-USER-DETAILSS-CHAT] clickout event.target)', event.target.id)
     const clicked_element_id = event.target.id
     if (this.eRef.nativeElement.contains(event.target)) {
-      this.logger.log('[SIDEBAR-USER-DETAILS] clicked inside')
+      // this.logger.log('[SIDEBAR-USER-DETAILS] clicked inside')
     } else {
-      this.logger.log('[SIDEBAR-USER-DETAILS] HAS_CLICKED_OPEN_USER_DETAIL ', this.HAS_CLICKED_OPEN_USER_DETAIL)
-      if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
-        if (!clicked_element_id.startsWith("sidebaravatar")) {
-          this.closeUserDetailSidePanel();
-        }
-        // this.logger.log('[SIDEBAR-USER-DETAILS] clicked outside')
+      if (!clicked_element_id.startsWith("sidebaravatar")) {
+        this.closeUserDetailSidePanel();
       }
+      // this.logger.log('[SIDEBAR-USER-DETAILS] clicked outside')
+
     }
   }
 
+  closeUserDetailSidePanel() {
+    var element = document.getElementById('user-details');
+    element.classList.remove("active");
+    this.logger.log('[SIDEBAR-USER-DETAILS] element', element);
+    // this.HAS_CLICKED_OPEN_USER_DETAIL === true
+    // this.onCloseUserDetailsSidebar.emit(false);
+  }
+
+
   getCurrentChatLangAndTranslateLabels() {
     this.browserLang = this.translate.getBrowserLang();
     const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
@@ -117,18 +187,28 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.chat_lang = ''
     if (this.browserLang && !stored_preferred_lang) {
       this.chat_lang = this.browserLang
-      this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+      // this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
 
       this.logger.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
       this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
     } else if (this.browserLang && stored_preferred_lang) {
       this.chat_lang = stored_preferred_lang
-      this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+      // this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
       this.logger.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
       this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
     }
 
-    this.translate.use(this.chat_lang);
+   
+    if (tranlatedLanguage.includes(this.chat_lang)) {
+      this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
+      this.translate.use(this.chat_lang);
+      this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+    } else {
+      this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
+      this.translate.use('en');
+      this.flag_url = "assets/images/language_flag/en.png"
+      this.chat_lang = 'en'
+    }
     this.translateLabels()
   }
 
@@ -173,7 +253,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getAvailableTranslation() {
     this.translate.get('Available')
       .subscribe((text: string) => {
-       
+
         // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.IS_AVAILABLE_msg = text
       });
@@ -181,7 +261,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getUnavailableTranslation() {
     this.translate.get('Unavailable')
       .subscribe((text: string) => {
-      
+
         // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.IS_UNAVAILABLE_msg = text
       });
@@ -190,7 +270,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getIsBusyTranslation() {
     this.translate.get('Busy')
       .subscribe((text: string) => {
-       
+
         // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.IS_BUSY_msg = text
       });
@@ -199,7 +279,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getSubscriptionPaymentProblemTranslation() {
     this.translate.get('SubscriptionPaymentProblem')
       .subscribe((text: string) => {
-      
+
         // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.SUBSCRIPTION_PAYMENT_PROBLEM_msg = text
       });
@@ -208,7 +288,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getThePlanHasExpiredTranslation() {
     this.translate.get('ThePlanHasExpired')
       .subscribe((text: string) => {
-     
+
         // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.THE_PLAN_HAS_EXPIRED_msg = text
       });
@@ -272,7 +352,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     // this.profile_name_translated = this.PRO_PLAN_TRIAL_msg;
     this.translate.get('ProPlanTrial')
       .subscribe((text: string) => {
-       
+
         // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
@@ -282,7 +362,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     // this.profile_name_translated = this.FREE_PLAN_msg;
     this.translate.get('FreePlan')
       .subscribe((text: string) => {
-        
+
         // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
@@ -324,7 +404,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
           this.translateUserRole(this.USER_ROLE)
         }
 
-    
+
 
       }, (error) => {
         this.logger.error('[SIDEBAR-USER-DETAILS] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS error ', error);
@@ -337,7 +417,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     // console.log('[SIDEBAR-USER-DETAILS] -translateUserRole ', role)
     this.translate.get(role)
       .subscribe((text: string) => {
-    
+
         // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.USER_ROLE_LABEL = text
       });
@@ -348,37 +428,22 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
   ngOnChanges() {
     // console.log('[SIDEBAR-USER-DETAILS] HAS_CLICKED_OPEN_USER_DETAIL', this.HAS_CLICKED_OPEN_USER_DETAIL)
-    var element = document.getElementById('user-details');
-    // console.log('[SIDEBAR-USER-DETAILS] element', element)
-    if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
-      element.classList.add("active");
-    }
+    // var element = document.getElementById('user-details');
+    // // console.log('[SIDEBAR-USER-DETAILS] element', element)
+    // if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
+    //   element.classList.add("active");
+    // }
   }
 
-  subcribeToAuthStateChanged() {
-    this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
-      this.logger.log('[SIDEBAR] BSAuthStateChanged ', state)
-
-      if (state === 'online') {
-        const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-        this.logger.log('[SIDEBAR-USER-DETAILS] currentUser ', currentUser)
-        if (currentUser) {
-          this.user = currentUser;
-          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(currentUser.uid)
-          this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL ', this.photo_profile_URL)
-        }
 
-      }
-    })
-  }
 
-  closeUserDetailSidePanel() {
-    var element = document.getElementById('user-details');
-    element.classList.remove("active");
-    this.logger.log('[SIDEBAR-USER-DETAILS] element', element);
-    this.HAS_CLICKED_OPEN_USER_DETAIL === true
-    // this.onCloseUserDetailsSidebar.emit(false);
-  }
+  // closeUserDetailSidePanel() {
+  //   var element = document.getElementById('user-details');
+  //   element.classList.remove("active");
+  //   this.logger.log('[SIDEBAR-USER-DETAILS] element', element);
+  //   this.HAS_CLICKED_OPEN_USER_DETAIL === true
+  //   // this.onCloseUserDetailsSidebar.emit(false);
+  // }
 
 
 

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

@@ -34,7 +34,7 @@ import { InfoGroupComponent } from 'src/app/components/conversation-info/info-gr
 import { SharedModule } from 'src/app/shared/shared.module';
 // import { SharedConversationInfoModule } from 'src/app/shared/shared-conversation-info.module';
 import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
-
+import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
 @NgModule({
   imports: [
     CommonModule,
@@ -42,6 +42,7 @@ import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
     IonicModule,
     TooltipModule,
     ConversationDetailPageRoutingModule,
+    ScrollbarThemeModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,

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

@@ -1,7 +1,7 @@
 <span *ngIf="conversationWith && loggedUser; then showConversation else showPlaceholder"></span>
 <ng-template #showPlaceholder>
   <!-- class="splash-page" -->
-  <ion-content padding>
+  <ion-content  padding >
     <!-- <div padding class="image-splash-page"></div>
     <div padding class="title-splash-page">
       text new conversation + button
@@ -37,7 +37,7 @@
     [isOpenInfoConversation]="isOpenInfoConversation">
   </app-header-conversation-detail>
 
-  <ion-content>
+  <ion-content id="conv-details">
     <ion-grid class="grid_content">
       <ion-row class="row_content">
         <ion-col id="chatArea" [class.mobile]="isMobile" [class.open]="openInfoConversation">
@@ -91,7 +91,7 @@
             </ng-template>
 
             <ng-template #content_messages>
-              <ion-content #ionContentChatArea class="ionContentChatArea" (drop)="drop($event)"
+              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" (drop)="drop($event)"
                 (dragover)="allowDrop($event)" (dragleave)="drag($event)" [scrollEvents]="true"
                 (ionScrollStart)="logScrollStart($event)" (ionScroll)="logScrolling($event)"
                 (ionScrollEnd)="logScrollEnd($event)" [class.active]="showIonContent">
@@ -162,7 +162,8 @@
               (eventSendMessage)="returnSendMessage($event)" [translationMap]="translationMap"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
               [isOpenInfoConversation]="isOpenInfoConversation" [dropEvent]="dropEvent"
-              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)">
+              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)"
+              [disableTextarea]="disableTextarea">
             </app-message-text-area>
             <!-- [events]="eventsReplaceTexareaText.asObservable()" -->
           </ion-row>