@chat21/chat21-ionic 3.0.60-rc9 → 3.0.61-rc4

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

@@ -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

@@ -311,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;
@@ -323,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')
   }

package/src/app/components/sidebar/sidebar.component.html

@@ -0,0 +1,210 @@
+<!-- *ngIf="project"  -->
+<div class="logo" style="background-color:#1e2129!important; padding-bottom: 5px;min-height: 60px;    width: 60px;">
+  <a class="logo-img-wpr" [ngClass]="{'small-sidebar-logo-img-wpr' : SIDEBAR_IS_SMALL === true }">
+    <div class="logo-img" (click)="goToHome()" style="cursor: pointer;">
+      <img class="small-sidebar__logo" src="assets/tiledesk-solo-logo.png" />
+    </div>
+  </a>
+</div>
+
+<div class="sidebar-wrapper">
+  <!-- // NK start NEW: AVATAR ON THE SIDEBAR  -->
+  <div class="user tiledesk-nav-user" [ngClass]="{'small-sidebar-tiledesk-nav-user' : SIDEBAR_IS_SMALL === true }"
+    fxlayout="column" style="flex-direction: column; box-sizing: border-box; display: flex;">
+    <div class="h3 username" style="font-size: 16px;font-weight: 400;margin-top: 15px; margin-bottom: 5px;"
+      [ngClass]="{'small-sidebar-userfullname' : SIDEBAR_IS_SMALL === true }">
+
+      {{ user?.firstname }} {{ user?.lastname }}
+    </div>
+    <div class="h5 email hint-text mt-8"
+      style="color: rgba(255,255,255,.5)!important;font-size: 13px;margin-top: 0px!important;font-weight: 400;"
+      [ngClass]="{'small-sidebar-email' : SIDEBAR_IS_SMALL === true }">
+      {{ user?.email }}
+    </div>
+
+
+    <div id="sidebaravatar-img-wpr" class="avatar-container tiledesk-nav-avatar" (click)="openUserDetailSidePanel()"
+      style="cursor: pointer;" [ngClass]="{'small-sidebar-avatar' : SIDEBAR_IS_SMALL === true }">
+      
+      <img id="sidebaravatar-img" class="sidebar-avatar" [src]="photo_profile_URL" onerror="this.src='assets/images/no_image_user.png'" />
+
+
+      <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ tooltip_text_for_availability_status}}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" -->
+      <!-- (click)="changeAvailabilityState(IS_AVAILABLE = !IS_AVAILABLE)"  -->
+      <div id="sidebaravatar-status-icon" class="status-icon"
+        [ngClass]="{'is-user-online' : IS_AVAILABLE === true, 'is-user-offline' : IS_AVAILABLE === false, 'small-sidebar-status-icon' : SIDEBAR_IS_SMALL === true  }">
+      </div>
+
+    </div>
+    <!-- CAMERA ICONS OVER THE AVATAR -->
+    <!--  [ngClass]="{'hover-effect' : isOverAvar}"  -->
+    <!-- <i class="material-icons is-over-camera"
+      [ngClass]="{'small-sidebar-camera-icon' : SIDEBAR_IS_SMALL === true, 'is-over-camera-decrease-top':IS_BUSY === true }">
+      camera_alt
+    </i> -->
+
+
+    <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ 'Busy' | translate }}" #tooltip="matTooltip"  matTooltipPosition='right' matTooltipHideDelay="100" -->
+    <div id="sidebaravatar-isbusy-icon-wpr" class="sidebar--isBusy-icon-wpr" *ngIf="IS_BUSY === true" style="cursor:pointer">
+      <span id="sidebaravatar-isbusy-icon" class="material-icons sidebar-is-busy-icon">
+        access_time
+      </span>
+    </div>
+  </div>
+
+  <div class="nav-container">
+    <!-- [ngClass]="{'is-desktop-menu' : IS_MOBILE_MENU === false, 'is-mobile-menu' : IS_MOBILE_MENU === true  }" -->
+    <ul style="padding-bottom: 65px;" class="nav">
+
+      <!-- ------------------------------------------- -->
+      <!-- CHAT  -->
+      <!-- ------------------------------------------- -->
+      <li class="item-active" style="cursor: unset;" matTooltipClass="custom-mat-tooltip" matTooltip="Chat"
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">chat</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- HOME  -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToHome()" matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
+        matTooltipHideDelay="100" matTooltipClass="custom-mat-tooltip">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">
+            home
+          </i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- REQUESTS (VISITORS)  -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToConversations()"
+         matTooltipClass="custom-mat-tooltip" matTooltip="{{ conversations_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">forum</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- CONTACTS (LEADS)  -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToContacts()"
+      matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}" #tooltip="matTooltip" matTooltipPosition='right'  matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">contacts</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- APPS  -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="isVisibleAPP && USER_ROLE !== 'agent'">
+        <li (click)="goToAppStore()"
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}" #tooltip="matTooltip" matTooltipPosition='right'  matTooltipHideDelay="100" >
+          <a class="customAncor">
+            <i class="material-icons sidebar-icons">apps</i>
+          </a>
+        </li>
+      </ng-container>
+
+      <!-- ------------------------------------------- -->
+      <!-- ANALYTICS -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="isVisibleANA && USER_ROLE !== 'agent'">
+        <li (click)="goToAnalytics()" 
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a class="customAncor">
+            <i class="material-icons sidebar-icons">trending_up</i>
+          </a>
+        </li>
+      </ng-container>
+
+      <!-- ------------------------------------------- -->
+      <!-- ACTIVITIES -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="isVisibleACT">
+        <li *ngIf="USER_ROLE !== 'agent'" (click)="goToActivities()" 
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a class="customAncor">
+            <i class="material-icons sidebar-icons">assignment</i>
+          </a>
+        </li>
+      </ng-container>
+
+
+      <!-- ------------------------------------------- -->
+      <!-- REQUESTS HISTORY -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToHistory()" 
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"  #tooltip="matTooltip"   matTooltipPosition='right' matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">history</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- SETTINGS -->
+      <!-- ------------------------------------------- -->
+      <li *ngIf="USER_ROLE !== 'agent'" (click)="goToSettings_CannedResponses()"
+      matTooltipClass="custom-mat-tooltip" matTooltip="{{ settings_lbl }}"  #tooltip="matTooltip"   matTooltipPosition='right' matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">settings</i>
+        </a>
+      </li>
+
+
+      <!-- [_prjct_profile_name]="_prjct_profile_name" [plan_subscription_is_active]="plan_subscription_is_active"
+  [plan_name]="plan_name"
+  [plan_type]="plan_type"
+  [isVisiblePAY]="isVisiblePAY"
+  [prjct_name]="prjct_name" -->
+  <!-- HAS_CLICKED_OPEN_USER_DETAIL {{ HAS_CLICKED_OPEN_USER_DETAIL }} -->
+  <!-- [HAS_CLICKED_OPEN_USER_DETAIL]='HAS_CLICKED_OPEN_USER_DETAIL' -->
+  <!-- tabindex="-1"  style="z-index: 20001;"  -->
+
+
+  <!-- <app-sidebar-user-details    
+  (onCloseUserDetailsSidebar)='onCloseUserDetailsSidebar($event)'>
+</app-sidebar-user-details> -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    </ul>
+  </div>
+</div>

package/src/app/components/sidebar/sidebar.component.scss

@@ -0,0 +1,11 @@
+::ng-deep .custom-mat-tooltip {
+  background-color: #2d323e;
+  font-size: 12px;
+}
+
+.sidebar-is-busy-icon {
+  font-size: 14px;
+  color: #feb92c;
+  background-color: #2d323e;
+  border-radius: 50%;
+}

package/src/app/components/sidebar/sidebar.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});