[DURACOM-501] adapt public menu to use decorators

Author: FrancescoMolinaro

src/app/shared/dso-page/dso-public-menu/dso-public-expandable-menu-section/dso-public-menu-expandable-section.component.html

@@ -17,9 +17,9 @@
                 }
               </div>
             }
-            <ng-container
-              *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
-            </ng-container>
+            @if (sectionMap().get(subSection.id); as subSectionDTO) {
+              <ng-container *ngComponentOutlet="subSectionDTO.component; injector: subSectionDTO.injector;"></ng-container>
+            }
           </li>
         }
       </ul>

src/app/shared/dso-page/dso-public-menu/dso-public-expandable-menu-section/dso-public-menu-expandable-section.component.spec.ts

@@ -16,6 +16,8 @@ import { MenuItemType } from '../../../menu/menu-item-type.model';
 import { MenuItemModels } from '../../../menu/menu-section.model';
 import { MenuServiceStub } from '../../../menu/menu-service.stub';
 import { CSSVariableService } from '../../../sass-helper/css-variable.service';
+import { getMockThemeService } from '../../../theme-support/test/theme-service.mock';
+import { ThemeService } from '../../../theme-support/theme.service';
 import { DsoPublicMenuExpandableSectionComponent } from './dso-public-menu-expandable-section.component';
 
 describe('DsoPublicMenuExpandableSectionComponent', () => {
@@ -41,10 +43,10 @@ describe('DsoPublicMenuExpandableSectionComponent', () => {
       TestBed.configureTestingModule({
         imports: [TranslateModule.forRoot(), DsoPublicMenuExpandableSectionComponent, TestComponent],
         providers: [
-          { provide: 'sectionDataProvider', useValue: dummySection },
           { provide: MenuService, useValue: menuService },
           { provide: CSSVariableService, useClass: CSSVariableServiceStub },
           { provide: Router, useValue: new RouterStub() },
+          { provide: ThemeService, useValue: getMockThemeService() },
         ],
       }).compileComponents();
     }));
@@ -57,7 +59,9 @@ describe('DsoPublicMenuExpandableSectionComponent', () => {
       }]));
       fixture = TestBed.createComponent(DsoPublicMenuExpandableSectionComponent);
       component = fixture.componentInstance;
-      spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
+      component.section = dummySection;
+      component.itemModel = dummySection.model;
+      spyOn(component, 'getMenuItemComponent').and.returnValue(Promise.resolve(TestComponent));
       fixture.detectChanges();
     });
 
@@ -76,10 +80,10 @@ describe('DsoPublicMenuExpandableSectionComponent', () => {
       TestBed.configureTestingModule({
         imports: [TranslateModule.forRoot(), DsoPublicMenuExpandableSectionComponent, TestComponent],
         providers: [
-          { provide: 'sectionDataProvider', useValue: dummySection },
           { provide: MenuService, useValue: menuService },
           { provide: CSSVariableService, useClass: CSSVariableServiceStub },
           { provide: Router, useValue: new RouterStub() },
+          { provide: ThemeService, useValue: getMockThemeService() },
         ],
       }).compileComponents();
     }));
@@ -88,7 +92,8 @@ describe('DsoPublicMenuExpandableSectionComponent', () => {
       spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(of([]));
       fixture = TestBed.createComponent(DsoPublicMenuExpandableSectionComponent);
       component = fixture.componentInstance;
-      spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
+      component.section = dummySection;
+      spyOn(component, 'getMenuItemComponent').and.returnValue(Promise.resolve(TestComponent));
       fixture.detectChanges();
     });
 

src/app/shared/dso-page/dso-public-menu/dso-public-expandable-menu-section/dso-public-menu-expandable-section.component.ts

@@ -11,7 +11,6 @@ import {
 } from '@angular/common';
 import {
   Component,
-  Inject,
   Injector,
   OnInit,
 } from '@angular/core';
@@ -33,6 +32,8 @@ import { AbstractMenuSectionComponent } from 'src/app/shared/menu/menu-section/a
 
 import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import { MenuService } from '../../../menu/menu.service';
+import { rendersSectionForMenu } from '../../../menu/menu-section.decorator';
+import { ThemeService } from '../../../theme-support/theme.service';
 
 /**
  * Represents an expandable section in the dso public menus
@@ -50,18 +51,14 @@ import { MenuService } from '../../../menu/menu.service';
     TranslateModule,
   ],
 })
+@rendersSectionForMenu(MenuID.DSO_PUBLIC, true)
 export class DsoPublicMenuExpandableSectionComponent extends AbstractMenuSectionComponent implements OnInit {
 
   /**
    * This section resides in the DSO public menu
    */
   menuID: MenuID = MenuID.DSO_PUBLIC;
 
-  /**
-   * The MenuItemModel of the top section
-   */
-  itemModel;
-
   /**
    * Emits whether one of the subsections contains an icon
    */
@@ -73,13 +70,16 @@ export class DsoPublicMenuExpandableSectionComponent extends AbstractMenuSection
   hasSubSections$: Observable<boolean>;
 
   constructor(
-    @Inject('sectionDataProvider') protected section: MenuSection,
     protected menuService: MenuService,
     protected injector: Injector,
+    protected themeService: ThemeService,
     protected router: Router,
   ) {
-    super(menuService, injector);
-    this.itemModel = section.model;
+    super(
+      menuService,
+      injector,
+      themeService,
+    );
   }
 
   ngOnInit(): void {

src/app/shared/dso-page/dso-public-menu/dso-public-menu-section/dso-public-menu-section.component.spec.ts

@@ -20,15 +20,11 @@ import { MenuService } from '../../../menu/menu.service';
 import { OnClickMenuItemModel } from '../../../menu/menu-item/models/onclick.model';
 import { MenuServiceStub } from '../../../menu/menu-service.stub';
 import { CSSVariableService } from '../../../sass-helper/css-variable.service';
+import { getMockThemeService } from '../../../theme-support/test/theme-service.mock';
+import { ThemeService } from '../../../theme-support/theme.service';
 import { DsoPublicMenuSectionComponent } from './dso-public-menu-section.component';
 
-function initAsync(dummySectionText: {
-  visible: boolean;
-  icon: string;
-  active: boolean;
-  model: { disabled: boolean; text: string; type: MenuItemType };
-  id: string
-}, menuService: MenuServiceStub) {
+function initAsync(menuService: MenuServiceStub) {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -37,11 +33,11 @@ function initAsync(dummySectionText: {
         TestComponent,
       ],
       providers: [
-        { provide: 'sectionDataProvider', useValue: dummySectionText },
         { provide: MenuService, useValue: menuService },
         { provide: CSSVariableService, useClass: CSSVariableServiceStub },
         { provide: Router, useValue: new RouterStub() },
         { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
+        { provide: ThemeService, useValue: getMockThemeService() },
       ],
     }).compileComponents();
   }));
@@ -90,13 +86,15 @@ describe('DsoPublicMenuSectionComponent', () => {
   };
 
   describe('text model', () => {
-    initAsync(dummySectionText, menuService);
+    initAsync(menuService);
 
     beforeEach(() => {
       spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(of([]));
       fixture = TestBed.createComponent(DsoPublicMenuSectionComponent);
       component = fixture.componentInstance;
-      spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
+      component.section = dummySectionText;
+      component.itemModel = component.section.model;
+      spyOn(component, 'getMenuItemComponent').and.returnValue(Promise.resolve(TestComponent));
       fixture.detectChanges();
     });
 
@@ -117,12 +115,14 @@ describe('DsoPublicMenuSectionComponent', () => {
     });
   });
   describe('on click model', () => {
-    initAsync(dummySectionClick, menuService);
+    initAsync(menuService);
     beforeEach(() => {
       spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(of([]));
       fixture = TestBed.createComponent(DsoPublicMenuSectionComponent);
       component = fixture.componentInstance;
-      spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
+      component.section = dummySectionClick;
+      component.itemModel = component.section.model;
+      spyOn(component, 'getMenuItemComponent').and.returnValue(Promise.resolve(TestComponent));
       fixture.detectChanges();
     });
 
@@ -160,12 +160,14 @@ describe('DsoPublicMenuSectionComponent', () => {
   });
 
   describe('when the section model in a non disabled link', () => {
-    initAsync(dummySectionLink, menuService);
+    initAsync(menuService);
     beforeEach(() => {
       spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(of([]));
       fixture = TestBed.createComponent(DsoPublicMenuSectionComponent);
       component = fixture.componentInstance;
-      spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent);
+      component.section = dummySectionLink;
+      component.itemModel = component.section.model;
+      spyOn(component, 'getMenuItemComponent').and.returnValue(Promise.resolve(TestComponent));
       fixture.detectChanges();
     });
 

src/app/shared/dso-page/dso-public-menu/dso-public-menu-section/dso-public-menu-section.component.ts

@@ -7,7 +7,6 @@
  */
 import {
   Component,
-  Inject,
   Injector,
   OnInit,
 } from '@angular/core';
@@ -20,7 +19,8 @@ import { AbstractMenuSectionComponent } from 'src/app/shared/menu/menu-section/a
 import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import { MenuService } from '../../../menu/menu.service';
 import { MenuID } from '../../../menu/menu-id.model';
-import { MenuSection } from '../../../menu/menu-section.model';
+import { rendersSectionForMenu } from '../../../menu/menu-section.decorator';
+import { ThemeService } from '../../../theme-support/theme.service';
 
 /**
  * Represents a non-expandable section in the dso public menus
@@ -36,20 +36,23 @@ import { MenuSection } from '../../../menu/menu-section.model';
     TranslateModule,
   ],
 })
+@rendersSectionForMenu(MenuID.DSO_PUBLIC, false)
 export class DsoPublicMenuSectionComponent extends AbstractMenuSectionComponent implements OnInit {
 
   menuID: MenuID = MenuID.DSO_PUBLIC;
-  itemModel;
   hasLink: boolean;
   canActivate: boolean;
 
   constructor(
-    @Inject('sectionDataProvider') protected section: MenuSection,
     protected menuService: MenuService,
     protected injector: Injector,
+    protected themeService: ThemeService,
   ) {
-    super(menuService, injector);
-    this.itemModel = section.model;
+    super(
+      menuService,
+      injector,
+      themeService,
+    );
   }
 
   ngOnInit(): void {

src/app/shared/dso-page/dso-public-menu/dso-public-menu.component.html

@@ -1,11 +1,12 @@
 <div class="dso-public-menu d-flex"
      [attr.role]="(menuVisibleWithSections$ | async) ? 'menubar' : null"
      [attr.aria-hidden]="(menuVisibleWithSections$ | async) === false ? 'true' : null">
-  @for (section of (sections | async); track section) {
+  @for (sectionDTO of (sectionDTOs$ | async); track sectionDTO) {
     <div class="ms-1">
-      <ng-container
-        *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;">
-      </ng-container>
+      <ds-menu-component-loader [menuID]="menuID"
+                                [expandable]="sectionDTO.hasSubSections || sectionDTO.menuSection.alwaysRenderExpandable"
+                                [section]="sectionDTO.menuSection">
+      </ds-menu-component-loader>
     </div>
   }
 </div>

src/app/shared/dso-page/dso-public-menu/dso-public-menu.component.ts

@@ -5,10 +5,7 @@
  *
  * http://www.dspace.org/license/
  */
-import {
-  AsyncPipe,
-  NgComponentOutlet,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   Injector,
@@ -27,6 +24,7 @@ import {
 
 import { MenuComponent } from '../../menu/menu.component';
 import { MenuService } from '../../menu/menu.service';
+import { MenuComponentLoaderComponent } from '../../menu/menu-component-loader/menu-component-loader.component';
 import { MenuID } from '../../menu/menu-id.model';
 import { ThemeService } from '../../theme-support/theme.service';
 
@@ -40,7 +38,7 @@ import { ThemeService } from '../../theme-support/theme.service';
   templateUrl: './dso-public-menu.component.html',
   imports: [
     AsyncPipe,
-    NgComponentOutlet,
+    MenuComponentLoaderComponent,
   ],
 })
 export class DsoPublicMenuComponent extends MenuComponent {