@chat21/chat21-ionic 3.4.31 → 3.4.32-rc1

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

@@ -183,6 +183,36 @@
     }
 }
 
+#ticket{
+    text-align: center;
+    font-size: 12px;
+
+    .buttons-container{
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+
+        ion-button{
+            font-size: 12px;
+            --padding-top: 4px;
+            --padding-bottom: 4px;
+            --padding-start: 6px;
+            --padding-end: 6px;
+            --ripple-color: transparent;
+            text-transform: unset;
+            height: auto;
+
+            ion-icon{
+                margin-right: 4px;
+            }
+
+            &[name="add"]{
+                --background: var(--basic-blue);
+            }
+        }
+    }
+}
+
 #fileInput {
     position: absolute;
     opacity: 0;

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

@@ -26,6 +26,7 @@ import { CopilotService } from 'src/app/services/copilot/copilot.service';
 import { BRAND_BASE_INFO } from 'src/app/utils/utils-resources';
 import { ProjectService } from 'src/app/services/projects/project.service';
 import { Project } from 'src/chat21-core/models/projects';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
 
 
 @Component({
@@ -49,6 +50,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @ViewChild('fileInput', { static: false }) fileInput: any;
 
   @Input() loggedUser: UserModel;
+  @Input() projectUser: ProjectUser;
   @Input() conversationWith: string;
   @Input() channelType: string;
   @Input() channel: string;
@@ -61,16 +63,20 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() emailSection: boolean;
   @Input() offlineMsgEmail: boolean;
   @Input() whatsappTemplatesSection: boolean;
+  @Input() ticketSection: boolean
   @Input() isOpenInfoConversation: boolean;
+  @Input() cannedSection: boolean;
   @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Input() dropEvent: any;
   @Input() disableTextarea: boolean;
+  @Input() roles: Array<string>;
   @Output() eventChangeTextArea = new EventEmitter<{msg: string, offsetHeight: number}>();
   @Output() eventSendMessage = new EventEmitter<{msg: string, type: string, metadata?: Object, attributes?: Object}>();
   @Output() onClickOpenCannedResponses = new EventEmitter<boolean>();
   @Output() onPresentModalScrollToBottom = new EventEmitter<boolean>();
   @Output() onOpenFooterSection = new EventEmitter<string>();
+  @Output() onOpenTicket = new EventEmitter<boolean>();
 
   public project: Project;
   public conversationEnabled = false;
@@ -293,6 +299,17 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     this.prensentTemplateModal();
   }
 
+  onClickTicket(option: "open" | "close"){
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - onClickTicket', option);
+    switch(option){
+      case "open":
+        this.onOpenTicket.emit();
+      case "close":   
+        this.section = 'chat'
+    }
+
+  }
+
 
   /**
  * 
@@ -575,8 +592,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       if (!text.includes("/")) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 1 message: ', message);
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea  SEND MESSAGE 1 message: ", message);
-        this.messageString = '';
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
       } else if (text.includes("/") && pos === 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 2: ', this.tagsCannedFilter.length);
@@ -588,9 +607,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
-        this.messageString = '';
-
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
       } else if (text.includes("/") && pos > 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0 && text.substr(-1) !== '/') {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
@@ -602,17 +622,19 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
-        this.messageString = '';
-
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
       } else if (text.includes("/") && this.tagsCannedFilter.length === 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 message: ', message);
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 3 message: ", message);
-        this.messageString = '';
-
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
 
       }

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

@@ -70,8 +70,8 @@ export class InfoContentComponent implements OnInit {
     this.route.paramMap.subscribe(params => {
       this.logger.log('[INFO-CONTENT-COMP] initialize params: ', params);
       this.conversationWith = params.get('IDConv');
-      this.conversationWithFullname = params.get('FullNameConv');
-      this.conv_type = params.get('Convtype');
+      this.conversationWithFullname = decodeURIComponent(params.get('FullNameConv'));
+      this.conv_type = decodeURIComponent(params.get('Convtype'));
 
       const conversationWith_segments = this.conversationWith.split('-');
 

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

@@ -151,27 +151,29 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
             });
 
           this.contactsService.loadContactDetail(key).pipe(takeUntil(this.unsubscribe$)).subscribe(user => {
-              this.logger.log('InfoGroupComponent group detail loadContactDetail RES', user);
-              // this.logger.log('InfoGroupComponent group detail this.presenceService.BSIsOnline.value()', this.presenceService.BSIsOnline.getValue);
-
-              user.imageurl = this.imageRepoService.getImagePhotoUrl(key)
-              // this.member_array.push({ userid: user.uid, avatar: user.avatar, color: user.color, email: user.email, fullname: user.fullname, imageurl: user.imageurl, userOnline: isOnline })
-              var index = this.member_array.findIndex(m => m.userid === user.uid);
-              this.logger.log('InfoGroupComponent member_array first of push index', index);
-              this.logger.log('InfoGroupComponent member_array first of push', this.member_array);
-              if (index === -1) {
-                this.member_array.push(
-                  {
-                    userid: user.uid,
-                    avatar: user.avatar,
-                    color: user.color,
-                    email: user.email,
-                    fullname: user.fullname,
-                    imageurl: user.imageurl,
-                    userOnline: members_isonline_array[user.uid]['isSignin']
-                  })
-              } else {
-                this.logger.log('InfoGroupComponent member already exist in member_array');
+              if(user){
+                this.logger.log('InfoGroupComponent group detail loadContactDetail RES', user);
+                // this.logger.log('InfoGroupComponent group detail this.presenceService.BSIsOnline.value()', this.presenceService.BSIsOnline.getValue);
+
+                user.imageurl = this.imageRepoService.getImagePhotoUrl(key)
+                // this.member_array.push({ userid: user.uid, avatar: user.avatar, color: user.color, email: user.email, fullname: user.fullname, imageurl: user.imageurl, userOnline: isOnline })
+                var index = this.member_array.findIndex(m => m.userid === user.uid);
+                this.logger.log('InfoGroupComponent member_array first of push index', index);
+                this.logger.log('InfoGroupComponent member_array first of push', this.member_array);
+                if (index === -1) {
+                  this.member_array.push(
+                    {
+                      userid: user.uid,
+                      avatar: user.avatar,
+                      color: user.color,
+                      email: user.email,
+                      fullname: user.fullname,
+                      imageurl: user.imageurl,
+                      userOnline: members_isonline_array[user.uid]['isSignin']
+                    })
+                } else {
+                  this.logger.log('InfoGroupComponent member already exist in member_array');
+                }
               }
             }, (error) => {
               this.logger.error('InfoGroupComponent group detail loadContactDetail - ERROR  ', error);

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

@@ -34,7 +34,7 @@
       <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
     </ion-button>
 
-    <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
+    <ion-button *ngIf="writeto_btn && isVisibleCNT && roles?.[PERMISSIONS.LEADS_READ]" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
       tooltip="{{translationMap?.get('ViewContactsList')}}" placement="bottom">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
       <!-- <ion-icon slot="icon-only" name="people-outline"></ion-icon> -->

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.ts

@@ -1,3 +1,4 @@
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 import { ModalController } from '@ionic/angular'
 import { EventsService } from 'src/app/services/events-service'
@@ -17,6 +18,8 @@ export class HeaderConversationsList implements OnInit {
   @Input() sound_btn: string;
   @Input() isMobile: boolean;
   @Input() isVisibleTKT: boolean = true;
+  @Input() isVisibleCNT: boolean = true;;
+  @Input() roles: Array<string>;
   @Output() onSoundChange = new EventEmitter<string>()
   @Output() openContactsDirectory = new EventEmitter()
   @Output() openProfileInfo = new EventEmitter()
@@ -24,6 +27,7 @@ export class HeaderConversationsList implements OnInit {
   createTicketModal = null
   public translationMap: Map<string, string>;
 
+  PERMISSIONS = PERMISSIONS;
   constructor(
     public events: EventsService,
     public modalController: ModalController,
@@ -62,7 +66,7 @@ export class HeaderConversationsList implements OnInit {
   // }
 
   ngOnInit() {
-    // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
+    console.log('DDP HEADER SUPPORT MODE ', this.roles)
   }
 
   // START @Output() //

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

@@ -5,7 +5,7 @@
       </div>
       <div class="navbar-right">
         <!-- test site -->
-        <ng-container *ngIf="project">
+        <ng-container *ngIf="project && roles?.[PERMISSIONS.SIMULATE_CONV]">
           <button class="btn simulate-visitor-btn" (click)="testWidgetPage()">
             <i class="material-icons">play_arrow</i>
             <!-- {{translationsMap?.get('NAVBAR.SIMULATE_VISITOR')}} -->
@@ -23,9 +23,9 @@
         </ng-container>
 
         <!--  ------ PROJECTS  DROPDOWN ------ -->
-        <ng-container *ngIf="project">
+        <ng-container *ngIf="project && roles?.[PERMISSIONS.CHANGE_PROJECT]">
             <li>
-              <button class="btn dropdown-toggle project-dropdown" (click)="openDropdownProjects = !openDropdownProjects">
+              <button class="btn dropdown-toggle project-dropdown" (click)="toggleProjectsDropdown()">
                 <span class="project-dropdown" style="text-transform: none"> {{ project?.id_project?.name }} </span>
                 <i class="material-icons" style="margin-right: 3px;">arrow_drop_down</i>
               </button>
@@ -49,7 +49,7 @@
                 </li>
   
                 <!--  ADD PROJECT -->
-                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')" class="add-project">
+                <li id="navbar_create_prjct" *ngIf="isVisibleMT" (click)="onClickDropdownOption('addProject')" class="add-project">
                   <a>
                     <i class="material-icons">add_circle_outline </i>
                     {{translationsMap?.get('NAVBAR.ADD_PROJECT')}}
@@ -71,9 +71,22 @@
                 <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:0:5; let i=index" -->
                 <li *ngFor="let prjct of projects?.slice() | slice:0:5; let i=index" style="cursor: pointer">
                   <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)"
-                    [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }">
-  
-                    <span> {{ prjct?.id_project?.name }} </span>
+                    [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }"
+                    class="project-item-row">
+                    <span class="project-item-name">{{ prjct?.id_project?.name }}</span>
+                    <span class="project-item-status project-item-status-wrapper"
+                      [attr.title]="translationsMap?.get(prjct?.teammateStatus?.label) || prjct?.teammateStatus?.name"
+                      (click)="toggleStatusDropdown($event, prjct)">
+                      <img style="width: 15px; height: 15px; position: relative; top: 1px; cursor: pointer;" height="15" width="15" [src]="prjct?.teammateStatus?.avatar" />
+                      <div class="status-dropdown status-dropdown-fixed" *ngIf="openStatusDropdownProjectId === prjct?.id_project?._id" (click)="$event.stopPropagation()"
+                        [style.top.px]="statusDropdownPosition.top" [style.right.px]="statusDropdownPosition.right">
+                        <div class="status-dropdown-option" *ngFor="let status of TEAMMATE_STATUS"
+                          (click)="$event.stopPropagation(); onChangeProjectStatus(prjct, status.id)">
+                          <img style="width: 15px; height: 15px; margin-right: 6px;" [src]="status.avatar" />
+                          <span>{{ translationsMap?.get(status.label) || status.name }}</span>
+                        </div>
+                      </div>
+                    </span>
                   </a>
                 </li>
 
@@ -85,8 +98,21 @@
     
                   <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:5:10; let i=index" -->
                   <li *ngFor="let prjct of projects?.slice() | slice:5:10; let i=index" style="cursor: pointer">
-                    <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)">
-                      {{ prjct?.id_project?.name }}
+                    <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)" class="project-item-row">
+                      <span class="project-item-name">{{ prjct?.id_project?.name }}</span>
+                      <span class="project-item-status project-item-status-wrapper"
+                        [attr.title]="translationsMap?.get(prjct?.teammateStatus?.label) || prjct?.teammateStatus?.name"
+                        (click)="toggleStatusDropdown($event, prjct)">
+                        <img style="width: 15px; height: 15px; position: relative; top: 1px; cursor: pointer;" height="15" width="15" [src]="prjct?.teammateStatus?.avatar" />
+                        <div class="status-dropdown status-dropdown-fixed" *ngIf="openStatusDropdownProjectId === prjct?.id_project?._id" (click)="$event.stopPropagation()"
+                          [style.top.px]="statusDropdownPosition.top" [style.right.px]="statusDropdownPosition.right">
+                          <div class="status-dropdown-option" *ngFor="let status of TEAMMATE_STATUS"
+                            (click)="$event.stopPropagation(); onChangeProjectStatus(prjct, status.id)">
+                            <img style="width: 15px; height: 15px; margin-right: 6px;" [src]="status.avatar" />
+                            <span>{{ translationsMap?.get(status.label) || status.name }}</span>
+                          </div>
+                        </div>
+                      </span>
                     </a>
                   </li>
                 </ng-container>

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

@@ -204,6 +204,70 @@ li{
         color: var(--dropdown-menu-hover-color);
         box-shadow: 0 12px 20px -10px rgba(var(--dropdown-menu-hover-color), 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(var(--dropdown-menu-hover-color), 0.2);
     }
+
+    &.project-item-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+
+        .project-item-name {
+            flex: 1;
+            min-width: 0;
+            text-align: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .project-item-status {
+            flex: 0 0 10%;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+
+            &.project-item-status-wrapper {
+                position: relative;
+            }
+
+            .status-dropdown {
+                position: absolute;
+                right: 100%;
+                top: 50%;
+                transform: translateY(-50%);
+                margin-right: 4px;
+                min-width: 140px;
+                padding: 4px 0;
+                background-color: var(--dropdown-menu-background);
+                border-radius: 3px;
+                box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.26);
+                z-index: 1001;
+                list-style: none;
+
+                &.status-dropdown-fixed {
+                    position: fixed;
+                    right: auto;
+                    left: auto;
+                    margin-right: 0;
+                    transform: translateY(-50%);
+                }
+
+                .status-dropdown-option {
+                    display: flex;
+                    align-items: center;
+                    padding: 8px 16px;
+                    font-size: 13px;
+                    color: var(--dropdown-menu-color);
+                    cursor: pointer;
+                    white-space: nowrap;
+
+                    &:hover {
+                        background-color: var(--dropdown-menu-hover-background);
+                        color: var(--dropdown-menu-hover-color);
+                    }
+                }
+            }
+        }
+    }
 }
 
 

package/src/app/components/navbar/navbar.component.ts

@@ -7,6 +7,13 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { Project } from 'src/chat21-core/models/projects';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { getUserStatusFromProjectUser } from 'src/chat21-core/utils/utils';
+import { TEAMMATE_STATUS } from 'src/chat21-core/utils/constants';
+import { WebsocketService } from 'src/app/services/websocket/websocket.service';
+import { ProjectUser } from 'src/chat21-core/models/project_user';
+import { ProjectUsersService } from 'src/app/services/project_users/project-users.service';
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
+import { getOSCode, hasRole } from 'src/app/utils/utils';
 
 @Component({
   selector: 'app-navbar',
@@ -21,24 +28,31 @@ export class NavbarComponent implements OnInit {
   private logger: LoggerService = LoggerInstance.getInstance();
   private tiledeskToken: string;
 
-  public projects: Project[] = [];
+  public projects: ProjectUser[] = [];
   public project: any = [];
   private USER_ROLE: string;
 
   public translationsMap: Map<string, string> = new Map();
 
   public openDropdownProjects: boolean = false
+  public openStatusDropdownProjectId: string | null = null
+  public TEAMMATE_STATUS = TEAMMATE_STATUS
   private public_Key: string;
   public isVisible: boolean;
-  public MT: boolean;
+  public isVisibleMT: boolean;
 
+  public projectUser: ProjectUser;
+  public roles: { [key: string]: boolean }
+  PERMISSIONS = PERMISSIONS;
   constructor(
     private projectService: ProjectService,
+    public projectUsersService: ProjectUsersService,
     private tiledeskAuthService: TiledeskAuthService,
     private appConfigProvider: AppConfigProvider,
     private translateService: CustomTranslateService, 
     private events: EventsService,
     private cdref: ChangeDetectorRef, 
+    private wsService: WebsocketService,
   ) { }
 
   ngOnInit() {
@@ -60,7 +74,10 @@ export class NavbarComponent implements OnInit {
       "NAVBAR.ADD_PROJECT",
       "NAVBAR.RECENT_PROJECTS",
       "NAVBAR.OTHER_PROJECTS",
-      "LABEL_CHAT"
+      "LABEL_CHAT",
+      "LABEL_AVAILABLE",
+      "LABEL_NOT_AVAILABLE",
+      "LABEL_INACTIVE"
     ]
 
     this.translationsMap = this.translateService.translateLanguage(keys)
@@ -78,14 +95,17 @@ export class NavbarComponent implements OnInit {
 
   getProjects() {
     this.logger.log('[NAVBAR] calling getProjects ... ');
-    this.projectService.getProjects().subscribe((projects: any) => {
+    this.projectService.getProjects().subscribe((projects: ProjectUser[]) => {
       this.logger.log('[NAVBAR] getProjects PROJECTS ', projects);
       if (projects) {
           // this.projects = projects;
-          this.projects = projects.filter((project: any) => {
+          this.projects = projects.filter((project: ProjectUser) => {
               // this.logger.log('[NAVBAR] getProjects PROJECTS status ', project.id_project.status);
               return project.id_project.status === 100;
           });
+          this.projects.forEach((project: ProjectUser) => {
+            project.teammateStatus = getUserStatusFromProjectUser(project as any);
+          });
           this.logger.log('[NAVBAR] getProjects this.projects ', this.projects);
       }
     }, (error) => {
@@ -96,11 +116,14 @@ export class NavbarComponent implements OnInit {
   }
 
   getStoredProjectAndUserRole() {
-    this.events.subscribe('storage:last_project',project =>{
+    this.events.subscribe('storage:last_project',async (project) =>{
       this.logger.log('[NAVBAR] stored_project ', project)
       if (project && project !== 'undefined') {
         this.project = project;
         this.USER_ROLE = project.role;
+        this.projectUser = await this.projectUsersService.getProjectUserByProjectId(project.id_project.id)
+        this.roles = this.checkRoles()
+        this.logger.log('[SIDEBAR] roles ', this.roles)
       }
     })
   }
@@ -108,44 +131,24 @@ export class NavbarComponent implements OnInit {
   getOSCODE() {
     this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
     this.logger.log('[NAVBAR] AppConfigService getAppConfig public_Key', this.public_Key)
-    this.logger.log('[NAVBAR] public_Key', this.public_Key)
-
-    let keys = this.public_Key.split("-");
-    // this.logger.log('PUBLIC-KEY (Navbar) - public_Key keys', keys)
-
-    keys.forEach(key => {
-        // this.logger.log('NavbarComponent public_Key key', key)
-        if (key.includes("PAY")) {
-            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
-            let pay = key.split(":");
-            // this.logger.log('PUBLIC-KEY (Navbar) - pay key&value', pay);
-            if (pay[1] === "F") {
-                this.isVisible = false;
-                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
-            } else {
-                this.isVisible = true;
-                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
-            }
-        }
-
-        if (key.includes("MTT")) {
-            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
-            let mt = key.split(":");
-            // this.logger.log('PUBLIC-KEY (Navbar) - mt key&value', mt);
-            if (mt[1] === "F") {
-                this.MT = false;
-                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
-            } else {
-                this.MT = true;
-                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
-            }
-        }
-    });
+    
+    this.isVisibleMT = getOSCode("MTT", this.public_Key);
+
+  }
+
+  checkRoles(): { [key: string]: boolean } {
+    const permissionKeys = [
+      'CHANGE_PROJECT',
+      'SIMULATE_CONV',
+    ] as const;
 
-    if (!this.public_Key.includes("MTT")) {
-        this.MT = false;
-        // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+    const roles: { [key: string]: boolean } = {};
+    for (const key of permissionKeys) {
+      const permission = PERMISSIONS[key];
+      roles[permission] = hasRole(this.projectUser, permission);
     }
+    
+    return roles;
 
   }
 
@@ -177,6 +180,61 @@ export class NavbarComponent implements OnInit {
     window.open(url, '_blank');
   }
 
+  toggleProjectsDropdown() {
+    this.openDropdownProjects = !this.openDropdownProjects
+    if (!this.openDropdownProjects) {
+      this.openStatusDropdownProjectId = null
+    }
+  }
+
+  statusDropdownPosition = { top: 0, right: 0 }
+
+  toggleStatusDropdown(event: Event, prjct: any) {
+    event.stopPropagation()
+    event.preventDefault()
+    const projectId = prjct?.id_project?._id
+    const isOpening = this.openStatusDropdownProjectId !== projectId
+    if (isOpening) {
+      const el = event.currentTarget as HTMLElement
+      const rect = el.getBoundingClientRect()
+      this.statusDropdownPosition = {
+        top: rect.top + rect.height / 2,
+        right: window.innerWidth - rect.left + 4
+      }
+    }
+    this.openStatusDropdownProjectId = this.openStatusDropdownProjectId === projectId ? null : projectId
+  }
+
+  onChangeProjectStatus(projectUser: ProjectUser, selectedStatusID: any) {
+    // TODO: implementare aggiornamento status progetto
+    this.logger.log('[NAVBAR] onChangeProjectStatus placeholder', projectUser, selectedStatusID)
+    this.openStatusDropdownProjectId = null
+
+    let IS_AVAILABLE = null
+    let profilestatus = ''
+    if (selectedStatusID === 1) {
+      IS_AVAILABLE = true
+    } else if (selectedStatusID === 2) {
+      IS_AVAILABLE = false
+    } else if (selectedStatusID === 3) {
+      IS_AVAILABLE = false
+      profilestatus = 'inactive'
+    }
+
+    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, projectUser.id_project._id, IS_AVAILABLE, profilestatus).subscribe((projectUserUpdated: any) => {
+
+        this.logger.log('[NAVBAR] - PROJECT-USER UPDATED ', projectUser)
+        this.projects.find(p => p.id_project._id === projectUser.id_project._id).teammateStatus = getUserStatusFromProjectUser(projectUserUpdated as any);
+
+      }, (error) => {
+        this.logger.error('[NAVBAR] - PROJECT-USER UPDATED - ERROR  ', error);
+
+      }, () => {
+        this.logger.log('[NAVBAR] - PROJECT-USER UPDATED  * COMPLETE *');
+
+      });
+  }
+
   goToHome(id_project: string, project_name: string,) {
     // this.logger.log('!NAVBAR  goToHome prjct ', prjct)
     this.logger.log('[NAVBAR] goToHome id_project ', id_project, 'project_name', project_name)