Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(page-default): ajusta propriedade visible do PoPageAction #1861

Merged
merged 1 commit into from
Oct 25, 2024
Merged

fix(page-default): ajusta propriedade visible do PoPageAction #1861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ...ects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { PoPageDefaultBaseComponent, poPageDefaultLiteralsDefault } from './po-p
@Directive()
class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
setDropdownActions() {}

getVisibleActions() {}
}

describe('PoPageDefaultBaseComponent:', () => {
Expand Down
5 changes: 4 additions & 1 deletion projects/ui/src/lib/components/po-page/po-page-default/po-page-default-base.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ export abstract class PoPageDefaultBaseComponent {
*/
@Input('p-actions') set actions(actions: Array<PoPageAction>) {
this._actions = Array.isArray(actions) ? actions : [];
this.visibleActions = this.actions.filter(action => action.visible !== false);

this.visibleActions = this.getVisibleActions();
this.setDropdownActions();
}

Expand Down Expand Up @@ -147,4 +148,6 @@ export abstract class PoPageDefaultBaseComponent {

// Seta a lista de ações no dropdown.
abstract setDropdownActions();

abstract getVisibleActions();
}
72 changes: 64 additions & 8 deletions projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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();

Expand All @@ -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();

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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 };

Expand Down
11 changes: 11 additions & 0 deletions projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand All @@ -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) ||
Expand All @@ -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;

Expand Down
Loading