From fa0ec0bf0c375b2d55a72c0792eb7f2666dbd8da Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Fri, 19 Jul 2024 16:43:39 +0200
Subject: [PATCH] [CST-15590] Close user profile menu after menu entry is
 selected

---
 .../auth-nav-menu/auth-nav-menu.component.html     |  4 ++--
 .../user-menu/themed-user-menu.component.ts        |  9 ++++++++-
 .../user-menu/user-menu.component.html             |  6 +++---
 .../user-menu/user-menu.component.spec.ts          | 11 +++++++++++
 .../auth-nav-menu/user-menu/user-menu.component.ts | 14 ++++++++++++++
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index 74ae8216349..70d7a382f6e 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -19,7 +19,7 @@
     </div>
   </div>
   <div *ngIf="(isAuthenticated | async) && (showAuth | async)" class="nav-item">
-    <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
+    <div ngbDropdown #loggedInDrop="ngbDropdown" display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
       <a href="javascript:void(0);"
          role="menuitem"
          [attr.aria-label]="'nav.user-profile-menu-and-logout' | translate"
@@ -30,7 +30,7 @@
          ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
       <div id="logoutDropdownMenu" ngbDropdownMenu>
-        <ds-user-menu [inExpandableNavbar]="false"></ds-user-menu>
+        <ds-user-menu [inExpandableNavbar]="false" (changedRoute)="loggedInDrop.close()"></ds-user-menu>
       </div>
     </div>
   </div>
diff --git a/src/app/shared/auth-nav-menu/user-menu/themed-user-menu.component.ts b/src/app/shared/auth-nav-menu/user-menu/themed-user-menu.component.ts
index 38112cfa7c8..6b5e509393a 100644
--- a/src/app/shared/auth-nav-menu/user-menu/themed-user-menu.component.ts
+++ b/src/app/shared/auth-nav-menu/user-menu/themed-user-menu.component.ts
@@ -1,6 +1,8 @@
 import {
   Component,
+  EventEmitter,
   Input,
+  Output,
 } from '@angular/core';
 
 import { ThemedComponent } from '../../theme-support/themed.component';
@@ -23,7 +25,12 @@ export class ThemedUserMenuComponent extends ThemedComponent<UserMenuComponent>{
    */
   @Input() inExpandableNavbar: boolean;
 
-  protected inAndOutputNames: (keyof UserMenuComponent & keyof this)[] = ['inExpandableNavbar'];
+  /**
+   * Emits an event when the route changes
+   */
+  @Output() changedRoute: EventEmitter<any> = new EventEmitter<any>();
+
+  protected inAndOutputNames: (keyof UserMenuComponent & keyof this)[] = ['inExpandableNavbar', 'changedRoute'];
 
   protected getComponentName(): string {
     return 'UserMenuComponent';
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
index 4c36cc2f24b..130c01c0494 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
@@ -6,17 +6,17 @@
     {{dsoNameService.getName(user$ | async)}}<br>
     <span class="text-muted">{{(user$ | async)?.email}}</span>
   </li>
-  <li class="ds-menu-item-wrapper" role="presentation">
+  <li class="ds-menu-item-wrapper" role="presentation" (click)="onMenuItemClick()">
     <a class="ds-menu-item" role="menuitem"
        [routerLink]="[profileRoute]"
        routerLinkActive="active">{{'nav.profile' | translate}}</a>
   </li>
-  <li class="ds-menu-item-wrapper" role="presentation">
+  <li class="ds-menu-item-wrapper" role="presentation" (click)="onMenuItemClick()">
     <a class="ds-menu-item" role="menuitem"
        [routerLink]="[mydspaceRoute]"
        routerLinkActive="active">{{'nav.mydspace' | translate}}</a>
   </li>
-  <li class="ds-menu-item-wrapper" role="presentation">
+  <li class="ds-menu-item-wrapper" role="presentation" (click)="onMenuItemClick()">
     <a class="ds-menu-item" role="menuitem"
        [routerLink]="[subscriptionsRoute]"
        routerLinkActive="active">{{'nav.subscriptions' | translate}}</a>
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
index c7ddf2ac34a..f0758ce1c24 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
@@ -203,6 +203,17 @@ describe('UserMenuComponent', () => {
       expect(components).toBeFalsy();
     });
 
+    it('should call onMenuItemClick when li is clicked', () => {
+      spyOn(component, 'onMenuItemClick');
+      const lis = fixture.debugElement.queryAll(By.css('.ds-menu-item-wrapper'));
+      const secondLi = lis[1];
+      secondLi.triggerEventHandler('click', {
+        preventDefault: () => {/**/
+        },
+      });
+      expect(component.onMenuItemClick).toHaveBeenCalled();
+    });
+
   });
 
 });
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.ts b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.ts
index 51590e8c8af..6a601bd9a3b 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.ts
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.ts
@@ -5,8 +5,10 @@ import {
 } from '@angular/common';
 import {
   Component,
+  EventEmitter,
   Input,
   OnInit,
+  Output,
 } from '@angular/core';
 import {
   RouterLink,
@@ -49,6 +51,11 @@ export class UserMenuComponent implements OnInit {
    */
   @Input() inExpandableNavbar = false;
 
+  /**
+   * Emits an event when the route changes
+   */
+  @Output() changedRoute: EventEmitter<any> = new EventEmitter<any>();
+
   /**
    * True if the authentication is loading.
    * @type {Observable<boolean>}
@@ -96,4 +103,11 @@ export class UserMenuComponent implements OnInit {
     this.user$ = this.authService.getAuthenticatedUserFromStore();
 
   }
+
+  /**
+   * Emits an event when the menu item is clicked
+   */
+  onMenuItemClick() {
+    this.changedRoute.emit();
+  }
 }