feat(page-default|list): permite utilizar a propriedade visible

Permite realizar a exibição do campos caso o visible esteja como true lembrando que este campo pode ser utilizado como opcional. Caso não utilize este campo visible para determinar se ele será exibido ou não, ele será exibido.

Fixes DTHFUI-2145, #117

Author: DaniloServulo

projects/ui/src/lib/components/po-page/po-page-action.interface.ts

@@ -4,7 +4,7 @@ import { PoPopupAction } from '../po-popup/po-popup-action.interface';
  * @description
  * Interface para as ações dos componentes po-page-default e po-page-list.
  *
- * > As propriedades `selected`, `separator`, `type` e `visible` serão vistas a partir da terceira ação e somente quando
+ * > As propriedades `selected`, `separator` e `type` serão vistas a partir da terceira ação e somente quando
  * definir quatro ações ou mais.
  *
  * @docsExtends PoPopupAction

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

@@ -34,6 +34,8 @@ export abstract class PoPageDefaultBaseComponent {
   private _literals: PoPageDefaultLiterals;
   private _title: string;
 
+  visibleActions: Array<PoPageAction> = [];
+
   protected language: string;
 
   @ViewChild(PoPageContentComponent, { static: true }) poPageContent: PoPageContentComponent;
@@ -47,6 +49,7 @@ 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.setDropdownActions();
   }
 

projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.html

@@ -4,35 +4,35 @@
     <!-- OPERATIONS -->
     <div class="po-page-header-actions">
       <po-dropdown
-        *ngIf="actions.length > limitPrimaryActions"
+        *ngIf="visibleActions.length > limitPrimaryActions"
         [p-label]="literals.otherActions"
         [p-actions]="dropdownActions"
       >
       </po-dropdown>
 
       <po-button
-        *ngIf="actions.length === 3 && actions[2] && !isMobile"
-        [p-disabled]="actionIsDisabled(actions[2])"
-        [p-label]="actions[2].label"
-        (p-click)="callAction(actions[2])"
+        *ngIf="visibleActions.length === 3 && visibleActions[2] && !isMobile"
+        [p-disabled]="actionIsDisabled(visibleActions[2])"
+        [p-label]="visibleActions[2].label"
+        (p-click)="callAction(visibleActions[2])"
       >
       </po-button>
 
       <po-button
-        *ngIf="actions[1] && (actions.length === 2 || !isMobile)"
-        [p-disabled]="actionIsDisabled(actions[1])"
-        [p-label]="actions[1].label"
-        (p-click)="callAction(actions[1])"
+        *ngIf="visibleActions[1] && (visibleActions.length === 2 || !isMobile)"
+        [p-disabled]="actionIsDisabled(visibleActions[1])"
+        [p-label]="visibleActions[1].label"
+        (p-click)="callAction(visibleActions[1])"
       >
       </po-button>
 
       <po-button
-        *ngIf="actions[0]"
+        *ngIf="visibleActions[0]"
         p-type="primary"
-        [p-disabled]="actionIsDisabled(actions[0])"
-        [p-icon]="actions[0].icon"
-        [p-label]="actions[0].label"
-        (p-click)="callAction(actions[0])"
+        [p-disabled]="actionIsDisabled(visibleActions[0])"
+        [p-icon]="visibleActions[0].icon"
+        [p-label]="visibleActions[0].label"
+        (p-click)="callAction(visibleActions[0])"
       >
       </po-button>
     </div>

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

@@ -212,8 +212,8 @@ describe('PoPageDefaultComponent desktop', () => {
 
   describe('Template', () => {
     it('actionIsDisabled: should disable page button with boolean value', () => {
-      component.actions[0] = { label: 'First Action', disabled: true };
-      component.actions[1] = { label: 'Second Action', disabled: true };
+      component.visibleActions[0] = { label: 'First Action', disabled: true };
+      component.visibleActions[1] = { label: 'Second Action', disabled: true };
 
       fixture.detectChanges();
 
@@ -222,8 +222,8 @@ describe('PoPageDefaultComponent desktop', () => {
     });
 
     it('actionIsDisabled: should disable page button with function value', () => {
-      component.actions[0] = { label: 'First Action', disabled: () => true };
-      component.actions[1] = { label: 'Second Action', disabled: () => true };
+      component.visibleActions[0] = { label: 'First Action', disabled: () => true };
+      component.visibleActions[1] = { label: 'Second Action', disabled: () => true };
 
       fixture.detectChanges();
 
@@ -264,16 +264,29 @@ describe('PoPageDefaultComponent desktop', () => {
     });
 
     it('should show only one icon in button actions.', () => {
-      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' };
+      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' };
 
       fixture.detectChanges();
 
       const icons = fixture.debugElement.nativeElement.querySelectorAll('.po-icon-news');
 
       expect(icons.length).toBe(1);
     });
+
+    it('should not display buttons that have visible equal to false', () => {
+      component.actions = [
+        { label: 'action 1', visible: true },
+        { label: 'action 2', visible: false },
+        { label: 'action 3', visible: null },
+        { label: 'action 4', visible: undefined }
+      ];
+
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.nativeElement.querySelectorAll('po-button').length).toBe(3);
+    });
   });
 
   describe('Methods', () => {

projects/ui/src/lib/components/po-page/po-page-default/po-page-default.component.ts

@@ -75,7 +75,11 @@ export class PoPageDefaultComponent extends PoPageDefaultBaseComponent implement
   }
 
   hasPageHeader() {
-    return !!(this.title || (this.actions && this.actions.length) || (this.breadcrumb && this.breadcrumb.items.length));
+    return !!(
+      this.title ||
+      (this.visibleActions && this.visibleActions.length) ||
+      (this.breadcrumb && this.breadcrumb.items.length)
+    );
   }
 
   private onResize(event: Event): void {
@@ -100,8 +104,8 @@ export class PoPageDefaultComponent extends PoPageDefaultBaseComponent implement
   }
 
   setDropdownActions(): void {
-    if (this.actions.length > this.limitPrimaryActions) {
-      this.dropdownActions = this.actions.slice(this.limitPrimaryActions - 1);
+    if (this.visibleActions.length > this.limitPrimaryActions) {
+      this.dropdownActions = this.visibleActions.slice(this.limitPrimaryActions - 1);
     }
   }
 }

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

@@ -45,6 +45,8 @@ export abstract class PoPageListBaseComponent {
   private _literals: PoPageListLiterals;
   private _title: string;
 
+  visibleActions: Array<PoPageAction> = [];
+
   protected language: string;
   protected resizeListener: () => void;
 
@@ -59,6 +61,7 @@ export abstract class PoPageListBaseComponent {
    */
   @Input('p-actions') set actions(actions: Array<PoPageAction>) {
     this._actions = Array.isArray(actions) ? actions : [];
+    this.visibleActions = this.actions.filter(action => action.visible !== false);
     this.setDropdownActions();
   }
 

projects/ui/src/lib/components/po-page/po-page-list/po-page-list.component.html

@@ -2,41 +2,41 @@
   <!-- HEADER -->
   <po-page-header
     *ngIf="hasPageHeader()"
-    [class.po-page-list-header-padding]="filter && !actions.length"
+    [class.po-page-list-header-padding]="filter && !visibleActions.length"
     [p-breadcrumb]="breadcrumb"
     [p-title]="title"
   >
     <!-- OPERATIONS -->
     <div class="po-page-list-operations">
       <div class="po-page-list-actions" [class.po-page-list-actions-padding]="filter">
         <po-button
-          *ngIf="actions[0]"
+          *ngIf="visibleActions[0]"
           p-type="primary"
           [p-disabled]="actionIsDisabled(actions[0])"
-          [p-icon]="actions[0].icon"
-          [p-label]="actions[0].label"
-          (p-click)="callAction(actions[0])"
+          [p-icon]="visibleActions[0].icon"
+          [p-label]="visibleActions[0].label"
+          (p-click)="callAction(visibleActions[0])"
         >
         </po-button>
 
         <po-button
-          *ngIf="actions[1] && (actions.length === 2 || !isMobile)"
+          *ngIf="visibleActions[1] && (visibleActions.length === 2 || !isMobile)"
           [p-disabled]="actionIsDisabled(actions[1])"
-          [p-label]="actions[1].label"
-          (p-click)="callAction(actions[1])"
+          [p-label]="visibleActions[1].label"
+          (p-click)="callAction(visibleActions[1])"
         >
         </po-button>
 
         <po-button
-          *ngIf="actions.length == 3 && actions[2] && !isMobile"
-          [p-disabled]="actionIsDisabled(actions[2])"
-          [p-label]="actions[2].label"
-          (p-click)="callAction(actions[2])"
+          *ngIf="visibleActions.length == 3 && visibleActions[2] && !isMobile"
+          [p-disabled]="actionIsDisabled(visibleActions[2])"
+          [p-label]="visibleActions[2].label"
+          (p-click)="callAction(visibleActions[2])"
         >
         </po-button>
 
         <po-dropdown
-          *ngIf="actions.length > limitPrimaryActions"
+          *ngIf="visibleActions.length > limitPrimaryActions"
           [p-actions]="dropdownActions"
           [p-label]="literals.otherActions"
         >

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

@@ -394,6 +394,19 @@ describe('PoPageListComponent - Desktop:', () => {
       expect(buttons.length).toBe(2);
     });
 
+    it('should not display buttons that have visible equal to false', () => {
+      component.actions = [
+        { label: 'action 1', visible: true },
+        { label: 'action 2', visible: false },
+        { label: 'action 3', visible: null },
+        { label: 'action 4', visible: undefined }
+      ];
+
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.nativeElement.querySelectorAll('po-button').length).toBe(3);
+    });
+
     it('actionIsDisabled: should not disable page buttons with boolean value', () => {
       component.actions[0] = { label: 'First Action', disabled: false };
       component.actions[1] = { label: 'Second Action', disabled: false };

projects/ui/src/lib/components/po-page/po-page-list/po-page-list.component.ts

@@ -107,7 +107,11 @@ export class PoPageListComponent
   }
 
   hasPageHeader(): boolean {
-    return !!(this.title || (this.actions && this.actions.length) || (this.breadcrumb && this.breadcrumb.items.length));
+    return !!(
+      this.title ||
+      (this.visibleActions && this.visibleActions.length) ||
+      (this.breadcrumb && this.breadcrumb.items.length)
+    );
   }
 
   hasCustomFilterSize(): boolean {
@@ -148,8 +152,8 @@ export class PoPageListComponent
   }
 
   setDropdownActions(): void {
-    if (this.actions.length > this.limitPrimaryActions) {
-      this.dropdownActions = this.actions.slice(this.limitPrimaryActions - 1);
+    if (this.visibleActions.length > this.limitPrimaryActions) {
+      this.dropdownActions = this.visibleActions.slice(this.limitPrimaryActions - 1);
     }
   }