From cd34500aa50d2e84456f40ec4c5fcc3726694879 Mon Sep 17 00:00:00 2001
From: Arman Ozak <arman@armanozak.com>
Date: Tue, 9 Jun 2020 11:39:47 +0300
Subject: [PATCH] refactor: create a separate directive to style ngx-datatable

---
 .../lib/components/roles/roles.component.html |  2 +-
 .../lib/components/users/users.component.html |  2 +-
 .../components/tenants/tenants.component.html |  2 +-
 .../theme-shared/src/lib/directives/index.ts  |  1 +
 .../ngx-datatable-default.directive.ts        | 23 +++++++++++++++++++
 .../ngx-datatable-list.directive.ts           | 22 ++++--------------
 .../src/lib/theme-shared.module.ts            |  3 +++
 7 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts

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 9d87bae629..802e272dce 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
@@ -20,7 +20,7 @@
   </div>
 
   <div class="card-body">
-    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
+    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
       <ngx-datatable-column
         [name]="'AbpIdentity::Actions' | abpLocalization"
         [maxWidth]="150"
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 f1604c39aa..648b1024d0 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
@@ -30,7 +30,7 @@
       </div>
     </div>
 
-    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
+    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
       <ngx-datatable-column
         [name]="'AbpIdentity::Actions' | abpLocalization"
         [maxWidth]="150"
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 c3b8eb2ad3..c966b2c4af 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,7 @@
       </div>
     </div>
 
-    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
+    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
       <ngx-datatable-column
         [name]="'AbpTenantManagement::Actions' | abpLocalization"
         [maxWidth]="150"
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts
index 32b97c163a..a6b666be3b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts
@@ -1,3 +1,4 @@
 export * from './loading.directive';
+export * from './ngx-datatable-default.directive';
 export * from './ngx-datatable-list.directive';
 export * from './table-sort.directive';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts
new file mode 100644
index 0000000000..58f9c1b6fb
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts
@@ -0,0 +1,23 @@
+import { Directive, Host, HostBinding, Input } from '@angular/core';
+import { ColumnMode, DatatableComponent } from '@swimlane/ngx-datatable';
+
+@Directive({
+  // tslint:disable-next-line
+  selector: 'ngx-datatable[default]',
+  exportAs: 'ngxDatatableDefault',
+})
+export class NgxDatatableDefaultDirective {
+  @Input() class = 'material bordered';
+
+  @HostBinding('class')
+  get classes(): string {
+    return `ngx-datatable ${this.class}`;
+  }
+
+  constructor(@Host() private table: DatatableComponent) {
+    this.table.columnMode = ColumnMode.force;
+    this.table.footerHeight = 50;
+    this.table.headerHeight = 50;
+    this.table.rowHeight = 'auto';
+  }
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts
index c10df704cc..0f558eca4a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts
@@ -3,40 +3,28 @@ import {
   ChangeDetectorRef,
   Directive,
   Host,
-  HostBinding,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
   SimpleChanges,
 } from '@angular/core';
-import { ColumnMode, DatatableComponent } from '@swimlane/ngx-datatable';
+import { DatatableComponent } from '@swimlane/ngx-datatable';
 import { Subscription } from 'rxjs';
 
 @Directive({
-  exportAs: 'abpList',
-  selector: 'ngx-datatable[abpList]',
+  // tslint:disable-next-line
+  selector: 'ngx-datatable[list]',
+  exportAs: 'ngxDatatableList',
 })
 export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
   private subscription = new Subscription();
 
-  /* tslint:disable-next-line:no-input-rename */
-  @Input('abpList') list: ListService;
-
-  @Input() class = 'material bordered';
-
-  @HostBinding('class')
-  get classes(): string {
-    return `ngx-datatable ${this.class}`;
-  }
+  @Input() list: ListService;
 
   constructor(@Host() private cdRef: ChangeDetectorRef, @Host() private table: DatatableComponent) {
-    this.table.columnMode = ColumnMode.force;
     this.table.externalPaging = true;
     this.table.externalSorting = true;
-    this.table.footerHeight = 50;
-    this.table.headerHeight = 50;
-    this.table.rowHeight = 'auto';
   }
 
   ngOnChanges({ list }: SimpleChanges) {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index 41c1c043bd..734e4fad7a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -21,6 +21,7 @@ import { TableComponent } from './components/table/table.component';
 import { ToastContainerComponent } from './components/toast-container/toast-container.component';
 import { ToastComponent } from './components/toast/toast.component';
 import { LoadingDirective } from './directives/loading.directive';
+import { NgxDatatableDefaultDirective } from './directives/ngx-datatable-default.directive';
 import { NgxDatatableListDirective } from './directives/ngx-datatable-list.directive';
 import { TableSortDirective } from './directives/table-sort.directive';
 import { ErrorHandler } from './handlers/error.handler';
@@ -64,6 +65,7 @@ export function ngxDatatableMessageFactory(store: Store) {
     ToastComponent,
     ToastContainerComponent,
     SortOrderIconComponent,
+    NgxDatatableDefaultDirective,
     NgxDatatableListDirective,
     LoadingDirective,
     TableSortDirective,
@@ -83,6 +85,7 @@ export function ngxDatatableMessageFactory(store: Store) {
     ToastComponent,
     ToastContainerComponent,
     SortOrderIconComponent,
+    NgxDatatableDefaultDirective,
     NgxDatatableListDirective,
     LoadingDirective,
     TableSortDirective,