@chat21/chat21-ionic 3.0.58 → 3.0.59-rc15

package/src/app/pages/conversations-list/conversations-list.page.scss

@@ -1,139 +1,302 @@
 ion-header {
-    border-bottom-style: solid;
-    border-color: var(--light-gray);
-    border-bottom-width: thin;
+  border-bottom-style: solid;
+  border-color: var(--light-gray);
+  border-bottom-width: thin;
 }
 
-
-
 ion-list {
-    display: block;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    padding-inline-start: 40px;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 
-    ion-item {
-        cursor: pointer;
-        height: 64px;
+  ion-item {
+    cursor: pointer;
+    height: 64px;
+    position: relative;
+    display: flex;
+    text-decoration: none;
+    padding-left: 8px;
+    padding-right: 8px;
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    .selected {
+      border-radius: 10px;
+      padding-left: 8px;
+      padding-right: 8px;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    ion-avatar {
+      position: relative;
+      padding: 0;
+      margin: 0 12px 0 8px;
+      height: 50px;
+      width: 50px;
+      min-width: 50px;
+      min-height: 50px;
+      line-height: 50px;
+      .avatar-placeholder {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        text-align: center;
+        font-size: 20px;
+        color: #ffffff;
+        font-weight: 500;
+      }
+      .avatar-profile {
         position: relative;
-        display: flex;
-        text-decoration: none;
-        padding-left: 8px;
-        padding-right: 8px;
-        --padding-start: 0;
-        --inner-padding-end: 0;
-        .selected {
-            border-radius: 10px;
-            padding-left: 8px;
-            padding-right: 8px;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            z-index:-1;
-            background-color: rgba(0, 0, 0, .05);
-        }
-        ion-avatar {
-            position: relative;
-            padding:0;
-            margin:0 12px 0 8px;
-            height: 50px;
-            width: 50px;
-            min-width: 50px;
-            min-height: 50px;
-            line-height: 50px;
-            .avatar-placeholder {
-                position: absolute;
-                top:0;
-                left:0;
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                text-align: center;
-                font-size: 20px;
-                color:#ffffff;
-                font-weight: 500;
-            }
-            .avatar-profile {
-                position: relative;
-                display: inline-block;
-                width: 100%;
-                height: 100%;
-                background-color: transparent;
-                background-size: cover;
-                background-position: top center;
-                border-radius: 50%;
-                border-color: #c3c3c3;
-                border-style: solid;
-                border-width: 0px;
-            }
-        }
-        ion-label {
-            flex: 1 1 0px;
-            justify-content: center;
-            min-width: 0;
-            padding: 0;
-            font-family: Helvetica, Helvetica, Arial, sans-serif;
-            line-height: 1.28;
-            text-rendering: optimizeLegibility;
-            .conversation_with {
-                color: rgba(0, 0, 0, 1);
-                font-size: 15px;
-                font-weight: 400;
-                line-height: 1.4;
-            }
-            .conversation_message {
-                p {
-                    color: rgba(153, 153, 153, 1);
-                    font-size: 13px;
-                    font-weight: 400;
-                    height: 18px;
-                    &.not-read {
-                        font-weight:bold;
-                    }
-                }
-                
-            }
-            
-        }
-        ion-note {
-            position: absolute;
-            right: 8px;
-            top: 4px;
-            font-size: 10px;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        background-size: cover;
+        background-position: top center;
+        border-radius: 50%;
+        border-color: #c3c3c3;
+        border-style: solid;
+        border-width: 0px;
+      }
+    }
+    ion-label {
+      flex: 1 1 0px;
+      justify-content: center;
+      min-width: 0;
+      padding: 0;
+      font-family: Helvetica, Helvetica, Arial, sans-serif;
+      line-height: 1.28;
+      text-rendering: optimizeLegibility;
+      .conversation_with {
+        color: rgba(0, 0, 0, 1);
+        font-size: 15px;
+        font-weight: 400;
+        line-height: 1.4;
+      }
+      .conversation_message {
+        p {
+          color: rgba(153, 153, 153, 1);
+          font-size: 13px;
+          font-weight: 400;
+          height: 18px;
+          &.not-read {
+            font-weight: bold;
+          }
         }
-        ion-buttons {
-            margin: 0;
-            ion-button {
-                padding: 0;
-                margin: 0;
-                height: 24px;
-                width: 24px;
-                font-size: 10px;
-                --padding-start: 0px;
-                --padding-end: 0px;
-                color: rgba(153, 153, 153, 1);
-                background-color: transparent;
-                &:hover {
-                    background-color: rgba(0, 0, 0, .05)
-                }
-            }
+      }
+    }
+    ion-note {
+      position: absolute;
+      right: 8px;
+      top: 4px;
+      font-size: 10px;
+    }
+    ion-buttons {
+      margin: 0;
+      ion-button {
+        padding: 0;
+        margin: 0;
+        height: 24px;
+        width: 24px;
+        font-size: 10px;
+        --padding-start: 0px;
+        --padding-end: 0px;
+        color: rgba(153, 153, 153, 1);
+        background-color: transparent;
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.05);
         }
+      }
+    }
 
-        .notification_point {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            background-color: #0b5c89;
-            position: absolute;
-            right: 6px;
-            bottom: 8px;
-        }
+    .notification_point {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #0b5c89;
+      position: absolute;
+      right: 6px;
+      bottom: 8px;
     }
+  }
+}
+
+.waiting-for-connection {
+  --background: #fdd764;
+  --min-height: 70px;
+}
+
+// -------------------------------
+// Spinner
+// -------------------------------
+.sk-fading-circle {
+  // margin: 100px auto;
+  width: 25px;
+  height: 25px;
+  position: relative;
+  margin-left: 10px;
+  margin-top: 13px;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+#no-convs-wpr {
+  margin: 100px auto;
+}
 
-    
+.open-iframe-item {
+  padding-left: 0px !important ;
+  padding-right: 0px !important;
+  height: 55px !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -22,16 +22,21 @@ import { NavProxyService } from '../../services/nav-proxy.service';
 import { TiledeskService } from '../../services/tiledesk/tiledesk.service';
 import { ConversationDetailPage } from '../conversation-detail/conversation-detail.page';
 import { ContactsDirectoryPage } from '../contacts-directory/contacts-directory.page';
+import { UnassignedConversationsPage } from '../unassigned-conversations/unassigned-conversations.page';
 import { ProfileInfoPage } from '../profile-info/profile-info.page';
 import { MessagingAuthService } from 'src/chat21-core/providers/abstract/messagingAuth.service';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { AppConfigProvider } from '../../services/app-config';
-
+import { Subscription } from 'rxjs';
+import { Platform } from '@ionic/angular';
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { NetworkService } from 'src/app/services/network-service/network.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators'
 
 @Component({
   selector: 'app-conversations-list',
@@ -39,7 +44,10 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
   styleUrls: ['./conversations-list.page.scss'],
 })
 export class ConversationListPage implements OnInit {
+
   @ViewChild('ioncontentconvlist', { static: false }) ionContentConvList: IonContent;
+
+  private unsubscribe$: Subject<any> = new Subject<any>();
   private subscriptions: Array<string>;
   public tenant: string;
   public loggedUserUid: string;
@@ -51,7 +59,7 @@ export class ConversationListPage implements OnInit {
   public showPlaceholder = true;
   public numberOpenConv = 0;
   public loadingIsActive = true;
-  public supportMode = environment.supportMode;
+  public supportMode: boolean;
 
   public convertMessage = convertMessage;
   private isShowMenuPage = false;
@@ -61,6 +69,16 @@ export class ConversationListPage implements OnInit {
 
   public conversationType = 'active'
   headerTitle: string;
+  subscription: Subscription;
+
+  public UNASSIGNED_CONVS_URL: any;
+  public hasClickedOpenUnservedConvIframe: boolean = false;
+  public lastProjectId: string;
+  public isOnline: boolean = true;
+  public checkInternet: boolean;
+
+  public displayNewConvsItem: boolean = true
+
 
 
   constructor(
@@ -78,10 +96,15 @@ export class ConversationListPage implements OnInit {
     private translateService: CustomTranslateService,
     public tiledeskService: TiledeskService,
     public tiledeskAuthService: TiledeskAuthService,
-    public appConfigProvider: AppConfigProvider
+    public appConfigProvider: AppConfigProvider,
+    public platform: Platform,
+    private networkService: NetworkService,
+
   ) {
     this.listenToAppCompConvsLengthOnInitConvs();
     this.listenToLogoutEvent();
+    this.listenGoOnline();
+    this.listenGoOffline();
     this.listenToSwPostMessage();
 
   }
@@ -91,16 +114,122 @@ export class ConversationListPage implements OnInit {
   // @ Lifehooks
   // -----------------------------------------------
   ngOnInit() {
+    this.watchToConnectionStatus();
+    this.getSupportMode();
+
+    const currentUrl = this.router.url;
+    this.logger.log('[CONVS-LIST-PAGE] current_url ngOnInit ', currentUrl);
+    this.route.queryParams.subscribe(params => {
+      this.logger.log('[CONVS-LIST-PAGE] ngOnInit params', params);
+      if (params && params.convselected) {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params convselected:', params.convselected);
+      
+        const conversationSelected = this.conversations.find(item => item.uid === params.convselected);
+        if (conversationSelected) {
+          this.conversationSelected = conversationSelected;
+          this.logger.log('[CONVS-LIST-PAGE] ngOnInit params convselected - conversationSelected: ', this.conversationSelected);
+          this.navigateByUrl('active', params.convselected)
+        }
+
+      } else {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params NoParams ');
+      }
+      if (params && params.contact_id && params.contact_fullname) {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params contact_id:', params.contact_id, 'contact_fullname ', params.contact_fullname);
+        this.router.navigateByUrl('conversation-detail/' + params.contact_id + '/' + params.contact_fullname + '/new');
+        this.uidConvSelected = params.contact_id
+      } else {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params NoParams ');
+      }
+
+      if (params && params.conversation_detail) {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params conversation_detail:', params.conversation_detail);
+        this.router.navigateByUrl('conversation-detail/');
+
+      } else {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params NoParams ');
+      }
 
+    });
+  }
+
+  
+
+  getSupportMode() {
+    this.supportMode = this.appConfigProvider.getConfig().supportMode;
+    // console.log('[ION-LIST-CONVS-COMP] - supportMode ', this.supportMode)
+  }
+
+  watchToConnectionStatus() {
+    this.networkService.checkInternetFunc().subscribe(isOnline => {
+      this.checkInternet = isOnline
+      this.logger.log('[ION-LIST-CONVS-COMP] - watchToConnectionStatus - isOnline', this.checkInternet)
+
+      // checking internet connection
+      if (this.checkInternet == true) {
+
+        this.isOnline = true;
+      } else {
+        this.isOnline = false;
+      }
+    });
   }
 
+
   ionViewWillEnter() {
+    this.logger.log('Called ionViewDidEnter')
     this.logger.log('[CONVS-LIST-PAGE] ionViewWillEnter uidConvSelected', this.uidConvSelected);
     this.listnerStart();
+
+    // exit from app with hardware back button
+    this.subscription = this.platform.backButton.subscribe(() => {
+      navigator['app'].exitApp();
+    });
+  }
+
+  // unsubscribe backButton.subscribe method to not use from other page
+  ionViewWillLeave() {
+    this.logger.log('Called ionViewWillLeave')
+    this.subscription.unsubscribe();
   }
 
   ionViewDidEnter() { }
 
+  getLastProjectId(projectid: string) {
+    this.logger.log('[CONVS-LIST-PAGE] - GET LAST PROJECT ID', projectid);
+    this.lastProjectId = projectid;
+  }
+
+  openUnsevedConversationIframe() {
+    this.hasClickedOpenUnservedConvIframe = true
+    this.logger.log('[CONVS-LIST-PAGE] - HAS CLIKED OPEN UNSERVED REQUEST IFRAME', this.hasClickedOpenUnservedConvIframe);
+    const DASHBOARD_BASE_URL = this.appConfigProvider.getConfig().dashboardUrl;
+    this.UNASSIGNED_CONVS_URL = DASHBOARD_BASE_URL + '#/project/' + this.lastProjectId + '/unserved-request-for-panel';
+    this.logger.log('[CONVS-LIST-PAGE] - HAS CLIKED OPEN UNSERVED REQUEST IFRAME > UNASSIGNED CONVS URL', this.UNASSIGNED_CONVS_URL);
+    this.openUnassignedConversations(this.UNASSIGNED_CONVS_URL)
+  }
+
+  // ---------------------------------------------------------
+  // Opens the Unassigned Conversations iframe
+  // ---------------------------------------------------------
+  openUnassignedConversations(UNASSIGNED_CONVS_URL) {
+
+    if (checkPlatformIsMobile()) {
+      presentModal(this.modalController, UnassignedConversationsPage, { unassigned_convs_url: UNASSIGNED_CONVS_URL });
+    } else {
+      this.navService.push(UnassignedConversationsPage, { unassigned_convs_url: UNASSIGNED_CONVS_URL });
+    }
+  }
+
+  _closeContactsDirectory() {
+    try {
+      closeModal(this.modalController);
+    } catch (err) {
+      this.logger.error('[CONVS-LIST-PAGE] closeContactsDirectory -> error:', err);
+    }
+  }
+
+
   listenToSwPostMessage() {
     this.logger.log('[CONVS-LIST-PAGE] listenToNotificationCLick - CALLED: ');
     const that = this;
@@ -137,12 +266,20 @@ export class ConversationListPage implements OnInit {
 
   private listnerStart() {
     const that = this;
-    this.chatManager.BSStart.subscribe((data: any) => {
-      this.logger.log('[CONVS-LIST-PAGE] ***** BSStart Current user *****', data);
-      if (data) {
-        that.initialize();
-      }
-    });
+    this.chatManager.BSStart
+      .pipe(
+        takeUntil(that.unsubscribe$)
+      )
+      .subscribe((data: any) => {
+        this.logger.log('[CONVS-LIST-PAGE] - BSStart SUBSCR DATA - Current user *****', data);
+        if (data) {
+          that.initialize();
+        }
+      }, error => {
+        this.logger.error('[CONVS-LIST-PAGE] - BSStart SUBSCR - ERROR: ', error);
+      }, () => {
+        this.logger.log('[CONVS-LIST-PAGE] - BSStart SUBSCR * COMPLETE *')
+      });
   }
 
 
@@ -178,7 +315,6 @@ export class ConversationListPage implements OnInit {
     if (!this.archivedConversations || this.archivedConversations.length === 0) {
       this.loadingIsActive = false;
     }
-
   }
 
 
@@ -198,9 +334,33 @@ export class ConversationListPage implements OnInit {
     });
   }
 
+  listenGoOnline() {
+
+    this.events.subscribe('go:online', (goonline) => {
+      this.logger.info('[CONVS-LIST-PAGE] - listen To go:online - goonline', goonline);
+      // this.events.unsubscribe('profileInfoButtonClick:logout')
+      if (goonline === true) {
+        this.displayNewConvsItem = true
+      }
+    });
+  }
+
+  listenGoOffline() {
+
+    this.events.subscribe('go:offline', (offline) => {
+      this.logger.info('[CONVS-LIST-PAGE] - listen To go:offline - offline', offline);
+      // this.events.unsubscribe('profileInfoButtonClick:logout')
+      if (offline === true) {
+        this.displayNewConvsItem = false
+      }
+    });
+  }
+
   listenToLogoutEvent() {
     this.events.subscribe('profileInfoButtonClick:logout', (hasclickedlogout) => {
       this.logger.info('[CONVS-LIST-PAGE] - listenToLogoutEvent - hasclickedlogout', hasclickedlogout);
+
+
       this.conversations = []
       this.conversationsHandlerService.conversations = [];
       this.uidConvSelected = null;
@@ -493,8 +653,8 @@ export class ConversationListPage implements OnInit {
   }
 
   onConversationLoaded(conversation: ConversationModel) {
-    this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded ', conversation)
-    this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded is new? ', conversation.is_new)
+    // this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded ', conversation)
+    // this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded is new? ', conversation.is_new)
     // if (conversation.is_new === false) {
     //   this.ionContentConvList.scrollToTop(0);
     // }