feature(identity): add table search to roles component

npm/ng-packs/packages/identity/src/lib/actions/identity.actions.ts

@@ -3,6 +3,7 @@ import { ABP } from '@abp/ng.core';
 
 export class IdentityGetRoles {
   static readonly type = '[Identity] Get Roles';
+  constructor(public payload?: ABP.PageQueryParams) {}
 }
 
 export class IdentityGetRoleById {

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

@@ -17,11 +17,20 @@
         ><input
           type="search"
           class="form-control form-control-sm"
-          placeholder="Search"
-          (input)="dt.filterGlobal($event.target.value, 'contains')"
+          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
+          (input)="search$.next($event.target.value)"
       /></label>
     </div>
-    <p-table #dt [value]="roles$ | async" [globalFilterFields]="['name']" [paginator]="true" [rows]="10">
+    <p-table
+      [value]="data$ | async"
+      [lazy]="true"
+      [lazyLoadOnInit]="false"
+      [paginator]="true"
+      [rows]="10"
+      [totalRecords]="totalCount$ | async"
+      [loading]="loading"
+      (onLazyLoad)="onPageChange($event)"
+    >
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>

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

@@ -1,6 +1,6 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Component, TemplateRef, ViewChild, OnInit } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { IdentityState } from '../../states/identity.state';
 import { Identity } from '../../models/identity';
@@ -9,17 +9,22 @@ import {
   IdentityAddRole,
   IdentityDeleteRole,
   IdentityGetRoleById,
+  IdentityGetRoles,
 } from '../../actions/identity.actions';
-import { pluck } from 'rxjs/operators';
+import { pluck, debounceTime, finalize } from 'rxjs/operators';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
+import { ABP } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
 })
-export class RolesComponent {
+export class RolesComponent implements OnInit {
   @Select(IdentityState.getRoles)
-  roles$: Observable<Identity.RoleItem[]>;
+  data$: Observable<Identity.RoleItem[]>;
+
+  @Select(IdentityState.getRolesTotalCount)
+  totalCount$: Observable<number>;
 
   form: FormGroup;
 
@@ -31,11 +36,26 @@ export class RolesComponent {
 
   providerKey: string;
 
+  pageQuery: ABP.PageQueryParams = {
+    sorting: 'name',
+  };
+
+  loading: boolean = false;
+
+  search$ = new Subject<string>();
+
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
 
   constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {}
 
+  ngOnInit() {
+    this.search$.pipe(debounceTime(300)).subscribe(value => {
+      this.pageQuery.filter = value;
+      this.get();
+    });
+  }
+
   createForm() {
     this.form = this.fb.group({
       name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]],
@@ -89,4 +109,20 @@ export class RolesComponent {
         }
       });
   }
+
+  onPageChange(data) {
+    this.pageQuery.skipCount = data.first;
+    this.pageQuery.maxResultCount = data.rows;
+
+    this.get();
+  }
+
+  get() {
+    this.loading = true;
+    console.warn(this.pageQuery);
+    this.store
+      .dispatch(new IdentityGetRoles(this.pageQuery))
+      .pipe(finalize(() => (this.loading = false)))
+      .subscribe();
+  }
 }

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

@@ -4,7 +4,7 @@ import { Component, OnInit, TemplateRef, TrackByFunction, ViewChild } from '@ang
 import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { combineLatest, Observable, Subject } from 'rxjs';
-import { debounceTime, filter, map, pluck, take } from 'rxjs/operators';
+import { debounceTime, filter, map, pluck, take, finalize } from 'rxjs/operators';
 import snq from 'snq';
 import {
   IdentityAddUser,
@@ -163,6 +163,9 @@ export class UsersComponent implements OnInit {
 
   get() {
     this.loading = true;
-    this.store.dispatch(new IdentityGetUsers(this.pageQuery)).subscribe(() => (this.loading = false));
+    this.store
+      .dispatch(new IdentityGetUsers(this.pageQuery))
+      .pipe(finalize(() => (this.loading = false)))
+      .subscribe();
   }
 }

npm/ng-packs/packages/identity/src/lib/services/identity.service.ts

@@ -9,10 +9,11 @@ import { Identity } from '../models/identity';
 export class IdentityService {
   constructor(private rest: RestService) {}
 
-  getRoles(): Observable<Identity.RoleResponse> {
+  getRoles(params = {} as ABP.PageQueryParams): Observable<Identity.RoleResponse> {
     const request: Rest.Request<null> = {
       method: 'GET',
       url: '/api/identity/roles',
+      params,
     };
 
     return this.rest.request<null, Identity.RoleResponse>(request);

npm/ng-packs/packages/identity/src/lib/states/identity.state.ts

@@ -44,8 +44,8 @@ export class IdentityState {
   constructor(private identityService: IdentityService) {}
 
   @Action(IdentityGetRoles)
-  getRoles({ patchState }: StateContext<Identity.State>) {
-    return this.identityService.getRoles().pipe(
+  getRoles({ patchState }: StateContext<Identity.State>, { payload }: IdentityGetRoles) {
+    return this.identityService.getRoles(payload).pipe(
       tap(roles =>
         patchState({
           roles,