@chat21/chat21-ionic 3.0.78 → 3.0.79-rc.2

package/src/app/components/conversation-info/info-group/info-group.component.scss

@@ -7,74 +7,114 @@
         -webkit-box-shadow: none;
         box-shadow: none;
         border-bottom: 1px solid rgba(169, 169, 169, 0.2);
-    }
 
-    .image-profile {
-        padding: 0 0 0 0;
-        width: 100px;
-        height: 100px;
-        margin: auto;
-        line-height: 100px;
-        font-size: 40px;
-        color: white;
-    }
+        .image-profile {
+            padding: 0 0 0 0;
+            width: 100px;
+            height: 100px;
+            margin: auto;
+            line-height: 100px;
+            font-size: 40px;
+            color: white;
+        }
 
-    .member-profile {
-        padding: 0 0 0 0;
-        width: 55px;
-        height: 55px;
-        margin: auto;
-        line-height: 57px;
-        font-size: 25px;
-        color: white;
-        position: relative;
+        .info-profile {
+            padding: 10px 0 0 0;
+            text-align: center;
+            .name {
+                -webkit-font-smoothing: antialiased;
+                text-rendering: optimizeLegibility;
+                text-size-adjust: none;
+                user-select: text;
+                font-family: "Roboto", "Helvetica Neue", sans-serif;
+                -webkit-box-direction: normal;
+                color: #333333;
+                font-weight: 500;
+                font-size: 17px;
+                box-sizing: border-box;
+                -webkit-tap-highlight-color: transparent;
+                display: block;
+                font-size: large;
+                font-weight: bold;
+            }
+        }
     }
 
-    .user-online {
-        height: 11px;
-        width: 11px;
-        border-radius: 50%;
-        position: absolute;
-        top: 44px;
-        left: 40px;
-        border: 0.5px solid #fff;
-    }
 
-    .user-presence {
-        position: absolute;
-        top: 88px;
-        height: 12px;
-        left: calc(50% + 30px);
-        width: 100px;
-    }
+    #members-list{
+        ion-item{
+            display: flex;
+            height: 60px;
+
+            .status-icon-container{
+                position: absolute;
+                top: 35px;
+                left: 45px;
+                background-color: white;
+                height: 17px;
+                width: 17px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+        
+                &.mobile{
+                    top: 30px;
+                    left: 50px;
+                }
+            
+                svg{
+                    fill: #f44336;
+            
+                    &.online{
+                        fill: #4caf50;
+                    }
+                }
+            }
 
-    .info-profile {
-        padding: 10px 0 0 0;
-        text-align: center;
-        .name {
-            -webkit-font-smoothing: antialiased;
-            text-rendering: optimizeLegibility;
-            text-size-adjust: none;
-            user-select: text;
-            font-family: "Roboto", "Helvetica Neue", sans-serif;
-            -webkit-box-direction: normal;
-            color: #333333;
-            font-weight: 500;
-            font-size: 17px;
-            box-sizing: border-box;
-            -webkit-tap-highlight-color: transparent;
-            display: block;
-            font-size: large;
-            font-weight: bold;
         }
     }
 
-    .info-group-member-email {
-        font-size: 13px;
-        margin-top: 2px;
-        white-space: nowrap;
-        width: 205px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+    
+
+    // .member-profile {
+    //     padding: 0 0 0 0;
+    //     width: 55px;
+    //     height: 55px;
+    //     margin: auto;
+    //     line-height: 57px;
+    //     font-size: 25px;
+    //     color: white;
+    //     position: relative;
+    // }
+
+    // .user-online {
+    //     height: 11px;
+    //     width: 11px;
+    //     border-radius: 50%;
+    //     position: absolute;
+    //     top: 44px;
+    //     left: 40px;
+    //     border: 0.5px solid #fff;
+    // }
+    
+
+    // .user-presence {
+    //     position: absolute;
+    //     top: 88px;
+    //     height: 12px;
+    //     left: calc(50% + 30px);
+    //     width: 100px;
+    // }
+
+    
+
+    // .info-group-member-email {
+    //     font-size: 13px;
+    //     margin-top: 2px;
+    //     white-space: nowrap;
+    //     width: 205px;
+    //     overflow: hidden;
+    //     text-overflow: ellipsis;
+    // }
 }

package/src/app/components/conversation-info/info-group/info-group.component.ts

@@ -23,6 +23,7 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
   // objectKeys = Object.keys;
 
   @Input() groupDetail: any;
+  @Input() isMobile: boolean;
   // @Input() member_array: any;
   public displaySkeletonScreen: boolean = true;
   public member_array: any

package/src/app/components/{ddp-header/ddp-header.component.html → conversations-list/header-conversations-list/header-conversations-list.component.html}

@@ -1,6 +1,6 @@
-<ion-toolbar style="height:60px" [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
+<ion-toolbar [class.mobile]="isMobile">
 
-  <ion-buttons *ngIf="IS_ON_MOBILE_DEVICE === true || supportMode === false" slot="start" style="height:60px">
+  <ion-buttons *ngIf="isMobile || 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>

package/src/app/components/{ddp-header/ddp-header.component.scss → conversations-list/header-conversations-list/header-conversations-list.component.scss}

@@ -1,3 +1,19 @@
+
+ion-toolbar {
+    height: var(--header-height);   
+    &:not(.mobile){
+        --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    ion-button{
+        --color: var(--basic-blue);
+    }
+}
+
 ion-title img {
     height: 30px;
 }
@@ -23,8 +39,4 @@ 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.spec.ts → conversations-list/header-conversations-list/header-conversations-list.component.spec.ts}

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { DdpHeaderComponent } from './ddp-header.component';
+import { HeaderConversationsList } from './header-conversations-list.component';
 
-describe('DdpHeaderComponent', () => {
-  let component: DdpHeaderComponent;
-  let fixture: ComponentFixture<DdpHeaderComponent>;
+describe('ConversationsListHeader', () => {
+  let component: HeaderConversationsList;
+  let fixture: ComponentFixture<HeaderConversationsList>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DdpHeaderComponent ],
+      declarations: [ HeaderConversationsList ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(DdpHeaderComponent);
+    fixture = TestBed.createComponent(HeaderConversationsList);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

package/src/app/components/{ddp-header/ddp-header.component.ts → conversations-list/header-conversations-list/header-conversations-list.component.ts}

@@ -4,22 +4,22 @@ 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'],
+  selector: 'header-conversations-list',
+  templateUrl: './header-conversations-list.component.html',
+  styleUrls: ['./header-conversations-list.component.scss'],
 })
-export class DdpHeaderComponent implements OnInit {
+export class HeaderConversationsList implements OnInit {
   
   @Input() numberOpenConv: number
   @Input() supportMode: boolean
   @Input() archived_btn: boolean
   @Input() writeto_btn: boolean
-  @Input() sound_btn: string
+  @Input() sound_btn: string;
+  @Input() isMobile: boolean;
   @Output() onSoundChange = new EventEmitter<string>()
   @Output() openContactsDirectory = new EventEmitter()
   @Output() openProfileInfo = new EventEmitter()
 
-  IS_ON_MOBILE_DEVICE: boolean
   createTicketModal = null
   public translationMap: Map<string, string>;
   tooltipOptions = {
@@ -36,7 +36,7 @@ export class DdpHeaderComponent implements OnInit {
     public modalController: ModalController,
     private translateService: CustomTranslateService,
   ) {
-    this.isOnMobileDevice();
+
     this.translations();
     // this.listenToCloseCreateTicketModal() // published from create ticket page
   }
@@ -68,15 +68,6 @@ export class DdpHeaderComponent implements OnInit {
   //   }
   // }
 
-  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)
   }

package/src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.html

@@ -0,0 +1,12 @@
+<ion-toolbar [class.mobile]="isMobile">
+  
+  <ion-buttons slot="start">
+    <ion-button ion-button (click)="onBackButtonHandler()">
+      <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+
+  <ion-title> {{headerTitle}}</ion-title>
+
+</ion-toolbar>
+

package/src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.scss

@@ -0,0 +1,14 @@
+ion-toolbar {
+    height: var(--header-height);   
+    &:not(.mobile){
+        --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    ion-button{
+        --color: var(--basic-blue);
+    }
+}

package/src/app/components/{conversation-detail/option-header/option-header.component.spec.ts → conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.spec.ts}

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { OptionHeaderComponent } from './option-header.component';
+import { HeaderConversationsListArchived } from './header-conversations-list-archived.component';
 
 describe('OptionHeaderComponent', () => {
-  let component: OptionHeaderComponent;
-  let fixture: ComponentFixture<OptionHeaderComponent>;
+  let component: HeaderConversationsListArchived;
+  let fixture: ComponentFixture<HeaderConversationsListArchived>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ OptionHeaderComponent ],
+      declarations: [ HeaderConversationsListArchived ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(OptionHeaderComponent);
+    fixture = TestBed.createComponent(HeaderConversationsListArchived);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

package/src/app/components/{conversation-detail/option-header/option-header.component.ts → conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.ts}

@@ -2,13 +2,14 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 
 @Component({
-  selector: 'app-option-header',
-  templateUrl: './option-header.component.html',
-  styleUrls: ['./option-header.component.scss'],
+  selector: 'header-conversations-list-archived',
+  templateUrl: './header-conversations-list-archived.component.html',
+  styleUrls: ['./header-conversations-list-archived.component.scss'],
 })
-export class OptionHeaderComponent implements OnInit {
+export class HeaderConversationsListArchived implements OnInit {
 
   @Input() headerTitle: string
+  @Input() isMobile: boolean;
   @Output() onBackButton = new EventEmitter<boolean>();
   static UserPresenceComponent: any[] | any;
 

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

@@ -1,158 +1,107 @@
 <div class="main-content main-content-project-for-panel">
-  <div class="container-fluid container-project-for-panel">
-
-    <div class="left-sidebar">
-
-      <!-- <loading-spinner *ngIf="showSpinner"></loading-spinner> -->
-      <!-- *ngIf="!showSpinner" -->
-      <div class="left-sidebar-project" style="margin-right: -10px;">
-
-        <div class="small-projects-sidebar">
-          <!-- <div class="pinned-project">Pinned project </div> margin-left:4px -->
-          <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
-            <div class="flex-child-left" [tooltip]="conversationsInQueue" [options]="tooltipOptions" placement="top"
-              content-type="template" (click)="openUnservedConvs()">
-              <div class="unassigned-notifications-icon-wpr">
-                <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"
-                  class="style-scope yt-icon"
-                  style="pointer-events: none; width: 37px; height:auto; fill: rgb(107,107,107);margin-top: 9px;">
-                  <g class="style-scope yt-icon">
-                    <path
-                      d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"
-                      class="style-scope yt-icon"></path>
-                  </g>
-                </svg>
-              </div>
-              <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
-                <!-- || currentUserRequestCount > 0  -->
-                <!-- <span *ngIf="unservedRequestCount > 0 "> -->
-                <!-- + currentUserRequestCount -->
-                <span class="notification-count">{{ unservedRequestCount }}</span>
-              </div>
-            </div>
 
-            <ng-template #conversationsInQueue>
-              <span *ngIf="unservedRequestCount > 1">
-                {{ unservedRequestCount }}
-                {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
-              </span>
-              <span *ngIf="unservedRequestCount === 1">
-                {{ unservedRequestCount }}
-                {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
-              </span>
-              <span *ngIf="unservedRequestCount === 0">
-                {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
-
-              </span>
-            </ng-template>
-
-
-            <div class="flex-child-right">
-              <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>
-              <ng-template #conversationsInQueueOnProjectName>
-                <span *ngIf="unservedRequestCount > 1">
-                  {{ unservedRequestCount }}
-                  {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
-                </span>
-                <span *ngIf="unservedRequestCount === 1">
-                  {{ unservedRequestCount }}
-                  {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
-                </span>
-                <span *ngIf="unservedRequestCount === 0">
-                  {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
-                </span>
-              </ng-template>
-
-              <!-- <div class="availabily-and-busy-wpr">
-                <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
-                  <div class="onoffswitch"
-                    (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
-                      id="switchavailableunavailablestatus" tabindex="0" [checked]="project?.ws_projct_user_available">
-                    <label class="onoffswitch-label" for="switchavailableunavailablestatus"></label>
-                  </div>
-                </div>
-
-
-                <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
-                <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
-                  [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-                  {{translationMap?.get('LABEL_AVAILABLE') }}
-                </span>
-                <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
-                <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
-                  [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-                  {{translationMap?.get('LABEL_NOT_AVAILABLE')}}
-                </span>
-
-                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('LABEL_BUSY')}}"
-                [options]="tooltipOptions" placement="top" >
-                  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
-                    viewBox="0 0 24 24" width="16px" fill="#FEB92C">
-                    <g><path d="M0,0h24v24H0V0z" fill="none" /></g>
-                    <g><path d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" /></g>
-                  </svg>
-                </div>
-              </div>
-            </div> -->
-
-            <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">
-
-                <ion-button ion-button fill="clear" class="open-unserved-convs-btn"
-                  (click)="openUnservedConvsAndGoToProjectList()">
-
-                  <span class="push-icon-and-list-wpr">
-                    <!--   <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-                      style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;">
-                      <style type="text/css">
-                        .st0 {
-                          fill: #3880ff;
-                        }
-                      </style>
-                      <path class="st0"
-                        d="M22.8,15v-2c-1.7,0-3-1.3-3-3V5h1c0.5,0,1-0.5,1-1s-0.5-1-1-1h-10c-0.5,0-1,0.5-1,1s0.5,1,1,1h1v5
-                 c0,1.7-1.3,3-3,3v2h6v5c0.6,0,1.4,0,2,0v-5H22.8z M12.8,13c0.7-0.9,1-1.9,1-3V5h4v5c0,1.1,0.4,2.2,1,3H12.8z" />
-                      <rect x="1.2" y="13" class="st0" width="6.3" height="2" />
-                      <rect x="1.2" y="18" class="st0" width="12.1" height="2" />
-                      <rect x="1.2" y="7.6" class="st0" width="9.2" height="2" />
-                    </svg> -->
-
-                    <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-                      style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 16px;">
-                      <style type="text/css">
-                        .st0 {
-                          fill: #165CEE;
-                        }
-                      </style>
-                      <path class="st0" d="M20.6,16.3v-2.4c-2.1,0-3.7-1.6-3.7-3.7V4h1.2c0.6,0,1.2-0.6,1.2-1.2s-0.6-1.2-1.2-1.2H5.9
-	c-0.6,0-1.2,0.6-1.2,1.2S5.3,4,5.9,4h1.2v6.1c0,2.1-1.6,3.7-3.7,3.7v2.4h7.3v6.1c0.7,0,1.7,0,2.4,0v-6.1H20.6z M8.3,13.8
-	c0.9-1.1,1.2-2.3,1.2-3.7V4h4.9v6.1c0,1.3,0.5,2.7,1.2,3.7H8.3z" />
-                    </svg>
-                  </span>
-
-
-
-                </ion-button>
-              </div>
-              <ng-template #viewAllConvs>
-                <span>
-                  {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
-              </ng-template>
+    <!-- <div class="pinned-project">Pinned project </div> margin-left:4px -->
+    <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
+      <div class="flex-child-left" [tooltip]="conversationsInQueueOnProjectName" [options]="tooltipOptions" placement="top"
+        content-type="template" (click)="openUnservedConvs()">
+        <div class="unassigned-notifications-icon-wpr">
+          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon">
+            <g class="style-scope yt-icon">
+              <path
+                d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"
+                class="style-scope yt-icon"></path>
+            </g>
+          </svg>
+        </div>
+        <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
+          <!-- || currentUserRequestCount > 0  -->
+          <!-- <span *ngIf="unservedRequestCount > 0 "> -->
+          <!-- + currentUserRequestCount -->
+          <span class="notification-count">{{ unservedRequestCount }}</span>
+        </div>
+      </div>
+
+
+      <div class="flex-child-right">
+        <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName"
+          [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
+          <div class="project---name"> <a>{{ project?.id_project?.name }}</a> </div>
+        </div>
+        
+        <!-- <div class="availabily-and-busy-wpr">
+          <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
+            <div class="onoffswitch"
+              (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
+              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
+                id="switchavailableunavailablestatus" tabindex="0" [checked]="project?.ws_projct_user_available">
+              <label class="onoffswitch-label" for="switchavailableunavailablestatus"></label>
             </div>
+          </div>
 
+
+          <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
+          <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
+            [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
+            {{translationMap?.get('LABEL_AVAILABLE') }}
+          </span>
+          <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
+          <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
+            [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
+            {{translationMap?.get('LABEL_NOT_AVAILABLE')}}
+          </span>
+
+          <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('LABEL_BUSY')}}"
+          [options]="tooltipOptions" placement="top" >
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
+              viewBox="0 0 24 24" width="16px" fill="#FEB92C">
+              <g><path d="M0,0h24v24H0V0z" fill="none" /></g>
+              <g><path d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" /></g>
+            </svg>
           </div>
         </div>
+      </div> -->
 
-        <!-- </div> -->
+      <!-- <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">
+
+          <ion-button ion-button fill="clear" class="open-unserved-convs-btn"
+            (click)="openUnservedConvsAndGoToProjectList()">
+
+            <span class="push-icon-and-list-wpr">
+              <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
+                style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 16px;">
+                <style type="text/css">
+                  .st0 {
+                    fill: #165CEE;
+                  }
+                </style>
+                <path class="st0" d="M20.6,16.3v-2.4c-2.1,0-3.7-1.6-3.7-3.7V4h1.2c0.6,0,1.2-0.6,1.2-1.2s-0.6-1.2-1.2-1.2H5.9
+c-0.6,0-1.2,0.6-1.2,1.2S5.3,4,5.9,4h1.2v6.1c0,2.1-1.6,3.7-3.7,3.7v2.4h7.3v6.1c0.7,0,1.7,0,2.4,0v-6.1H20.6z M8.3,13.8
+c0.9-1.1,1.2-2.3,1.2-3.7V4h4.9v6.1c0,1.3,0.5,2.7,1.2,3.7H8.3z" />
+              </svg>
+            </span>
+
+
+
+          </ion-button>
+        </div>
+        <ng-template #viewAllConvs>
+          <span>
+            {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
+        </ng-template>
+      </div> -->
 
-      </div>
     </div>
-  </div>
-</div>
+
+
+</div>
+
+
+<ng-template #conversationsInQueueOnProjectName>
+  <span>
+    ({{ unservedRequestCount }})
+    {{translationMap?.get('UnassignedConversations') }}
+  </span>
+</ng-template>