From 3e0524d3902d64a64cf5a1f6fd754059d95c7cd4 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Wed, 7 Aug 2019 11:25:10 +0300 Subject: [PATCH 1/4] feature(core): add event modifier directives --- .../packages/core/src/lib/core.module.ts | 6 +++++ .../src/lib/directives/debounce.directive.ts | 26 +++++++++++++++++++ .../directives/stop-propagation.directive.ts | 18 +++++++++++++ 3 files changed, 50 insertions(+) create mode 100644 npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts create mode 100644 npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts index 9e822a4823..79ecf7f1f8 100644 --- a/npm/ng-packs/packages/core/src/lib/core.module.ts +++ b/npm/ng-packs/packages/core/src/lib/core.module.ts @@ -20,6 +20,8 @@ import { SessionState } from './states/session.state'; import { getInitialData } from './utils/initial-utils'; import { EllipsisDirective } from './directives/ellipsis.directive'; import { AutofocusDirective } from './directives/autofocus.directive'; +import { DebounceDirective } from './directives/debounce.directive'; +import { StopPropagationDirective } from './directives/stop-propagation.directive'; @NgModule({ imports: [ @@ -40,6 +42,8 @@ import { AutofocusDirective } from './directives/autofocus.directive'; LocalizationPipe, PermissionDirective, VisibilityDirective, + DebounceDirective, + StopPropagationDirective, ], exports: [ CommonModule, @@ -54,7 +58,9 @@ import { AutofocusDirective } from './directives/autofocus.directive'; LocalizationPipe, PermissionDirective, VisibilityDirective, + DebounceDirective, LocalizationPipe, + StopPropagationDirective, ], providers: [LocalizationPipe], entryComponents: [RouterOutletComponent, DynamicLayoutComponent], diff --git a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts new file mode 100644 index 0000000000..55e8c23c92 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts @@ -0,0 +1,26 @@ +import { Directive, Output, Renderer2, ElementRef, OnInit, EventEmitter, Input } from '@angular/core'; +import { fromEvent } from 'rxjs'; +import { debounceTime } from 'rxjs/operators'; +import { takeUntilDestroy } from '@ngx-validate/core'; + +@Directive({ + selector: '[input.debounce]', +}) +export class DebounceDirective implements OnInit { + @Input() debounce: number = 300; + + @Output('input.debounce') debounceEvent = new EventEmitter(); + + constructor(private renderer: Renderer2, private el: ElementRef) {} + + ngOnInit(): void { + fromEvent(this.el.nativeElement, 'input') + .pipe( + debounceTime(this.debounce), + takeUntilDestroy(this), + ) + .subscribe((event: Event) => { + this.debounceEvent.emit(event); + }); + } +} diff --git a/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts new file mode 100644 index 0000000000..f2f6ac0384 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts @@ -0,0 +1,18 @@ +import { Directive, ElementRef, EventEmitter, OnInit, Output, Renderer2 } from '@angular/core'; +import { fromEvent } from 'rxjs'; + +@Directive({ + selector: '[click.stop]', +}) +export class StopPropagationDirective implements OnInit { + @Output('click.stop') stopPropEvent = new EventEmitter(); + + constructor(private renderer: Renderer2, private el: ElementRef) {} + + ngOnInit(): void { + fromEvent(this.el.nativeElement, 'click').subscribe((event: MouseEvent) => { + event.stopPropagation(); + this.stopPropEvent.emit(event); + }); + } +} From 5dae57732b18f677a3403fc9ccfd36c24ba27abd Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Wed, 7 Aug 2019 11:25:56 +0300 Subject: [PATCH 2/4] 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)" /> ; @@ -42,18 +42,14 @@ export class RolesComponent implements OnInit { loading: boolean = false; - search$ = new Subject(); - @ViewChild('modalContent', { static: false }) modalContent: TemplateRef; 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)" /> ; @@ -50,8 +50,6 @@ export class UsersComponent implements OnInit { loading: boolean = false; - search$ = new Subject(); - trackByFn: TrackByFunction = (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() { From b8b32898597564d065ba138846b418877d813fa4 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Wed, 7 Aug 2019 11:26:18 +0300 Subject: [PATCH 3/4] feature(tenant-management): add debounce event modifier to search input --- .../lib/components/tenants/tenants.component.html | 2 +- .../lib/components/tenants/tenants.component.ts | 14 +++++--------- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html index ec059131e0..b8c206a74d 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html @@ -27,7 +27,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)" /> ; @@ -52,8 +52,6 @@ export class TenantsComponent implements OnInit { loading: boolean = false; - search$ = new Subject(); - get useSharedDatabase(): boolean { return this.defaultConnectionStringForm.get('useSharedDatabase').value; } @@ -75,11 +73,9 @@ export class TenantsComponent implements OnInit { 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(); } private createTenantForm() { From 5e4be2ab4fec3e23461986318c7424076bb31e90 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Wed, 7 Aug 2019 11:34:38 +0300 Subject: [PATCH 4/4] fix(core): rename directives --- npm/ng-packs/packages/core/src/lib/core.module.ts | 12 ++++++------ .../core/src/lib/directives/debounce.directive.ts | 2 +- .../lib/directives/stop-propagation.directive.ts | 13 ++++++++----- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts index 79ecf7f1f8..4b657fe8bb 100644 --- a/npm/ng-packs/packages/core/src/lib/core.module.ts +++ b/npm/ng-packs/packages/core/src/lib/core.module.ts @@ -20,8 +20,8 @@ import { SessionState } from './states/session.state'; import { getInitialData } from './utils/initial-utils'; import { EllipsisDirective } from './directives/ellipsis.directive'; import { AutofocusDirective } from './directives/autofocus.directive'; -import { DebounceDirective } from './directives/debounce.directive'; -import { StopPropagationDirective } from './directives/stop-propagation.directive'; +import { InputEventDebounceDirective } from './directives/debounce.directive'; +import { ClickEventStopPropagationDirective } from './directives/stop-propagation.directive'; @NgModule({ imports: [ @@ -42,8 +42,8 @@ import { StopPropagationDirective } from './directives/stop-propagation.directiv LocalizationPipe, PermissionDirective, VisibilityDirective, - DebounceDirective, - StopPropagationDirective, + InputEventDebounceDirective, + ClickEventStopPropagationDirective, ], exports: [ CommonModule, @@ -58,9 +58,9 @@ import { StopPropagationDirective } from './directives/stop-propagation.directiv LocalizationPipe, PermissionDirective, VisibilityDirective, - DebounceDirective, + InputEventDebounceDirective, LocalizationPipe, - StopPropagationDirective, + ClickEventStopPropagationDirective, ], providers: [LocalizationPipe], entryComponents: [RouterOutletComponent, DynamicLayoutComponent], diff --git a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts index 55e8c23c92..144c43d4e2 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts @@ -6,7 +6,7 @@ import { takeUntilDestroy } from '@ngx-validate/core'; @Directive({ selector: '[input.debounce]', }) -export class DebounceDirective implements OnInit { +export class InputEventDebounceDirective implements OnInit { @Input() debounce: number = 300; @Output('input.debounce') debounceEvent = new EventEmitter(); diff --git a/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts index f2f6ac0384..ffa2e9e10b 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts @@ -1,18 +1,21 @@ import { Directive, ElementRef, EventEmitter, OnInit, Output, Renderer2 } from '@angular/core'; import { fromEvent } from 'rxjs'; +import { takeUntilDestroy } from '@ngx-validate/core'; @Directive({ selector: '[click.stop]', }) -export class StopPropagationDirective implements OnInit { +export class ClickEventStopPropagationDirective implements OnInit { @Output('click.stop') stopPropEvent = new EventEmitter(); constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit(): void { - fromEvent(this.el.nativeElement, 'click').subscribe((event: MouseEvent) => { - event.stopPropagation(); - this.stopPropEvent.emit(event); - }); + fromEvent(this.el.nativeElement, 'click') + .pipe(takeUntilDestroy(this)) + .subscribe((event: MouseEvent) => { + event.stopPropagation(); + this.stopPropEvent.emit(event); + }); } }