Skip to content

Commit

Permalink
feat(tree-view): adiciona propriedade p-max-level
Browse files Browse the repository at this point in the history
O componente de tree-view não permitia mais do que 4 subníveis.
Adiciona a propriedade p-max-level para permitir
configurar o número máximo de subníveis.

Fixes DTHFUI-7556
  • Loading branch information
guilnorth committed Aug 28, 2023
1 parent b76b32c commit 6abc938
Show file tree
Hide file tree
Showing 6 changed files with 73 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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: ', () => {
Expand Down Expand Up @@ -114,6 +126,7 @@ describe('PoTreeViewBaseComponent:', () => {
});

it('getItemsByMaxLevel: should return items up to 4 levels', () => {
component.maxLevel = 4;
const unlimitedItems = [
{
label: 'Nivel 01',
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -71,7 +71,9 @@ export class PoTreeViewBaseComponent {
/**
* Lista de itens do tipo `PoTreeViewItem` que será renderizada pelo componente.
*/
@Input('p-items') set items(value: Array<PoTreeViewItem>) {
@Input('p-items') inputedItems: Array<PoTreeViewItem>;

set items(value: Array<PoTreeViewItem>) {
this._items = Array.isArray(value) ? this.getItemsByMaxLevel(value) : [];
}

Expand All @@ -96,6 +98,26 @@ export class PoTreeViewBaseComponent {
return this._selectable;
}

private _maxLevel = poTreeViewMaxLevel;
/**
* @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';

Expand Down Expand Up @@ -189,7 +211,7 @@ export class PoTreeViewBaseComponent {
items.forEach(item => {
const { subItems, ...currentItem } = item;

if (level === poTreeViewMaxLevel) {
if (level === this.maxLevel) {
return;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
});
});
});
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
}
Expand All @@ -54,6 +54,13 @@ export class PoTreeViewComponent extends PoTreeViewBaseComponent implements OnIn
});
}

ngOnChanges(changes?: SimpleChanges) {
if (changes?.['inputedItems']) {
// Chama o set items
this.items = this.inputedItems;
}
}

trackByFunction(index: number) {
return index;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
</po-tree-view>

Expand All @@ -18,6 +19,12 @@
<po-switch class="po-md-2" name="selectable" [(ngModel)]="selectable" p-label="Selectable"> </po-switch>
</div>

<po-divider p-label="Po Tree View Config"></po-divider>

<div class="po-row">
<po-input class="po-md-4" name="level" [(ngModel)]="maxLevel" p-label="Nível máximo"> </po-input>
</div>

<po-divider p-label="Po Tree View Item"></po-divider>

<form #treeViewItemForm="ngForm">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export class SamplePoTreeViewLabsComponent implements OnInit {
parentList: Array<PoSelectOption>;
selectable: boolean;
treeViewItem: PoTreeViewItem;
maxLevel: number = 4;

readonly itemPropertiesOptions: Array<PoCheckboxGroupOption> = [
{ value: 'selected', label: 'Selected' },
Expand Down

0 comments on commit 6abc938

Please sign in to comment.