feat(menu): adiciona propriedade p-search-tree-items

O componente po-menu não possui uma propriedade de busca que retorne por itens agrupadores do menu.
Adiciona propriedade p-search-tree-items para que o filtro do componente retorne resultados de itens agrupadores do menu.

Fixes DTHFUI-8971

Author: anabye

projects/ui/src/lib/components/po-menu/po-menu-base.component.spec.ts

@@ -124,6 +124,16 @@ describe('PoMenuBaseComponent:', () => {
     expectPropertiesValues(component, 'filter', falseValues, false);
   });
 
+  it('should set searchTreeItems when filter is true', () => {
+    const trueValues = ['', true, 1];
+    const falseValues = [undefined, null, false, 0];
+
+    component.filter = true;
+
+    expectPropertiesValues(component, 'searchTreeItems', trueValues, true);
+    expectPropertiesValues(component, 'searchTreeItems', falseValues, false);
+  });
+
   it('should set menu item properties', () => {
     const menuItem: any = { label: 'Utilidades', link: 'utilities' };
 

projects/ui/src/lib/components/po-menu/po-menu-base.component.ts

@@ -97,6 +97,7 @@ export abstract class PoMenuBaseComponent {
 
   private _collapsed = false;
   private _filter = false;
+  private _searchTreeItems = false;
   private _level;
   private _maxLevel = 4;
   private _menus = [];
@@ -185,6 +186,27 @@ export abstract class PoMenuBaseComponent {
     return this._filter;
   }
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Quando ativado, a pesquisa também retornará itens agrupadores além dos itens que contêm uma ação e/ou link definidos.
+   * Isso pode ser útil quando se deseja encontrar rapidamente categorias ou seções do menu.
+   *
+   * > É necessário que a propriedade `p-filter` esteja habilitada.
+   *
+   * @default `false`
+   */
+  @Input('p-search-tree-items') set searchTreeItems(searchTreeItems: boolean) {
+    this._searchTreeItems = <any>searchTreeItems === '' ? true : convertToBoolean(searchTreeItems);
+    this.filteredItems = [...this._menus];
+  }
+
+  get searchTreeItems() {
+    return this._searchTreeItems;
+  }
+
   /**
    * @optional
    *

projects/ui/src/lib/components/po-menu/po-menu.component.spec.ts

@@ -1603,6 +1603,29 @@ describe('PoMenuComponent:', () => {
       expect(component['findItems']).toHaveBeenCalled();
     });
 
+    it('filterLocalItems: should return grouped items if `searchTreeItems` is true and `filter` is true', () => {
+      const menus = [
+        { label: 'Account', link: '/account' },
+        { label: 'Company Account', link: '/companyAccount' },
+        { label: 'Test', subItems: [{ label: 'list', link: '/test/list' }] }
+      ];
+
+      const foundMenu = [{ label: 'Test', subItems: [{ label: 'list', link: '/test/list' }], type: 'subItems' }];
+
+      const filter = 'Test';
+
+      component.filter = true;
+      component.searchTreeItems = true;
+      component.menus = menus;
+
+      spyOn(component, <any>'findItems').and.callThrough();
+
+      const filteredItems = component['filterLocalItems'](filter);
+
+      expect(filteredItems).toEqual(foundMenu);
+      expect(component['findItems']).toHaveBeenCalled();
+    });
+
     it('filterOnService: should call `getFilteredData` and return filtered menu itens from service', async () => {
       const menuItems = [{ label: 'Menu', link: '/menu', action: () => {} }];
       const search = 'menu';

projects/ui/src/lib/components/po-menu/po-menu.component.ts

@@ -452,14 +452,16 @@ export class PoMenuComponent extends PoMenuBaseComponent implements AfterViewIni
 
   private findItems(menus: Array<PoMenuItem>, filter: string, filteredItems: Array<any>) {
     menus.forEach(menu => {
-      const hasAction = menu.action || menu.link;
+      const hasAction = this.searchTreeItems ? this.searchTreeItems : menu.action || menu.link;
       const labelHasFilter = menu.label.toLowerCase().includes(filter);
 
       if (labelHasFilter && hasAction) {
         const newMenu = { ...menu };
 
         if (newMenu.subItems?.length) {
-          delete newMenu.subItems;
+          if (!this.searchTreeItems) {
+            delete newMenu.subItems;
+          }
           newMenu['type'] = this.setMenuType(newMenu);
         }
 

projects/ui/src/lib/components/po-menu/samples/sample-po-menu-labs/sample-po-menu-labs.component.html

@@ -6,6 +6,7 @@
     [p-params]="params"
     [p-service]="service"
     [p-short-logo]="shortLogo"
+    [p-search-tree-items]="searchTreeItems"
   >
   </po-menu>
 
@@ -34,6 +35,18 @@
           p-label="Filter"
           p-label-off="Disabled"
           p-label-on="Enabled"
+          (ngModelChange)="onFilterChange($event)"
+        >
+        </po-switch>
+
+        <po-switch
+          class="po-lg-6"
+          name="searchTreeItems"
+          [(ngModel)]="searchTreeItems"
+          p-label="Filter Search Tree Items"
+          p-label-off="Disabled"
+          p-label-on="Enabled"
+          [p-disabled]="!filter"
         >
         </po-switch>
       </div>

projects/ui/src/lib/components/po-menu/samples/sample-po-menu-labs/sample-po-menu-labs.component.ts

@@ -45,6 +45,7 @@ export class SamplePoMenuLabsComponent implements OnInit {
   service: string;
   shortLabel: string;
   shortLogo: string;
+  searchTreeItems: boolean;
 
   public readonly badgeColorList: Array<PoSelectOption> = [
     { label: 'color-01', value: 'color-01' },
@@ -133,6 +134,7 @@ export class SamplePoMenuLabsComponent implements OnInit {
     this.menuParams = undefined;
     this.service = '';
     this.shortLogo = undefined;
+    this.searchTreeItems = false;
 
     this.updateMenuItems();
   }
@@ -203,4 +205,11 @@ export class SamplePoMenuLabsComponent implements OnInit {
       }
     });
   }
+
+  onFilterChange(newValue: boolean) {
+    this.filter = newValue;
+    if (!this.filter && this.searchTreeItems) {
+      this.searchTreeItems = false;
+    }
+  }
 }