feat(identity): implement abp table to users

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

@@ -28,7 +28,7 @@
       [headerTemplate]="tableHeader"
       [bodyTemplate]="tableBody"
       [value]="data$ | async"
-      [rows]="10"
+      [rows]="pageQuery.maxResultCount"
       [totalRecords]="totalCount$ | async"
       [scrollable]="true"
       (pageChange)="onPageChange($event)"

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

@@ -28,37 +28,28 @@
           (input.debounce)="onSearch($event.target.value)"
       /></label>
     </div>
-    <p-table
+    <abp-table
       *ngIf="[150, 250, 250, 250] as columnWidths"
-      [value]="data$ | async"
+      [abpLoading]="loading"
       [abpTableSort]="{ key: sortKey, order: sortOrder }"
-      [lazy]="true"
-      [lazyLoadOnInit]="false"
-      [paginator]="true"
-      [rows]="10"
+      [colgroupTemplate]="tableColGroup"
+      [headerTemplate]="tableHeader"
+      [bodyTemplate]="tableBody"
+      [value]="data$ | async"
+      [rows]="pageQuery.maxResultCount"
       [totalRecords]="totalCount$ | async"
-      [loading]="loading"
-      [resizableColumns]="true"
       [scrollable]="true"
-      (onLazyLoad)="onPageChange($event)"
+      (pageChange)="onPageChange($event)"
     >
-      <ng-template pTemplate="colgroup">
+      <ng-template #tableColGroup>
         <colgroup>
           <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width || undefined }" />
         </colgroup>
       </ng-template>
-      <ng-template pTemplate="emptymessage" let-columns>
-        <tr
-          abp-table-empty-message
-          [attr.colspan]="columnWidths.length"
-          localizationResource="AbpIdentity"
-          localizationProp="NoDataAvailableInDatatable"
-        ></tr>
-      </ng-template>
-      <ng-template pTemplate="header">
+      <ng-template #tableHeader>
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th pResizableColumn (click)="sortOrderIcon.sort('userName')">
+          <th (click)="sortOrderIcon.sort('userName')">
             {{ 'AbpIdentity::UserName' | abpLocalization }}
             <abp-sort-order-icon
               #sortOrderIcon
@@ -68,7 +59,7 @@
             >
             </abp-sort-order-icon>
           </th>
-          <th pResizableColumn (click)="sortOrderIcon.sort('email')">
+          <th (click)="sortOrderIcon.sort('email')">
             {{ 'AbpIdentity::EmailAddress' | abpLocalization }}
             <abp-sort-order-icon
               sortKey="email"
@@ -76,7 +67,7 @@
               [(order)]="sortOrder"
             ></abp-sort-order-icon>
           </th>
-          <th pResizableColumn (click)="sortOrderIcon.sort('phoneNumber')">
+          <th (click)="sortOrderIcon.sort('phoneNumber')">
             {{ 'AbpIdentity::PhoneNumber' | abpLocalization }}
             <abp-sort-order-icon
               sortKey="phoneNumber"
@@ -87,7 +78,7 @@
           </th>
         </tr>
       </ng-template>
-      <ng-template pTemplate="body" let-data>
+      <ng-template #tableBody let-data>
         <tr>
           <td class="text-center">
             <div ngbDropdown container="body" class="d-inline-block">
@@ -129,7 +120,7 @@
           <td>{{ data.phoneNumber }}</td>
         </tr>
       </ng-template>
-    </p-table>
+    </abp-table>
   </div>
 </div>
 

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

@@ -51,7 +51,7 @@ export class UsersComponent implements OnInit {
 
   providerKey: string;
 
-  pageQuery: ABP.PageQueryParams = {};
+  pageQuery: ABP.PageQueryParams = { maxResultCount: 10 };
 
   isModalVisible: boolean;
 
@@ -111,7 +111,7 @@ export class UsersComponent implements OnInit {
     }
   }
 
-  onSearch(value) {
+  onSearch(value: string) {
     this.pageQuery.filter = value;
     this.get();
   }
@@ -226,9 +226,8 @@ export class UsersComponent implements OnInit {
       });
   }
 
-  onPageChange(data) {
-    this.pageQuery.skipCount = data.first;
-    this.pageQuery.maxResultCount = data.rows;
+  onPageChange(page: number) {
+    this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount;
 
     this.get();
   }