feat(dynamic-table): exibe o filtro mesmo que o campo esteja invisível

- Adiciona a propriedade PoPageDynamicField. AllowColumnsManager,
que permite visualiza-lo no gerenciador de colunas
mesmo estando visible: false;
- Exibe o filtro mesmo que o campo esteja invisivel na
tabela (visible=false);

Fixes DTHFUI-4135

Author: jhonyeduardo

docs/guides/sync-get-started.md

@@ -11,7 +11,7 @@ Para maiores detalhes sobre os serviços e métodos utilizados neste tutorial, c
 - [Node.js e NPM](https://nodejs.org/en/)
 - [Angular CLI](https://cli.angular.io/) (^10.0.2):
   - ```shell
-    npm install -g @angular/cli@^10.0.2
+    npm install -g @angular/cli@~10.0.2
     ```
 - [Ionic](https://ionicframework.com/docs/cli/) (5.4.16):
   - ```shell

projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-field.interface.ts

@@ -16,4 +16,12 @@ export interface PoPageDynamicTableField extends PoDynamicFormField {
 
   /** Tamanho da coluna em pixels ou porcetagem. */
   width?: number | string;
+
+  /**
+   * Permite o campo aparecer no gerenciador de colunas, mesmo que esteja utilizando `visible: false`,
+   * possibilitando ativar a exibição na tabela.
+   *
+   * > Quando for `false`, será desconsiderado.
+   */
+  allowColumnsManager?: boolean;
 }

projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-list-base.component.spec.ts

@@ -42,6 +42,39 @@ describe('PoPageDynamicListBaseComponent:', () => {
       expect(component['setFieldsProperties']).toHaveBeenCalled();
     });
 
+    it('fields: should set `filters` with fields that have `filter` as true', () => {
+      const newFields = [
+        { property: 'name', filter: true },
+        { property: 'birthdateTo', label: 'Birthdate', type: 'date', filter: true, visible: false },
+        { property: 'state', options: this.cityOptions, visible: false },
+        { property: 'address', visible: true, filter: false }
+      ];
+
+      component.fields = newFields;
+
+      expect(component.filters).toEqual([
+        { property: 'name', filter: true, visible: true },
+        { property: 'birthdateTo', label: 'Birthdate', type: 'date', filter: true, visible: true }
+      ]);
+    });
+
+    it('fields: should set `columns` with fields that have `allowColumnsManager` and `visible` as true', () => {
+      const newFields = [
+        { property: 'name', filter: true },
+        { property: 'birthdate', label: 'Birthdate', type: 'date', filter: true, visible: false },
+        { property: 'state', options: this.cityOptions, visible: false, allowColumnsManager: true },
+        { property: 'address', visible: true, filter: false }
+      ];
+
+      component.fields = newFields;
+
+      expect(component.columns).toEqual([
+        { property: 'name', filter: true },
+        { property: 'state', options: this.cityOptions, visible: false, allowColumnsManager: true },
+        { property: 'address', visible: true, filter: false }
+      ]);
+    });
+
     it('columns: should return a new reference', () => {
       const columns = [
         { property: 'id', key: true },
@@ -69,19 +102,19 @@ describe('PoPageDynamicListBaseComponent:', () => {
         ];
       });
 
-      it('should set `_filters` with items that have the `filter` property', () => {
+      it('should set `filters` with items that have the `filter` property', () => {
         const filtersResult = [
           { property: 'name', label: 'Name', filter: true, visible: true, gridColumns: 6 },
-          { property: 'genre', label: 'Genre', filter: true, gridColumns: 6, duplicate: true },
-          { property: 'city', label: 'City', filter: true, duplicate: true, gridColumns: 12 }
+          { property: 'genre', label: 'Genre', filter: true, gridColumns: 6, visible: true, duplicate: true },
+          { property: 'city', label: 'City', filter: true, duplicate: true, visible: true, gridColumns: 12 }
         ];
 
         component['setFieldsProperties'](fields);
 
         expect(component.filters).toEqual(filtersResult);
       });
 
-      it('should set `_filters` with [] if no item has the `filter` property', () => {
+      it('should set `filters` with [] if no item has the `filter` property', () => {
         const fieldsWithoutFilter = [
           { property: 'id', key: true },
           { property: 'birthdate', label: 'Birthdate', type: 'date', gridColumns: 6 }
@@ -107,15 +140,15 @@ describe('PoPageDynamicListBaseComponent:', () => {
         expect(component.filters).toEqual(fieldsEmpty);
       });
 
-      it('should set `_keys` with items that have the `key` property', () => {
+      it('should set `keys` with items that have the `key` property', () => {
         const keysResult = ['id'];
 
         component['setFieldsProperties'](fields);
 
         expect(component.keys).toEqual(keysResult);
       });
 
-      it('should set `_keys` with [] if no item has the `key` property', () => {
+      it('should set `keys` with [] if no item has the `key` property', () => {
         const fieldsWithoutKey = [
           { property: 'birthdate', label: 'Birthdate', type: 'date', gridColumns: 6 },
           { property: 'city', label: 'City', filter: true, duplicate: true, gridColumns: 12 }
@@ -127,15 +160,15 @@ describe('PoPageDynamicListBaseComponent:', () => {
         expect(component.keys).toEqual(keysResult);
       });
 
-      it('should set `_duplicates` with items that have the `duplicate` property', () => {
+      it('should set `duplicates` with items that have the `duplicate` property', () => {
         const duplicatesResult = ['genre', 'city'];
 
         component['setFieldsProperties'](fields);
 
         expect(component.duplicates).toEqual(duplicatesResult);
       });
 
-      it('should set `_duplicates` with [] if no item has the `duplicate` property', () => {
+      it('should set `duplicates` with [] if no item has the `duplicate` property', () => {
         const fieldsWithoutDuplicate = [
           { property: 'birthdate', label: 'Birthdate', type: 'date', gridColumns: 6 },
           { property: 'city', label: 'City', filter: true, gridColumns: 12 }

projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-list-base.component.ts

@@ -10,10 +10,10 @@ import { PoPageDynamicTableFilters } from './interfaces/po-page-dynamic-table-fi
 export class PoPageDynamicListBaseComponent {
   private _autoRouter: boolean = false;
   private _columns: Array<any> = [];
-  private _duplicates: Array<any> = [];
+  private _duplicates: Array<string> = [];
   private _fields: Array<any> = [];
   private _filters: Array<any> = [];
-  private _keys: Array<any> = [];
+  private _keys: Array<string> = [];
 
   /**
    * @optional
@@ -148,22 +148,38 @@ export class PoPageDynamicListBaseComponent {
     return this._columns;
   }
 
+  set duplicates(value: Array<string>) {
+    this._duplicates = [...value];
+  }
+
   get duplicates() {
-    return [...this._duplicates];
+    return this._duplicates;
+  }
+
+  set filters(value: Array<PoPageDynamicTableFilters>) {
+    this._filters = [...value];
   }
 
   get filters() {
-    return [...this._filters];
+    return this._filters;
+  }
+
+  set keys(value: Array<string>) {
+    this._keys = [...value];
   }
 
   get keys() {
-    return [...this._keys];
+    return this._keys;
   }
 
   private setFieldsProperties(fields: Array<any>) {
-    this._filters = fields.filter(field => field.filter === true);
-    this.columns = fields.filter(field => field.visible === undefined || field.visible === true);
-    this._keys = fields.filter(field => field.key === true).map(field => field.property);
-    this._duplicates = fields.filter(field => field.duplicate === true).map(field => field.property);
+    this.filters = fields
+      .filter(field => field.filter === true)
+      .map(filterField => ({ ...filterField, visible: true }));
+    this.columns = fields.filter(
+      field => field.visible === undefined || field.visible === true || field.allowColumnsManager === true
+    );
+    this.keys = fields.filter(field => field.key === true).map(field => field.property);
+    this.duplicates = fields.filter(field => field.duplicate === true).map(field => field.property);
   }
 }

projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.spec.ts

@@ -1662,7 +1662,7 @@ describe('PoPageDynamicTableComponent:', () => {
         const pageAction = [
           {
             label: component.literals.pageAction,
-            action: jasmine.any(Function),
+            action: jasmine.any(Function)
           }
         ];
 
@@ -1683,7 +1683,7 @@ describe('PoPageDynamicTableComponent:', () => {
         const pageAction = [
           {
             label: component.literals.pageAction,
-            action: jasmine.any(Function),
+            action: jasmine.any(Function)
           },
           {
             label: component.literals.pageActionRemoveAll,
@@ -1979,7 +1979,7 @@ describe('PoPageDynamicTableComponent:', () => {
         { id: '3', name: 'vue', $selected: false }
       ];
 
-      expect(component.pageActions[2].disabled()).toBe(true);
+      expect((<Function>component.pageActions[2].disabled)()).toBe(true);
     });
 
     it('should enable a custom action if selectable is true and the table has some item selected', () => {
@@ -1999,7 +1999,7 @@ describe('PoPageDynamicTableComponent:', () => {
         { id: '3', name: 'vue' }
       ];
 
-      expect(component.pageActions[2].disabled()).toBe(false);
+      expect((<Function>component.pageActions[2].disabled)()).toBe(false);
     });
 
     it('should navigate to `test/` if action of pageCustomAction is undefined and url is defined', () => {

projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts

@@ -121,22 +121,46 @@ type UrlOrPoCustomizationFunction = string | (() => PoPageDynamicTableOptions);
 })
 export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent implements OnInit, OnDestroy {
   private _actions: PoPageDynamicTableActions = {};
-  private _pageActions: Array<PoPageAction> = [];
-  private _tableActions: Array<PoTableAction> = [];
   private _pageCustomActions: Array<PoPageDynamicTableCustomAction> = [];
   private _tableCustomActions: Array<PoPageDynamicTableCustomTableAction> = [];
 
+  hasNext = false;
+  items = [];
+  literals;
+
+  pageActions: Array<PoPageAction> = [];
+  tableActions: Array<PoTableAction> = [];
+
   private page: number = 1;
   private params = {};
   private sortedColumn: PoTableColumnSort;
   private subscriptions = new Subscription();
   private hasCustomActionWithSelectable = false;
-  private customPageListActions = [];
-  private customTableActions = [];
 
-  hasNext = false;
-  items = [];
-  literals;
+  private _customPageListActions: Array<PoPageAction> = [];
+  private _customTableActions: Array<PoTableAction> = [];
+  private _defaultPageActions: Array<PoPageAction> = [];
+  private _defaultTableActions: Array<PoTableAction> = [];
+
+  private set defaultPageActions(value: Array<PoPageAction>) {
+    this._defaultPageActions = value;
+    this.updatePageActions();
+  }
+
+  private set defaultTableActions(value: Array<PoTableAction>) {
+    this._defaultTableActions = value;
+    this.updateTableActions();
+  }
+
+  private set customPageListActions(value: Array<PoPageAction>) {
+    this._customPageListActions = value;
+    this.updatePageActions();
+  }
+
+  private set customTableActions(value: Array<PoTableAction>) {
+    this._customTableActions = value;
+    this.updateTableActions();
+  }
 
   /**
    * Função ou serviço que será executado na inicialização do componente.
@@ -352,14 +376,6 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
     return !!this.actions.removeAll;
   }
 
-  get pageActions() {
-    return [...this._pageActions, ...this.customPageListActions];
-  }
-
-  get tableActions() {
-    return [...this._tableActions, ...this.customTableActions];
-  }
-
   private confirmRemove(
     actionRemove: PoPageDynamicTableActions['remove'],
     actionBeforeRemove: PoPageDynamicTableActions['beforeRemove'],
@@ -760,9 +776,7 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
 
   private setPageActions(actions: PoPageDynamicTableActions) {
     if (actions?.new) {
-      this._pageActions = [
-        { label: this.literals.pageAction, action: this.openNew.bind(this, actions.new) }
-      ];
+      this.defaultPageActions = [{ label: this.literals.pageAction, action: this.openNew.bind(this, actions.new) }];
     }
   }
 
@@ -824,11 +838,14 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
   private setRemoveAllAction() {
     const action = this._actions;
     if (this.showRemove(action.removeAll)) {
-      this._pageActions.push({
-        label: this.literals.pageActionRemoveAll,
-        action: this.confirmRemoveAll.bind(this, action.removeAll, action.beforeRemoveAll),
-        disabled: this.disableRemoveAll.bind(this)
-      });
+      this.defaultPageActions = [
+        ...this._defaultPageActions,
+        {
+          label: this.literals.pageActionRemoveAll,
+          action: this.confirmRemoveAll.bind(this, action.removeAll, action.beforeRemoveAll),
+          disabled: this.disableRemoveAll.bind(this)
+        }
+      ];
     }
   }
 
@@ -839,7 +856,7 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
   private setTableActions(actions: PoPageDynamicTableActions) {
     if (actions) {
       const visibleRemove = this.showRemove(actions.remove);
-      this._tableActions = [
+      this.defaultTableActions = [
         {
           action: this.openDetail.bind(this, actions.detail),
           label: this.literals.tableActionView,
@@ -979,4 +996,12 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
       }
     });
   }
+
+  private updatePageActions() {
+    this.pageActions = [...this._defaultPageActions, ...this._customPageListActions];
+  }
+
+  private updateTableActions() {
+    this.tableActions = [...this._defaultTableActions, ...this._customTableActions];
+  }
 }

projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-users/sample-po-page-dynamic-table-users.component.ts

@@ -40,10 +40,17 @@ export class SamplePoPageDynamicTableUsersComponent {
   ];
 
   readonly fields: Array<any> = [
-    { property: 'id', key: true },
+    { property: 'id', key: true, visible: false, filter: true },
     { property: 'name', label: 'Name', filter: true, gridColumns: 6 },
     { property: 'genre', label: 'Genre', filter: true, gridColumns: 6, duplicate: true },
-    { property: 'birthdate', label: 'Birthdate', type: 'date', gridColumns: 6 },
+    {
+      property: 'birthdate',
+      label: 'Birthdate',
+      type: 'date',
+      gridColumns: 6,
+      visible: false,
+      allowColumnsManager: true
+    },
     { property: 'city', label: 'City', filter: true, duplicate: true, options: this.cityOptions, gridColumns: 12 }
   ];