@chat21/chat21-ionic 3.0.60-rc8 → 3.0.61-rc11

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -54,6 +54,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Output() hasClickedOpenCannedResponses = new EventEmitter<boolean>();
   @Output() eventSendMessage = new EventEmitter<object>();
   @Output() onPresentModalScrollToBottom = new EventEmitter<boolean>();
+  @Input() disableTextarea: boolean;
 
   public conversationEnabled = false;
   public messageString: string;
@@ -69,6 +70,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public IS_SUPPORT_GROUP_CONVERSATION: boolean;
 
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
+  msg : string
 
   tooltipOptions = {
     'show-delay': 500,
@@ -123,6 +125,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       // this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
 
       this.TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
+   
     }
 
     if (this.conversationWith.startsWith("support-group")) {
@@ -130,7 +133,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } else {
       this.IS_SUPPORT_GROUP_CONVERSATION = false
     }
-
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges areVisibleCAR; ", this.areVisibleCAR);
@@ -269,6 +272,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
         let content = event.clipboardData.getData('text/plain');
         this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onPaste content ", content);
+        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onPaste this.messageString ", this.messageString);
+        this.msg = this.messageString
         setTimeout(() => {
           this.messageString = "";
         }, 100);
@@ -301,6 +306,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   onFileSelected(e: any) {
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - onFileSelected event', e);
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] - onFileSelected this.messageString ", this.messageString);
+    this.msg = this.messageString
+    setTimeout(() => {
+      this.messageString = "";
+    }, 100);
     this.presentModal(e);
 
   }
@@ -339,7 +349,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
     // this.logger.log('presentModal e.target.files.length', e.target.files.length);
 
-    const attributes = { files: dataFiles, enableBackdropDismiss: false };
+    const attributes = { files: dataFiles, enableBackdropDismiss: false , msg: this.msg};
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] attributes', attributes);
     const modal: HTMLIonModalElement =
       await this.modalController.create({

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

@@ -1,24 +1,38 @@
+<ion-toolbar style="height:60px" [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
 
-<ion-toolbar>
-  
-  <ion-buttons slot="start">
+  <ion-buttons *ngIf="IS_ON_MOBILE_DEVICE === true || supportMode === false" slot="start" style="height:60px">
     <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">
+    <!-- <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-button ion-button fill="clear" (click)="presentCreateTicketModal()"
+      tooltip="{{translationMap?.get('CreateTicket')}}" [options]="tooltipOptions" placement="bottom">
+      <ion-icon slot="icon-only" name="ticket-outline"></ion-icon>
+    </ion-button>
+
+    <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()" 
+      tooltip="{{translationMap?.get('ViewArchivedConversations')}}" [options]="tooltipOptions" placement="bottom">
+      <ion-icon slot="icon-only" name="file-tray-full-outline"></ion-icon>
+      <!-- <ion-icon name="file-tray-stacked-outline"></ion-icon> -->
+      <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
+    </ion-button>
+
+    <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
+    tooltip="{{translationMap?.get('ViewContactsList')}}" [options]="tooltipOptions" placement="bottom">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
+      <!-- <ion-icon slot="icon-only" name="people-outline"></ion-icon> -->
+
     </ion-button>
 
-    <!-- <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
+    <!--   <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
       <span class="material-icons">history</span>
     </button>
 

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

@@ -23,4 +23,8 @@ ion-title img {
 
 .header-logo {
     margin-top: 5px;
+}
+
+.bottom-border-on-mobile {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

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

@@ -1,18 +1,77 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+import { EventsService } from 'src/app/services/events-service'
+import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service'
 @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();
-
+  @Input() numberOpenConv: number
+  @Input() supportMode: boolean
+  @Input() archived_btn: boolean
+  @Input() writeto_btn: boolean
+  @Output() openContactsDirectory = new EventEmitter()
+  @Output() openProfileInfo = new EventEmitter()
+  IS_ON_MOBILE_DEVICE: boolean
+  createTicketModal = null
+  public translationMap: Map<string, string>;
+  tooltipOptions = {
+    'show-delay': 0,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 0
+  };
   constructor(
-  ) { }
+    public events: EventsService,
+    public modalController: ModalController,
+    private translateService: CustomTranslateService,
+  ) {
+    this.isOnMobileDevice();
+    this.translations();
+    // this.listenToCloseCreateTicketModal() // published from create ticket page
+  }
+
+  public translations() {
+    const keys = [
+      'CreateTicket',
+      'ViewArchivedConversations',
+      'ViewContactsList'
+    ];
+    this.translationMap = this.translateService.translateLanguage(keys);
+  }
+
+  // listenToCloseCreateTicketModal() {
+  //   this.events.subscribe('closeModalCreateTicket', (bool) => {
+  //     console.log('[HEADER-CONV] closeModalCreateTicket ', bool)
+  //     if (bool === true) {
+  //       this.closeCreateTicketModal()
+
+  //     }
+  //   })
+  // }
+
+  // closeCreateTicketModal() {
+  //   if (this.createTicketModal) {
+  //     this.createTicketModal.dismiss().then(() => {
+  //       this.createTicketModal = null;
+  //     });
+  //   }
+  // }
+
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true
+    }
+    // console.log('[DDP-HEADER] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE
+  }
 
   ngOnInit() {
     // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
@@ -21,13 +80,48 @@ export class DdpHeaderComponent implements OnInit {
   // START @Output() //
   /** */
   onOpenProfileInfo(e: any) {
-    this.openProfileInfo.emit(e);
+    this.openProfileInfo.emit(e)
   }
 
   /** */
   onOpenContactsDirectory(e: any) {
-    this.openContactsDirectory.emit(e);
+    this.openContactsDirectory.emit(e)
   }
   // END @Output() //
 
+  onClickArchivedConversation() {
+    this.events.publish('profileInfoButtonClick:changed', 'displayArchived')
+  }
+
+  // PRESENT MODAL CREATE TICKET
+  // async presentCreateTicketModal(): Promise<any>{
+
+  //   // const attributes = {  enableBackdropDismiss: false };
+  //   const modal: HTMLIonModalElement =
+  //     await this.modalController.create({
+  //       component: CreateTicketPage,
+  //       // componentProps: attributes,
+  //       swipeToClose: false,
+  //       backdropDismiss: false
+  //     });
+  //   modal.onDidDismiss().then((detail: any) => {
+  //     console.log('[DDP-HEADER] ', detail.data);
+  //   });
+  //   return await modal.present();
+  // }
+
+  async presentCreateTicketModal() {
+    // const attributes = {  enableBackdropDismiss: false };
+    const modal = await this.modalController.create({
+      component: CreateTicketPage,
+      // componentProps: attributes,
+      swipeToClose: false,
+      backdropDismiss: false,
+    })
+    modal.onDidDismiss().then((detail: any) => {
+      // console.log('[DDP-HEADER] ', detail.data)
+    })
+    modal.present()
+    this.createTicketModal = modal
+  }
 }

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

@@ -23,7 +23,7 @@
                   </g>
                 </svg>
               </div>
-              <div class="unassigned-notifications-badge">
+              <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
                 <!-- || currentUserRequestCount > 0  -->
                 <!-- <span *ngIf="unservedRequestCount > 0 "> -->
                 <!-- + currentUserRequestCount -->
@@ -48,7 +48,7 @@
 
 
             <div class="flex-child-right">
-              <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName"
+              <div class="project-name-project-for-panel" [ngClass]="{'project-name-project-for-panel-on-desktop': IS_ON_MOBILE_DEVICE === false}" [tooltip]="conversationsInQueueOnProjectName"
                 [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
                 <div class="project---name"> {{ project?.id_project?.name }} </div>
               </div>
@@ -87,7 +87,9 @@
                   [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
                   {{translationMap?.get('Unavailable')}}
                 </span>
-                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true">
+
+                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('Busy')}}"
+                [options]="tooltipOptions" placement="top" >
                   <!-- <span class="material-icons project-item--isBusy-icon">
                       access_time
                     </span> -->
@@ -102,14 +104,14 @@
                     </g>
                   </svg>
                 </div>
-                <span *ngIf="project?.ws_projct_user_isBusy === true"
+                <!-- <span *ngIf="project?.ws_projct_user_isBusy === true"
                   class="project-item--isBusy-busy-text text-pulse-animation">
                   {{translationMap?.get('Busy')}}
-                </span>
+                </span> -->
               </div>
             </div>
 
-            <div class="flex-child-view-all-convs">
+            <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
               <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
                 [options]="tooltipOptions" placement="top" content-type="template">
 
@@ -153,7 +155,6 @@
               </div>
               <ng-template #viewAllConvs>
                 <span>
-
                   {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
               </ng-template>
             </div>

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

@@ -20,10 +20,7 @@
 // .main-content-project-for-panel:hover {
 //     background-color: rgb(244, 243, 244);
 // }
-.container-project-for-panel {
-    padding: 0px !important;
-    width: 296px;
-}
+
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .main-content-projects-for-panel::-webkit-scrollbar {
@@ -218,24 +215,38 @@
     }
 }
 
+.container-project-for-panel {
+    padding: 0px !important;
+    width: 296px;
+}
+
 .flex-container-project-for-panel {
     display: flex;
     width: 100%;
     justify-content: center;
     align-items: center;
-    position: relative;
+    // position: relative;
     // cursor: pointer;
     -moz-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
     -webkit-transition: all 0.2s ease-in;
     transition: all 0.2s ease-in;
-    height: 60px;
+    height: 64px;
 }
 
 .flex-container:hover {
     background-color: rgba(200, 200, 200, 0.2);
 }
 
+.flex-child-right {
+    flex: 1;
+    padding: 18px 0px;
+    // width: 227px;
+    // width: 207px;
+    height: 100%;
+}
+
+
 .flex-child-left {
     // flex: 0 0 20%;
     width: 60px;
@@ -245,14 +256,6 @@
 }
 // border: 2px solid yellow;
 
-.flex-child-right {
-    flex: 1;
-    padding: 18px 0px;
-    // width: 227px;
-    width: 207px;
-    height: 100%;
-}
-
 .flex-child-view-all-convs {
     width: 40px;
     text-align: center;
@@ -262,6 +265,18 @@
     margin-right: 10px;
 }
 
+@media (max-width: 768px) {
+    .container-project-for-panel {
+        width: 100%;
+    }
+    .flex-child-view-all-convs {
+        margin-right: 20px;
+    }
+}
+
+
+
+
 .status--icon-project-for-panel {
     width: 13px;
     height: 13px;
@@ -296,7 +311,7 @@
     color: #1e2129;
     font-weight: 400;
     margin-left: 10px;
-    width: 185px !important;
+    width: 185px ;
     // width: 220px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
@@ -308,6 +323,11 @@
     cursor: pointer;
 }
 
+
+.project-name-project-for-panel-on-desktop {
+    width: 217px
+}
+
 // .project-name-project-for-panel:hover span {
 //     color: rgba(0, 0, 0, 0.35);
 //     // display: none;

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

@@ -17,6 +17,8 @@ import { AppConfigProvider } from 'src/app/services/app-config';
   styleUrls: ['./project-item.component.scss'],
 })
 export class ProjectItemComponent implements OnInit {
+  private logger: LoggerService = LoggerInstance.getInstance();
+
   @Output() projectIdEvent = new EventEmitter<string>()
   @Output() openUnsevedConvsEvent = new EventEmitter<any>()
 
@@ -29,7 +31,7 @@ export class ProjectItemComponent implements OnInit {
   ROLE_IS_AGENT: boolean;
   currentUserId: string;
   public translationMap: Map<string, string>;
-  private logger: LoggerService = LoggerInstance.getInstance();
+ 
   window_width_is_60: boolean;
   newInnerWidth: any;
   avaialble_status_for_tooltip: string;
@@ -42,7 +44,7 @@ export class ProjectItemComponent implements OnInit {
     'hideDelayAfterClick': 3000,
     'hide-delay': 200
   };
-
+  IS_ON_MOBILE_DEVICE: boolean;
   constructor(
     public wsService: WebsocketService,
     public appStorageService: AppStorageService,
@@ -59,9 +61,20 @@ export class ProjectItemComponent implements OnInit {
     this.translations();
     this.listenToPostMsgs();
     this.onInitWindowWidth();
+
+    this.isOnMobileDevice()
     // console.log('[PROJECT-ITEM] - on INIT')
   }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    // console.log('[PROJECT-ITEM] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
+
   openUnservedConvs() {
     this.openUnsevedConvsEvent.emit('notificationsorprjctbtn')
   }