fix(page-dynamic-search): corrige disclaimers da busca avançada

Quando aplicados filtros de campos relacionados à seleção de valor,
aplicava-se o value do campo ao invés do label nos campos:
- select
- radio-group
- checkbox-group

Fixes DTHFUI-2540

Author: samir-ayoub

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

@@ -6,6 +6,7 @@ import { TitleCasePipe } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { configureTestSuite, expectBrowserLanguageMethod } from './../../util-test/util-expect.spec';
+import { PoDynamicFieldType } from '@portinari/portinari-ui';
 
 import { PoPageDynamicSearchComponent } from './po-page-dynamic-search.component';
 import { PoAdvancedFilterComponent } from './po-advanced-filter/po-advanced-filter.component';
@@ -268,6 +269,75 @@ describe('PoPageDynamicSearchComponent:', () => {
       expect(component['setDisclaimers'](filters)).toEqual(result);
     });
 
+    it('getFilterValueToDisclaimer: should return formated date if field type is PoDynamicFieldType.Date', () => {
+      const field = { type: PoDynamicFieldType.Date, property: '1', label: 'date' };
+      const value = '2020-08-12';
+
+      spyOn(component, <any>'formatDate').and.returnValue('12/08/2020');
+
+      const result = component['getFilterValueToDisclaimer'](field, value);
+
+      expect(result).toBe('12/08/2020');
+    });
+
+    it('getFilterValueToDisclaimer: should return label of option if options and label are defined', () => {
+      const field = { property: '1', label: 'field label', options: [
+        { value: '1', label: 'test 1'}, {value: '2', label: 'test 2' }
+      ]};
+
+      const value = '2';
+
+      const result = component['getFilterValueToDisclaimer'](field, value);
+
+      expect(result).toBe('test 2');
+    });
+
+    it('getFilterValueToDisclaimer: should return value of option if options is defined and label is undefined', () => {
+      const field = { property: '1', label: 'field label', options: [
+        { value: '1' }, {value: '2' }
+      ]};
+
+      const value = '2';
+
+      const result = component['getFilterValueToDisclaimer'](field, value);
+
+      expect(result).toBe('2');
+    });
+
+    it('getFilterValueToDisclaimer: should return option label if options and label are defined and optionsMulti is true', () => {
+      const field = { property: '1', label: 'field label', optionsMulti: true, options: [
+        { value: '1', label: 'test 1'}, {value: '2', label: 'test 2' }, {value: '3', label: 'test 3' }
+      ]};
+
+      const value = ['2', '3'];
+
+      const result = component['getFilterValueToDisclaimer'](field, value);
+
+      expect(result).toBe('test 2, test 3');
+    });
+
+    it('getFilterValueToDisclaimer: should return option value if options is defined, label is undefined and optionsMulti is true', () => {
+      const field = { property: '1', label: 'field label', optionsMulti: true, options: [
+        { value: '1' }, { value: '2' }, { value: '3' }
+      ]};
+
+      const value = ['2', '3'];
+
+      const result = component['getFilterValueToDisclaimer'](field, value);
+
+      expect(result).toBe('2, 3');
+    });
+
+    it('getFilterValueToDisclaimer: should return value if options is undefined and type isn`t PoDynamicFieldType.Date', () => {
+      const field = { property: '1', label: 'field label'};
+
+      const value = 'test value 1';
+
+      const result = component['getFilterValueToDisclaimer'](field, value);
+
+      expect(result).toBe('test value 1');
+    });
+
   });
 
 });

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

@@ -83,6 +83,18 @@ export class PoPageDynamicSearchComponent extends PoPageDynamicSearchBaseCompone
     this.advancedSearch.emit(filters);
   }
 
+  private applyDisclaimerLabelValue(field: any, filterValue: any) {
+    const values = Array.isArray(filterValue) ? filterValue : [ filterValue ];
+
+    const labels = values.map(value => {
+      const filteredField = field.options.find(option => option.value === value);
+
+      return filteredField.label || filteredField.value;
+    });
+
+    return labels.join(', ');
+  }
+
   private formatDate(date: string) {
     const year = parseInt(date.substr(0, 4), 10);
     const month = parseInt(date.substr(5, 2), 10);
@@ -95,22 +107,36 @@ export class PoPageDynamicSearchComponent extends PoPageDynamicSearchBaseCompone
     return fields.find((field: PoDynamicFormField) => field.property === fieldName);
   }
 
+  private getFilterValueToDisclaimer(field: any, value: any) {
+
+    if (field.type === PoDynamicFieldType.Date) {
+      return this.formatDate(value);
+    }
+
+    if (field.options) {
+      return this.applyDisclaimerLabelValue(field, value);
+    }
+
+    return value;
+  }
+
   private onChangeDisclaimerGroup(disclaimers) {
     this.changeDisclaimersEnabled ? this.changeDisclaimers.emit(disclaimers) : this.changeDisclaimersEnabled = true;
   }
 
   private setDisclaimers(filters) {
     const disclaimers = [];
+    const properties = Object.keys(filters);
 
-    Object.keys(filters).forEach(filter => {
-      const field = this.getFieldByProperty(this.filters, filter);
+    properties.forEach(property => {
+      const field = this.getFieldByProperty(this.filters, property);
       const label = field.label || capitalizeFirstLetter(field.property);
-      const value = field.type === PoDynamicFieldType.Date ? this.formatDate(filters[filter]) : filters[filter];
+      const value = filters[property];
 
       disclaimers.push({
-        label: `${label}: ${value}`,
-        property: filter,
-        value: filters[filter]
+        label: `${label}: ${this.getFilterValueToDisclaimer(field, value)}`,
+        property,
+        value
       });
     });
 

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

@@ -39,7 +39,7 @@ export class SamplePoPageDynamicSearchHiringProcessesComponent implements OnInit
     { property: 'hireStatus', label: 'Hire Status', options: this.statusOptions, gridColumns: 6 },
     { property: 'name', gridColumns: 6 },
     { property: 'city', gridColumns: 6 },
-    { property: 'jobDescription', label: 'Job Description', options: this.jobDescriptionOptions, gridColumns: 6 },
+    { property: 'job', label: 'Job Description', options: this.jobDescriptionOptions, gridColumns: 6 },
   ];
 
   constructor(
@@ -90,18 +90,22 @@ export class SamplePoPageDynamicSearchHiringProcessesComponent implements OnInit
   }
 
   private hireCandidate() {
+    const hired = '1';
+    const progress = '2';
+    const canceled = '3';
+
     const selectedCandidate = this.hiringProcesses.find(candidate => candidate['$selected']);
     switch (selectedCandidate['hireStatus']) {
-      case 'progress':
+      case progress:
         selectedCandidate['hireStatus'] = 'hired';
         this.poNotification.success('Hired candidate!');
         break;
 
-      case 'hired':
+      case hired:
         this.poNotification.warning('This candidate has already been hired.');
         break;
 
-      case 'canceled':
+      case canceled:
         this.poNotification.error('This candidate has already been disqualified.');
         break;
     }

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

@@ -20,9 +20,9 @@ export class SamplePoPageDynamicSearchHiringProcessesService {
   getColumns(): Array<PoTableColumn> {
     return [
       { property: 'hireStatus', label: 'Status', type: 'subtitle', subtitles: [
-        { value: 'hired', color: 'success', label: 'Hired', content: '1' },
-        { value: 'progress', color: 'warning', label: 'Progress', content: '2' },
-        { value: 'canceled', color: 'danger', label: 'Canceled', content: '3' }
+        { value: '1', color: 'success', label: 'Hired', content: '1' },
+        { value: '2', color: 'warning', label: 'Progress', content: '2' },
+        { value: '3', color: 'danger', label: 'Canceled', content: '3' }
       ]},
       { property: 'idCard', label: 'Identity card', type: 'string' },
       { property: 'name', label: 'Name'},
@@ -34,34 +34,36 @@ export class SamplePoPageDynamicSearchHiringProcessesService {
 
   getHireStatus() {
     return [
-      { value: 'hired', label: 'Hired' },
-      { value: 'progress', label: 'Progress' },
-      { value: 'canceled', label: 'Canceled'}
+      { value: '1', label: 'Hired' },
+      { value: '2', label: 'Progress' },
+      { value: '3', label: 'Canceled'}
     ];
   }
 
   getItems() {
     return [
-      { hireStatus: 'hired', name: 'James Johnson', city: 'Ontario', age: 24, idCard: 'AB34lxi90', jobDescription: 'Systems Analyst' },
-      { hireStatus: 'progress', name: 'Brian Brown', city: 'Buffalo', age: 23, idCard: 'HG56lds54', jobDescription: 'Trainee' },
-      { hireStatus: 'canceled', name: 'Mary Davis', city: 'Albany', age: 31, idCard: 'DF23cfr65', jobDescription: 'Programmer' },
-      { hireStatus: 'hired', name: 'Margaret Garcia', city: 'New York', age: 29, idCard: 'GF45fgh34', jobDescription: 'Web developer' },
-      { hireStatus: 'hired', name: 'Emma Hall', city: 'Ontario', age: 34, idCard: 'RF76jut21', jobDescription: 'Recruiter' },
-      { hireStatus: 'progress', name: 'Lucas Clark', city: 'Utica', age: 32, idCard: 'HY21kgu65', jobDescription: 'Consultant' },
-      { hireStatus: 'hired', name: 'Ella Scott', city: 'Ontario', age: 24, idCard: 'UL78flg68', jobDescription: 'DBA' },
-      { hireStatus: 'progress', name: 'Chloe Walker', city: 'Albany', age: 29, idCard: 'JH12oli98', jobDescription: 'Programmer' },
+      { hireStatus: '1', name: 'James Johnson', city: 'Ontario', age: 24, idCard: 'AB34lxi90', job: 'abc',
+        jobDescription: 'Systems Analyst' },
+      { hireStatus: '2', name: 'Brian Brown', city: 'Buffalo', age: 23, idCard: 'HG56lds54', job: 'def', jobDescription: 'Trainee' },
+      { hireStatus: '3', name: 'Mary Davis', city: 'Albany', age: 31, idCard: 'DF23cfr65', job: 'ghi', jobDescription: 'Programmer' },
+      { hireStatus: '1', name: 'Margaret Garcia', city: 'New York', age: 29, idCard: 'GF45fgh34', job: 'jkl',
+        jobDescription: 'Web developer' },
+      { hireStatus: '1', name: 'Emma Hall', city: 'Ontario', age: 34, idCard: 'RF76jut21', job: 'mno', jobDescription: 'Recruiter' },
+      { hireStatus: '2', name: 'Lucas Clark', city: 'Utica', age: 32, idCard: 'HY21kgu65', job: 'pqr', jobDescription: 'Consultant' },
+      { hireStatus: '1', name: 'Ella Scott', city: 'Ontario', age: 24, idCard: 'UL78flg68', job: 'stu', jobDescription: 'DBA' },
+      { hireStatus: '2', name: 'Chloe Walker', city: 'Albany', age: 29, idCard: 'JH12oli98', job: 'ghi', jobDescription: 'Programmer' }
     ];
   }
 
   getJobs() {
     return [
-      { value: 'Systems Analyst', label: 'Systems Analyst' },
-      { value: 'Trainee', label: 'Trainee' },
-      { value: 'Programmer', label: 'Programmer'},
-      { value: 'Web Developer', label: 'Web developer'},
-      { value: 'Recruiter', label: 'Recruiter'},
-      { value: 'Consultant', label: 'Consultant'},
-      { value: 'DBA', label: 'DBA'}
+      { value: 'abc', label: 'Systems Analyst' },
+      { value: 'def', label: 'Trainee' },
+      { value: 'ghi', label: 'Programmer'},
+      { value: 'jkl', label: 'Web developer'},
+      { value: 'mno', label: 'Recruiter'},
+      { value: 'pqr', label: 'Consultant'},
+      { value: 'stu', label: 'DBA'}
     ];
   }