feat(multiselect): permite usar o p-options com any

Permite usar o `p-options` com `any` com `p-field-value` e `p-field-label`

Fixes DTHFUI-6128

Author: brunoromeiro

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-base.component.spec.ts

@@ -5,7 +5,11 @@ import { fakeAsync, tick } from '@angular/core/testing';
 import { Observable, of } from 'rxjs';
 
 import { expectPropertiesValues, expectSettersMethod } from '../../../util-test/util-expect.spec';
-import { removeDuplicatedOptions, removeUndefinedAndNullOptions, sortOptionsByProperty } from '../../../utils/util';
+import {
+  removeDuplicatedOptionsWithFieldValue,
+  removeUndefinedAndNullOptionsWithFieldValue,
+  sortOptionsByProperty
+} from '../../../utils/util';
 import * as UtilsFunctions from '../../../utils/util';
 
 import { PoLanguageService } from '../../../services/po-language/po-language.service';
@@ -125,10 +129,8 @@ describe('PoMultiselectBaseComponent:', () => {
   });
 
   it('should set options', () => {
-    spyOn(component, 'validAndSortOptions');
     component.options = [{ label: '1', value: '1' }];
     expect(component.options.length).toBe(1);
-    expect(component.validAndSortOptions).toHaveBeenCalled();
   });
 
   it('should set p-sort', () => {
@@ -205,13 +207,13 @@ describe('PoMultiselectBaseComponent:', () => {
     component.options = [{ label: '1', value: 1 }];
     component.sort = true;
 
-    spyOn(UtilsFunctions, 'removeUndefinedAndNullOptions');
-    spyOn(UtilsFunctions, 'removeDuplicatedOptions');
+    spyOn(UtilsFunctions, 'removeUndefinedAndNullOptionsWithFieldValue');
+    spyOn(UtilsFunctions, 'removeDuplicatedOptionsWithFieldValue');
     spyOn(component, 'setUndefinedLabels');
     spyOn(UtilsFunctions, 'sortOptionsByProperty');
     component.validAndSortOptions();
-    expect(removeUndefinedAndNullOptions).toHaveBeenCalled();
-    expect(removeDuplicatedOptions).toHaveBeenCalled();
+    expect(removeUndefinedAndNullOptionsWithFieldValue).toHaveBeenCalled();
+    expect(removeDuplicatedOptionsWithFieldValue).toHaveBeenCalled();
     expect(component.setUndefinedLabels).toHaveBeenCalled();
     expect(sortOptionsByProperty).toHaveBeenCalled();
   });
@@ -220,13 +222,13 @@ describe('PoMultiselectBaseComponent:', () => {
     component.options = [{ label: '1', value: 1 }];
     component.sort = false;
 
-    spyOn(UtilsFunctions, 'removeUndefinedAndNullOptions');
-    spyOn(UtilsFunctions, 'removeDuplicatedOptions');
+    spyOn(UtilsFunctions, 'removeUndefinedAndNullOptionsWithFieldValue');
+    spyOn(UtilsFunctions, 'removeDuplicatedOptionsWithFieldValue');
     spyOn(component, 'setUndefinedLabels');
     spyOn(UtilsFunctions, 'sortOptionsByProperty');
     component.validAndSortOptions();
-    expect(removeUndefinedAndNullOptions).toHaveBeenCalled();
-    expect(removeDuplicatedOptions).toHaveBeenCalled();
+    expect(removeUndefinedAndNullOptionsWithFieldValue).toHaveBeenCalled();
+    expect(removeDuplicatedOptionsWithFieldValue).toHaveBeenCalled();
     expect(component.setUndefinedLabels).toHaveBeenCalled();
     expect(sortOptionsByProperty).not.toHaveBeenCalled();
   });
@@ -235,13 +237,13 @@ describe('PoMultiselectBaseComponent:', () => {
     component.options = [];
     component.sort = false;
 
-    spyOn(UtilsFunctions, 'removeUndefinedAndNullOptions');
-    spyOn(UtilsFunctions, 'removeDuplicatedOptions');
+    spyOn(UtilsFunctions, 'removeUndefinedAndNullOptionsWithFieldValue');
+    spyOn(UtilsFunctions, 'removeDuplicatedOptionsWithFieldValue');
     spyOn(component, 'setUndefinedLabels');
     spyOn(UtilsFunctions, 'sortOptionsByProperty');
     component.validAndSortOptions();
-    expect(removeUndefinedAndNullOptions).not.toHaveBeenCalled();
-    expect(removeDuplicatedOptions).not.toHaveBeenCalled();
+    expect(removeUndefinedAndNullOptionsWithFieldValue).not.toHaveBeenCalled();
+    expect(removeDuplicatedOptionsWithFieldValue).not.toHaveBeenCalled();
     expect(component.setUndefinedLabels).not.toHaveBeenCalled();
     expect(sortOptionsByProperty).not.toHaveBeenCalled();
   });

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-base.component.ts

@@ -7,8 +7,8 @@ import { debounceTime, distinctUntilChanged, switchMap, tap } from 'rxjs/operato
 import {
   convertToBoolean,
   isTypeof,
-  removeDuplicatedOptions,
-  removeUndefinedAndNullOptions,
+  removeDuplicatedOptionsWithFieldValue,
+  removeUndefinedAndNullOptionsWithFieldValue,
   sortOptionsByProperty
 } from '../../../utils/util';
 import { requiredFailed } from './../validators';
@@ -136,8 +136,8 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
    */
   @Output('p-change') change: EventEmitter<any> = new EventEmitter<any>();
 
-  selectedOptions: Array<PoMultiselectOption> = [];
-  visibleOptionsDropdown: Array<PoMultiselectOption> = [];
+  selectedOptions: Array<PoMultiselectOption | any> = [];
+  visibleOptionsDropdown: Array<PoMultiselectOption | any> = [];
   visibleDisclaimers = [];
   isServerSearching = false;
   isFirstFilter: boolean = true;
@@ -158,7 +158,7 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
   private _filterMode?: PoMultiselectFilterMode = PoMultiselectFilterMode.startsWith;
   private _hideSearch?: boolean = false;
   private _literals: PoMultiselectLiterals;
-  private _options: Array<PoMultiselectOption>;
+  private _options: Array<PoMultiselectOption | any>;
   private _required?: boolean = false;
   private _sort?: boolean = false;
   private _autoHeight: boolean = false;
@@ -359,7 +359,7 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
   /**
    * @description
    *
-   * Nesta propriedade deve ser definida uma lista de objetos que implementam a interface PoMultiselectOption.
+   * Nesta propriedade deve ser definida uma lista de objetos que será exibida no multiselect.
    * Esta lista deve conter os valores e os labels que serão apresentados na tela.
    *
    * > Essa propriedade é imutável, ou seja, sempre que quiser atualizar a lista de opções disponíveis
@@ -372,14 +372,23 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
    * // evite, pois não atualiza a referência do objeto podendo gerar atrasos na atualização do template
    * this.options.push({ value: 'x', label: 'Nova opção' });
    * ```
+   * > A lista pode ser definida utilizando um array com o valor representando `value` e `label` das seguintes formas:
+   *
+   * ```
+   * <po-multiselect name="multiselect" p-label="PO Multiselect" [p-options]="[{value: 1, label: 'One'}, {value: 2, label: 'two'}]"> </po-multiselect>
+   * ```
+   *
+   * ```
+   * <po-multiselect name="multiselect" p-label="PO Multiselect" [p-options]="[{name: 'Roger', age: 28}, {name: 'Anne', age: 35}]" p-field-label="name" p-field-value="age"> </po-multiselect>
+   * ```
+   *
+   * - Aconselha-se utilizar valores distintos no `label` e `value` dos itens.
    */
-  @Input('p-options') set options(options: Array<PoMultiselectOption>) {
+  @Input('p-options') set options(options: Array<PoMultiselectOption | any>) {
     this._options = options;
-
-    this.validAndSortOptions();
   }
 
-  get options() {
+  get options(): Array<PoMultiselectOption | any> {
     return this._options;
   }
 
@@ -445,7 +454,7 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
    * @default `label`
    */
   @Input('p-field-label') set fieldLabel(value: string) {
-    this._fieldLabel = value || PO_MULTISELECT_FIELD_LABEL_DEFAULT;
+    this._fieldLabel = value ? value : PO_MULTISELECT_FIELD_LABEL_DEFAULT;
 
     if (isTypeof(this.filterService, 'string') && this.service) {
       this.service.fieldLabel = this._fieldLabel;
@@ -469,7 +478,7 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
    * @default `value`
    */
   @Input('p-field-value') set fieldValue(value: string) {
-    this._fieldValue = value || PO_MULTISELECT_FIELD_VALUE_DEFAULT;
+    this._fieldValue = value ? value : PO_MULTISELECT_FIELD_VALUE_DEFAULT;
 
     if (isTypeof(this.filterService, 'string') && this.service) {
       this.service.fieldValue = this._fieldValue;
@@ -499,6 +508,7 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
       )
       .subscribe();
 
+    this.validAndSortOptions();
     this.updateList(this.options);
   }
 
@@ -515,31 +525,31 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
 
   validAndSortOptions() {
     if (this.options && this.options.length) {
-      removeUndefinedAndNullOptions(this.options);
-      removeDuplicatedOptions(this.options);
+      removeUndefinedAndNullOptionsWithFieldValue(this.options, this.fieldValue);
+      removeDuplicatedOptionsWithFieldValue(this.options, this.fieldValue);
       this.setUndefinedLabels(this.options);
 
       if (this.sort) {
-        sortOptionsByProperty(this.options, 'label');
+        sortOptionsByProperty(this.options, this.fieldLabel);
       }
     }
   }
 
   setUndefinedLabels(options) {
     options.forEach(option => {
-      if (!option['label']) {
-        option.label = option.value;
+      if (!option[this.fieldLabel]) {
+        option[this.fieldLabel] = option[this.fieldValue];
       }
     });
   }
 
-  updateList(options: Array<PoMultiselectOption>) {
+  updateList(options: Array<PoMultiselectOption | any>) {
     if (options) {
       this.visibleOptionsDropdown = options;
     }
   }
 
-  callOnChange(selectedOptions: Array<PoMultiselectOption>) {
+  callOnChange(selectedOptions: Array<PoMultiselectOption | any>) {
     if (this.onModelChange) {
       this.onModelChange(this.getValuesFromOptions(selectedOptions));
       this.eventChange(selectedOptions);
@@ -553,20 +563,20 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
     this.lastLengthModel = selectedOptions ? selectedOptions.length : null;
   }
 
-  getValuesFromOptions(selectedOptions: Array<PoMultiselectOption>) {
-    return selectedOptions && selectedOptions.length ? selectedOptions.map(option => option.value) : [];
+  getValuesFromOptions(selectedOptions: Array<PoMultiselectOption | any>) {
+    return selectedOptions && selectedOptions.length ? selectedOptions.map(option => option[this.fieldValue]) : [];
   }
 
   getLabelByValue(value) {
-    const index = this.options.findIndex(option => option.value === value);
+    const index = this.options.findIndex(option => option[this.fieldValue] === value);
     return this.options[index].label;
   }
 
-  searchByLabel(search: string, options: Array<PoMultiselectOption>, filterMode: PoMultiselectFilterMode) {
+  searchByLabel(search: string, options: Array<PoMultiselectOption | any>, filterMode: PoMultiselectFilterMode) {
     if (search && options && options.length) {
-      const newOptions: Array<PoMultiselectOption> = [];
+      const newOptions: Array<PoMultiselectOption | any> = [];
       options.forEach(option => {
-        if (option.label && this.compareMethod(search, option, filterMode)) {
+        if (option[this.fieldLabel] && this.compareMethod(search, option, filterMode)) {
           newOptions.push(option);
         }
       });
@@ -588,15 +598,15 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
   }
 
   startsWith(search: string, option: PoMultiselectOption) {
-    return option.label.toLowerCase().startsWith(search.toLowerCase());
+    return option[this.fieldLabel].toLowerCase().startsWith(search.toLowerCase());
   }
 
   contains(search: string, option: PoMultiselectOption) {
-    return option.label.toLowerCase().indexOf(search.toLowerCase()) > -1;
+    return option[this.fieldLabel].toLowerCase().indexOf(search.toLowerCase()) > -1;
   }
 
   endsWith(search: string, option: PoMultiselectOption) {
-    return option.label.toLowerCase().endsWith(search.toLowerCase());
+    return option[this.fieldLabel].toLowerCase().endsWith(search.toLowerCase());
   }
 
   validate(c: AbstractControl): { [key: string]: any } {
@@ -623,7 +633,7 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
     } else {
       newOptions.forEach(newOption => {
         options.forEach(option => {
-          if (option.value === newOption.value) {
+          if (option[this.fieldValue] === newOption[this.fieldValue]) {
             this.selectedOptions.push(option);
           }
         });
@@ -643,7 +653,7 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
       });
     } else {
       // Validar se todos os items existem entre os options, senão atualizar o model
-      this.updateSelectedOptions(values.map(value => ({ value })));
+      this.updateSelectedOptions(values.map(value => ({ [this.fieldValue]: value })));
 
       if (this.selectedOptions && this.selectedOptions.length < values.length) {
         this.callOnChange(this.selectedOptions);
@@ -675,6 +685,6 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
     }
   }
 
-  abstract applyFilter(value?: string): Observable<Array<PoMultiselectOption>>;
+  abstract applyFilter(value?: string): Observable<Array<PoMultiselectOption | any>>;
   abstract updateVisibleItems(): void;
 }

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-dropdown/po-multiselect-dropdown.component.html

@@ -3,6 +3,7 @@
     #searchElement
     *ngIf="!hideSearch"
     [p-literals]="literals"
+    [p-field-value]="fieldValue"
     [p-placeholder]="placeholderSearch"
     (p-change)="callChangeSearch($event)"
   >
@@ -28,7 +29,7 @@
 
       <po-multiselect-item
         *ngFor="let option of visibleOptions"
-        [p-label]="option.label"
+        [p-label]="option[fieldLabel]"
         [p-selected]="isSelectedItem(option)"
         (p-change)="clickItem($event, option)"
       >

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-dropdown/po-multiselect-dropdown.component.spec.ts

@@ -28,6 +28,9 @@ describe('PoMultiselectDropdownComponent:', () => {
       { label: 'label1', value: 'value1' },
       { label: 'label2', value: 'value2' }
     ];
+
+    component.fieldLabel = 'label';
+    component.fieldValue = 'value';
   });
 
   it('should be created', () => {

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-dropdown/po-multiselect-dropdown.component.ts

@@ -43,14 +43,18 @@ export class PoMultiselectDropdownComponent {
   @Input('p-selected-options') selectedOptions: Array<any> = [];
 
   /** Propriedade que recebe a lista com todas as opções. */
-  @Input('p-options') options: Array<PoMultiselectOption> = [];
+  @Input('p-options') options: Array<PoMultiselectOption | any> = [];
 
   /** Propriedade que recebe a lista de opções que deverão ser criadas no dropdown. */
-  @Input('p-visible-options') visibleOptions: Array<PoMultiselectOption> = [];
+  @Input('p-visible-options') visibleOptions: Array<PoMultiselectOption | any> = [];
 
   /** Propriedade que indica se o campo "Selecionar todos" deverá ser escondido. */
   @Input('p-hide-select-all') hideSelectAll?: boolean = false;
 
+  @Input('p-field-value') fieldValue: string;
+
+  @Input('p-field-label') fieldLabel: string;
+
   /** Evento disparado a cada tecla digitada na pesquisa. */
   @Output('p-change-search') changeSearch = new EventEmitter();
 
@@ -90,7 +94,7 @@ export class PoMultiselectDropdownComponent {
   }
 
   isSelectedItem(option: PoMultiselectOption) {
-    return this.selectedOptions.some(selectedItem => selectedItem.value === option.value);
+    return this.selectedOptions.some(selectedItem => selectedItem[this.fieldValue] === option[this.fieldValue]);
   }
 
   clickItem(check, option) {
@@ -102,7 +106,7 @@ export class PoMultiselectDropdownComponent {
   }
 
   onClickSelectAll() {
-    const selectedValues = this.selectedOptions.map(({ value }) => value);
+    const selectedValues = this.selectedOptions.map(({ [this.fieldValue]: value }) => value);
 
     if (this.everyVisibleOptionsSelected(selectedValues)) {
       this.selectedOptions = [];
@@ -116,21 +120,23 @@ export class PoMultiselectDropdownComponent {
     if (checked) {
       this.selectedOptions.push(option);
     } else {
-      this.selectedOptions = this.selectedOptions.filter(selectedOption => selectedOption.value !== option.value);
+      this.selectedOptions = this.selectedOptions.filter(
+        selectedOption => selectedOption[this.fieldValue] !== option[this.fieldValue]
+      );
     }
     this.change.emit(this.selectedOptions);
   }
 
   everyVisibleOptionsSelected(selectedValues) {
-    return this.visibleOptions.every(visibleOption => selectedValues.includes(visibleOption.value));
+    return this.visibleOptions.every(visibleOption => selectedValues.includes(visibleOption[this.fieldValue]));
   }
 
   someVisibleOptionsSelected(selectedValues) {
-    return this.visibleOptions.some(visibleOption => selectedValues.includes(visibleOption.value));
+    return this.visibleOptions.some(visibleOption => selectedValues.includes(visibleOption[this.fieldValue]));
   }
 
   getStateSelectAll() {
-    const selectedValues = this.selectedOptions.map(({ value }) => value);
+    const selectedValues = this.selectedOptions.map(({ [this.fieldValue]: value }) => value);
 
     if (this.everyVisibleOptionsSelected(selectedValues)) {
       return true;
@@ -161,7 +167,7 @@ export class PoMultiselectDropdownComponent {
     const newSelectedOptions = [...this.selectedOptions];
 
     for (const visibleOption of this.visibleOptions) {
-      if (!selectedValues.includes(visibleOption.value)) {
+      if (!selectedValues.includes(visibleOption[this.fieldValue])) {
         newSelectedOptions.push(visibleOption);
       }
     }