feat(page-dynamic-search): adiciona propriedade p-quick-search-width

O desenvolvedor agora pode definir uma largura para o campo de busca rápida. Foi também feito o repasse para o template page-dynamic-table.

Fixes DTHFUI-4118

Author: samir-ayoub

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

@@ -121,6 +121,18 @@ describe('PoPageDynamicSearchBaseComponent:', () => {
         expect(component.literals).toEqual(poPageDynamicSearchLiteralsDefault['pt']);
       });
     });
+
+    it('p-quick-search-width: should update property p-quick-search-width with valid values.', () => {
+      const validValues = [105, 1, 98, 0];
+
+      expectPropertiesValues(component, 'quickSearchWidth', validValues, validValues);
+    });
+
+    it('p-quick-search-width: should update property p-quick-search-width with invalid values for undefined.', () => {
+      const invalidValues = [null, undefined, '', ' ', {}, [], false, true];
+
+      expectPropertiesValues(component, 'quickSearchWidth', invalidValues, undefined);
+    });
   });
 
   describe('Methods:', () => {

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

@@ -2,7 +2,7 @@ import { EventEmitter, Input, Output, Directive } from '@angular/core';
 
 import { InputBoolean, PoBreadcrumb, PoDynamicFormField, PoLanguageService, PoPageAction } from '@po-ui/ng-components';
 
-import { poLocaleDefault } from '../../utils/util';
+import { convertToInt, poLocaleDefault } from '../../utils/util';
 
 import { PoPageDynamicSearchLiterals } from './po-page-dynamic-search-literals.interface';
 import { poAdvancedFiltersLiteralsDefault } from './po-advanced-filter/po-advanced-filter-base.component';
@@ -55,6 +55,7 @@ export const poPageDynamicSearchLiteralsDefault = {
 export abstract class PoPageDynamicSearchBaseComponent {
   private _filters: Array<PoDynamicFormField> = [];
   private _literals: PoPageDynamicSearchLiterals;
+  private _quickSearchWidth: number;
 
   advancedFilterLiterals: PoAdvancedFilterLiterals;
 
@@ -213,6 +214,23 @@ export abstract class PoPageDynamicSearchBaseComponent {
   /** Título da página. */
   @Input('p-title') title: string;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Largura do campo de busca, utilizando o *Grid System*,
+   * e limitado ao máximo de 6 colunas. O tamanho mínimo é controlado
+   * conforme resolução de tela para manter a consistência do layout.
+   */
+  @Input('p-quick-search-width') set quickSearchWidth(value: number) {
+    this._quickSearchWidth = convertToInt(value);
+  }
+
+  get quickSearchWidth(): number {
+    return this._quickSearchWidth;
+  }
+
   /**
    * @description
    *

projects/templates/src/lib/components/po-page-dynamic-search/po-page-dynamic-search-options.interface.ts

@@ -56,4 +56,11 @@ export interface PoPageDynamicSearchOptions {
    * é apenas nos `disclaimers`.
    */
   concatFilters?: boolean;
+
+  /**
+   * Largura do campo de busca, utilizando o *Grid System*,
+   * e limitado ao máximo de 6 colunas. O tamanho mínimo é controlado
+   * conforme resolução de tela para manter a consistência do layout.
+   */
+  quickSearchWidth?: number;
 }

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

@@ -48,6 +48,13 @@ describe('PoPageDynamicSearchComponent:', () => {
       expect(typeof component.filterSettings.advancedAction).toBe('function');
     });
 
+    it('get filterSettings: should apply `quickSearchWidth` value to `filterSettings.width`', () => {
+      const filterWidth = 3;
+      component.quickSearchWidth = filterWidth;
+
+      expect(component.filterSettings.width).toBe(filterWidth);
+    });
+
     describe('onAction:', () => {
       let fakethis;
 
@@ -460,6 +467,7 @@ describe('PoPageDynamicSearchComponent:', () => {
         };
         component.filters = [{ property: 'filter1' }, { property: 'filter2' }];
         component.title = 'Original Title';
+        component.quickSearchWidth = 3;
 
         component.onLoad = () => {
           return {
@@ -472,7 +480,8 @@ describe('PoPageDynamicSearchComponent:', () => {
               { label: 'Feature 3', url: '/new-feature3' }
             ],
             filters: [{ property: 'filter1' }, { property: 'filter3' }],
-            keepFilters: true
+            keepFilters: true,
+            quickSearchWidth: 6
           };
         };
 
@@ -489,6 +498,7 @@ describe('PoPageDynamicSearchComponent:', () => {
           items: [{ label: 'Test' }, { label: 'Test2' }]
         });
         expect(component.keepFilters).toBeTrue();
+        expect(component.quickSearchWidth).toBe(6);
       }));
     });
   });

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

@@ -54,7 +54,8 @@ export class PoPageDynamicSearchComponent extends PoPageDynamicSearchBaseCompone
   private readonly _filterSettings: PoPageFilter = {
     action: this.onAction.bind(this),
     advancedAction: this.onAdvancedAction.bind(this),
-    placeholder: this.literals.searchPlaceholder
+    placeholder: this.literals.searchPlaceholder,
+    width: this.quickSearchWidth
   };
 
   @ViewChild(PoAdvancedFilterComponent, { static: true }) poAdvancedFilter: PoAdvancedFilterComponent;
@@ -74,7 +75,10 @@ export class PoPageDynamicSearchComponent extends PoPageDynamicSearchBaseCompone
   get filterSettings() {
     this._filterSettings.advancedAction = this.filters.length === 0 ? undefined : this.onAdvancedAction.bind(this);
 
-    return Object.assign({}, this._filterSettings, { placeholder: this.literals.searchPlaceholder });
+    return Object.assign({}, this._filterSettings, {
+      placeholder: this.literals.searchPlaceholder,
+      width: this.quickSearchWidth
+    });
   }
 
   ngOnInit() {
@@ -270,7 +274,8 @@ export class PoPageDynamicSearchComponent extends PoPageDynamicSearchBaseCompone
       breadcrumb: this.breadcrumb,
       filters: this.filters,
       keepFilters: this.keepFilters,
-      concatFilters: this.concatFilters
+      concatFilters: this.concatFilters,
+      quickSearchWidth: this.quickSearchWidth
     };
 
     const pageOptionSchema: PoPageDynamicOptionsSchema<PoPageDynamicSearchOptions> = {
@@ -296,6 +301,9 @@ export class PoPageDynamicSearchComponent extends PoPageDynamicSearchBaseCompone
         },
         {
           nameProp: 'concatFilters'
+        },
+        {
+          nameProp: 'quickSearchWidth'
         }
       ]
     };

projects/templates/src/lib/components/po-page-dynamic-search/samples/sample-po-page-dynamic-search-hiring-processes/sample-po-page-dynamic-search-hiring-processes.component.html

@@ -5,6 +5,7 @@
   [p-filters]="filters"
   [p-literals]="literals"
   [p-load]="onLoadFields.bind(this)"
+  [p-quick-search-width]="quickSearchWidth"
   (p-change-disclaimers)="onChangeDisclaimers($event)"
   (p-quick-search)="onQuickSearch($event)"
   (p-advanced-search)="onAdvancedSearch($event)"

projects/templates/src/lib/components/po-page-dynamic-search/samples/sample-po-page-dynamic-search-hiring-processes/sample-po-page-dynamic-search-hiring-processes.component.ts

@@ -22,6 +22,7 @@ import { SamplePoPageDynamicSearchHiringProcessesService } from './sample-po-pag
 export class SamplePoPageDynamicSearchHiringProcessesComponent implements OnInit {
   hiringProcesses: Array<object>;
   hiringProcessesColumns: Array<PoTableColumn>;
+  quickSearchWidth: number = 6;
 
   private jobDescriptionOptions: Array<PoSelectOption>;
   private statusOptions: Array<PoSelectOption>;