[ACS-3700] Pass mat menu items from external components to mat menu (#…

…2720) * [ACS-3700] Pass mat menu items from external components to mat menu * [ACS-3700] Linter fixes
Alfresco · Nov 2, 2022 · eee6fec · eee6fec
1 parent 2b12fa9
commit eee6fec
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/...s/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.ts b/...s/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.ts
@@ -23,9 +23,10 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
 import { AppExtensionService } from '../../../services/app.extension.service';
+import { MatMenuItem } from '@angular/material/menu';
 
 @Component({
   selector: 'app-toolbar-menu-item',
@@ -44,6 +45,9 @@ export class ToolbarMenuItemComponent {
   @Input()
   actionRef: ContentActionRef;
 
+  @ViewChild(MatMenuItem)
+  menuItem: MatMenuItem;
+
   constructor(private extensions: AppExtensionService) {}
 
   runAction() {

diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts
@@ -23,18 +23,19 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, ViewEncapsulation, HostListener, ViewChild } from '@angular/core';
+import { Component, Input, ViewEncapsulation, HostListener, ViewChild, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { ThemePalette } from '@angular/material/core';
+import { ToolbarMenuItemComponent } from '../toolbar-menu-item/toolbar-menu-item.component';
 
 @Component({
   selector: 'app-toolbar-menu',
   templateUrl: './toolbar-menu.component.html',
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-toolbar-menu' }
 })
-export class ToolbarMenuComponent {
+export class ToolbarMenuComponent implements AfterViewInit {
   @Input()
   actionRef: ContentActionRef;
 
@@ -44,11 +45,30 @@ export class ToolbarMenuComponent {
   @ViewChild('matTrigger')
   matTrigger: MatMenuTrigger;
 
+  @ViewChild(MatMenu)
+  menu: MatMenu;
+
+  @ViewChildren(ToolbarMenuItemComponent)
+  toolbarMenuItems: QueryList<ToolbarMenuItemComponent>;
+
   @HostListener('document:keydown.Escape')
   handleKeydownEscape() {
     this.matTrigger.closeMenu();
   }
 
+  ngAfterViewInit(): void {
+    const menuItems: MatMenuItem[] = [];
+    this.toolbarMenuItems.forEach((toolbarMenuItem: ToolbarMenuItemComponent) => {
+      if (toolbarMenuItem.menuItem !== undefined) {
+        menuItems.push(toolbarMenuItem.menuItem);
+      }
+    });
+    const menuItemsQueryList: QueryList<MatMenuItem> = new QueryList<MatMenuItem>();
+    menuItemsQueryList.reset(menuItems);
+    this.menu._allItems = menuItemsQueryList;
+    this.menu.ngAfterContentInit();
+  }
+
   trackByActionId(_: number, obj: ContentActionRef): string {
     return obj.id;
   }