feat(core): add table-sort.directive

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -27,7 +27,7 @@ import { getInitialData, localeInitializer } from './utils/initial-utils';
 import { ConfigPlugin, NGXS_CONFIG_PLUGIN_OPTIONS } from './plugins/config/config.plugin';
 import { ForDirective } from './directives/for.directive';
 import { AbstractNgModelComponent } from './abstracts/ng-model.component';
-import { SortDirective } from './directives/sort.directive';
+import { TableSortDirective } from './directives/table-sort.directive';
 
 @NgModule({
   imports: [
@@ -47,7 +47,7 @@ import { SortDirective } from './directives/sort.directive';
     EllipsisDirective,
     ForDirective,
     FormSubmitDirective,
-    SortDirective,
+    TableSortDirective,
     LocalizationPipe,
     SortPipe,
     PermissionDirective,
@@ -70,7 +70,7 @@ import { SortDirective } from './directives/sort.directive';
     FormSubmitDirective,
     LocalizationPipe,
     SortPipe,
-    SortDirective,
+    TableSortDirective,
     PermissionDirective,
     VisibilityDirective,
     InputEventDebounceDirective,

npm/ng-packs/packages/core/src/lib/directives/index.ts

@@ -3,4 +3,5 @@ export * from './ellipsis.directive';
 export * from './for.directive';
 export * from './form-submit.directive';
 export * from './permission.directive';
+export * from './table-sort.directive';
 export * from './visibility.directive';

npm/ng-packs/packages/core/src/lib/directives/sort.directive.ts

@@ -1,12 +0,0 @@
-import { Directive, ElementRef, Input, Optional, Self } from '@angular/core';
-import { Table } from 'primeng/table';
-
-@Directive({
-  selector: '[abpSort]',
-})
-export class SortDirective {
-  constructor(private elementRef: ElementRef, @Optional() @Self() table: Table) {
-    console.warn(elementRef);
-    setInterval(() => console.warn(table.value), 1000);
-  }
-}

npm/ng-packs/packages/core/src/lib/directives/table-sort.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, Input, Optional, Self, SimpleChanges, OnChanges } from '@angular/core';
+import { Table } from 'primeng/table';
+import { SortPipe, SortOrder } from '../pipes/sort.pipe';
+
+export interface TableSortOptions {
+  key: string;
+  order: SortOrder;
+}
+
+@Directive({
+  selector: '[abpTableSort]',
+  providers: [SortPipe],
+})
+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);
+    }
+  }
+}

npm/ng-packs/packages/core/src/lib/pipes/sort.pipe.ts

@@ -1,8 +1,9 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, Injectable } from '@angular/core';
 import clone from 'just-clone';
 
 export type SortOrder = 'asc' | 'desc';
 
+@Injectable()
 @Pipe({
   name: 'abpSort',
 })

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -29,9 +29,9 @@
       /></label>
     </div>
     <p-table
-      abpSort
       *ngIf="[130, 200, 200, 200] as columnWidths"
-      [value]="data$ | async | abpSort: sortOrder:sortKey"
+      [value]="data$ | async"
+      [abpTableSort]="{ key: sortKey, order: sortOrder }"
       [lazy]="true"
       [lazyLoadOnInit]="false"
       [paginator]="true"