[DURACOM-191] fix menu item map

This commit is contained in:
Andrea Barbasso
2024-01-17 10:05:08 +01:00
parent b61720cff7
commit 89705d8afe
6 changed files with 15 additions and 12 deletions

View File

@@ -19,7 +19,7 @@
<div class="toggle"> <div class="toggle">
<span id="sidebarName-{{section.id}}" class="section-header-text"> <span id="sidebarName-{{section.id}}" class="section-header-text">
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component | async; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</span> </span>
<i class="fas fa-chevron-right fa-pull-right" <i class="fas fa-chevron-right fa-pull-right"
[@rotate]="(expanded | async) ? 'expanded' : 'collapsed'" [@rotate]="(expanded | async) ? 'expanded' : 'collapsed'"
@@ -29,7 +29,7 @@
<ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="(expanded | async)"> <ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="(expanded | async)">
<li *ngFor="let subSection of (subSections$ | async)"> <li *ngFor="let subSection of (subSections$ | async)">
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component | async; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
</li> </li>
</ul> </ul>
</div> </div>

View File

@@ -10,13 +10,13 @@
(click)="toggleSection($event)" (click)="toggleSection($event)"
data-toggle="dropdown"> data-toggle="dropdown">
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component | async; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</button> </button>
<ul @slide *ngIf="(active | async)" (click)="deactivateSection($event)" <ul @slide *ngIf="(active | async)" (click)="deactivateSection($event)"
class="m-0 shadow-none border-top-0 dropdown-menu show"> class="m-0 shadow-none border-top-0 dropdown-menu show">
<li *ngFor="let subSection of (subSections$ | async)"> <li *ngFor="let subSection of (subSections$ | async)">
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component | async; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
</li> </li>
</ul> </ul>
</div> </div>

View File

@@ -1,3 +1,3 @@
<div class="nav-item navbar-section text-md-center"> <div class="nav-item navbar-section text-md-center">
<ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component | async; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container> <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</div> </div>

View File

@@ -11,7 +11,7 @@
<ng-template #spacer><i class="fas fa-fw"></i></ng-template> <ng-template #spacer><i class="fas fa-fw"></i></ng-template>
</div> </div>
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component | async; injector: (sectionMap$ | async).get(subSection.id).injector;"> *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
</ng-container> </ng-container>
</li> </li>
</ul> </ul>

View File

@@ -1,12 +1,15 @@
import { MenuItemType } from './menu-item-type.model'; import { MenuItemType } from './menu-item-type.model';
import { defer } from 'rxjs'; import { ExternalLinkMenuItemComponent } from './menu-item/external-link-menu-item.component';
import { LinkMenuItemComponent } from './menu-item/link-menu-item.component';
import { OnClickMenuItemComponent } from './menu-item/onclick-menu-item.component';
import { TextMenuItemComponent } from './menu-item/text-menu-item.component';
const menuMenuItemComponentMap = new Map(); const menuMenuItemComponentMap = new Map();
menuMenuItemComponentMap.set(MenuItemType.EXTERNAL, defer(() => import('./menu-item/external-link-menu-item.component').then(m => m.ExternalLinkMenuItemComponent))); menuMenuItemComponentMap.set(MenuItemType.EXTERNAL, ExternalLinkMenuItemComponent);
menuMenuItemComponentMap.set(MenuItemType.LINK, defer(() => import('./menu-item/link-menu-item.component').then(m => m.LinkMenuItemComponent))); menuMenuItemComponentMap.set(MenuItemType.LINK, LinkMenuItemComponent);
menuMenuItemComponentMap.set(MenuItemType.ONCLICK, defer(() => import('./menu-item/onclick-menu-item.component').then(m => m.OnClickMenuItemComponent))); menuMenuItemComponentMap.set(MenuItemType.ONCLICK, OnClickMenuItemComponent);
menuMenuItemComponentMap.set(MenuItemType.TEXT, defer(() => import('./menu-item/text-menu-item.component').then(m => m.TextMenuItemComponent))); menuMenuItemComponentMap.set(MenuItemType.TEXT, TextMenuItemComponent);
/** /**
* Decorator function to link a MenuItemType to a Component * Decorator function to link a MenuItemType to a Component

View File

@@ -40,7 +40,7 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
*/ */
sectionMap$: BehaviorSubject<Map<string, { sectionMap$: BehaviorSubject<Map<string, {
injector: Injector, injector: Injector,
component: Observable<GenericConstructor<MenuSectionComponent>> component: GenericConstructor<MenuSectionComponent>
}>> = new BehaviorSubject(new Map()); }>> = new BehaviorSubject(new Map());
/** /**