feat(tenant-management): replace abp-table in tenants.component with ngx-datatable

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

@@ -18,99 +18,88 @@
       </div>
     </div>
   </div>
+
   <div class="card-body">
     <div id="data-tables-table-filter" class="data-tables-filter">
-      <label
-        ><input
+      <div class="input-group">
+        <input
           type="search"
-          class="form-control form-control-sm"
+          class="form-control"
           [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          (input.debounce)="onSearch($event.target.value)"
-      /></label>
+          [(ngModel)]="list.filter"
+        />
+      </div>
     </div>
-    <abp-table
-      *ngIf="[150, 0] as columnWidths"
-      [abpLoading]="loading"
-      [abpLoadingDelay]="500"
-      [abpTableSort]="{ key: sortKey, order: sortOrder }"
-      [colgroupTemplate]="tableColGroup"
-      [headerTemplate]="tableHeader"
-      [bodyTemplate]="tableBody"
-      [value]="data$ | async"
-      [abpTableSort]="{ key: sortKey, order: sortOrder }"
-      [rows]="pageQuery.maxResultCount"
-      [totalRecords]="totalCount$ | async"
-      [scrollable]="true"
-      (pageChange)="onPageChange($event)"
+
+    <ngx-datatable
+      [rows]="data$ | async"
+      [loadingIndicator]="list.isLoading$ | async"
+      [externalSorting]="true"
+      (sort)="sort($event)"
+      [externalPaging]="true"
+      [count]="totalCount$ | async"
+      [offset]="list.page - 1"
+      [limit]="list.maxResultCount"
+      (page)="list.page = $event.offset + 1"
+      [headerHeight]="50"
+      [footerHeight]="50"
+      columnMode="force"
+      rowHeight="auto"
+      class="material"
     >
-      <ng-template #tableColGroup>
-        <colgroup>
-          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width || undefined }" />
-        </colgroup>
-      </ng-template>
-      <ng-template #tableHeader let-columns>
-        <tr>
-          <th>{{ 'AbpTenantManagement::Actions' | abpLocalization }}</th>
-          <th (click)="sortOrderIcon.sort('name')">
-            {{ 'AbpTenantManagement::TenantName' | abpLocalization }}
-            <abp-sort-order-icon
-              #sortOrderIcon
-              sortKey="name"
-              [(selectedSortKey)]="sortKey"
-              [(order)]="sortOrder"
+      <ngx-datatable-column
+        [name]="'AbpIdentity::Actions' | abpLocalization"
+        [maxWidth]="150"
+        [sortable]="false"
+      >
+        <ng-template let-row="row" ngx-datatable-cell-template>
+          <div ngbDropdown container="body" class="d-inline-block">
+            <button
+              class="btn btn-primary btn-sm dropdown-toggle"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              ngbDropdownToggle
             >
-            </abp-sort-order-icon>
-          </th>
-        </tr>
-      </ng-template>
-      <ng-template #tableBody let-data>
-        <tr>
-          <td class="text-center">
-            <div ngbDropdown container="body" class="d-inline-block">
+              <i class="fa fa-cog mr-1"></i>{{ 'AbpTenantManagement::Actions' | abpLocalization }}
+            </button>
+            <div ngbDropdownMenu>
+              <button
+                *abpPermission="'AbpTenantManagement.Tenants.Update'"
+                ngbDropdownItem
+                (click)="editTenant(row.id)"
+              >
+                {{ 'AbpTenantManagement::Edit' | abpLocalization }}
+              </button>
+              <button
+                *abpPermission="'AbpTenantManagement.Tenants.ManageConnectionStrings'"
+                ngbDropdownItem
+                (click)="onEditConnectionString(row.id)"
+              >
+                {{ 'AbpTenantManagement::Permission:ManageConnectionStrings' | abpLocalization }}
+              </button>
+              <button
+                *abpPermission="'AbpTenantManagement.Tenants.ManageFeatures'"
+                ngbDropdownItem
+                (click)="openFeaturesModal(row.id)"
+              >
+                {{ 'AbpTenantManagement::Permission:ManageFeatures' | abpLocalization }}
+              </button>
               <button
-                class="btn btn-primary btn-sm dropdown-toggle"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                ngbDropdownToggle
+                *abpPermission="'AbpTenantManagement.Tenants.Delete'"
+                ngbDropdownItem
+                (click)="delete(row.id, row.name)"
               >
-                <i class="fa fa-cog mr-1"></i>{{ 'AbpTenantManagement::Actions' | abpLocalization }}
+                {{ 'AbpTenantManagement::Delete' | abpLocalization }}
               </button>
-              <div ngbDropdownMenu>
-                <button
-                  *abpPermission="'AbpTenantManagement.Tenants.Update'"
-                  ngbDropdownItem
-                  (click)="editTenant(data.id)"
-                >
-                  {{ 'AbpTenantManagement::Edit' | abpLocalization }}
-                </button>
-                <button
-                  *abpPermission="'AbpTenantManagement.Tenants.ManageConnectionStrings'"
-                  ngbDropdownItem
-                  (click)="onEditConnectionString(data.id)"
-                >
-                  {{ 'AbpTenantManagement::Permission:ManageConnectionStrings' | abpLocalization }}
-                </button>
-                <button
-                  *abpPermission="'AbpTenantManagement.Tenants.ManageFeatures'"
-                  ngbDropdownItem
-                  (click)="openFeaturesModal(data.id)"
-                >
-                  {{ 'AbpTenantManagement::Permission:ManageFeatures' | abpLocalization }}
-                </button>
-                <button
-                  *abpPermission="'AbpTenantManagement.Tenants.Delete'"
-                  ngbDropdownItem
-                  (click)="delete(data.id, data.name)"
-                >
-                  {{ 'AbpTenantManagement::Delete' | abpLocalization }}
-                </button>
-              </div>
             </div>
-          </td>
-          <td>{{ data.name }}</td>
-        </tr>
-      </ng-template>
-    </abp-table>
+          </div>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column
+        [name]="'AbpTenantManagement::TenantName' | abpLocalization"
+        prop="name"
+      ></ngx-datatable-column>
+    </ngx-datatable>
   </div>
 </div>
 

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

@@ -1,6 +1,7 @@
-import { ABP } from '@abp/ng.core';
-import { ConfirmationService, Confirmation, getPasswordValidators } from '@abp/ng.theme.shared';
-import { Component, OnInit, TemplateRef, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ABP, ListService } from '@abp/ng.core';
+import { eFeatureManagementComponents } from '@abp/ng.feature-management';
+import { Confirmation, ConfirmationService, getPasswordValidators } from '@abp/ng.theme.shared';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
@@ -14,7 +15,6 @@ import {
 } from '../../actions/tenant-management.actions';
 import { TenantManagementService } from '../../services/tenant-management.service';
 import { TenantManagementState } from '../../states/tenant-management.state';
-import { eFeatureManagementComponents } from '@abp/ng.feature-management';
 
 interface SelectedModalContent {
   type: 'saveConnStr' | 'saveTenant';
@@ -25,6 +25,7 @@ interface SelectedModalContent {
 @Component({
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
+  providers: [ListService],
 })
 export class TenantsComponent implements OnInit {
   @Select(TenantManagementState.get)
@@ -51,16 +52,8 @@ export class TenantsComponent implements OnInit {
 
   _useSharedDatabase: boolean;
 
-  pageQuery: ABP.PageQueryParams = { maxResultCount: 10 };
-
-  loading = false;
-
   modalBusy = false;
 
-  sortOrder = '';
-
-  sortKey = '';
-
   featureManagementKey = eFeatureManagementComponents.FeatureManagement;
 
   get hasSelectedTenant(): boolean {
@@ -106,6 +99,7 @@ export class TenantsComponent implements OnInit {
   };
 
   constructor(
+    public readonly list: ListService,
     private confirmationService: ConfirmationService,
     private tenantService: TenantManagementService,
     private fb: FormBuilder,
@@ -116,11 +110,6 @@ export class TenantsComponent implements OnInit {
     this.get();
   }
 
-  onSearch(value: string) {
-    this.pageQuery.filter = value;
-    this.get();
-  }
-
   private createTenantForm() {
     const tenantForm = this.fb.group({
       name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]],
@@ -262,18 +251,8 @@ export class TenantsComponent implements OnInit {
       });
   }
 
-  onPageChange(page: number) {
-    this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount;
-
-    this.get();
-  }
-
   get() {
-    this.loading = true;
-    this.store
-      .dispatch(new GetTenants(this.pageQuery))
-      .pipe(finalize(() => (this.loading = false)))
-      .subscribe();
+    this.list.hookToQuery(query => this.store.dispatch(new GetTenants(query))).subscribe();
   }
 
   onSharedDatabaseChange(value: boolean) {
@@ -295,4 +274,10 @@ export class TenantsComponent implements OnInit {
       this.visibleFeatures = true;
     }, 0);
   }
+
+  sort(data) {
+    const { prop, dir } = data.sorts[0];
+    this.list.sortKey = prop;
+    this.list.sortOrder = dir;
+  }
 }