@chat21/chat21-ionic 3.0.59-rc4 → 3.0.59

package/src/app/components/project-item/project-item.component.scss

@@ -4,16 +4,20 @@
     padding-top: 0px;
     margin-top: 0px !important;
     padding-bottom: 0px !important;
-    background: #fff;
+    // background: #fff;
     padding-left: 0px;
-    min-height: 70px;
-    height: 70px;
     width: 100%;
+    // min-height: 70px;
+    // height: 70px;
+    min-height: 55px;
+    height: 55px;
+    position: relative;
+    top: -5px;
 }
 
-.main-content-project-for-panel:hover {
-    background-color: rgb(244, 243, 244);
-}
+// .main-content-project-for-panel:hover {
+//     background-color: rgb(244, 243, 244);
+// }
 .container-project-for-panel {
     padding: 0px !important;
     width: 296px;
@@ -283,6 +287,9 @@
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     font-family: Helvetica, Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    position: relative;
+    top: -1px;
 }
 
 // .im-available-project-for-panel {
@@ -290,18 +297,26 @@
 // }
 
 .availabily-and-busy-wpr {
-    margin-top: 6px;
+    // margin-top: 6px;
+    margin-top: 7px;
     margin-left: 11px;
 }
 
+.availabily---wpr {
+    display: inline-block;
+    position: relative;
+    top: -4px;
+    margin-right: 6px;
+}
+
 .availibility-status-text {
     font-family: Helvetica, Helvetica, Arial, sans-serif;
-    font-size: 13px;
+    font-size: 11px;
     margin-left: 3px;
-    position: relative;
-    top: -4px;
     display: inline-block;
-    min-width: 74px;
+    min-width: 85px;
+    position: relative;
+    top: -5px;
 }
 
 .online-text-color {
@@ -321,15 +336,18 @@
 
 .project-item--isBusy-icon {
     border-radius: 50%;
-    background-color: #fedd00;
-    font-size: 18px;
+    background-color:#FEB92C;
+    font-size: 14px;
     color: #fff;
+    position: relative;
+    top: -1px;
+    // margin-left: 8px;
 }
 
 .project-item--isBusy-busy-text {
     font-family: Helvetica, Helvetica, Arial, sans-serif;
-    font-size: 13px;
-    margin-left: 3px;
+    font-size: 11px;
+    // margin-left: 3px;
     position: relative;
     top: -4px;
 }
@@ -342,37 +360,37 @@
 
 @keyframes pulse {
     0% {
-        color: transparent;
+        color: #999999;
     }
     50% {
-        color: #fedd00;
+        color: #FEB92C;
     }
     100% {
-        color: transparent;
+        color: #999999;
     }
 }
 /* Firefox */
 @-moz-keyframes pulse {
     0% {
-        color: transparent;
+        color: #999999;
     }
     50% {
-        color: #fedd00;
+        color: #FEB92C;
     }
     100% {
-        color: transparent;
+        color: #999999;
     }
 }
 /* Safari and Chrome */
 @-webkit-keyframes pulse {
     0% {
-        color: transparent;
+        color: #999999;
     }
     50% {
-        color: #fedd00;
+        color: #FEB92C;
     }
     100% {
-        color: transparent;
+        color: #999999;
     }
 }
 
@@ -384,14 +402,18 @@
 
 .unassigned-notifications-badge {
     position: absolute;
-    top: 12px;
+    // top: 12px;
+    top: 14px;
     border-radius: 50%;
     background: #e41e3f;
-    width: 24px;
-    height: 24px;
+    // width: 24px;
+    // height: 24px;
+    width: 22px;
+    height: 22px;
     color: #fff;
-    left: 28px;
-    border: 2px solid #fff
+    // left: 28px;
+    left: 32px;
+    border: 1px solid #fff;
 }
 .notification-count {
     font-size: 12px;
@@ -488,10 +510,62 @@
 // ------------------------------------------------------------------
 // on-off availability switch btn // https://proto.io/freebies/onoff/
 // ------------------------------------------------------------------
+// .onoffswitch {
+//     display: inline-block;
+//     position: relative;
+//     width: 36px;
+//     -webkit-user-select: none;
+//     -moz-user-select: none;
+//     -ms-user-select: none;
+// }
+// .onoffswitch-checkbox {
+//     position: absolute;
+//     opacity: 0;
+//     pointer-events: none;
+// }
+// .onoffswitch-label {
+//     display: block;
+//     overflow: hidden;
+//     cursor: pointer;
+//     height: 18px;
+//     padding: 0;
+//     line-height: 18px;
+//     border: 0px solid #ffffff;
+//     border-radius: 20px;
+//     background-color: #eeeeee;
+// }
+// .onoffswitch-label:before {
+//     content: "";
+//     display: block;
+//     width: 20px;
+//     margin: -1px;
+//     background: #f44336;
+//     position: absolute;
+//     top: 0;
+//     bottom: 0;
+//     // right: 14px;
+//     border-radius: 20px;
+//     // box-shadow: 0 6px 12px 0px #757575;
+// }
+// .onoffswitch-checkbox:checked + .onoffswitch-label {
+//     background-color: #eeeeee;
+// }
+// .onoffswitch-checkbox:checked + .onoffswitch-label,
+// .onoffswitch-checkbox:checked + .onoffswitch-label:before {
+//     border-color: #eeeeee;
+// }
+// .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+//     margin-left: 0;
+// }
+// .onoffswitch-checkbox:checked + .onoffswitch-label:before {
+//     right: 0px;
+//     background-color: #4caf50;
+//     // box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
+// }
+
 .onoffswitch {
-    display: inline-block;
     position: relative;
-    width: 36px;
+    width: 30px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -505,24 +579,24 @@
     display: block;
     overflow: hidden;
     cursor: pointer;
-    height: 18px;
+    height: 8px;
     padding: 0;
-    line-height: 18px;
+    line-height: 8px;
     border: 0px solid #ffffff;
-    border-radius: 20px;
+    border-radius: 16px;
     background-color: #eeeeee;
 }
 .onoffswitch-label:before {
     content: "";
     display: block;
-    width: 20px;
-    margin: -1px;
+    width: 16px;
+    margin: -4px;
     background: #f44336;
     position: absolute;
     top: 0;
     bottom: 0;
-    // right: 14px;
-    border-radius: 20px;
+    right: 18px;
+    border-radius: 16px;
     // box-shadow: 0 6px 12px 0px #757575;
 }
 .onoffswitch-checkbox:checked + .onoffswitch-label {
@@ -540,3 +614,56 @@
     background-color: #4caf50;
     // box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
 }
+
+// -----------------------
+// i on-off switch
+// -----------------------
+.i_onoffswitch {
+    position: relative;
+    width: 33px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+.i_onoffswitch-checkbox {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+.i_onoffswitch-label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    height: 18px;
+    padding: 0;
+    line-height: 18px;
+    // border: 1px solid #e3e3e3;
+    border-radius: 18px;
+    background-color: #f44336;
+    transition: background-color 0.3s ease-in;
+}
+.i_onoffswitch-label:before {
+    content: "";
+    display: block;
+    // width: 18px;
+    width: 16px;
+    margin: 0px;
+    background: #ffffff;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 15px;
+    border: 1px solid #e3e3e3;
+    border-radius: 18px;
+    transition: all 0.3s ease-in 0s;
+}
+.i_onoffswitch-checkbox:checked + .i_onoffswitch-label {
+    background-color: #4caf50;
+}
+.i_onoffswitch-checkbox:checked + .i_onoffswitch-label,
+.i_onoffswitch-checkbox:checked + .i_onoffswitch-label:before {
+    border-color: #4caf50;
+}
+.i_onoffswitch-checkbox:checked + .i_onoffswitch-label:before {
+    right: 0px;
+}

package/src/app/components/project-item/project-item.component.ts

@@ -8,6 +8,7 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+import { WebSocketJs } from 'src/app/services/websocket/websocket-js';
 
 @Component({
   selector: 'app-project-item',
@@ -35,7 +36,8 @@ export class ProjectItemComponent implements OnInit {
     public appStorageService: AppStorageService,
     private translateService: CustomTranslateService,
     public tiledeskAuthService: TiledeskAuthService,
-    public tiledeskService: TiledeskService
+    public tiledeskService: TiledeskService,
+    public webSocketJs: WebSocketJs,
   ) { }
 
   ngOnInit() {
@@ -45,16 +47,22 @@ export class ProjectItemComponent implements OnInit {
     this.translations();
     this.listenToPostMsgs();
     this.onInitWindowWidth();
+
   }
 
   listenToPostMsgs() {
     window.addEventListener("message", (event) => {
       // console.log("[PROJECT-ITEM] post message event ", event);
-    
+
       if (event && event.data && event.data) {
-        // console.log("[APP-COMP] message event data  ", event.data);
+        // console.log("[PROJECT-ITEM] message event data  ", event.data);
         if (event.data === 'hasChangedProject') {
+          this.unservedRequestCount = 0;
+          if (this.project) {
+            this.webSocketJs.unsubscribe('/' + this.project.id_project._id + '/requests');  
+          }
           this.getLastProjectStoredAndSubscToWSAvailabilityAndConversations();
+          
         }
       }
     })
@@ -72,26 +80,26 @@ export class ProjectItemComponent implements OnInit {
   @HostListener('window:resize', ['$event'])
   onResize(event: any) {
     this.newInnerWidth = event.target.innerWidth;
-    this.logger.log('[PROJECTS-X-PANEL] - INNER WIDTH ', this.newInnerWidth)
+    this.logger.log('[PROJECT-ITEM] - INNER WIDTH ', this.newInnerWidth)
 
-    if (this.newInnerWidth <= 150) {
-      this.window_width_is_60 = true;
-    } else {
-      this.window_width_is_60 = false;
-    }
+    // if (this.newInnerWidth <= 150) {
+    //   this.window_width_is_60 = true;
+    // } else {
+    //   this.window_width_is_60 = false;
+    // }
   }
 
   onInitWindowWidth(): any {
     const actualWidth = window.innerWidth;
-    this.logger.log('[PROJECTS-X-PANEL] - ACTUAL Width ', actualWidth);
+    this.logger.log('[PROJECT-ITEM] - ACTUAL Width ', actualWidth);
 
 
-    // if (actualWidth <= 60) {
-    if (actualWidth <= 150) {
-      this.window_width_is_60 = true;
-    } else {
-      this.window_width_is_60 = false;
-    }
+   
+    // if (actualWidth <= 150) {
+    //   this.window_width_is_60 = true;
+    // } else {
+    //   this.window_width_is_60 = false;
+    // }
   }
 
 
@@ -114,17 +122,29 @@ export class ProjectItemComponent implements OnInit {
   }
 
   getLastProjectStoredAndSubscToWSAvailabilityAndConversations() {
-    const stored_project = localStorage.getItem('last_project')
+    let stored_project = ''
+    try {
+      stored_project = localStorage.getItem('last_project')
+      this.logger.log('PROJECT-ITEM - THERE IS A STORED PROJECT ', stored_project)
+    } catch (err) {
+      this.logger.error('Get local storage LAST PROJECT ', err)
+    }
+
+
     if (!stored_project) {
+      this.logger.log('PROJECT-ITEM - THERE IS NOT STORED LAST PROJECT ', stored_project)
       const tiledeskToken = this.appStorageService.getItem('tiledeskToken');
       this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - tiledeskToken', tiledeskToken);
       this.tiledeskService.getProjects(tiledeskToken).subscribe(projects => {
         this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - RES', projects);
-        this.project = projects[0];
+
         this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - RES this.project', this.project);
-        
+
         localStorage.setItem('last_project', JSON.stringify(projects[0]))
-        this.doProjectSubscriptions(this.project)
+        if (projects[0]) {
+          this.project = projects[0];
+          this.doProjectSubscriptions(this.project)
+        }
 
       }, (error) => {
         this.logger.error('[INFO-CONTENT-COMP] - GET PROJECTS - ERROR  ', error);
@@ -137,16 +157,19 @@ export class ProjectItemComponent implements OnInit {
 
 
     if (stored_project) {
-      // this.logger.log('PROJECT-ITEM STORED LAST PROJECT ', stored_project)
-      this.project = JSON.parse(stored_project)
+      this.logger.log('PROJECT-ITEM - THERE IS STORED LAST PROJECT ', stored_project)
+      if (stored_project) {
+        this.project = JSON.parse(stored_project)
+      }
       this.doProjectSubscriptions(this.project)
       this.logger.log('[PROJECT-ITEM] - LAST PROJECT PARSED ', this.project)
     }
 
- 
+
   }
 
   doProjectSubscriptions(project) {
+    this.logger.log('[PROJECT-ITEM] doProjectSubscriptions project ', project)
     if (project) {
       const user_role = this.project.role
       this.logger.log('[PROJECT-ITEM] - user_role ', user_role)
@@ -208,7 +231,7 @@ export class ProjectItemComponent implements OnInit {
 
         if (this.project['id_project']._id === projectUser.id_project) {
           this.project['ws_projct_user_available'] = projectUser.user_available;
-          this.project['ws_projct_user_isBusy'] = projectUser['isBusy']
+          // this.project['ws_projct_user_isBusy'] = projectUser['isBusy']
         }
 
       }, (error) => {
@@ -221,29 +244,28 @@ export class ProjectItemComponent implements OnInit {
   }
 
   updateUnservedRequestCount() {
+    // console.log('[PROJECT-ITEM] updateUnservedRequestCount ')
     // this.requestsService.requestsList_bs.subscribe((requests) => {
     this.wsService.wsRequestsList$
-      .pipe(
-        takeUntil(this.unsubscribe$)
-      )
       .subscribe((requests) => {
-
+        // console.log('[PROJECT-ITEM] requests ', requests)
         if (requests) {
           let count = 0;
           requests.forEach(r => {
             // this.logger.log('NAVBAR - UPDATE-UNSERVED-REQUEST-COUNT request agents', r.agents)
             // *bug fix: when the user is an agent also for the unserved we have to consider if he is present in agents
-            if (r['status'] === 100 && this.ROLE_IS_AGENT === true) {
+            // && this.ROLE_IS_AGENT === true
+            if (r['status'] === 100 ) {
               if (this.hasmeInAgents(r['agents']) === true) {
                 count = count + 1;
               }
             }
-            if (r['status'] === 100 && this.ROLE_IS_AGENT === false) {
-              count = count + 1;
-            }
+            // if (r['status'] === 100 && this.ROLE_IS_AGENT === false) {
+            //   count = count + 1;
+            // }
           });
           this.unservedRequestCount = count;
-          this.logger.log('[PROJECT-ITEM] UNSERVED REQUEST COUNT - RES ', this.unservedRequestCount)
+          // console.log('[PROJECT-ITEM] UNSERVED REQUEST COUNT - RES ', this.unservedRequestCount)
         }
       }, error => {
         this.logger.error('[PROJECT-ITEM] UNSERVED REQUEST COUNT * error * ', error)
@@ -255,10 +277,10 @@ export class ProjectItemComponent implements OnInit {
   hasmeInAgents(agents) {
     if (agents) {
       for (let j = 0; j < agents.length; j++) {
-        this.logger.log('[PROJECT-ITEM] hasmeInAgents currentUserId  ', this.currentUserId)
-        this.logger.log('[PROJECT-ITEM] hasmeInAgents agent  ', agents[j].id_user)
+        // this.logger.log('[PROJECT-ITEM] hasmeInAgents currentUserId  ', this.currentUserId)
+        // this.logger.log('[PROJECT-ITEM] hasmeInAgents agent  ', agents[j].id_user)
         if (this.currentUserId === agents[j].id_user) {
-          this.logger.log('[PROJECT-ITEM] hasmeInAgents ')
+          // this.logger.log('[PROJECT-ITEM] hasmeInAgents ')
           return true
         }
       }

package/src/app/pages/authentication/login/login.page.html

@@ -3,6 +3,5 @@
   [translationMap] = translationMap
   [companyLogoBlackUrl]= companyLogoBlackUrl
   [companyName]= companyName
-  (eventSignInWithEmailAndPassword)="returnSignInWithEmailAndPassword($event)"
-  >
+  (eventSignInWithEmailAndPassword)="returnSignInWithEmailAndPassword($event)">
 </component-login>

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

@@ -179,6 +179,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.conversationWith = params.get('IDConv');
       this.conversationWithFullname = params.get('FullNameConv');
       this.conv_type = params.get('Convtype');
+
+      this.events.publish('supportconvid:haschanged', this.conversationWith);  
     });
 
   }

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

@@ -12,13 +12,8 @@
 
   <div id="scrollbar2">
     <ion-list>
-      <span
-        *ngIf="(conversations.length > 0 && conversationType ==='active') || (archivedConversations.length > 0  && conversationType ==='archived');then contentConversations else contentMessageWelcome">
-        here is ignored
-      </span>
 
-      <ng-template #contentConversations>
-        <!-- -------------------------------------------------------------------------- -->
+                   <!-- -------------------------------------------------------------------------- -->
         <!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
         <!-- -------------------------------------------------------------------------- -->
         <ion-item *ngIf="isOnline === false" style="padding-left:0px!important ;padding-right:0px!important" button="true" lines="none" class="ion-no-padding waiting-for-connection">
@@ -42,11 +37,21 @@
           <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
         </ion-item>
 
-        <ion-item class="ion-no-padding" style="padding-left:0px!important ;padding-right:0px!important" button="true"
+        <ion-item  *ngIf="supportMode && displayNewConvsItem" class="ion-no-padding open-iframe-item"
+        button="true"
           (click)="openUnsevedConversationIframe()">
           <div tabindex="0"></div>
           <app-project-item (projectIdEvent)="getLastProjectId($event)"></app-project-item>
         </ion-item>
+
+      <span
+        *ngIf="(conversations.length > 0 && conversationType ==='active') || (archivedConversations.length > 0  && conversationType ==='archived');then contentConversations else contentMessageWelcome">
+        here is ignored
+      </span>
+
+ 
+
+      <ng-template #contentConversations>
         <!-- ---------------------------------- -->
         <!-- ACTIVE CONVERSATION LIST -->
         <!-- ---------------------------------- -->