@chat21/chat21-ionic 3.0.60-rc2 → 3.0.60

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

@@ -18,6 +18,7 @@ import { AppConfigProvider } from 'src/app/services/app-config';
 })
 export class ProjectItemComponent implements OnInit {
   @Output() projectIdEvent = new EventEmitter<string>()
+  @Output() openUnsevedConvsEvent = new EventEmitter<any>()
 
   private unsubscribe$: Subject<any> = new Subject<any>();
   project: any;
@@ -31,6 +32,16 @@ export class ProjectItemComponent implements OnInit {
   private logger: LoggerService = LoggerInstance.getInstance();
   window_width_is_60: boolean;
   newInnerWidth: any;
+  avaialble_status_for_tooltip: string;
+  tooltipOptions = {
+    'show-delay': 500,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
 
   constructor(
     public wsService: WebsocketService,
@@ -51,15 +62,22 @@ export class ProjectItemComponent implements OnInit {
     // console.log('[PROJECT-ITEM] - on INIT')
   }
 
+  openUnservedConvs() {
+    this.openUnsevedConvsEvent.emit('notificationsorprjctbtn')
+  }
+  openUnservedConvsAndGoToProjectList() {
+    this.openUnsevedConvsEvent.emit('pinbtn')
+  }
+
   getStoredTokenAndConnectWS() {
     this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
     this.logger.log('[PROJECT-ITEM] - STORED TILEDEK TOKEN ', this.tiledeskToken)
-    this.connetWebsocket( this.tiledeskToken) 
+    this.connetWebsocket(this.tiledeskToken)
   }
 
   connetWebsocket(tiledeskToken) {
-   
-    this.logger.log('[WEBSOCKET-JS] connetWebsocket called in [PROJECT-ITEM] tiledeskToken ',tiledeskToken)
+
+    this.logger.log('[WEBSOCKET-JS] connetWebsocket called in [PROJECT-ITEM] tiledeskToken ', tiledeskToken)
     const appconfig = this.appConfigProvider.getConfig();
     this.logger.log('[WEBSOCKET-JS] connetWebsocket called in [PROJECT-ITEM] wsUrl ', appconfig.wsUrl)
     const WS_URL = appconfig.wsUrl + '?token=' + tiledeskToken
@@ -78,25 +96,33 @@ export class ProjectItemComponent implements OnInit {
     window.addEventListener("message", (event) => {
       // console.log("[PROJECT-ITEM] post message event ", event);
 
-      if (event && event.data && event.data) {
+      if (event && 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.webSocketJs.unsubscribe('/' + this.project.id_project._id + '/requests');
           }
           this.getLastProjectStoredAndSubscToWSAvailabilityAndConversations();
-          
         }
       }
     })
   }
 
+
   public translations() {
     const keys = [
       'Available',
       'Unavailable',
-      'Busy'
+      'Busy',
+      'VIEW_ALL_CONVERSATIONS',
+      'CONVERSATIONS_IN_QUEUE',
+      'CONVERSATION_IN_QUEUE',
+      'NO_CONVERSATION_IN_QUEUE',
+      'PINNED_PROJECT',
+      'CHANGE_PINNED_PROJECT',
+      "CHANGE_TO_YOUR_STATUS_TO_AVAILABLE",
+      "CHANGE_TO_YOUR_STATUS_TO_UNAVAILABLE"
     ];
     this.translationMap = this.translateService.translateLanguage(keys);
   }
@@ -117,19 +143,8 @@ export class ProjectItemComponent implements OnInit {
     const actualWidth = window.innerWidth;
     this.logger.log('[PROJECT-ITEM] - ACTUAL Width ', actualWidth);
 
-
-   
-    // if (actualWidth <= 150) {
-    //   this.window_width_is_60 = true;
-    // } else {
-    //   this.window_width_is_60 = false;
-    // }
   }
 
-
-
- 
-
   getStoredCurrenUser() {
     const storedCurrentUser = this.appStorageService.getItem('currentUser');
     this.logger.log('[PROJECT-ITEM] - STORED CURRENT USER ', storedCurrentUser)
@@ -195,7 +210,6 @@ export class ProjectItemComponent implements OnInit {
       this.logger.log('[PROJECT-ITEM] - user_role ', user_role)
       this.projectIdEvent.emit(project.id_project._id)
 
-
       if (user_role === 'agent') {
         this.ROLE_IS_AGENT = true;
 
@@ -226,6 +240,13 @@ export class ProjectItemComponent implements OnInit {
         if (project.id_project._id === projectUser['id_project']) {
           project['ws_projct_user_available'] = projectUser['user_available'];
           project['ws_projct_user_isBusy'] = projectUser['isBusy']
+          if (this.translationMap) {
+            if (projectUser['user_available'] === true) {
+              this.avaialble_status_for_tooltip = this.translationMap.get('CHANGE_TO_YOUR_STATUS_TO_UNAVAILABLE')
+            } else {
+              this.avaialble_status_for_tooltip = this.translationMap.get('CHANGE_TO_YOUR_STATUS_TO_AVAILABLE')
+            }
+          }
         }
 
       }, (error) => {
@@ -275,7 +296,7 @@ export class ProjectItemComponent implements OnInit {
             // 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
             // && this.ROLE_IS_AGENT === true
-            if (r['status'] === 100 ) {
+            if (r['status'] === 100) {
               if (this.hasmeInAgents(r['agents']) === true) {
                 count = count + 1;
               }

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

@@ -40,6 +40,7 @@ import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
     CommonModule,
     FormsModule,
     IonicModule,
+    TooltipModule,
     ConversationDetailPageRoutingModule,
     TranslateModule.forChild({
       loader: {
@@ -56,7 +57,7 @@ import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
   declarations: [
     ConversationDetailPage,
     HeaderConversationDetailComponent,
-    // MessageTextAreaComponent,
+    MessageTextAreaComponent,
     // BubbleDayMessageComponent,
     // BubbleSystemMessageComponent,
     // BubbleMyMessageComponent,

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

@@ -9,12 +9,21 @@
 
     <ion-grid style="height: 100%;">
       <ion-row class="ion-justify-content-center ion-align-items-center" style="height: 100%; flex-direction: column">
-        <span *ngIf="isOnline === true"
-          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">{{'PleaseSelectChatToStartMessaging'
-          | translate }}</span>
+        <span *ngIf="isOnline === true  && !showSpinner" style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">
+          <span *ngIf="conversation_count > 0 ">
+            {{'PleaseSelectChatToStartMessaging' | translate }}
+          </span>
+          <span *ngIf="conversation_count === 0" style="line-height: 1.2;color: #4b5258;
+        font-weight: 500;">
+            {{'ALL_CONVS_SERVED' | translate}}
 
-          <span *ngIf="isOnline === false"
-          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">Internet is slow or not working</span>
+          </span>
+
+        </span>
+
+        <span *ngIf="isOnline === false"
+          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">Internet is slow or not
+          working</span>
       </ion-row>
     </ion-grid>
   </ion-content>
@@ -22,11 +31,8 @@
 
 <ng-template #showConversation>
 
-  <app-header-conversation-detail 
-    [isMobile]="isMobile" 
-    [idLoggedUser]="loggedUser.uid"
-    [conversationAvatar]="conversationAvatar" 
-    [translationMap]="translationMap"
+  <app-header-conversation-detail [isMobile]="isMobile" [idLoggedUser]="loggedUser.uid"
+    [conversationAvatar]="conversationAvatar" [translationMap]="translationMap"
     (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)"
     [isOpenInfoConversation]="isOpenInfoConversation">
   </app-header-conversation-detail>
@@ -48,7 +54,7 @@
               <!-- <div class="messageFirst">
                 {{ 'LABEL_NO_MSG_HERE' | translate }}
               </div> -->
-              
+
               <ion-grid style="height: 100%" [ngClass]="{'is-in-drop-event': isHovering === true}" (drop)="drop($event)"
                 (dragover)="allowDrop($event)" (dragleave)="drag($event)">
                 <ion-row class="ion-justify-content-center ion-align-items-center" *ngIf="isHovering === false"
@@ -85,15 +91,10 @@
             </ng-template>
 
             <ng-template #content_messages>
-              <ion-content #ionContentChatArea 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">
+              <ion-content #ionContentChatArea 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">
 
                 <!-- ----------------------------------------------------------- -->
                 <!-- DROPZONE -->
@@ -111,16 +112,12 @@
 
 
                 <ion-conversation-detail *ngIf="isHovering === false" #conversationContentDetail
-                  [channelType]="channelType" 
-                  [messages]="messages" 
-                  [senderId]="loggedUser.uid"
-                  [baseLocation]="window?.location?.origin"
-                  [stylesMap]="styleMap"
+                  [channelType]="channelType" [messages]="messages" [senderId]="loggedUser.uid"
+                  [baseLocation]="window?.location?.origin" [stylesMap]="styleMap"
                   (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
                   (onAfterMessageRender)="returnOnAfterMessageRender($event)"
                   (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)"
-                  (onScrollContent)="returnOnScrollContent($event)" 
-                  (onMenuOptionShow)="returnOnMenuOption($event)"
+                  (onScrollContent)="returnOnScrollContent($event)" (onMenuOptionShow)="returnOnMenuOption($event)"
                   (onImageRendered)="onImageRenderedFN($event)"
                   (onAddUploadingBubble)="addUploadingBubbleEvent($event)">
                 </ion-conversation-detail>
@@ -139,7 +136,7 @@
             <!-- ----------------------------------------------------------- -->
             <!-- Canned responses -->
             <!-- ----------------------------------------------------------- -->
-         
+
             <div id="canned" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
               <ion-list class="canned-list">
                 <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
@@ -149,22 +146,22 @@
                 </ion-item>
               </ion-list>
             </div>
+
+
+
+
             <!-- (eventReplaceMessageWithCanned)="replaceTagInMessage($event)" -->
             <!-- [tagsCannedFilter]="tagsCannedFilter" -->
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
             <app-message-text-area
               *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
-             
-              [loggedUser]="loggedUser" 
-              [conversationWith]="conversationWith" 
-              [tagsCannedFilter]="tagsCannedFilter"
-              (eventChangeTextArea)="returnChangeTextArea($event)" 
+              [tagsCannedCount]="tagsCannedCount" [areVisibleCAR]="areVisibleCAR" [loggedUser]="loggedUser"
+              [conversationWith]="conversationWith" [tagsCannedFilter]="tagsCannedFilter"
+              (eventChangeTextArea)="returnChangeTextArea($event)"
               (hasClickedOpenCannedResponses)="hasClickedOpenCannedResponses($event)"
-              (eventSendMessage)="returnSendMessage($event)"
-              [translationMap]="translationMap" 
+              (eventSendMessage)="returnSendMessage($event)" [translationMap]="translationMap"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
-              [isOpenInfoConversation]="isOpenInfoConversation" 
-              [dropEvent]="dropEvent"  
+              [isOpenInfoConversation]="isOpenInfoConversation" [dropEvent]="dropEvent"
               (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)">
             </app-message-text-area>
             <!-- [events]="eventsReplaceTexareaText.asObservable()" -->
@@ -173,12 +170,8 @@
         </ion-col>
 
         <ion-col id="chat21-info-conversation" [class.mobile]="isMobile" [class.open]="openInfoConversation">
-          <app-info-content 
-            [openInfoConversation]="openInfoConversation" 
-            [translationMap]="translationMap"
-            [loggedUser]="loggedUser" 
-            [tenant]="tenant" 
-            [groupDetail]="groupDetail">
+          <app-info-content [openInfoConversation]="openInfoConversation" [translationMap]="translationMap"
+            [loggedUser]="loggedUser" [tenant]="tenant" [groupDetail]="groupDetail">
           </app-info-content>
         </ion-col>