feat(lookup): inclui coluna de ordenação na chamada do serviço

Inclui a coluna ordernada na chamada,
via URL ou repassa por parâmetro caso utilizar serviço.
Também deprecia o método getFilteredData e cria novo
método getFilteredItems.

Fixes DTHFUI-1742

Author: jhonyeduardo

projects/ui/src/lib/components/po-field/index.ts

@@ -15,6 +15,7 @@ export * from './po-input/po-input.component';
 export * from './po-login/po-login.component';
 export * from './po-lookup/interfaces/po-lookup-column.interface';
 export * from './po-lookup/interfaces/po-lookup-filter.interface';
+export * from './po-lookup/interfaces/po-lookup-filtered-items-params.interface';
 export * from './po-lookup/interfaces/po-lookup-literals.interface';
 export * from './po-lookup/interfaces/po-lookup-response-api.interface';
 export * from './po-lookup/po-lookup.component';

projects/ui/src/lib/components/po-field/po-lookup/interfaces/po-lookup-filter.interface.ts

@@ -1,5 +1,6 @@
 import { Observable } from 'rxjs';
 
+import { PoLookupFilteredItemsParams } from './po-lookup-filtered-items-params.interface';
 import { PoLookupResponseApi } from './po-lookup-response-api.interface';
 
 /**
@@ -12,19 +13,36 @@ import { PoLookupResponseApi } from './po-lookup-response-api.interface';
 export interface PoLookupFilter {
 
   /**
+   * **Deprecated**
+   *
    * Método responsável por enviar um filtro para o serviço e receber os dados.
    *
    * Os parâmetros page e pageSize seguem o guia de implementação das APIs TOTVS, são utilizados para controlar a busca dos dados em cada
    * requisição do botão 'Carregar mais resultados'.
    *
    * Este método deve retornar um *Observable* com a resposta da API no formato da interface `PoLookupResponseApi`.
    *
+   * > Este método está depreciado, deve-se utilizar a método `getFilteredItems`.
+   *
    * @param {any} filter Utilizado pelo serviço para filtrar os dados.
    * @param {number} page Controla a paginação dos dados e recebe valor automaticamente a cada clique no botão 'Carregar mais resultados'.
    * @param {number} pageSize Quantidade de itens retornados cada vez que o serviço é chamado, por padrão é 10.
    * @param {any} filterParams Valor informado através da propriedade `p-filter-params`.
+   *
+   * @deprecated 4.x.x
+   *
+   */
+  getFilteredData?(filter: any, page: number, pageSize?: number, filterParams?: any): Observable<PoLookupResponseApi>;
+
+  /**
+   * Método que será disparado ao filtrar a lista de itens ou carregar mais resultados no componente, deve-se retornar
+   * um *Observable* com a resposta da API no formato da interface `PoLookupResponseApi`.
+   *
+   * > Esta propriedade será priorizada se houver também o método `getFilteredData`.
+   *
+   * @param {PoLookupFilteredItemsParams} params Objeto enviado por parâmetro que implementa a interface `PoLookupFilteredItemsParams`.
    */
-  getFilteredData(filter: any, page: number, pageSize?: number, filterParams?: any): Observable<PoLookupResponseApi>;
+  getFilteredItems?(params: PoLookupFilteredItemsParams): Observable<PoLookupResponseApi>;
 
   /**
    * Método responsável por enviar um valor que será buscado no serviço.

projects/ui/src/lib/components/po-field/po-lookup/interfaces/po-lookup-filtered-items-params.interface.ts

@@ -0,0 +1,38 @@
+/**
+ * @usedBy PoLookupComponent
+ *
+ * @description
+ *
+ * Interface do objeto enviado como parâmetro na função `getFilteredItems`.
+ */
+export interface PoLookupFilteredItemsParams {
+
+  /**
+   * Conteúdo utilizado para filtrar a lista de itens.
+   */
+  filter?: string;
+
+  /**
+   * Controla a paginação dos dados e recebe valor automaticamente a cada clique no botão 'Carregar mais resultados'.
+   */
+  page?: number;
+
+  /**
+   * Quantidade de itens retornados cada vez que o serviço é chamado, por padrão é 10.
+   */
+  pageSize?: number;
+
+  /**
+   * Valor informado através da propriedade `p-filter-params`.
+   */
+  filterParams?: any;
+
+  /**
+   * Coluna que está sendo ordenada na tabela.
+   *
+   * - Coluna decrescente será informada da seguinte forma: `-<colunaOrdenada>`, por exemplo `-name`.
+   * - Coluna ascendente será informada da seguinte forma: `<colunaOrdenada>`, por exemplo `name`.
+   */
+  order?: string;
+
+}

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

@@ -150,6 +150,17 @@ export abstract class PoLookupBaseComponent implements ControlValueAccessor, OnD
    * url + ?page=1&pageSize=20&filter=Peter
    * ```
    *
+   * Caso utilizar ordenação, a coluna ordenada será enviada através do parâmetro `order`, por exemplo:
+   * - Coluna decrescente:
+   * ```
+   *  url + ?page=1&pageSize=20&filter=Peter&order=-name
+   * ```
+   *
+   * - Coluna ascendente:
+   * ```
+   *  url + ?page=1&pageSize=20&filter=Peter&order=name
+   * ```
+   *
    * Se for definido a propriedade `p-filter-params`, o mesmo também será concatenado. Por exemplo, para o
    * parâmetro `{ age: 23 }` a URL ficaria:
    *

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

@@ -2,6 +2,8 @@ import { Observable, of } from 'rxjs';
 
 import * as UtilsFunctions from '../../../../utils/util';
 import { expectPropertiesValues } from '../../../../util-test/util-expect.spec';
+import { PoTableColumnSort } from '../../../po-table/interfaces/po-table-column-sort.interface';
+import { PoTableColumnSortType } from '../../../po-table/enums/po-table-column-sort-type.enum';
 
 import { poLookupLiteralsDefault, PoLookupModalBaseComponent } from './po-lookup-modal-base.component';
 
@@ -18,7 +20,7 @@ describe('PoLookupModalBaseComponent:', () => {
     component = new PoLookupModalComponent();
 
     component.filterService = {
-      getFilteredData: (searchValue, pageSize: number) => of({ items: [], hasNext: false }),
+      getFilteredItems: ({filter, pageSize}) => of({ items: [], hasNext: false }),
       getObjectByValue: () => of()
     };
 
@@ -34,11 +36,11 @@ describe('PoLookupModalBaseComponent:', () => {
   });
 
   it('should init modal with items', () => {
-    spyOn(component.filterService, 'getFilteredData').and.returnValue(of({ items: [].concat(items), hasNext : true }));
+    spyOn(component.filterService, 'getFilteredItems').and.returnValue(of({ items: [].concat(items), hasNext : true }));
 
     component.ngOnInit();
 
-    expect(component.filterService.getFilteredData).toHaveBeenCalled();
+    expect(component.filterService.getFilteredItems).toHaveBeenCalled();
     expect(component.items.length).toBe(5);
     expect(component.hasNext).toBeTruthy();
   });
@@ -213,34 +215,59 @@ describe('PoLookupModalBaseComponent:', () => {
       expect(fakeSubscription.unsubscribe).not.toHaveBeenCalled();
     });
 
-    it('getFilteredData: shoud call `getFilteredData` and return a Observable.', () => {
+    it('getFilteredItems: shoud call `getFilteredItems` and return a Observable if `getFilteredItems` is truthy', () => {
       const page = 1;
       const pageSize = 1;
       const filterParams = { code: 1 };
-      const searchValue = 'po';
+      const filter = 'po';
 
       component.page = page;
       component.pageSize = pageSize;
       component.filterParams = filterParams;
 
+      spyOn(component.filterService, 'getFilteredItems').and.returnValue(of(<any> {items}));
+      spyOn(component, <any> 'getFilteredParams').and.callThrough();
+
+      const filteredDataObservable = component['getFilteredItems'](filter);
+
+      expect(component['getFilteredParams']).toHaveBeenCalled();
+      expect(filteredDataObservable instanceof Observable);
+      expect(component.filterService.getFilteredItems).toHaveBeenCalledWith({filter, page, pageSize, filterParams});
+    });
+
+    it('getFilteredItems: shoud call `getFilteredData` and return a Observable if `getFilteredItems` is falsy', () => {
+      const page = 1;
+      const pageSize = 1;
+      const filterParams = { code: 1 };
+      const filter = 'po';
+
+      component.page = page;
+      component.pageSize = pageSize;
+      component.filterParams = filterParams;
+
+      component.filterService.getFilteredItems = undefined;
+      component.filterService.getFilteredData = () => of({ items: [], hasNext: false });
+
       spyOn(component.filterService, 'getFilteredData').and.returnValue(of(<any> {items}));
+      spyOn(component, <any> 'getFilteredParams');
 
-      const filteredDataObservable = component['getFilteredData'](searchValue);
+      const filteredDataObservable = component['getFilteredItems'](filter);
 
+      expect(component['getFilteredParams']).not.toHaveBeenCalled();
       expect(filteredDataObservable instanceof Observable);
-      expect(component.filterService.getFilteredData).toHaveBeenCalledWith(searchValue, page, pageSize, filterParams);
+      expect(component.filterService.getFilteredData).toHaveBeenCalledWith(filter, page, pageSize, filterParams);
     });
 
-    it('search: should call `getFilteredData` if `searchValue` it`s truthy.', () => {
+    it('search: should call `getFilteredItems` if `searchValue` it`s truthy.', () => {
       component.searchValue = 'Suco';
 
       const filteredItems = items.filter(f => f.label.includes(component.searchValue));
 
-      spyOn(component, <any> 'getFilteredData').and.returnValue(of({ items: filteredItems, hasNext: true }));
+      spyOn(component, <any> 'getFilteredItems').and.returnValue(of({ items: filteredItems, hasNext: true }));
 
       component.search();
 
-      expect(component['getFilteredData']).toHaveBeenCalledWith('Suco');
+      expect(component['getFilteredItems']).toHaveBeenCalledWith('Suco');
       expect(component.items.length).toBe(2);
       expect(component.hasNext).toBeTruthy();
     });
@@ -255,18 +282,18 @@ describe('PoLookupModalBaseComponent:', () => {
       expect(component['initializeData']).toHaveBeenCalled();
     });
 
-    it('showMoreEvent: should call `getFilteredData`, increment `page` and assign returned items to `items`.', () => {
+    it('showMoreEvent: should call `getFilteredItems`, increment `page` and assign returned items to `items`.', () => {
       const searchValue = 'Chocolate';
       const returnedItems = [{ value: 6, label: 'Chocolate quente' }];
       component.page = 1;
       component.items = [].concat(items);
       component.searchValue = searchValue;
 
-      spyOn(component, <any> 'getFilteredData').and.returnValue(of({items: returnedItems }));
+      spyOn(component, <any> 'getFilteredItems').and.returnValue(of({items: returnedItems }));
 
       component.showMoreEvent();
 
-      expect(component['getFilteredData']).toHaveBeenCalledWith(searchValue);
+      expect(component['getFilteredItems']).toHaveBeenCalledWith(searchValue);
       expect(component.items.length).toBe([...items, ...returnedItems].length);
       expect(component.page).toBe(2);
       expect(component.isLoading).toBeFalsy();
@@ -293,6 +320,48 @@ describe('PoLookupModalBaseComponent:', () => {
 
     });
 
+    it('getFilteredParams: should return object with only truthy values', () => {
+      const page = 1;
+      const pageSize = 10;
+      const filter = '';
+      const expectedValue = { page, pageSize };
+
+      component.page = page;
+      component.pageSize = pageSize;
+      component.filterParams = undefined;
+      component['sort'] = undefined;
+
+      const filteredParams = component['getFilteredParams'](filter);
+
+      expect(filteredParams).toEqual(expectedValue);
+    });
+
+    it('getOrderParam: should return `column.property` of PoTableColumnSort object if PoTableColumnSortType is Ascending', () => {
+      const sort: PoTableColumnSort = { column: { property: 'name' }, type: PoTableColumnSortType.Ascending };
+      const expectedValue = 'name';
+
+      const orderParam = component['getOrderParam'](sort);
+
+      expect(orderParam).toBe(expectedValue);
+    });
+
+    it('getOrderParam: should return `-column.property` of PoTableColumnSort object if PoTableColumnSortType is Descending', () => {
+      const sort: PoTableColumnSort = { column: { property: 'name' }, type: PoTableColumnSortType.Descending };
+      const expectedValue = '-name';
+
+      const orderParam = component['getOrderParam'](sort);
+
+      expect(orderParam).toBe(expectedValue);
+    });
+
+    it('getOrderParam: should return undefined if PoTableColumnSort.column is undefined', () => {
+      const expectedValue = undefined;
+
+      const orderParam = component['getOrderParam']();
+
+      expect(orderParam).toBe(expectedValue);
+    });
+
   });
 
 });

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

@@ -2,14 +2,17 @@ import { EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angu
 
 import { Observable , Subscription } from 'rxjs';
 import { browserLanguage, isTypeof, poLocaleDefault } from '../../../../utils/util';
+import { PoModalAction } from '../../../../components/po-modal';
+import { PoModalComponent } from '../../../../components/po-modal/po-modal.component';
+import { PoTableColumnSort } from '../../../po-table/interfaces/po-table-column-sort.interface';
+import { PoTableColumnSortType } from '../../../po-table';
+import { poTableLiteralsDefault } from '../../../po-table/po-table-base.component';
 
 import { PoLookupColumn } from '../interfaces/po-lookup-column.interface';
 import { PoLookupFilter } from '../interfaces/po-lookup-filter.interface';
+import { PoLookupFilteredItemsParams } from '../interfaces/po-lookup-filtered-items-params.interface';
 import { PoLookupLiterals } from '../interfaces/po-lookup-literals.interface';
 import { PoLookupResponseApi } from '../interfaces/po-lookup-response-api.interface';
-import { PoModalAction } from '../../../../components/po-modal';
-import { PoModalComponent } from '../../../../components/po-modal/po-modal.component';
-import { poTableLiteralsDefault } from '../../../po-table/po-table-base.component';
 
 export const poLookupLiteralsDefault = {
   en: <PoLookupLiterals> {
@@ -89,6 +92,8 @@ export abstract class PoLookupModalBaseComponent implements OnDestroy, OnInit {
   };
   tableLiterals: any;
 
+  protected sort: PoTableColumnSort;
+
   private filterSubscription: Subscription;
   private searchSubscription: Subscription;
   private showMoreSubscription: Subscription;
@@ -168,7 +173,7 @@ export abstract class PoLookupModalBaseComponent implements OnDestroy, OnInit {
     this.page = 1;
     if (this.searchValue) {
       this.isLoading = true;
-      this.searchSubscription = this.getFilteredData(this.searchValue).subscribe(data => {
+      this.searchSubscription = this.getFilteredItems(this.searchValue).subscribe(data => {
         this.items = data.items;
         this.hasNext = data.hasNext;
         this.isLoading = false;
@@ -181,7 +186,7 @@ export abstract class PoLookupModalBaseComponent implements OnDestroy, OnInit {
   showMoreEvent() {
     this.page ++;
     this.isLoading = true;
-    this.showMoreSubscription = this.getFilteredData(this.searchValue).subscribe(data => {
+    this.showMoreSubscription = this.getFilteredItems(this.searchValue).subscribe(data => {
       data.items.forEach(item => {
         this.items.push(item);
       });
@@ -193,13 +198,52 @@ export abstract class PoLookupModalBaseComponent implements OnDestroy, OnInit {
   // Método responsável por abrir a modal de busca das informações.
   abstract openModal(): void;
 
-  private getFilteredData(searchValue): Observable<PoLookupResponseApi> {
-    return this.filterService.getFilteredData(searchValue, this.page, this.pageSize, this.filterParams);
+  private getFilteredItems(filter: string): Observable<PoLookupResponseApi> {
+    const { page, pageSize, filterParams } = this;
+
+    if (this.filterService.getFilteredItems) {
+      const filteredParams: PoLookupFilteredItemsParams = this.getFilteredParams(filter);
+
+      return this.filterService.getFilteredItems(filteredParams);
+    }
+
+    return this.filterService.getFilteredData(filter, page, pageSize, filterParams);
+  }
+
+  private getFilteredParams(filter: string) {
+    const { page, pageSize, filterParams, sort } = this;
+
+    const filteredParams = {};
+    const order = this.getOrderParam(sort);
+    const params = { filter, page, pageSize, order, filterParams };
+
+    for (const key in params) {
+      if (params.hasOwnProperty(key) && params[key]) {
+        filteredParams[key] = params[key];
+      }
+    }
+
+    return filteredParams;
+  }
+
+  private getOrderParam(sort: PoTableColumnSort = { type: undefined }) {
+    const { column, type } = sort;
+
+    if (!column) {
+      return;
+    }
+
+    if (type === PoTableColumnSortType.Descending) {
+      return `-${column.property}`;
+    }
+
+    return `${column.property}`;
   }
 
   private initializeData(): void {
     this.isLoading = true;
-    this.filterSubscription = this.getFilteredData('').subscribe(data => {
+
+    this.filterSubscription = this.getFilteredItems('').subscribe(data => {
       this.items = data.items;
       this.hasNext = data.hasNext;
       this.isLoading = false;

projects/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal.component.html

@@ -42,7 +42,8 @@
       [p-literals]="tableLiterals"
       [p-loading]="isLoading"
       [p-show-more-disabled]="!hasNext"
-      (p-show-more)="showMoreEvent()">
+      (p-show-more)="showMoreEvent()"
+      (p-sort-by)="sortBy($event)">
     </po-table>
 
   </div>