[CST-15590] Close user profile menu after menu entry is selected (#3760)

(cherry picked from commit fa0ec0b)

Co-authored-by: Alisa Ismailati <[email protected]>

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>

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';

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>

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();
+    });
+
   });
 
 });

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();
+  }
 }