@chat21/chat21-ionic 3.4.32-rc1 → 3.4.32-rc10

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnChanges, OnInit, Output } from '@angular/core';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -17,12 +17,14 @@ import { Project } from 'src/chat21-core/models/projects';
 import { BRAND_BASE_INFO } from 'src/app/utils/utils-resources';
 import { getOSCode } from 'src/app/utils/utils';
 import { getUserStatusFromProjectUser } from 'src/chat21-core/utils/utils';
+import { ProjectService } from 'src/app/services/projects/project.service';
+import { ProjectUser } from 'src/chat21-core/models/project_user';
 @Component({
   selector: 'app-sidebar-user-details',
   templateUrl: './sidebar-user-details.component.html',
   styleUrls: ['./sidebar-user-details.component.scss'],
 })
-export class SidebarUserDetailsComponent implements OnInit, OnChanges {
+export class SidebarUserDetailsComponent implements OnInit, OnChanges, OnDestroy {
   // HAS_CLICKED_OPEN_USER_DETAIL: boolean = false;
   // @Output() onCloseUserDetailsSidebar = new EventEmitter();
 
@@ -55,6 +57,15 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   selectedStatus: any;
   TEAMMATE_STATUS = TEAMMATE_STATUS;
 
+  projects: ProjectUser[] = [];
+  selectedProjectForStatus: ProjectUser | null = null;
+  public openDropdownProjects: boolean = false
+  public openStatusDropdownProjectId: string | null = null
+  statusDropdownPosition = { top: 0, left: 0 };
+  isVisibleMT = false;
+  isVisibleMPA = false;
+  private userDetailsMutationObserver: MutationObserver | null = null;
+  private statusDropdownCloseTimeout: any = null;
 
   translationsMap: Map<string, string> = new Map();
   
@@ -71,7 +82,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     public appConfigProvider: AppConfigProvider,
     public events: EventsService,
     private eRef: ElementRef,
-
+    private projectService: ProjectService,
   ) { }
 
   ngOnInit() {
@@ -80,11 +91,47 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.subcribeToAuthStateChanged();
     this.listenTocurrentProjectUserUserAvailability$();
     this.listenToCurrentStoredProject();
+    this.listenToUserGoOnline();
     this.getOSCODE();
+    this.setupUserDetailsCloseObserver();
   }
 
   ngOnChanges() {  }
 
+  ngOnDestroy(): void {
+    this.userDetailsMutationObserver?.disconnect();
+    this.userDetailsMutationObserver = null;
+    this.cancelStatusDropdownClose();
+  }
+
+  /**
+   * Osserva la rimozione della classe 'active' da #user-details (es. chiusura via click avatar nel sidebar)
+   * per chiudere i dropdown aperti
+   */
+  private setupUserDetailsCloseObserver(): void {
+    setTimeout(() => {
+      const el = document.getElementById('user-details');
+      if (!el) return;
+    this.userDetailsMutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const target = mutation.target as HTMLElement;
+          if (!target.classList.contains('active')) {
+            this.closeDropdowns();
+          }
+        }
+      });
+    });
+    this.userDetailsMutationObserver.observe(el, { attributes: true, attributeFilter: ['class'] });
+    }, 0);
+  }
+
+  private closeDropdowns(): void {
+    this.openDropdownProjects = false;
+    this.openStatusDropdownProjectId = null;
+    this.selectedProjectForStatus = null;
+  }
+
   subcribeToAuthStateChanged() {
     this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
      this.logger.log('[SIDEBAR-USER-DETAILS] BSAuthStateChanged ', state)
@@ -240,6 +287,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
                           .set('LABEL_LOGOUT', text['LABEL_LOGOUT'])
                           .set('SubscriptionPaymentProblem', text['SubscriptionPaymentProblem'])
                           .set('ThePlanHasExpired', text['ThePlanHasExpired'])
+                          .set('NAVBAR.RECENT_PROJECTS', text['NAVBAR.RECENT_PROJECTS'])
+                          .set('NAVBAR.OTHER_PROJECTS', text['NAVBAR.OTHER_PROJECTS'])
 
       this.TEAMMATE_STATUS.forEach(element => {
         element.label = this.translationsMap.get(element.label)
@@ -255,6 +304,36 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.logger.log('[SIDEBAR-USER-DETAILS] AppConfigService getAppConfig', this.appConfigProvider.getConfig());
     
     this.isVisiblePAY = getOSCode("PAY", this.public_Key);
+    this.isVisibleMT = getOSCode("MTT", this.public_Key);
+    this.isVisibleMPA = getOSCode("MPA", this.public_Key);
+  }
+
+  listenToUserGoOnline() {
+    this.events.subscribe('go:online', (isOnline: boolean) => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] listen to go:online --> ', isOnline);
+      if (isOnline) {
+        this.tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
+        this.getProjects();
+      }
+    });
+  }
+
+  getProjects() {
+    this.logger.log('[SIDEBAR-USER-DETAILS] calling getProjects ... ');
+    this.projectService.getProjects().subscribe((projects: ProjectUser[]) => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] getProjects PROJECTS ', projects);
+      if (projects) {
+        this.projects = projects.filter((prj: ProjectUser) => prj?.id_project?.status === 100);
+        this.projects.forEach((prj: ProjectUser) => {
+          prj.teammateStatus = getUserStatusFromProjectUser(prj as any);
+        });
+        this.logger.log('[SIDEBAR-USER-DETAILS] getProjects this.projects ', this.projects);
+      }
+    }, (error) => {
+      this.logger.error('[SIDEBAR-USER-DETAILS] getProjects - ERROR ', error);
+    }, () => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] getProjects - COMPLETE');
+    });
   }
 
   listenToCurrentStoredProject() {
@@ -268,9 +347,9 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
           name: projectObjct['id_project']['name'],
           profile: projectObjct['id_project']['profile'],
           isActiveSubscription: projectObjct['id_project']['isActiveSubscription'],
-          trialExpired: projectObjct['id_project']['trialExpired']
+          trialExpired: projectObjct['id_project']['trialExpired'],
+          teammateStatus: getUserStatusFromProjectUser(projectObjct as any)
         }
-      
         if (this.project.profile.type === 'free') {
 
           if (this.project.trialExpired === false) {
@@ -285,11 +364,17 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
         }
 
         this.wsService.subscriptionToWsCurrentProjectUserAvailability(this.project._id, projectObjct._id);
+        if (this.tiledeskToken) {
+          this.getProjects();
+        }
       }
     })
 
     try {
       this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
+      if (this.tiledeskToken) {
+        this.getProjects();
+      }
       // this.logger.log('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', this.tiledeskToken)
     } catch (err) {
       this.logger.error('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', err)
@@ -350,6 +435,118 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     });
   }
 
+  getCurrentStatusAvatar(): string {
+    const status = this.TEAMMATE_STATUS?.find(s => s.id === this.selectedStatus);
+    return status?.avatar || 'assets/img/teammate-status/avaible.svg';
+  }
+
+  getCurrentStatusLabel(): string {
+    const status = this.TEAMMATE_STATUS?.find(s => s.id === this.selectedStatus);
+    return status?.label || status?.name || '';
+  }
+
+  toggleProjectsDropdown() {
+    this.openDropdownProjects = !this.openDropdownProjects;
+    if (!this.openDropdownProjects) {
+      this.openStatusDropdownProjectId = null;
+      this.selectedProjectForStatus = null;
+    }
+  }
+
+  openStatusDropdownOnHover(event: Event, prjct: any) {
+    this.cancelStatusDropdownClose();
+    const projectId = prjct?.id_project?._id;
+    const el = event.currentTarget as HTMLElement;
+    const rect = el.getBoundingClientRect();
+    this.statusDropdownPosition = {
+      top: rect.top,
+      left: rect.right + 10
+    };
+    this.selectedProjectForStatus = prjct;
+    this.openStatusDropdownProjectId = projectId;
+  }
+
+  closeStatusDropdownOnLeave() {
+    this.cancelStatusDropdownClose();
+    this.statusDropdownCloseTimeout = setTimeout(() => {
+      this.closeDropdowns();
+      this.statusDropdownCloseTimeout = null;
+    }, 150);
+  }
+
+  cancelStatusDropdownClose() {
+    if (this.statusDropdownCloseTimeout) {
+      clearTimeout(this.statusDropdownCloseTimeout);
+      this.statusDropdownCloseTimeout = null;
+    }
+  }
+
+  onChangeProjectStatus(projectUser: ProjectUser, selectedStatusID: any) {
+    this.logger.log('[SIDEBAR-USER-DETAILS] onChangeProjectStatus', projectUser, selectedStatusID)
+    this.openStatusDropdownProjectId = null
+    this.selectedProjectForStatus = 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);
+
+        if(projectUser.id_project._id === this.project._id) {
+          this.project.teammateStatus = getUserStatusFromProjectUser(projectUserUpdated as any);
+        }
+      }, (error) => {
+        this.logger.error('[NAVBAR] - PROJECT-USER UPDATED - ERROR  ', error);
+
+      }, () => {
+        this.logger.log('[NAVBAR] - PROJECT-USER UPDATED  * COMPLETE *');
+
+      });
+  }
+
+  onStatusDropdownOptionClick(status: { id: number; name: string; avatar: string; label: string }, projectUser: ProjectUser | null) {
+    if (!projectUser) return;
+    this.changeProjectStatus(projectUser, status.id);
+    this.openStatusDropdownProjectId = null;
+    this.selectedProjectForStatus = null;
+    if (projectUser?.id_project?._id === this.project?._id) {
+      this.selectedStatus = status.id;
+    }
+  }
+
+  changeProjectStatus(projectUser: ProjectUser, selectedStatusID: number) {
+    this.logger.log('[SIDEBAR-USER-DETAILS] changeProjectStatus projectid', projectUser?.id_project?._id, ' status: ', selectedStatusID);
+    let IS_AVAILABLE: boolean | null = 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((updated: any) => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED ', updated);
+      const p = this.projects.find(prj => prj?.id_project?._id === projectUser?.id_project?._id);
+      if (p) {
+        p.teammateStatus = getUserStatusFromProjectUser(updated as any);
+      }
+    }, (error) => {
+      this.logger.error('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED - ERROR ', error);
+    });
+  }
+
   changeAvailabilityStateInUserDetailsSidebar(selectedStatusID) {
     this.logger.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.project._id, ' available 1: ', selectedStatusID);
     

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -57,6 +57,9 @@ 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';
+import { ProjectService } from 'src/app/services/projects/project.service';
+
+import { PROJECTS_STORAGE_KEY } from 'src/chat21-core/utils/constants';
 
 @Component({
   selector: 'app-conversations-list',
@@ -138,10 +141,13 @@ export class ConversationListPage implements OnInit {
     public tiledeskService: TiledeskService,
     public tiledeskAuthService: TiledeskAuthService,
     public projectUsersService: ProjectUsersService,
+    public projectService: ProjectService,
     public appConfigProvider: AppConfigProvider,
     public platform: Platform,
     public wsService: WebsocketService,
     public g: Globals,
+    public appStorageService: AppStorageService,
+    private triggerEvents: TriggerEvents,
   ) {
     this.checkPlatform();
     this.translations();
@@ -215,8 +221,45 @@ export class ConversationListPage implements OnInit {
   // @ Lifehooks
   // -----------------------------------------------
   ngOnInit() {
-    this.getAppConfigToHideDiplayBtns()
+    this.getAppConfigToHideDiplayBtns();
     this.getOSCODE();
+    this.loadAndStoreProjects();
+  }
+
+  /**
+   * Recupera tutti i progetti con getProjects e li salva in AppStorage.
+   * Prima di salvare verifica che la chiave non esista già e che non contenga già ogni singolo progetto.
+   */
+  private loadAndStoreProjects() {
+    const token = this.tiledeskAuthService.getTiledeskToken();
+    if (!token) return;
+    this.projectService.getProjects().subscribe((projects: Project[]) => {
+        if (!projects?.length) return;
+        let projectsMap: Record<string, Project> = {};
+        const stored = this.appStorageService.getItem(PROJECTS_STORAGE_KEY);
+        if (stored) {
+          try {
+            projectsMap = JSON.parse(stored) || {};
+          } catch (e) {
+            this.logger.warn('[CONVS-LIST-PAGE] loadAndStoreProjects - failed to parse stored projects', e);
+          }
+        }
+        let hasChanges = false;
+        projects.forEach((project) => {
+          const projectId =  project.id_project?._id || project.id_project?.id;
+          if (!projectId) return;
+          if (!projectsMap[projectId]) {
+            projectsMap[projectId] = project.id_project;
+            hasChanges = true;
+          }
+        });
+        if (hasChanges) {
+          this.appStorageService.setItem(PROJECTS_STORAGE_KEY, JSON.stringify(projectsMap));
+          this.logger.log('[CONVS-LIST-PAGE] loadAndStoreProjects - saved', Object.keys(projectsMap).length, 'projects');
+        }
+      },
+      (err) => this.logger.error('[CONVS-LIST-PAGE] loadAndStoreProjects - error', err)
+    );
   }
 
   ngOnChanges() {
@@ -795,6 +838,7 @@ export class ConversationListPage implements OnInit {
       this.logger.log('[CONVS-LIST-PAGE] onConversationSelected active conversation.uid ', conversation.uid)
       this.events.publish('convList:onConversationSelected', conversation)
     }
+    this.triggerEvents.triggerOnConversationChanged(conversation)
   }
 
   onImageLoaded(conversation: any) {
@@ -862,22 +906,32 @@ export class ConversationListPage implements OnInit {
       }
     }
     
-    if(conversation.attributes && conversation.attributes['projectId']){
-      let project = localStorage.getItem(conversation.attributes['projectId'])
-      if(project){
-        project = JSON.parse(project)
-        conversation.attributes.project_name = project['name']
-      }
-    }else if(conversation.attributes){
-      const projectId = getProjectIdSelectedConversation(conversation.uid)
-      let project = localStorage.getItem(projectId)
-      if(project){
-        project = JSON.parse(project)
-        conversation.attributes.projectId = project['_id']
-        conversation.attributes.project_name = project['name']
-      }
+    const project = this.getProjectFromStorage(conversation);
+    if (project) {
+      if (!conversation.attributes) conversation.attributes = {};
+      conversation.attributes.projectId = project._id;
+      conversation.attributes.project_name = project.name;
     }
+  }
 
+  /** Recupera il progetto dalla chiave di storage (all_projects) */
+  private getProjectFromStorage(conversation: ConversationModel): Project | null {
+    let projectId: string | undefined;
+    if (conversation.attributes?.['projectId']) {
+      projectId = conversation.attributes['projectId'];
+    } else if (conversation.attributes) {
+      projectId = getProjectIdSelectedConversation(conversation.uid);
+    }
+    if (!projectId) return null;
+    const stored = this.appStorageService.getItem(PROJECTS_STORAGE_KEY);
+    this.logger.log('[CONVS-LIST-PAGE] getProjectFromStorage - stored', stored);
+    if (!stored) return null;
+    try {
+      const projectsMap: Record<string, Project> = JSON.parse(stored);
+      return projectsMap[projectId] || null;
+    } catch {
+      return null;
+    }
   }
 
   // isMarkdownLink(last_message_text) {

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.html

@@ -40,11 +40,13 @@
         </ion-list-conversations>
       </ng-container>
       <ng-template #noConvs>
-        <ion-item id="no-convs" class="ion-text-center" lines="none">
-          <ion-label class="ion-text-wrap" color="medium">
-            {{ 'LABEL_MSG_PUSH_START_CHAT' | translate }}
-          </ion-label>
-        </ion-item>
+        <div class="no-convs-container">
+          <ion-item id="no-convs" class="ion-text-center" lines="none">
+            <ion-label class="ion-text-wrap" color="medium">
+              {{ 'LABEL_MSG_PUSH_START_CHAT' | translate }}
+            </ion-label>
+          </ion-item>
+        </div>
       </ng-template>
     </ion-list>
   </div>

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.scss

@@ -233,3 +233,18 @@ ion-content::part(scroll) {
   min-height: calc(100vh - var(--header-height, 56px));
   height: 100%;
 }
+
+// -------------------------------------------------
+// Empty state - label centrata nell'altezza disponibile
+// -------------------------------------------------
+.no-convs-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - var(--header-height, 56px));
+  width: 100%;
+
+  ion-item {
+    --background: transparent;
+  }
+}