feat(core): add sort method to sort.pipe

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

@@ -27,6 +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';
 
 @NgModule({
   imports: [
@@ -46,6 +47,7 @@ import { AbstractNgModelComponent } from './abstracts/ng-model.component';
     EllipsisDirective,
     ForDirective,
     FormSubmitDirective,
+    SortDirective,
     LocalizationPipe,
     SortPipe,
     PermissionDirective,
@@ -68,6 +70,7 @@ import { AbstractNgModelComponent } from './abstracts/ng-model.component';
     FormSubmitDirective,
     LocalizationPipe,
     SortPipe,
+    SortDirective,
     PermissionDirective,
     VisibilityDirective,
     InputEventDebounceDirective,

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

@@ -0,0 +1,12 @@
+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/public-api.ts

@@ -12,6 +12,7 @@ export * from './lib/enums';
 export * from './lib/guards';
 export * from './lib/interceptors';
 export * from './lib/models';
+export * from './lib/pipes';
 export * from './lib/plugins';
 export * from './lib/services';
 export * from './lib/states';

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

@@ -29,6 +29,7 @@
       /></label>
     </div>
     <p-table
+      abpSort
       *ngIf="[130, 200, 200, 200] as columnWidths"
       [value]="data$ | async | abpSort: sortOrder:sortKey"
       [lazy]="true"
@@ -57,17 +58,26 @@
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th pResizableColumn (click)="sortByKey('userName')">
+          <th pResizableColumn (click)="usernameSortIcon.sort('userName')">
             {{ 'AbpIdentity::UserName' | abpLocalization }}
-            <abp-sort-order-icon key="userName" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
+            <abp-sort-order-icon
+              #usernameSortIcon
+              key="userName"
+              [(selectedKey)]="sortKey"
+              [(order)]="sortOrder"
+            ></abp-sort-order-icon>
           </th>
-          <th pResizableColumn (click)="sortByKey('email')">
+          <th pResizableColumn (click)="usernameSortIcon.sort('email')">
             {{ 'AbpIdentity::EmailAddress' | abpLocalization }}
-            <abp-sort-order-icon key="email" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
+            <abp-sort-order-icon key="email" [(selectedKey)]="sortKey" [(order)]="sortOrder"></abp-sort-order-icon>
           </th>
-          <th pResizableColumn (click)="sortByKey('phoneNumber')">
+          <th pResizableColumn (click)="usernameSortIcon.sort('phoneNumber')">
             {{ 'AbpIdentity::PhoneNumber' | abpLocalization }}
-            <abp-sort-order-icon key="phoneNumber" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
+            <abp-sort-order-icon
+              key="phoneNumber"
+              [(selectedKey)]="sortKey"
+              [(order)]="sortOrder"
+            ></abp-sort-order-icon>
           </th>
         </tr>
       </ng-template>

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

@@ -50,9 +50,9 @@ export class UsersComponent {
 
   modalBusy = false;
 
-  sortOrder: string = '';
+  sortOrder = '';
 
-  sortKey: string = '';
+  sortKey = '';
 
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
@@ -171,22 +171,4 @@ export class UsersComponent {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
-
-  sortByKey(sortKey: string) {
-    this.sortKey = sortKey;
-    switch (this.sortOrder) {
-      case '':
-        this.sortOrder = 'asc';
-        break;
-      case 'asc':
-        this.sortOrder = 'desc';
-        break;
-      case 'desc':
-        this.sortOrder = '';
-        this.sortKey = '';
-        break;
-      default:
-        break;
-    }
-  }
 }

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -58,9 +58,14 @@
       <ng-template pTemplate="header" let-columns>
         <tr>
           <th>{{ 'AbpTenantManagement::Actions' | abpLocalization }}</th>
-          <th pResizableColumn (click)="sortByKey('name')">
+          <th pResizableColumn (click)="sortOrderIcon.sort('name')">
             {{ 'AbpTenantManagement::TenantName' | abpLocalization }}
-            <abp-sort-order-icon key="name" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
+            <abp-sort-order-icon
+              #sortOrderIcon
+              key="name"
+              [(selectedKey)]="sortKey"
+              [(order)]="sortOrder"
+            ></abp-sort-order-icon>
           </th>
         </tr>
       </ng-template>

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts

@@ -56,9 +56,9 @@ export class TenantsComponent {
 
   modalBusy = false;
 
-  sortOrder: string = '';
+  sortOrder = '';
 
-  sortKey: string = '';
+  sortKey = '';
 
   get useSharedDatabase(): boolean {
     return this.defaultConnectionStringForm.get('useSharedDatabase').value;
@@ -218,22 +218,4 @@ export class TenantsComponent {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
-
-  sortByKey(sortKey: string) {
-    this.sortKey = sortKey;
-    switch (this.sortOrder) {
-      case '':
-        this.sortOrder = 'asc';
-        break;
-      case 'asc':
-        this.sortOrder = 'desc';
-        break;
-      case 'desc':
-        this.sortOrder = '';
-        this.sortKey = '';
-        break;
-      default:
-        break;
-    }
-  }
 }

npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts

@@ -1,18 +1,37 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'abp-sort-order-icon',
   templateUrl: './sort-order-icon.component.html',
 })
-export class SortOrderIconComponent implements OnInit {
+export class SortOrderIconComponent {
+  private _order: string;
+  private _selectedKey: string;
+
   @Input()
-  selectedKey: string;
+  set selectedKey(value: string) {
+    this._selectedKey = value;
+    this.selectedKeyChange.emit(value);
+  }
+  get selectedKey(): string {
+    return this._selectedKey;
+  }
+
+  @Output() readonly selectedKeyChange = new EventEmitter<string>();
 
   @Input()
   key: string;
 
   @Input()
-  order: string;
+  set order(value: string) {
+    this._order = value;
+    this.orderChange.emit(value);
+  }
+  get order(): string {
+    return this._order;
+  }
+
+  @Output() readonly orderChange = new EventEmitter<string>();
 
   @Input()
   iconClass: string;
@@ -23,7 +42,20 @@ export class SortOrderIconComponent implements OnInit {
     else return '';
   }
 
-  constructor() {}
-
-  ngOnInit(): void {}
+  sort(key: string) {
+    this.selectedKey = key;
+    switch (this.order) {
+      case '':
+        this.order = 'asc';
+        break;
+      case 'asc':
+        this.order = 'desc';
+        this.orderChange.emit('desc');
+        break;
+      case 'desc':
+        this.order = '';
+        this.selectedKey = '';
+        break;
+    }
+  }
 }