feat(table): adiciona evento para ordenação de colunas.

Definido novo evento `p-sort-by` para controlar a ordenação e adicionado parâmetro de ordenação ao evento `p-show-more`.

Fixes DTHFUI-1380

Author: Rafaelly

projects/ui/src/lib/components/po-table/enums/po-table-column-sort-type.enum.ts

@@ -0,0 +1,14 @@
+/**
+ * @usedBy PoTableComponent
+ *
+ * @description
+ * Tipos de ordenação das colunas da tabela.
+ */
+export enum PoTableColumnSortType {
+
+  /** Ordenação ascendente */
+  Ascending = 'ascending',
+
+  /** Ordenação descendente */
+  Descending = 'descending'
+}

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

@@ -1,6 +1,8 @@
+export * from './enums/po-table-column-sort-type.enum';
 export * from './interfaces/po-table-action.interface';
 export * from './interfaces/po-table-boolean.interface';
 export * from './interfaces/po-table-column.interface';
+export * from './interfaces/po-table-column-sort.interface';
 export * from './interfaces/po-table-literals.interface';
 export * from './po-table-column-icon/po-table-column-icon.interface';
 export * from './po-table-column-label/po-table-column-label.interface';

projects/ui/src/lib/components/po-table/interfaces/po-table-column-sort.interface.ts

@@ -0,0 +1,18 @@
+import { PoTableColumn } from './po-table-column.interface';
+import { PoTableColumnSortType } from '../enums/po-table-column-sort-type.enum';
+
+/**
+ * @usedBy PoTableComponent
+ *
+ * @description
+ *
+ * Interface para ordenação das colunas do componente table.
+ */
+export interface PoTableColumnSort {
+
+  /** Coluna pela qual a tabela está ordenada. */
+  column?: PoTableColumn;
+
+  /** Tipo da ordenação. */
+  type: PoTableColumnSortType;
+}

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

@@ -1,3 +1,5 @@
+import { Observable } from 'rxjs';
+
 import * as utilsFunctions from '../../utils/util';
 import { expectPropertiesValues, expectSettersMethod } from '../../util-test/util-expect.spec';
 import { PoDateService } from '../../services/po-date/po-date.service';
@@ -827,6 +829,56 @@ describe('PoTableBaseComponent:', () => {
       expect(column).toEqual([]);
     });
 
+    it(`sortColumn: should emit sortBy twice toggling the object parameter value between
+    'ascending', 'descending' and not call 'sortArray'`, () => {
+      const column = component.columns[1];
+      component.sort = true;
+      component.sortBy.observers = <any>[{ next: () => { }}];
+
+      spyOn(component.sortBy, 'emit').and.callThrough();
+      spyOn(component, 'sortArray').and.callThrough();
+
+      component.sortColumn(column);
+      expect(component.sortBy.emit).toHaveBeenCalledWith({column, type: 'ascending'});
+      expect(component.sortArray).not.toHaveBeenCalled();
+
+      component.sortColumn(column);
+      expect(component.sortBy.emit).toHaveBeenCalledWith({column, type: 'descending'});
+      expect(component.sortArray).not.toHaveBeenCalled();
+    });
+
+    it(`onShowMore: 'showMore' should emit an object parameter containing 'ascending' as value of property 'type'` , () => {
+      const column = component.columns[1];
+      component.sortedColumn.property = column;
+      spyOn(component.showMore, 'emit');
+
+      component.onShowMore();
+
+      expect(component.showMore.emit).toHaveBeenCalledWith({ column: component.sortedColumn.property, type: 'ascending'});
+    });
+
+    it(`onShowMore: 'showMore' should emit an object parameter containing 'descending' as value of property 'type'` , () => {
+      const column = component.columns[1];
+      component.sortedColumn.property = column;
+      component.sortedColumn.ascending = false;
+
+      spyOn(component.showMore, 'emit');
+
+      component.onShowMore();
+
+      expect(component.showMore.emit).toHaveBeenCalledWith({ column: component.sortedColumn.property, type: 'descending'});
+    });
+
+    it(`onShowMore: 'showMore' should emit an object parameter containing 'undefined' if 'sortedColumn.property' is 'undefined'` , () => {
+      component.sortedColumn.property = undefined;
+      spyOnProperty(component, <any>'isSortBy');
+
+      spyOn(component.showMore, 'emit');
+
+      component.onShowMore();
+
+      expect(component.showMore.emit).toHaveBeenCalledWith(undefined);
+    });
   });
 
   describe('Properties:', () => {
@@ -950,6 +1002,30 @@ describe('PoTableBaseComponent:', () => {
       expect(component['showContainer']).toHaveBeenCalled();
     });
 
+    it('isSortBy: should return `true` if `observers.length` is greater than 0.', () => {
+      component.sortBy.observers.length = 1;
+
+      expect(component['isSortBy']).toBe(true);
+    });
+
+    it('isSortBy: should return `false` if `observers.length` is 0.', () => {
+      component.sortBy.observers.length = 0;
+
+      expect(component['isSortBy']).toBe(false);
+    });
+
+    it('sortType: should return `ascending` if `sortedColumn.ascending` is `true`.', () => {
+      component.sortedColumn.ascending = true;
+
+      expect(component['sortType']).toBe('ascending');
+    });
+
+    it('sortType: should return `descending` if `sortedColumn.ascending` is `false`.', () => {
+      component.sortedColumn.ascending = false;
+
+      expect(component['sortType']).toBe('descending');
+    });
+
   });
 
 });

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

@@ -5,6 +5,8 @@ import { PoDateService } from '../../services/po-date/po-date.service';
 
 import { PoTableAction } from './interfaces/po-table-action.interface';
 import { PoTableColumn } from './interfaces/po-table-column.interface';
+import { PoTableColumnSort } from './interfaces/po-table-column-sort.interface';
+import { PoTableColumnSortType } from './enums/po-table-column-sort-type.enum';
 import { PoTableLiterals } from './interfaces/po-table-literals.interface';
 
 export const poTableContainer = ['border', 'shadow'];
@@ -383,8 +385,23 @@ export abstract class PoTableBaseComponent implements OnChanges {
   /**
    * Recebe uma ação de clique para o botão "Carregar mais resultados", caso nenhuma ação for definida o mesmo
    * não é visível.
+   *
+   * Recebe um objeto `{ column, type }` onde:
+   *
+   * - column (`PoTableColumn`): objeto da coluna que está ordenada.
+   * - type (`PoTableColumnSortType`): tipo da ordenação.
+   */
+  @Output('p-show-more') showMore?: EventEmitter<PoTableColumnSort> = new EventEmitter<PoTableColumnSort>();
+
+  /**
+   * Ação executada ao ordenar colunas da tabela. Se houver ação definida, a ordenação padrão da tabela não será executada.
+   *
+   * Recebe um objeto `{ column, type }` onde:
+   *
+   * - column (`PoTableColumn`): objeto da coluna que foi clicada/ordenada.
+   * - type (`PoTableColumnSortType`): tipo da ordenação.
    */
-  @Output('p-show-more') showMore?: EventEmitter<any> = new EventEmitter<any>();
+  @Output('p-sort-by') sortBy?: EventEmitter<PoTableColumnSort> = new EventEmitter<PoTableColumnSort>();
 
   /**
    * Ação executada ao desmarcar a seleção de uma linha do `po-table`.
@@ -394,6 +411,14 @@ export abstract class PoTableBaseComponent implements OnChanges {
   selectAll = false;
   sortedColumn = { property: <PoTableColumn>null, ascending: true };
 
+  private get isSortBy(): boolean {
+    return this.sortBy.observers.length > 0;
+  }
+
+  private get sortType(): PoTableColumnSortType {
+    return this.sortedColumn.ascending ? PoTableColumnSortType.Ascending : PoTableColumnSortType.Descending;
+  }
+
   constructor(private poDate: PoDateService) { }
 
   ngOnChanges(): void {
@@ -511,7 +536,8 @@ export abstract class PoTableBaseComponent implements OnChanges {
 
     this.sortedColumn.ascending = this.sortedColumn.property === column ? !this.sortedColumn.ascending : true;
 
-    this.sortArray(column, this.sortedColumn.ascending);
+    this.isSortBy ? this.sortBy.emit({ column, type: this.sortType}) : this.sortArray(column, this.sortedColumn.ascending);
+
     this.sortedColumn.property = column;
   }
 
@@ -530,7 +556,9 @@ export abstract class PoTableBaseComponent implements OnChanges {
   }
 
   onShowMore(): void {
-    this.showMore.emit(null);
+    const sort = this.sortedColumn.property ? { column: this.sortedColumn.property, type: this.sortType } : undefined;
+
+    this.showMore.emit(sort);
   }
 
   protected getDefaultColumns(item: any) {

projects/ui/src/lib/components/po-table/po-table.component.ts

@@ -49,6 +49,7 @@ import { PoTableSubtitleColumn } from './po-table-subtitle-footer/po-table-subti
  * <example name="po-table-components" title="Portinari Table - Po Field Components">
  *  <file name="sample-po-table-components/sample-po-table-components.component.ts"> </file>
  *  <file name="sample-po-table-components/sample-po-table-components.component.html"> </file>
+ *  <file name="sample-po-table-components/sample-po-table-components.service.ts"> </file>
  * </example>
  */
 @Component({

projects/ui/src/lib/components/po-table/samples/sample-po-table-components/sample-po-table-components.component.html

@@ -5,7 +5,11 @@
 <po-table
   p-container="shadow"
   [p-columns]="columns"
-  [p-items]="items">
+  [p-items]="items"
+  [p-show-more-disabled]="showMoreDisabled"
+  [p-sort]="true"
+  (p-show-more)="showMore($event)"
+  (p-sort-by)="sort($event)">
 </po-table>
 
 <po-modal