From 35420bc4d48d5b2109f5f2c943613cd550fb8255 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Tue, 8 Oct 2019 16:30:52 +0300
Subject: [PATCH 1/2] feat(core): add table-sort.directive

---
 .../packages/core/src/lib/core.module.ts      |  6 ++--
 .../packages/core/src/lib/directives/index.ts |  1 +
 .../core/src/lib/directives/sort.directive.ts | 12 --------
 .../lib/directives/table-sort.directive.ts    | 29 +++++++++++++++++++
 .../packages/core/src/lib/pipes/sort.pipe.ts  |  3 +-
 .../lib/components/users/users.component.html |  4 +--
 6 files changed, 37 insertions(+), 18 deletions(-)
 delete mode 100644 npm/ng-packs/packages/core/src/lib/directives/sort.directive.ts
 create mode 100644 npm/ng-packs/packages/core/src/lib/directives/table-sort.directive.ts

diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts
index 7e002884db..2fe908cf8e 100644
--- a/npm/ng-packs/packages/core/src/lib/core.module.ts
+++ b/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,
diff --git a/npm/ng-packs/packages/core/src/lib/directives/index.ts b/npm/ng-packs/packages/core/src/lib/directives/index.ts
index 7edf1b5f76..7b5927b3ad 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/index.ts
+++ b/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';
diff --git a/npm/ng-packs/packages/core/src/lib/directives/sort.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/sort.directive.ts
deleted file mode 100644
index c00892998d..0000000000
--- a/npm/ng-packs/packages/core/src/lib/directives/sort.directive.ts
+++ /dev/null
@@ -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);
-  }
-}
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
new file mode 100644
index 0000000000..707f2ab6ef
--- /dev/null
+++ b/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);
+    }
+  }
+}
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 262025345d..d31d4903c6 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,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',
 })
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 4bc837f1fd..d39bbaf62f 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/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"

From 417031270c7f0de5a0c8740b8513734c3e208f81 Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Tue, 8 Oct 2019 17:00:57 +0300
Subject: [PATCH 2/2] refactor(identity): table sort

---
 .../lib/components/roles/roles.component.html | 15 +++++-----
 .../lib/components/roles/roles.component.ts   | 22 ++-------------
 .../lib/components/users/users.component.html | 28 ++++++-------------
 .../components/tenants/tenants.component.html | 18 ++++--------
 4 files changed, 24 insertions(+), 59 deletions(-)

diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
index c6d86b5968..64ecce57cd 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@@ -24,7 +24,8 @@
     </div>
     <p-table
       *ngIf="[130, 200] as columnWidths"
-      [value]="data$ | async | abpSort: sortOrder:sortKey"
+      [value]="data$ | async"
+      [abpTableSort]="{ key: sortKey, order: sortOrder }"
       [lazy]="true"
       [lazyLoadOnInit]="false"
       [paginator]="true"
@@ -51,9 +52,10 @@
       <ng-template pTemplate="header" let-columns>
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th pResizableColumn (click)="sortByKey('name')">
+          <th pResizableColumn (click)="sortOrderIcon.sort('name')">
             {{ 'AbpIdentity::RoleName' | 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>
@@ -124,8 +126,5 @@
   </ng-template>
 </abp-modal>
 
-<abp-permission-management
-  [(visible)]="visiblePermissions"
-  providerName="Role"
-  [providerKey]="providerKey"
-></abp-permission-management>
+<abp-permission-management [(visible)]="visiblePermissions" providerName="Role" [providerKey]="providerKey">
+</abp-permission-management>
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index f179e6b713..f98963722f 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -36,9 +36,9 @@ export class RolesComponent {
 
   modalBusy = false;
 
-  sortOrder: string = '';
+  sortOrder = '';
 
-  sortKey: string = '';
+  sortKey = '';
 
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
@@ -123,22 +123,4 @@ export class RolesComponent {
       .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;
-    }
-  }
 }
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index d39bbaf62f..db1397870d 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -58,26 +58,19 @@
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th pResizableColumn (click)="usernameSortIcon.sort('userName')">
+          <th pResizableColumn (click)="sortOrderIcon.sort('userName')">
             {{ 'AbpIdentity::UserName' | abpLocalization }}
-            <abp-sort-order-icon
-              #usernameSortIcon
-              key="userName"
-              [(selectedKey)]="sortKey"
-              [(order)]="sortOrder"
-            ></abp-sort-order-icon>
+            <abp-sort-order-icon #sortOrderIcon key="userName" [(selectedKey)]="sortKey" [(order)]="sortOrder">
+            </abp-sort-order-icon>
           </th>
-          <th pResizableColumn (click)="usernameSortIcon.sort('email')">
+          <th pResizableColumn (click)="sortOrderIcon.sort('email')">
             {{ 'AbpIdentity::EmailAddress' | abpLocalization }}
             <abp-sort-order-icon key="email" [(selectedKey)]="sortKey" [(order)]="sortOrder"></abp-sort-order-icon>
           </th>
-          <th pResizableColumn (click)="usernameSortIcon.sort('phoneNumber')">
+          <th pResizableColumn (click)="sortOrderIcon.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>
@@ -223,8 +216,5 @@
   </ng-template>
 </abp-modal>
 
-<abp-permission-management
-  [(visible)]="visiblePermissions"
-  providerName="User"
-  [providerKey]="providerKey"
-></abp-permission-management>
+<abp-permission-management [(visible)]="visiblePermissions" providerName="User" [providerKey]="providerKey">
+</abp-permission-management>
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
index ef4a69daf4..dc043d1e9a 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
@@ -31,7 +31,8 @@
     </div>
     <p-table
       *ngIf="[130, 200] as columnWidths"
-      [value]="data$ | async | abpSort: sortOrder:sortKey"
+      [value]="data$ | async"
+      [abpTableSort]="{ key: sortKey, order: sortOrder }"
       [lazy]="true"
       [lazyLoadOnInit]="false"
       [paginator]="true"
@@ -60,12 +61,8 @@
           <th>{{ 'AbpTenantManagement::Actions' | abpLocalization }}</th>
           <th pResizableColumn (click)="sortOrderIcon.sort('name')">
             {{ 'AbpTenantManagement::TenantName' | abpLocalization }}
-            <abp-sort-order-icon
-              #sortOrderIcon
-              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>
@@ -180,8 +177,5 @@
   </form>
 </ng-template>
 
-<abp-feature-management
-  [(visible)]="visibleFeatures"
-  providerName="Tenant"
-  [providerKey]="providerKey"
-></abp-feature-management>
+<abp-feature-management [(visible)]="visibleFeatures" providerName="Tenant" [providerKey]="providerKey">
+</abp-feature-management>