@chat21/chat21-ionic 3.4.32-rc7 → 3.4.32-rc9

package/CHANGELOG.md

@@ -8,6 +8,23 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 3.4.32-rc9
+- **added**: sidebar-user-details — MutationObserver to close dropdowns when user details panel is hidden (watches #user-details class); cleanup in ngOnDestroy to prevent memory leaks.
+- **changed**: sidebar-user-details — refined closeDropdowns for better dropdown management when panel closes.
+- **added**: sidebar-user-details — hover to open status dropdown; improved status dropdown positioning logic.
+- **changed**: sidebar-user-details — flexbox layout (justify-content: space-between) for improved project item spacing.
+- **changed**: sidebar-user-details — HTML structure for conditional rendering of teammate status images and titles; cleaned up unused SCSS.
+
+# 3.4.32-rc8
+- **bug-fixed**: sidebar-user-details — status dropdown not visible when clicking first/last project; moved outside #user-details container to avoid overflow clipping.
+- **bug-fixed**: sidebar-user-details — replaced `transform` on #user-details with `left` animation to fix `position: fixed` containing block (dropdown positioning).
+- **changed**: sidebar-user-details — projects_dropdown_container and status-dropdown now use same colors as ng-select teammate-status-in-drawer.
+- **changed**: sidebar-user-details — projects-dropdown-wrapper styled to match ng-select container.
+- **added**: sidebar-user-details — MPA feature flag in featuresToken: if MPA is true show projects_dropdown_container, else show availability_dropdown_container.
+- **bug-fixed**: RouterModule.forRoot() called twice when clicking conversation — SharedModule now imports RouterModule.forChild([]) instead of AppRoutingModule.
+- **changed**: FindPipe and FilterPipe moved from AppModule to SharedModule for app-wide availability.
+- **added**: conversations-list — postMessage to hosting app on conversation selection (event: `onConversationChanged`, data: full conversation object).
+
 # 3.4.32-rc7
 - **addded**: ability to change availability status for each project the logged-in user in sidebar-user-detail 
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.4.32-rc7",
+    "version": "3.4.32-rc9",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

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

@@ -80,36 +80,40 @@
             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 | 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-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' }}</span>
+                    <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 class="ripple-container"></div>
                 <div id="projects_dropdown" class="dropdown-menu" [ngClass]="{'open': openDropdownProjects}">
-                    <li *ngFor="let prjct of projects?.slice() | slice:0:5; let i=index" style="cursor: pointer">
-                        <a [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }"
+                    <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]="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" />
+                            [attr.title]="prjct?.teammateStatus?.name">
+                            <span class="project-item-status-name">{{prjct?.teammateStatus?.name}}</span>
+                            <img [src]="prjct?.teammateStatus?.avatar" />
                           </span>
                         </a>
-                      </li>
+                    </li>
                 </div>
             </div>
         </ng-container>
@@ -168,11 +172,13 @@
 </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" (click)="$event.stopPropagation()"
-  [style.top.px]="statusDropdownPosition.top" [style.right.px]="statusDropdownPosition.right">
+<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>{{ translationsMap?.get(status.label) || status.name }}</span>
+    <span>{{ status.name }}</span>
   </div>
 </div>

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

@@ -164,7 +164,6 @@
     text-align: center;
     background-color: var(--sidebar-user-detail-select-background);
     padding: 4px 0px;
-    width: 192px;
     border-radius: 4px;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
@@ -174,6 +173,7 @@
     z-index: 2;
 
 
+
     .btn{
         display: flex;
         position: relative;
@@ -213,6 +213,10 @@
         border: 1px solid var(--sidebar-user-detail-select-background);
     }
 
+    .teammate-status-in-drawer {
+        width: 190px;
+    }
+
     /* projects-dropdown-wrapper - stile come ng-select .ng-select-container (teammate-status-in-drawer) */
     .projects-dropdown-wrapper {
         position: relative;
@@ -222,12 +226,12 @@
         color: var(--sidebar-user-detail-select-color);
         border: 1px solid var(--sidebar-user-detail-select-background);
         border-radius: 4px;
-        cursor: pointer;
         display: flex;
         align-items: center;
         text-align: left;
         font-size: 14px;
         line-height: 1.4;
+        width: 250px;
 
         .projects-dropdown-toggle {
             background-color: transparent !important;
@@ -235,7 +239,7 @@
             padding: 0 !important;
             min-height: auto;
             flex: 1;
-            justify-content: flex-start;
+            justify-content: space-between;
             color: inherit;
             font-size: inherit;
         }
@@ -245,6 +249,9 @@
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
 
         .dropdown-menu {
@@ -309,16 +316,6 @@
             background-color: var(--sidebar-user-detail-select-hover-background);
         }
     
-        &.all-projects,
-        &.add-project{
-            color: var(--sidebar-user-detail-select-color);
-            i{
-                padding-right: 5px; 
-                margin-bottom: 2px; 
-                font-size: 20px
-            }
-        }
-    
         &.section-title{
             padding-left: 24px;
             font-size: 12px; 
@@ -327,14 +324,6 @@
         }
     }
     
-    .dropdown-menu .divider{
-        background-color: rgba(255, 255, 255, 0.2);
-        margin: 5px 0;
-    
-        height: 1px;
-        overflow: hidden;
-    }
-    
     .dropdown-menu li>a{
         font-size: 13px;
         padding: 10px 20px;
@@ -348,7 +337,14 @@
         color: var(--sidebar-user-detail-select-color);
         white-space: nowrap;
         text-decoration: none;
-        cursor: pointer;
+        cursor: auto;
+    
+        img {
+            width: 15px;
+            height: 15px;
+            position: relative;
+            top: 1px;
+        }
     
         .material-icons {
             vertical-align: middle;
@@ -375,6 +371,7 @@
             }
     
             .project-item-status {
+                cursor: pointer;
                 flex: 0 0 10%;
                 display: flex;
                 justify-content: flex-end;
@@ -439,6 +436,19 @@
     box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.26);
     list-style: none;
 
+    /* Triangolino in alto a sinistra, fuori dal container, con leggero gap in basso */
+    &::before {
+        content: '';
+        position: absolute;
+        left: -7px;
+        top: 10px;
+        width: 0;
+        height: 0;
+        border-top: 7px solid transparent;
+        border-bottom: 7px solid transparent;
+        border-right: 7px solid var(--sidebar-user-detail-select-background);
+    }
+
     .status-dropdown-option {
         display: flex;
         align-items: center;

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';
@@ -24,7 +24,7 @@ import { ProjectUser } from 'src/chat21-core/models/project_user';
   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();
 
@@ -61,9 +61,11 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   selectedProjectForStatus: ProjectUser | null = null;
   public openDropdownProjects: boolean = false
   public openStatusDropdownProjectId: string | null = null
-  statusDropdownPosition = { top: 0, right: 0 };
+  statusDropdownPosition = { top: 0, left: 0 };
   isVisibleMT = false;
   isVisibleMPA = false;
+  private userDetailsMutationObserver: MutationObserver | null = null;
+  private statusDropdownCloseTimeout: any = null;
 
   translationsMap: Map<string, string> = new Map();
   
@@ -91,10 +93,45 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     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)
@@ -310,7 +347,8 @@ 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') {
 
@@ -415,23 +453,32 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     }
   }
 
-  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.selectedProjectForStatus = prjct
-    } else {
-      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;
     }
-    this.openStatusDropdownProjectId = this.openStatusDropdownProjectId === projectId ? null : projectId
   }
 
   onChangeProjectStatus(projectUser: ProjectUser, selectedStatusID: any) {
@@ -455,6 +502,9 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
         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);
 

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

@@ -147,6 +147,7 @@ export class ConversationListPage implements OnInit {
     public wsService: WebsocketService,
     public g: Globals,
     public appStorageService: AppStorageService,
+    private triggerEvents: TriggerEvents,
   ) {
     this.checkPlatform();
     this.translations();
@@ -837,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) {

package/src/app/pipe/filter.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FilterPipe } from './filter.pipe';
+
+describe('FilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/app/pipe/filter.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter'
+})
+export class FilterPipe implements PipeTransform {
+
+  transform(items: any[], filter: Object): any {
+    if (!items || !filter) {
+      return items;
+    }
+    return items.filter(item => item[filter['key']] ===  filter['value']);
+  }
+
+}

package/src/app/pipe/find.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FindPipe } from './find.pipe';
+
+describe('FindPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FindPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/app/pipe/find.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'find'
+})
+export class FindPipe implements PipeTransform {
+
+  transform(items: any[], filter: Object): any {
+    if (!items || !filter) {
+      return items;
+    }
+    return items.find(item => item[filter['key']] ===  filter['value']);
+  }
+
+}

package/src/app/services/triggerEvents/triggerEvents.ts

@@ -131,4 +131,16 @@ export class TriggerEvents {
     }
 
     
+    public triggerOnConversationChanged(conversation: ConversationModel) {
+        this.logger.debug(' ---------------- triggerOnConversationChanged ---------------- ', conversation);
+        try {
+            const windowContext = this.windowContext;
+            if (windowContext) {
+                windowContext.postMessage({ type: 'onConversationChanged', data: conversation }, '*');
+            }
+        } catch (e) {
+            this.logger.error('[TRIGGER-HANDLER] > Error triggerOnConversationChanged:' + e);
+        }
+    }
+
 }

package/src/app/shared/shared.module.ts

@@ -26,6 +26,8 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { createTranslateLoader } from 'src/chat21-core/utils/utils';
 import { HttpClient } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
+import { FindPipe } from '../pipe/find.pipe';
+import { FilterPipe } from '../pipe/filter.pipe';
 
 @NgModule({
   declarations: [
@@ -68,12 +70,13 @@ import { RouterModule } from '@angular/router';
      SidebarUserDetailsComponent,
     
      //DIRECTIVES
-     AutofocusDirective,
-     TooltipDirective,
-     MarkedPipe,
-     HtmlEntitiesEncodePipe,
-     SafeHtmlPipe,
- 
+    AutofocusDirective,
+    TooltipDirective,
+    MarkedPipe,
+    HtmlEntitiesEncodePipe,
+    SafeHtmlPipe,
+    FindPipe,
+    FilterPipe,
 
 
      AvatarProfileComponent,
@@ -124,6 +127,8 @@ import { RouterModule } from '@angular/router';
     MarkedPipe,
     HtmlEntitiesEncodePipe,
     SafeHtmlPipe,
+    FindPipe,
+    FilterPipe,
 
     RouterModule,
 

package/src/chat21-core/models/projects.ts

@@ -20,6 +20,7 @@ export interface Project {
     isActiveSubscription?: boolean;
     profile?: any;
     offlineMsgEmail?: boolean;
+    teammateStatus?: any;
     // subscription_end_date?: any;
     // subscription_id?: any;
     // subscription_creation_date?: any;

package/src/chat21-core/utils/constants.ts

@@ -153,6 +153,6 @@ export const TEAMMATE_STATUS = [
     { id: 1, name: 'Available', avatar: 'assets/img/teammate-status/avaible.svg', label: "LABEL_AVAILABLE" },
     { id: 2, name: 'Unavailable', avatar: 'assets/img/teammate-status/unavaible.svg', label: "LABEL_NOT_AVAILABLE" },
     { id: 3, name: 'Inactive', avatar: 'assets/img/teammate-status/inactive.svg', label: "LABEL_INACTIVE" },
-  ];
+];