diff --git a/projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.spec.ts b/projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.spec.ts index f3492b587..efc6aacda 100644 --- a/projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.spec.ts +++ b/projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.spec.ts @@ -41,6 +41,18 @@ describe('PoTreeViewBaseComponent:', () => { expectPropertiesValues(component, 'selectable', invalidValues, false); }); + + it('p-max-level: should update property with value if valid', () => { + const validValues = [12, 10.6]; + + expectPropertiesValues(component, 'maxLevel', validValues, [12, 10]); + }); + + it('p-max-level: should update property with `4` if invalid values', () => { + const invalidValues = ['test', undefined]; + + expectPropertiesValues(component, 'maxLevel', invalidValues, 4); + }); }); describe('Methods: ', () => { @@ -114,6 +126,7 @@ describe('PoTreeViewBaseComponent:', () => { }); it('getItemsByMaxLevel: should return items up to 4 levels', () => { + component.maxLevel = 4; const unlimitedItems = [ { label: 'Nivel 01', diff --git a/projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.ts b/projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.ts index e74f2e9cd..a97d6fb46 100644 --- a/projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.ts +++ b/projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.ts @@ -1,6 +1,6 @@ import { EventEmitter, Input, Output, Directive } from '@angular/core'; -import { convertToBoolean } from '../../utils/util'; +import { convertToBoolean, convertToInt } from '../../utils/util'; import { PoTreeViewItem } from './po-tree-view-item/po-tree-view-item.interface'; @@ -67,11 +67,14 @@ export class PoTreeViewBaseComponent { private _items: Array = []; private _selectable: boolean = false; + private _maxLevel = poTreeViewMaxLevel; /** * Lista de itens do tipo `PoTreeViewItem` que será renderizada pelo componente. */ - @Input('p-items') set items(value: Array) { + @Input('p-items') inputedItems: Array; + + set items(value: Array) { this._items = Array.isArray(value) ? this.getItemsByMaxLevel(value) : []; } @@ -96,6 +99,25 @@ export class PoTreeViewBaseComponent { return this._selectable; } + /** + * @optional + * + * @description + * + * Define o máximo de níveis para o tree-view. + * + * > O valor padrão é 4 + * + * @default 4 + */ + @Input('p-max-level') set maxLevel(value: number) { + this._maxLevel = convertToInt(value, poTreeViewMaxLevel); + } + + get maxLevel() { + return this._maxLevel; + } + protected emitExpanded(treeViewItem: PoTreeViewItem) { const event = treeViewItem.expanded ? 'expanded' : 'collapsed'; @@ -189,7 +211,7 @@ export class PoTreeViewBaseComponent { items.forEach(item => { const { subItems, ...currentItem } = item; - if (level === poTreeViewMaxLevel) { + if (level === this.maxLevel) { return; } diff --git a/projects/ui/src/lib/components/po-tree-view/po-tree-view.component.spec.ts b/projects/ui/src/lib/components/po-tree-view/po-tree-view.component.spec.ts index bccad4a16..97e828c45 100644 --- a/projects/ui/src/lib/components/po-tree-view/po-tree-view.component.spec.ts +++ b/projects/ui/src/lib/components/po-tree-view/po-tree-view.component.spec.ts @@ -5,6 +5,7 @@ import { of } from 'rxjs'; import { PoTreeViewComponent } from './po-tree-view.component'; import { PoTreeViewItem } from './po-tree-view-item/po-tree-view-item.interface'; import { PoTreeViewModule } from './po-tree-view.module'; +import { SimpleChanges } from '@angular/core'; describe('PoTreeViewComponent:', () => { let component: PoTreeViewComponent; @@ -74,5 +75,22 @@ describe('PoTreeViewComponent:', () => { it('trackByFunction: should return index param', () => { expect(component.trackByFunction(1)).toBe(1); }); + + it('ngOnChanges: should update items when inputedItems changes', () => { + const changes: SimpleChanges = { + inputedItems: { + currentValue: [{ label: 'example', value: 1 }], + firstChange: true, + isFirstChange: () => true, + previousValue: undefined + } + }; + + component.items = undefined; + + component.ngOnChanges(changes); + + expect(component.items).toBeDefined(); + }); }); }); diff --git a/projects/ui/src/lib/components/po-tree-view/po-tree-view.component.ts b/projects/ui/src/lib/components/po-tree-view/po-tree-view.component.ts index 5977e9f60..98b89d0ab 100644 --- a/projects/ui/src/lib/components/po-tree-view/po-tree-view.component.ts +++ b/projects/ui/src/lib/components/po-tree-view/po-tree-view.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { PoTreeViewBaseComponent } from './po-tree-view-base.component'; import { PoTreeViewItem } from './po-tree-view-item/po-tree-view-item.interface'; @@ -35,7 +35,7 @@ import { PoTreeViewService } from './services/po-tree-view.service'; changeDetection: ChangeDetectionStrategy.OnPush, providers: [PoTreeViewService] }) -export class PoTreeViewComponent extends PoTreeViewBaseComponent implements OnInit { +export class PoTreeViewComponent extends PoTreeViewBaseComponent implements OnInit, OnChanges { get hasItems() { return !!(this.items && this.items.length); } @@ -54,6 +54,12 @@ export class PoTreeViewComponent extends PoTreeViewBaseComponent implements OnIn }); } + ngOnChanges(changes?: SimpleChanges) { + if (changes?.['inputedItems']) { + this.items = this.inputedItems; + } + } + trackByFunction(index: number) { return index; } diff --git a/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-labs/sample-po-tree-view-labs.component.html b/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-labs/sample-po-tree-view-labs.component.html index cd9f3e1b3..f6b50b04e 100644 --- a/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-labs/sample-po-tree-view-labs.component.html +++ b/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-labs/sample-po-tree-view-labs.component.html @@ -5,6 +5,7 @@ (p-expanded)="changeEvent('p-expanded', $event)" (p-selected)="changeEvent('p-selected', $event)" (p-unselected)="changeEvent('p-unselected', $event)" + [p-max-level]="maxLevel" > @@ -18,6 +19,12 @@ + + +
+ +
+
diff --git a/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-labs/sample-po-tree-view-labs.component.ts b/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-labs/sample-po-tree-view-labs.component.ts index 131e959eb..f9956e2ea 100644 --- a/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-labs/sample-po-tree-view-labs.component.ts +++ b/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-labs/sample-po-tree-view-labs.component.ts @@ -14,6 +14,7 @@ export class SamplePoTreeViewLabsComponent implements OnInit { parentList: Array; selectable: boolean; treeViewItem: PoTreeViewItem; + maxLevel: number = 4; readonly itemPropertiesOptions: Array = [ { value: 'selected', label: 'Selected' }, @@ -58,6 +59,7 @@ export class SamplePoTreeViewLabsComponent implements OnInit { this.itemProperties = []; this.selectable = undefined; this.treeViewItem = {}; + this.maxLevel = 4; } private getTreeViewItemNode(items: Array, value: string) {