diff --git a/npm/ng-packs/packages/core/src/lib/directives/table-sort.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/table-sort.directive.ts index 707f2ab6ef..e9a58fe589 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/table-sort.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/table-sort.directive.ts @@ -1,12 +1,11 @@ import { Directive, Input, Optional, Self, SimpleChanges, OnChanges } from '@angular/core'; import { Table } from 'primeng/table'; import { SortPipe, SortOrder } from '../pipes/sort.pipe'; - +import clone from 'just-clone'; export interface TableSortOptions { key: string; order: SortOrder; } - @Directive({ selector: '[abpTableSort]', providers: [SortPipe], @@ -14,16 +13,13 @@ export interface TableSortOptions { export class TableSortDirective implements OnChanges { @Input() abpTableSort: TableSortOptions; - @Input() value: any[] = []; - constructor(@Optional() @Self() private table: Table, private sortPipe: SortPipe) {} - ngOnChanges({ value, abpTableSort }: SimpleChanges) { if (value || abpTableSort) { this.abpTableSort = this.abpTableSort || ({} as TableSortOptions); - this.table.value = this.sortPipe.transform(this.value, this.abpTableSort.order, this.abpTableSort.key); + this.table.value = this.sortPipe.transform(clone(this.value), this.abpTableSort.order, this.abpTableSort.key); } } } diff --git a/npm/ng-packs/packages/core/src/lib/pipes/sort.pipe.ts b/npm/ng-packs/packages/core/src/lib/pipes/sort.pipe.ts index d31d4903c6..ea23da1efc 100644 --- a/npm/ng-packs/packages/core/src/lib/pipes/sort.pipe.ts +++ b/npm/ng-packs/packages/core/src/lib/pipes/sort.pipe.ts @@ -1,29 +1,32 @@ -import { Pipe, PipeTransform, Injectable } from '@angular/core'; -import clone from 'just-clone'; - +import { Injectable, Pipe, PipeTransform } from '@angular/core'; export type SortOrder = 'asc' | 'desc'; - @Injectable() @Pipe({ name: 'abpSort', }) export class SortPipe implements PipeTransform { - intialValue: any[]; - transform(value: any[], sortOrder: SortOrder | string = 'asc', sortKey?: string): any { sortOrder = sortOrder && (sortOrder.toLowerCase() as any); - if (!this.intialValue) this.intialValue = clone(value); + if (!value || (sortOrder !== 'asc' && sortOrder !== 'desc')) return value; - if (!value || (sortOrder !== 'asc' && sortOrder !== 'desc')) return this.intialValue; + let numberArray = []; + let stringArray = []; - let sorted; if (!sortKey) { - sorted = value.sort(); + numberArray = value.filter(item => typeof item === 'number').sort(); + stringArray = value.filter(item => typeof item === 'string').sort(); } else { - sorted = value.sort((a, b) => (a[sortKey] < b[sortKey] ? -1 : a[sortKey] > b[sortKey] ? 1 : 0)); + numberArray = value.filter(item => typeof item[sortKey] === 'number').sort((a, b) => a[sortKey] - b[sortKey]); + stringArray = value + .filter(item => typeof item[sortKey] === 'string') + .sort((a, b) => { + if (a[sortKey] < b[sortKey]) return -1; + else if (a[sortKey] > b[sortKey]) return 1; + else return 0; + }); } - + const sorted = numberArray.concat(stringArray); return sortOrder === 'asc' ? sorted : sorted.reverse(); } } diff --git a/npm/ng-packs/packages/core/src/lib/tests/sort.pipe.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/sort.pipe.spec.ts new file mode 100644 index 0000000000..8428515118 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/sort.pipe.spec.ts @@ -0,0 +1,30 @@ +import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest'; +import { SortPipe } from '../pipes/sort.pipe'; + +describe('SortPipe', () => { + let pipe: SortPipe; + let spectator: SpectatorService; + const createService = createServiceFactory(SortPipe); + + beforeEach(() => { + spectator = createService(); + pipe = spectator.service; + }); + + test('should sort array in ascending and descending orders', () => { + expect(pipe.transform([5, 'b', 1, 'a'], 'asc')).toEqual([1, 5, 'a', 'b']); + expect(pipe.transform([5, 'b', 1, 'a'], 'desc')).toEqual(['b', 'a', 5, 1]); + }); + + test('should sort object array in given order with given key', () => { + const array = [{ key: 5 }, { key: 'b' }, { key: 1 }, { key: 'a' }]; + + expect(pipe.transform(array, 'asc', 'key')).toEqual([{ key: 1 }, { key: 5 }, { key: 'a' }, { key: 'b' }]); + expect(pipe.transform(array, 'desc', 'key')).toEqual([{ key: 'b' }, { key: 'a' }, { key: 5 }, { key: 1 }]); + }); + + test('should require an array as value', () => { + expect(pipe.transform(null)).toBeFalsy(); + expect(pipe.transform(undefined, 'desc')).toBeFalsy(); + }); +}); diff --git a/npm/ng-packs/packages/core/src/lib/tests/table-sort.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/table-sort.directive.spec.ts new file mode 100644 index 0000000000..6a9401217e --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/table-sort.directive.spec.ts @@ -0,0 +1,27 @@ +import { SpectatorDirective, createDirectiveFactory } from '@ngneat/spectator/jest'; +import { TableSortDirective } from '../directives/table-sort.directive'; +import { TableModule, Table } from 'primeng/table'; + +describe('TableSortDirective', () => { + let spectator: SpectatorDirective; + let directive: TableSortDirective; + const createDirective = createDirectiveFactory({ + directive: TableSortDirective, + imports: [TableModule], + }); + + beforeEach(() => { + spectator = createDirective(``); + directive = spectator.directive; + }); + + test('should be created', () => { + expect(directive).toBeTruthy(); + }); + + test('should change table value', () => { + expect(directive.value).toEqual([1, 4, 2]); + const table = spectator.query(Table); + expect(table.value).toEqual([1, 2, 4]); + }); +});