feat(identity): replace abp-table in users.component with ngx-datatable

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

@@ -20,108 +20,86 @@
   </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, 250, 250, 250] as columnWidths"
-      [abpLoading]="loading"
-      [abpLoadingDelay]="500"
-      [abpTableSort]="{ key: sortKey, order: sortOrder }"
-      [colgroupTemplate]="tableColGroup"
-      [headerTemplate]="tableHeader"
-      [bodyTemplate]="tableBody"
-      [value]="data$ | async"
-      [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>
-        <tr>
-          <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th (click)="sortOrderIcon.sort('userName')">
-            {{ 'AbpIdentity::UserName' | abpLocalization }}
-            <abp-sort-order-icon
-              #sortOrderIcon
-              sortKey="userName"
-              [(selectedSortKey)]="sortKey"
-              [(order)]="sortOrder"
-            >
-            </abp-sort-order-icon>
-          </th>
-          <th (click)="sortOrderIcon.sort('email')">
-            {{ 'AbpIdentity::EmailAddress' | abpLocalization }}
-            <abp-sort-order-icon
-              sortKey="email"
-              [(selectedSortKey)]="sortKey"
-              [(order)]="sortOrder"
-            ></abp-sort-order-icon>
-          </th>
-          <th (click)="sortOrderIcon.sort('phoneNumber')">
-            {{ 'AbpIdentity::PhoneNumber' | abpLocalization }}
-            <abp-sort-order-icon
-              sortKey="phoneNumber"
-              [(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>{{ 'AbpIdentity::Actions' | abpLocalization }}
+            </button>
+            <div ngbDropdownMenu>
               <button
-                class="btn btn-primary btn-sm dropdown-toggle"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                ngbDropdownToggle
+                *abpPermission="'AbpIdentity.Users.Update'"
+                ngbDropdownItem
+                (click)="edit(row.id)"
               >
-                <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
+                {{ 'AbpIdentity::Edit' | abpLocalization }}
+              </button>
+              <button
+                *abpPermission="'AbpIdentity.Users.ManagePermissions'"
+                ngbDropdownItem
+                (click)="openPermissionsModal(row.id)"
+              >
+                {{ 'AbpIdentity::Permissions' | abpLocalization }}
+              </button>
+              <button
+                *abpPermission="'AbpIdentity.Users.Delete'"
+                ngbDropdownItem
+                (click)="delete(row.id, row.userName)"
+              >
+                {{ 'AbpIdentity::Delete' | abpLocalization }}
               </button>
-              <div ngbDropdownMenu>
-                <button
-                  *abpPermission="'AbpIdentity.Users.Update'"
-                  ngbDropdownItem
-                  (click)="edit(data.id)"
-                >
-                  {{ 'AbpIdentity::Edit' | abpLocalization }}
-                </button>
-                <button
-                  *abpPermission="'AbpIdentity.Users.ManagePermissions'"
-                  ngbDropdownItem
-                  (click)="openPermissionsModal(data.id)"
-                >
-                  {{ 'AbpIdentity::Permissions' | abpLocalization }}
-                </button>
-                <button
-                  *abpPermission="'AbpIdentity.Users.Delete'"
-                  ngbDropdownItem
-                  (click)="delete(data.id, data.userName)"
-                >
-                  {{ 'AbpIdentity::Delete' | abpLocalization }}
-                </button>
-              </div>
             </div>
-          </td>
-          <td>{{ data.userName }}</td>
-          <td>{{ data.email }}</td>
-          <td>{{ data.phoneNumber }}</td>
-        </tr>
-      </ng-template>
-    </abp-table>
+          </div>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column
+        [name]="'AbpIdentity::UserName' | abpLocalization"
+        prop="userName"
+      ></ngx-datatable-column>
+      <ngx-datatable-column
+        [name]="'AbpIdentity::EmailAddress' | abpLocalization"
+        prop="email"
+      ></ngx-datatable-column>
+      <ngx-datatable-column
+        [name]="'AbpIdentity::PhoneNumber' | abpLocalization"
+        prop="phoneNumber"
+      ></ngx-datatable-column>
+    </ngx-datatable>
   </div>
 </div>
 

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

@@ -1,4 +1,4 @@
-import { ABP } from '@abp/ng.core';
+import { ABP, ListService } from '@abp/ng.core';
 import { Confirmation, ConfirmationService, getPasswordValidators } from '@abp/ng.theme.shared';
 import { Component, OnInit, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
 import {
@@ -28,6 +28,7 @@ import { ePermissionManagementComponents } from '@abp/ng.permission-management';
 @Component({
   selector: 'abp-users',
   templateUrl: './users.component.html',
+  providers: [ListService],
 })
 export class UsersComponent implements OnInit {
   @Select(IdentityState.getUsers)
@@ -51,18 +52,10 @@ export class UsersComponent implements OnInit {
 
   providerKey: string;
 
-  pageQuery: ABP.PageQueryParams = { maxResultCount: 10 };
-
   isModalVisible: boolean;
 
-  loading = false;
-
   modalBusy = false;
 
-  sortOrder = '';
-
-  sortKey = '';
-
   permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
 
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
@@ -76,6 +69,7 @@ export class UsersComponent implements OnInit {
   }
 
   constructor(
+    public readonly list: ListService,
     private confirmationService: ConfirmationService,
     private fb: FormBuilder,
     private store: Store,
@@ -86,11 +80,6 @@ export class UsersComponent implements OnInit {
     this.get();
   }
 
-  onSearch(value: string) {
-    this.pageQuery.filter = value;
-    this.get();
-  }
-
   buildForm() {
     this.identityService.getAllRoles().subscribe(({ items }) => {
       this.roles = items;
@@ -199,18 +188,14 @@ export class UsersComponent implements OnInit {
       });
   }
 
-  onPageChange(page: number) {
-    this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount;
-
-    this.get();
+  sort(data) {
+    const { prop, dir } = data.sorts[0];
+    this.list.sortKey = prop;
+    this.list.sortOrder = dir;
   }
 
   get() {
-    this.loading = true;
-    this.store
-      .dispatch(new GetUsers(this.pageQuery))
-      .pipe(finalize(() => (this.loading = false)))
-      .subscribe();
+    this.list.hookToQuery(query => this.store.dispatch(new GetUsers(query))).subscribe();
   }
 
   openPermissionsModal(providerKey: string) {