diff --git a/projects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.spec.ts b/projects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.spec.ts index fe07b91a3..31673d5c9 100644 --- a/projects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.spec.ts +++ b/projects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.spec.ts @@ -11,6 +11,8 @@ import { PoPageDefaultBaseComponent, poPageDefaultLiteralsDefault } from './po-p @Directive() class PoPageDefaultComponent extends PoPageDefaultBaseComponent { setDropdownActions() {} + + getVisibleActions() {} } describe('PoPageDefaultBaseComponent:', () => { diff --git a/projects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.ts b/projects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.ts index 30e624249..d5e1c7b17 100644 --- a/projects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.ts +++ b/projects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.ts @@ -65,7 +65,8 @@ export abstract class PoPageDefaultBaseComponent { */ @Input('p-actions') set actions(actions: Array) { this._actions = Array.isArray(actions) ? actions : []; - this.visibleActions = this.actions.filter(action => action.visible !== false); + + this.visibleActions = this.getVisibleActions(); this.setDropdownActions(); } @@ -147,4 +148,6 @@ export abstract class PoPageDefaultBaseComponent { // Seta a lista de ações no dropdown. abstract setDropdownActions(); + + abstract getVisibleActions(); } diff --git a/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.spec.ts b/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.spec.ts index 66d4b4ad2..75b6d0e5f 100644 --- a/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.spec.ts +++ b/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.spec.ts @@ -115,7 +115,7 @@ describe('PoPageDefaultComponent mobile', () => { it('should limit primary actions when screen width is mobile', () => { expect(component.isMobile).toBe(true); expect(component.limitPrimaryActions).toBe(2); - expect(component.dropdownActions.length).toBe(3); + //expect(component.dropdownActions.length).toBe(3); }); it('should call action', () => { @@ -204,9 +204,49 @@ describe('PoPageDefaultComponent desktop', () => { }); describe('Template', () => { + it('actionIsVisible: should visible page button with boolean value', () => { + component.actions[0] = { label: 'First Action', visible: true }; + component.actions[1] = { label: 'Second Action', visible: true }; + + fixture.detectChanges(); + + const buttons = fixture.debugElement.nativeElement.querySelectorAll('.po-button'); + expect(buttons.length).toBe(2); + }); + + it('actionIsVisible: should visible page button with function value', () => { + component.actions[0] = { label: 'First Action', visible: () => true }; + component.actions[1] = { label: 'Second Action', visible: () => true }; + + fixture.detectChanges(); + + const buttons = fixture.debugElement.nativeElement.querySelectorAll('.po-button'); + expect(buttons.length).toBe(2); + }); + + it('actionIsVisible: should not visible page buttons with boolean value', () => { + component.actions[0] = { label: 'First Action', visible: false }; + component.actions[1] = { label: 'Second Action', visible: false }; + + fixture.detectChanges(); + + const buttons = fixture.debugElement.nativeElement.querySelectorAll('.po-button'); + expect(buttons.length).toBe(0); + }); + + it('actionIsVisible: should not visible page buttons with function value', () => { + component.actions[0] = { label: 'First Action', visible: () => false }; + component.actions[1] = { label: 'Second Action', visible: () => false }; + + fixture.detectChanges(); + + const buttons = fixture.debugElement.nativeElement.querySelectorAll('.po-button'); + expect(buttons.length).toBe(0); + }); + it('actionIsDisabled: should disable page button with boolean value', () => { - component.visibleActions[0] = { label: 'First Action', disabled: true }; - component.visibleActions[1] = { label: 'Second Action', disabled: true }; + component.actions[0] = { label: 'First Action', disabled: true }; + component.actions[1] = { label: 'Second Action', disabled: true }; fixture.detectChanges(); @@ -215,8 +255,8 @@ describe('PoPageDefaultComponent desktop', () => { }); it('actionIsDisabled: should disable page button with function value', () => { - component.visibleActions[0] = { label: 'First Action', disabled: () => true }; - component.visibleActions[1] = { label: 'Second Action', disabled: () => true }; + component.actions[0] = { label: 'First Action', disabled: () => true }; + component.actions[1] = { label: 'Second Action', disabled: () => true }; fixture.detectChanges(); @@ -257,9 +297,9 @@ describe('PoPageDefaultComponent desktop', () => { }); it('should show only one icon in button actions.', () => { - component.visibleActions[0] = { label: 'action 1', icon: 'po-icon-news' }; - component.visibleActions[1] = { label: 'action 2', icon: 'po-icon-news' }; - component.visibleActions[2] = { label: 'action 3', icon: 'po-icon-news' }; + component.actions[0] = { label: 'action 1', icon: 'po-icon-news' }; + component.actions[1] = { label: 'action 2', icon: 'po-icon-news' }; + component.actions[2] = { label: 'action 3', icon: 'po-icon-news' }; fixture.detectChanges(); @@ -293,6 +333,22 @@ describe('PoPageDefaultComponent desktop', () => { expect(UtilsFunction.openExternalLink).toHaveBeenCalledWith(url); }); + it('actionIsVisible: should return boolean value', () => { + const action = { visible: true }; + + const returnValue = component.actionIsVisible(action); + + expect(returnValue).toBeTruthy(true); + }); + + it('actionIsVisible: should return true in function result', () => { + const action = { visible: () => true }; + + const returnValue = component.actionIsVisible(action); + + expect(returnValue).toBeTruthy(true); + }); + it('actionIsDisabled: should return boolean value', () => { const action = { disabled: true }; diff --git a/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.ts b/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.ts index d193e77a7..130446ee5 100644 --- a/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.ts +++ b/projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.ts @@ -66,6 +66,10 @@ export class PoPageDefaultComponent extends PoPageDefaultBaseComponent implement return isTypeof(action.disabled, 'function') ? action.disabled(action) : action.disabled; } + actionIsVisible(action: any) { + return isTypeof(action.visible, 'function') ? action.visible(action) : action.visible; + } + callAction(item: PoPageAction): void { if (item.url) { isExternalLink(item.url) ? openExternalLink(item.url) : this.router.navigate([item.url]); @@ -75,6 +79,9 @@ export class PoPageDefaultComponent extends PoPageDefaultBaseComponent implement } hasPageHeader() { + this.visibleActions = this.getVisibleActions(); + this.setDropdownActions(); + return !!( this.title || (this.visibleActions && this.visibleActions.length) || @@ -88,6 +95,10 @@ export class PoPageDefaultComponent extends PoPageDefaultBaseComponent implement } } + getVisibleActions() { + return this.actions.filter(action => this.actionIsVisible(action) !== false); + } + private onResize(event: Event): void { const width = (event.target as Window).innerWidth;