feat(page-dynamic-table): inclui coluna de ordenação na requisição

Inclui coluna de ordenação nas requsições de paginação dos resultados.
Caso for decrescente será enviada: order=-name
Caso for ascendente será enviada: order=name

Fixes DTHFUI-1743

Author: jhonyeduardo

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

@@ -65,6 +65,15 @@ export class PoPageDynamicListBaseComponent {
    *
    * Endpoint usado pelo template para requisição dos recursos que serão exibidos.
    *
+   * Ao realizar requisições de busca, podem ser enviados os parâmetros (caso possuam valor): `page`, `pageSize`, `search` e `order`.
+   *
+   * Caso a coluna estiver ordenada descendentemente será enviada da seguinte forma: `-name`, se for ordenada
+   * ascendentemente será enviada apenas com o nome da coluna, por exemplo: `name`.
+   *
+   * Exemplo de uma requisição de busca:
+   *
+   * > `GET {end-point}/{resource}?page=1&pageSize=10&search=components&order=-name`
+   *
    * Caso a ação `remove` estiver configurada, será feito uma requisição de exclusão nesse mesmo endpoint passando os campos
    * setados como `key: true`.
    *

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

@@ -14,7 +14,8 @@
     [p-columns]="columns"
     [p-items]="items"
     [p-show-more-disabled]="!hasNext"
-    (p-show-more)="showMore()">
+    (p-show-more)="showMore()"
+    (p-sort-by)="onSort($event)">
   </po-table>
 
 </po-page-dynamic-search>

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

@@ -6,7 +6,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { Observable } from 'rxjs';
 
-import { PoDialogModule, PoNotificationModule } from '@portinari/portinari-ui';
+import { PoDialogModule, PoNotificationModule, PoTableColumnSort, PoTableColumnSortType } from '@portinari/portinari-ui';
 
 import * as utilsFunctions from '../../utils/util';
 import { configureTestSuite, expectPropertiesValues } from '../../util-test/util-expect.spec';
@@ -573,6 +573,45 @@ describe('PoPageDynamicTableComponent:', () => {
       expect(component.tableActions).toEqual(tableActions);
     });
 
+    it('getOrderParam: should return { order: `column.property` } of PoTableColumnSort object if sort type is Ascending', () => {
+      const sortedColumn: PoTableColumnSort = { column: { property: 'name' }, type: PoTableColumnSortType.Ascending };
+      const expectedValue = { order: 'name' };
+
+      const orderParam = component['getOrderParam'](sortedColumn);
+
+      expect(orderParam).toEqual(expectedValue);
+    });
+
+    it('getOrderParam: should return { order: `-column.property` } of PoTableColumnSort object if sort type is Descending', () => {
+      const sortedColumn: PoTableColumnSort = { column: { property: 'name' }, type: PoTableColumnSortType.Descending };
+      const expectedValue = { order: '-name' };
+
+      const orderParam = component['getOrderParam'](sortedColumn);
+
+      expect(orderParam).toEqual(expectedValue);
+    });
+
+    it('getOrderParam: should return {} if PoTableColumnSort.column is undefined', () => {
+      const expectedValue = {};
+
+      component['sortedColumn'] = undefined;
+
+      const orderParam = component['getOrderParam']();
+
+      expect(orderParam).toEqual(expectedValue);
+    });
+
+    it('onSort: should set sortedColumn property', () => {
+      const sortedColumn = { column: { property: 'name' }, type: PoTableColumnSortType.Ascending };
+      const expectedValue: PoTableColumnSort = { ...sortedColumn };
+
+      component['sortedColumn'] = undefined;
+
+      component.onSort(sortedColumn);
+
+      expect(component['sortedColumn']).toEqual(expectedValue);
+    });
+
   });
 
 });

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

@@ -1,7 +1,15 @@
-import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Route, Router } from '@angular/router';
+import { Component, Input, OnInit } from '@angular/core';
 
-import { PoDialogConfirmOptions, PoDialogService, PoNotificationService, PoPageAction, PoTableAction } from '@portinari/portinari-ui';
+import {
+  PoDialogConfirmOptions,
+  PoDialogService,
+  PoNotificationService,
+  PoPageAction,
+  PoTableAction,
+  PoTableColumnSort,
+  PoTableColumnSortType
+} from '@portinari/portinari-ui';
 
 import * as util from '../../utils/util';
 
@@ -93,6 +101,7 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
 
   private page: number = 1;
   private params = {};
+  private sortedColumn: PoTableColumnSort;
 
   hasNext = false;
   items = [];
@@ -164,6 +173,10 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
     this.params = filter ? { search: filter } : {};
   }
 
+  onSort(sortedColumn: PoTableColumnSort) {
+    this.sortedColumn = sortedColumn;
+  }
+
   showMore() {
     this.loadData({ page: ++this.page, ...this.params });
   }
@@ -206,14 +219,29 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
     return util.valuesFromObject(keys).join('|');
   }
 
+  private getOrderParam(sortedColumn: PoTableColumnSort = { type: undefined }) {
+    const { column, type } = sortedColumn;
+
+    if (!column) {
+      return {};
+    }
+
+    if (type === PoTableColumnSortType.Descending) {
+      return { order: `-${column.property}` };
+    }
+
+    return { order: `${column.property}` };
+  }
+
   private loadData(params: { page?: number, search?: string } = {}) {
     if (!this.serviceApi) {
       this.poNotification.error(this.literals.loadDataErrorNotification);
       return;
     }
 
+    const orderParam = this.getOrderParam(this.sortedColumn);
     const defaultParams: any = { page: 1, pageSize: 10 };
-    const fullParams: any = { ...defaultParams, ...params };
+    const fullParams: any = { ...defaultParams, ...params, ...orderParam };
 
     this.poPageDynamicService.getResources(fullParams).toPromise().then((response: any) => {
       this.items = fullParams.page === 1 ? response.items : [...this.items, ...response.items];

projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-basic/sample-po-page-dynamic-table-basic.component.html

@@ -1,4 +1,4 @@
 <po-page-dynamic-table
   p-title="Po Page Dynamic Table"
-  p-service-api="https://thf.totvs.com.br/sample/api/po-metadata/v1/people">
+  p-service-api="https://thf.totvs.com.br/sample/api/thf-metadata/v1/people">
 </po-page-dynamic-table>

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

@@ -9,7 +9,7 @@ import { PoPageDynamicTableActions } from '@portinari/portinari-templates';
 })
 export class SamplePoPageDynamicTableUsersComponent {
 
-  public readonly serviceApi = 'https://thf.totvs.com.br/sample/api/po-metadata/v1/people';
+  public readonly serviceApi = 'https://thf.totvs.com.br/sample/api/thf-metadata/v1/people';
 
   public readonly actions: PoPageDynamicTableActions = {
     detail: 'dynamic-detail/:id',