From 5dae57732b18f677a3403fc9ccfd36c24ba27abd Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Wed, 7 Aug 2019 11:25:56 +0300
Subject: [PATCH] feature(identity): add debounce event modifier to search
 input

---
 .../lib/components/roles/roles.component.html |  2 +-
 .../lib/components/roles/roles.component.ts   | 30 ++++++++-----------
 .../lib/components/users/users.component.html |  2 +-
 .../lib/components/users/users.component.ts   | 18 +++++------
 4 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
index af162133da..546a768006 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@@ -18,7 +18,7 @@
           type="search"
           class="form-control form-control-sm"
           [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          (input)="search$.next($event.target.value)"
+          (input.debounce)="onSearch($event.target.value)"
       /></label>
     </div>
     <p-table
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index af52f274bb..06594d8091 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -1,25 +1,25 @@
-import { Component, TemplateRef, ViewChild, OnInit } from '@angular/core';
-import { Select, Store } from '@ngxs/store';
-import { Observable, Subject } from 'rxjs';
+import { ABP } from '@abp/ng.core';
+import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { IdentityState } from '../../states/identity.state';
-import { Identity } from '../../models/identity';
+import { Select, Store } from '@ngxs/store';
+import { Observable } from 'rxjs';
+import { debounceTime, finalize, pluck } from 'rxjs/operators';
 import {
-  IdentityUpdateRole,
   IdentityAddRole,
   IdentityDeleteRole,
   IdentityGetRoleById,
   IdentityGetRoles,
+  IdentityUpdateRole,
 } from '../../actions/identity.actions';
-import { pluck, debounceTime, finalize } from 'rxjs/operators';
-import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { ABP } from '@abp/ng.core';
+import { Identity } from '../../models/identity';
+import { IdentityState } from '../../states/identity.state';
 
 @Component({
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
 })
-export class RolesComponent implements OnInit {
+export class RolesComponent {
   @Select(IdentityState.getRoles)
   data$: Observable<Identity.RoleItem[]>;
 
@@ -42,18 +42,14 @@ export class RolesComponent implements OnInit {
 
   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();
-    });
+  onSearch(value) {
+    this.pageQuery.filter = value;
+    this.get();
   }
 
   createForm() {
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 9d5aa0a9f0..03f5dcb605 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -24,7 +24,7 @@
           type="search"
           class="form-control form-control-sm"
           [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          (input)="search$.next($event.target.value)"
+          (input.debounce)="onSearch($event.target.value)"
       /></label>
     </div>
     <p-table
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
index 830631728e..337bf94abe 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
@@ -1,10 +1,10 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, OnInit, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
+import { Component, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
 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, finalize } from 'rxjs/operators';
+import { combineLatest, Observable } from 'rxjs';
+import { filter, finalize, map, pluck, take } from 'rxjs/operators';
 import snq from 'snq';
 import {
   IdentityAddUser,
@@ -20,7 +20,7 @@ import { IdentityState } from '../../states/identity.state';
   selector: 'abp-users',
   templateUrl: './users.component.html',
 })
-export class UsersComponent implements OnInit {
+export class UsersComponent {
   @Select(IdentityState.getUsers)
   data$: Observable<Identity.UserItem[]>;
 
@@ -50,8 +50,6 @@ export class UsersComponent implements OnInit {
 
   loading: boolean = false;
 
-  search$ = new Subject<string>();
-
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
   get roleGroups(): FormGroup[] {
@@ -60,11 +58,9 @@ export class UsersComponent implements OnInit {
 
   constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {}
 
-  ngOnInit() {
-    this.search$.pipe(debounceTime(300)).subscribe(value => {
-      this.pageQuery.filter = value;
-      this.get();
-    });
+  onSearch(value) {
+    this.pageQuery.filter = value;
+    this.get();
   }
 
   buildForm() {