@chat21/chat21-ionic 3.4.31 → 3.4.32-rc10

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

@@ -15,7 +15,10 @@ import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
 // utils
 import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 import { BRAND_BASE_INFO, LOGOS_ITEMS } from 'src/app/utils/utils-resources';
-import { getOSCode } from 'src/app/utils/utils';
+import { getOSCode, hasRole } from 'src/app/utils/utils';
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
+import { ProjectUsersService } from 'src/app/services/project_users/project-users.service';
 
 @Component({
   selector: 'app-sidebar',
@@ -31,7 +34,7 @@ export class SidebarComponent implements OnInit {
   IS_AVAILABLE: boolean = false;
   IS_INACTIVE: boolean = true;
   IS_BUSY: boolean; 
-  isVisibleAPP: boolean;
+  // isVisibleAPP: boolean;
   isVisibleANA: boolean;
   isVisibleACT: boolean;
   isVisibleMON: boolean;
@@ -41,9 +44,10 @@ export class SidebarComponent implements OnInit {
   project_id: string;
   DASHBOARD_URL: string;
   // HAS_CLICKED_OPEN_USER_DETAIL: boolean = false
-  public translationMap: Map<string, string>;
+  public translationsMap: Map<string, string>;
   public_Key: any;
   conversations_lbl: string;
+  whatsappbroadcast_lbl: string;
   contacts_lbl: string;
   apps_lbl: string;
   analytics_lbl: string;
@@ -53,19 +57,14 @@ export class SidebarComponent implements OnInit {
   countClickOnOpenUserDetailSidebar: number = 0
   USER_PHOTO_PROFILE_EXIST: boolean;
   currentUser: any;
-  dashboard_home_url: string;
-  dashboard_knb_url: string;
-  dashboard_bots_url: string;
-  dashboard_convs_url: string;
-  dashboard_contacts_url: string;
-  dashboard_app_url: string;
-  dashboard_analytics_url: string;
-  dashboard_activities_url: string;
-  dashboard_history_url: string;
-  dashboard_settings_url: string;
-  tiledesk_url: string;
+  URLS: { [key: string]: string} = {};
+
+  public projectUser: ProjectUser;
+  public roles: { [key: string]: boolean }
+
   LOGOS_ITEMS = LOGOS_ITEMS;
   BRAND_BASE_INFO = BRAND_BASE_INFO;
+  PERMISSIONS = PERMISSIONS;
   constructor(
     public imageRepoService: ImageRepoService,
     public appStorageService: AppStorageService,
@@ -75,12 +74,13 @@ export class SidebarComponent implements OnInit {
     public wsService: WebsocketService,
     public appConfigProvider: AppConfigProvider,
     private translate: TranslateService,
+    public projectUsersService: ProjectUsersService,
     public events: EventsService,
 
   ) { }
 
   ngOnInit() {
-    this.tiledesk_url = BRAND_BASE_INFO['COMPANY_SITE_URL'] as string
+    this.URLS.TILEDESK = BRAND_BASE_INFO['COMPANY_SITE_URL'] as string
     
     this.DASHBOARD_URL = this.appConfig.getConfig().dashboardUrl + '#/project/';
     this.getStoredProjectAndUserRole()
@@ -92,36 +92,57 @@ export class SidebarComponent implements OnInit {
 
 
   getStoredProjectAndUserRole() {
-    this.events.subscribe('storage:last_project',project =>{
+    this.events.subscribe('storage:last_project',async (project) =>{
       this.logger.log('[SIDEBAR] stored_project ', project)
       if (project && project !== 'undefined') {
         this.project_id = project.id_project.id
         this.USER_ROLE = project.role;
         this.buildURLs(this.USER_ROLE)
+        this.projectUser = await this.projectUsersService.getProjectUserByProjectId(project.id_project.id)
+        this.roles = this.checkRoles()
+        this.logger.log('[SIDEBAR] roles ', this.roles)
       }
     })
   }
 
   buildURLs(USER_ROLE) {
-    this.dashboard_home_url = this.DASHBOARD_URL + this.project_id + '/home'
-    this.dashboard_knb_url = this.DASHBOARD_URL + this.project_id + '/knowledge-bases'
-    this.dashboard_bots_url = this.DASHBOARD_URL + this.project_id + '/bots'
-    this.dashboard_convs_url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
-    this.dashboard_contacts_url = this.DASHBOARD_URL + this.project_id + '/contacts'
-    this.dashboard_app_url = this.DASHBOARD_URL + this.project_id + '/app-store'
-    this.dashboard_analytics_url = this.DASHBOARD_URL + this.project_id + '/analytics'
-    this.dashboard_activities_url = this.DASHBOARD_URL + this.project_id + '/activities'
-    this.dashboard_history_url = this.DASHBOARD_URL + this.project_id + '/history'
-    this.dashboard_settings_url = ''
-    if (USER_ROLE !== 'agent') {
-      this.dashboard_settings_url = this.DASHBOARD_URL + this.project_id + '/widget-set-up'
-    } else if (USER_ROLE === 'agent') {
-      this.dashboard_settings_url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
-    }
-    this.tiledesk_url = 'https://www.tiledesk.com'
+    const base = this.DASHBOARD_URL + this.project_id;
+
+    this.URLS = {
+      HOME: `${base}/home`,
+      KNOWLEDGEBASE: `${base}/knowledge-bases`,
+      BOTS: `${base}/bots`,
+      MONITOR: `${base}/wsrequests`,
+      WHATSAPP: `${base}/automations`,
+      CONTACTS: `${base}/contacts`,
+      APPSTORE: `${base}/app-store`,
+      ANALYTICS: `${base}/analytics`,
+      ACTIVITIES: `${base}/activities`,
+      HISTORY: `${base}/history`,
+      SETTINGS: USER_ROLE !== 'agent' ? `${base}/widget-set-up` : `${base}/cannedresponses`,
+      TILEDESK: 'https://www.tiledesk.com'
+    };
+
+    this.setQueryParamsForAll({ tiledesk_logOut: BRAND_BASE_INFO['LOGOUT_ENABLED'] });
 
   }
 
+  // Funzione helper per aggiungere query params a tutte le URL
+setQueryParamsForAll(queryParams: any) {
+  if (!queryParams) return;
+
+  const queryString = new URLSearchParams(queryParams).toString();
+
+  // Cicla tutte le chiavi di URLS
+  Object.keys(this.URLS).forEach(key => {
+    if (this.URLS[key]) {
+      // Controlla se già ci sono query params
+      const separator = this.URLS[key].includes('?') ? '&' : '?';
+      this.URLS[key] = `${this.URLS[key]}${queryString ? separator + queryString : ''}`;
+    }
+  });
+}
+
   subcribeToAuthStateChanged() {
     this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
       this.logger.log('[SIDEBAR] BSAuthStateChanged ', state)
@@ -240,6 +261,7 @@ export class SidebarComponent implements OnInit {
       this.logger.error('[SIDEBAR] - ngOnInit - currentUser not found in storage ')
     }
     this.translateLabels()
+    this.translations()
   }
 
 
@@ -256,6 +278,7 @@ export class SidebarComponent implements OnInit {
 
     this.translate.get(keys).subscribe((text: string) => {
       this.conversations_lbl = text['Conversations'];
+      this.whatsappbroadcast_lbl = text['WhatsAppBroadcasts']
       this.contacts_lbl = text['LABEL_CONTACTS']
       this.apps_lbl = text['Apps']
       this.analytics_lbl = text['Analytics']
@@ -271,13 +294,55 @@ export class SidebarComponent implements OnInit {
     
     this.isVisibleANA = getOSCode("ANA", this.public_Key);
     this.isVisibleACT = getOSCode("ACT", this.public_Key);
-    this.isVisibleAPP = getOSCode("APP", this.public_Key);
     this.isVisibleMON = getOSCode("MON", this.public_Key);
     this.isVisibleCNT = getOSCode("CNT", this.public_Key);
     this.isVisibleKNB = getOSCode("KNB", this.public_Key);
-    
+
   }
 
+
+  checkRoles(): { [key: string]: boolean } {
+      const permissionKeys = [
+        'HOME_READ',
+        'KB_READ',
+        'FLOWS_READ',
+        'INBOX_READ',
+        'AUTOMATIONSLOG_READ',
+        'LEADS_READ',
+        'ANALYTICS_READ',
+        'ACTIVITIES_READ',
+        'HISTORY_READ',
+        'PROJECTSETTINGS_GENERAL_READ',
+        'PROJECTSETTINGS_DEVELOPER_READ',
+        'PROJECTSETTINGS_SMARTASSIGNMENT_READ',
+        'PROJECTSETTINGS_NOTIFICATION_READ',
+        'PROJECTSETTINGS_SECURITY_READ',
+        'PROJECTSETTINGS_BANNED_READ',
+        'PROJECTSETTINGS_ADVANCED_READ'
+      ] as const;
+  
+      const roles: { [key: string]: boolean } = {};
+      for (const key of permissionKeys) {
+        const permission = PERMISSIONS[key];
+        roles[permission] = hasRole(this.projectUser, permission);
+      }
+
+
+      let settingRoleKEys = [
+        'PROJECTSETTINGS_GENERAL_READ',
+        'PROJECTSETTINGS_DEVELOPER_READ',
+        'PROJECTSETTINGS_SMARTASSIGNMENT_READ',
+        'PROJECTSETTINGS_NOTIFICATION_READ',
+        'PROJECTSETTINGS_SECURITY_READ',
+        'PROJECTSETTINGS_BANNED_READ',
+        'PROJECTSETTINGS_ADVANCED_READ'
+      ] as const;
+      roles[PERMISSIONS.SETTINGS_READ] = settingRoleKEys.some(settingKey => roles[PERMISSIONS[settingKey]]);
+  
+      return roles;
+  
+    }
+
   listenTocurrentProjectUserUserAvailability$() {
     this.wsService.currentProjectUserAvailability$.subscribe((data) => {
       this.logger.log('[SIDEBAR] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', data);
@@ -327,92 +392,20 @@ export class SidebarComponent implements OnInit {
     }
   }
 
-  goToHome() {
-    let url = this.DASHBOARD_URL + this.project_id + '/home'
-    this.dashboard_home_url = url;
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToBots() {
-    let url = this.DASHBOARD_URL + this.project_id + '/bots/my-chatbots/all'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToConversations() {
-    let url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToContacts() {
-    let url = this.DASHBOARD_URL + this.project_id + '/contacts'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToAppStore() {
-    let url = this.DASHBOARD_URL + this.project_id + '/app-store'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToAnalytics() {
-    let url = this.DASHBOARD_URL + this.project_id + '/analytics'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToActivities() {
-    let url = this.DASHBOARD_URL + this.project_id + '/activities'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToHistory() {
-    let url = this.DASHBOARD_URL + this.project_id + '/history'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToWidgetSetUpOrToCannedResponses() {
-    if (this.USER_ROLE !== 'agent') {
-      this.goToWidgetSetUp()
-    } else if (this.USER_ROLE === 'agent') {
-      this.goToSettings_CannedResponses()
-    }
-  }
-
-  goToWidgetSetUp() {
-    let url = this.DASHBOARD_URL + this.project_id + '/widget-set-up'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToSettings_CannedResponses() {
-    let url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-
-
   public translations() {
     const keys = [
-      'LABEL_AVAILABLE',
-      'LABEL_NOT_AVAILABLE',
-      'LABEL_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"
+      'Monitor',
+      'Flows',
+      'Knowledgebases',
+      'WhatsAppBroadcasts',
+      'LABEL_CONTACTS',
+      'Apps',
+      'Analytics',
+      'Activities',
+      'History',
+      'Settings'
     ];
-    this.translationMap = this.translateService.translateLanguage(keys);
+    this.translationsMap = this.translateService.translateLanguage(keys);
   }
 
 

package/src/app/components/sidebar-user-details/sidebar-user-details.component.html

@@ -71,23 +71,52 @@
             </span>
         </mat-slide-toggle> -->
 
-        <ng-select style="text-align: left;" 
+        <ng-container *ngIf="!isVisibleMPA" id="availability_dropdown_container">
+            <ng-select style="text-align: left;" 
             (change)="changeAvailabilityStateInUserDetailsSidebar(selectedStatus)" 
             [(ngModel)]="selectedStatus" 
             class="teammate-status-in-drawer sidebar" 
-            [items]="teammateStatus" 
+            [items]="TEAMMATE_STATUS" 
             bindLabel="name" bindValue="id"
             [clearable]="false"
             [searchable]="false">
-            <ng-template ng-label-tmp let-item="item">
-                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
-                <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label}} </span>
-            </ng-template>
-            <ng-template ng-option-tmp let-item="item" let-index="index">
-                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
-                <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label}} </span>
-            </ng-template>
-        </ng-select>
+                <ng-template ng-label-tmp let-item="item">
+                    <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
+                    <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label | translate}} </span>
+                </ng-template>
+                <ng-template ng-option-tmp let-item="item" let-index="index">
+                    <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
+                    <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label | translate}} </span>
+                </ng-template>
+            </ng-select>
+        </ng-container>
+
+        <ng-container *ngIf="isVisibleMPA && projects?.length > 0" id="projects_dropdown_container">
+            <div class="projects-dropdown-wrapper">
+                <button class="btn projects-dropdown-toggle" (click)="toggleProjectsDropdown()">
+                    <span class="projects-dropdown-toggle-label">
+                        {{ project?.name || 'Progetti' }}
+                        <img *ngIf="project?.teammateStatus" style="width: 15px; height: 15px; position: relative; top: 1px; cursor: pointer;" height="15" width="15" [src]="project?.teammateStatus?.avatar" />
+                    </span>
+                    <i class="material-icons" style="margin-left: 4px; font-size: 18px;">arrow_drop_down</i>
+                </button>
+                <div id="projects_dropdown" class="dropdown-menu" [ngClass]="{'open': openDropdownProjects}">
+                    <li *ngFor="let prjct of projects?.slice() | slice:0:10; let i=index" style="cursor: pointer"
+                        (mouseenter)="openStatusDropdownOnHover($event, prjct)"
+                        (mouseleave)="closeStatusDropdownOnLeave()">
+                        <a [ngClass]="{'li-selected' : prjct?.id_project?._id === openStatusDropdownProjectId }"
+                          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]="prjct?.teammateStatus?.name">
+                            <span class="project-item-status-name">{{prjct?.teammateStatus?.name}}</span>
+                            <img [src]="prjct?.teammateStatus?.avatar" />
+                          </span>
+                        </a>
+                    </li>
+                </div>
+            </div>
+        </ng-container>
     </section>
 
     <hr class="first-divider">
@@ -140,4 +169,16 @@
         <div class="chat-version"> ver {{version}}</div>
     </section>
 
+</div>
+
+<!-- Status dropdown fuori da #user-details per evitare clipping da overflow -->
+<div class="status-dropdown status-dropdown-fixed status-dropdown-outside" *ngIf="openStatusDropdownProjectId && selectedProjectForStatus"
+  [style.top.px]="statusDropdownPosition.top" [style.left.px]="statusDropdownPosition.left"
+  (mouseenter)="cancelStatusDropdownClose()"
+  (mouseleave)="closeStatusDropdownOnLeave()">
+  <div class="status-dropdown-option" *ngFor="let status of TEAMMATE_STATUS"
+    (click)="$event.stopPropagation(); onChangeProjectStatus(selectedProjectForStatus, status.id)">
+    <img style="width: 15px; height: 15px; margin-right: 6px;" [src]="status.avatar" />
+    <span>{{ status.name }}</span>
+  </div>
 </div>