feature(tenant-management): add table search

npm/ng-packs/packages/tenant-management/src/lib/actions/tenant-management.actions.ts

@@ -1,7 +1,9 @@
 import { TenantManagement } from '../models/tenant-management';
+import { ABP } from '@abp/ng.core';
 
 export class TenantManagementGet {
   static readonly type = '[TenantManagement] Get';
+  constructor(public payload?: ABP.PageQueryParams) {}
 }
 
 export class TenantManagementGetById {

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

@@ -26,11 +26,20 @@
         ><input
           type="search"
           class="form-control form-control-sm"
-          placeholder="Search"
+          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          (input)="dt.filterGlobal($event.target.value, 'contains')"
+          (input)="search$.next($event.target.value)"
       /></label>
     </div>
-    <p-table #dt [value]="datas$ | 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>{{ 'AbpTenantManagement::Actions' | abpLocalization }}</th>
@@ -112,7 +121,7 @@
     <div class="mt-2">
       <div class="form-group">
         <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
-        <input type="text" id="name" class="form-control" formControlName="name" autofocus/>
+        <input type="text" id="name" class="form-control" formControlName="name" autofocus />
       </div>
     </div>
   </form>
@@ -123,7 +132,13 @@
     <div class="mt-2">
       <div class="form-group">
         <div class="form-check">
-          <input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" autofocus/>
+          <input
+            id="useSharedDatabase"
+            type="checkbox"
+            class="form-check-input"
+            formControlName="useSharedDatabase"
+            autofocus
+          />
           <label for="useSharedDatabase" class="font-check-label">{{
             'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
           }}</label>

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

@@ -1,13 +1,14 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+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';
+import { Observable, Subject } from 'rxjs';
-import { pluck, switchMap, take } from 'rxjs/operators';
+import { debounceTime, finalize, pluck, switchMap, take } from 'rxjs/operators';
 import {
   TenantManagementAdd,
   TenantManagementDelete,
+  TenantManagementGet,
   TenantManagementGetById,
   TenantManagementUpdate,
 } from '../../actions/tenant-management.actions';
@@ -24,9 +25,12 @@ type SelectedModalContent = {
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
 })
-export class TenantsComponent {
+export class TenantsComponent implements OnInit {
   @Select(TenantManagementState.get)
-  datas$: Observable<ABP.BasicItem[]>;
+  data$: Observable<ABP.BasicItem[]>;
+
+  @Select(TenantManagementState.getTenantsTotalCount)
+  totalCount$: Observable<number>;
 
   selected: ABP.BasicItem;
 
@@ -42,6 +46,14 @@ export class TenantsComponent {
 
   _useSharedDatabase: boolean;
 
+  pageQuery: ABP.PageQueryParams = {
+    sorting: 'name',
+  };
+
+  loading: boolean = false;
+
+  search$ = new Subject<string>();
+
   get useSharedDatabase(): boolean {
     return this.defaultConnectionStringForm.get('useSharedDatabase').value;
   }
@@ -66,6 +78,13 @@ export class TenantsComponent {
     private store: Store,
   ) {}
 
+  ngOnInit() {
+    this.search$.pipe(debounceTime(300)).subscribe(value => {
+      this.pageQuery.filter = value;
+      this.get();
+    });
+  }
+
   private createTenantForm() {
     this.tenantForm = this.fb.group({
       name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]],
@@ -178,4 +197,19 @@ export class TenantsComponent {
         }
       });
   }
+
+  onPageChange(data) {
+    this.pageQuery.skipCount = data.first;
+    this.pageQuery.maxResultCount = data.rows;
+
+    this.get();
+  }
+
+  get() {
+    this.loading = true;
+    this.store
+      .dispatch(new TenantManagementGet(this.pageQuery))
+      .pipe(finalize(() => (this.loading = false)))
+      .subscribe();
+  }
 }

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

@@ -9,10 +9,11 @@ import { TenantManagement } from '../models/tenant-management';
 export class TenantManagementService {
   constructor(private rest: RestService) {}
 
-  get(): Observable<TenantManagement.Response> {
+  get(params = {} as ABP.PageQueryParams): Observable<TenantManagement.Response> {
     const request: Rest.Request<null> = {
       method: 'GET',
       url: '/api/multi-tenancy/tenants',
+      params,
     };
 
     return this.rest.request<null, TenantManagement.Response>(request);

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

@@ -21,11 +21,16 @@ export class TenantManagementState {
     return result.items || [];
   }
 
+  @Selector()
+  static getTenantsTotalCount({ result }: TenantManagement.State): number {
+    return result.totalCount;
+  }
+
   constructor(private tenantManagementService: TenantManagementService) {}
 
   @Action(TenantManagementGet)
-  get({ patchState }: StateContext<TenantManagement.State>) {
+  get({ patchState }: StateContext<TenantManagement.State>, { payload }: TenantManagementGet) {
-    return this.tenantManagementService.get().pipe(
+    return this.tenantManagementService.get(payload).pipe(
       tap(result =>
         patchState({
           result,