feature(identity): add sorting to identity module routes

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

@@ -30,18 +30,30 @@
       [rows]="10"
       [totalRecords]="totalCount$ | async"
       [loading]="loading"
+      [resizableColumns]="true"
+      [scrollable]="true"
       (onLazyLoad)="onPageChange($event)"
     >
-      <ng-template pTemplate="header">
+      <ng-template pTemplate="colgroup">
+        <colgroup>
+          <col *ngFor="let width of [65, 200]" [ngStyle]="{ 'width.px': width }" />
+        </colgroup>
+      </ng-template>
+      <ng-template pTemplate="header" let-columns>
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th>{{ 'AbpIdentity::RoleName' | abpLocalization }}</th>
+          <th pResizableColumn (click)="changeSortOrder()">
+            {{ 'AbpIdentity::RoleName' | abpLocalization }}
+            <span class="float-right"
+              ><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
+            ></span>
+          </th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-data>
         <tr>
           <td>
-            <div ngbDropdown class="d-inline-block">
+            <div ngbDropdown container="body" class="d-inline-block">
               <button
                 class="btn btn-primary btn-sm dropdown-toggle"
                 data-toggle="dropdown"

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

@@ -38,6 +38,8 @@ export class RolesComponent {
 
   modalBusy: boolean = false;
 
+  sortOrder: string = 'asc';
+
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
 
@@ -121,4 +123,8 @@ export class RolesComponent {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
+
+  changeSortOrder() {
+    this.sortOrder = this.sortOrder.toLowerCase() === 'asc' ? 'desc' : 'asc';
+  }
 }

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

@@ -36,20 +36,32 @@
       [rows]="10"
       [totalRecords]="totalCount$ | async"
       [loading]="loading"
+      [resizableColumns]="true"
+      [scrollable]="true"
       (onLazyLoad)="onPageChange($event)"
     >
+      <ng-template pTemplate="colgroup">
+        <colgroup>
+          <col *ngFor="let width of [80, 200, 200, 200]" [ngStyle]="{ 'width.px': width }" />
+        </colgroup>
+      </ng-template>
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th>{{ 'AbpIdentity::UserName' | abpLocalization }}</th>
-          <th>{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</th>
-          <th>{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</th>
+          <th pResizableColumn (click)="changeSortOrder()">
+            {{ 'AbpIdentity::UserName' | abpLocalization }}
+            <span class="float-right"
+              ><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
+            ></span>
+          </th>
+          <th pResizableColumn>{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</th>
+          <th pResizableColumn>{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-data>
         <tr>
           <td>
-            <div ngbDropdown class="d-inline-block">
+            <div ngbDropdown container="body" class="d-inline-block">
               <button
                 class="btn btn-primary btn-sm dropdown-toggle"
                 data-toggle="dropdown"

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

@@ -52,6 +52,8 @@ export class UsersComponent {
 
   modalBusy: boolean = false;
 
+  sortOrder: string = 'asc';
+
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
   get roleGroups(): FormGroup[] {
@@ -169,4 +171,8 @@ export class UsersComponent {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
+
+  changeSortOrder() {
+    this.sortOrder = this.sortOrder.toLowerCase() === 'asc' ? 'desc' : 'asc';
+  }
 }