From b25ddde791023c0beb0840dd0df4ed53ad721548 Mon Sep 17 00:00:00 2001 From: muhammedaltug Date: Mon, 4 Jan 2021 18:13:50 +0300 Subject: [PATCH 1/3] change detection error fix 500ms delay set --- .../src/lib/components/loader-bar/loader-bar.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts index 1700efafe2..bf08790184 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts @@ -77,7 +77,9 @@ export class LoaderBarComponent implements OnDestroy, OnInit { private subscription: SubscriptionService, private httpWaitService: HttpWaitService, private routerWaiterService: RouterWaitService, - ) {} + ) { + this.httpWaitService.setDelay(500); + } ngOnInit() { this.subscribeLoading(); @@ -102,6 +104,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit { this.isLoading = true; this.progressLevel = 0; + this.cdRef.detectChanges(); this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress); this.timer.unsubscribe(); } From a3ceb85e8a4a1a8ff538d29b3698368d9cc2864c Mon Sep 17 00:00:00 2001 From: muhammedaltug Date: Tue, 5 Jan 2021 14:11:38 +0300 Subject: [PATCH 2/3] Add injection token for loader delay http wait service addFilter and removeFilter methods can accept array payload --- .../core/src/lib/services/http-wait.service.ts | 14 +++++++++----- .../components/loader-bar/loader-bar.component.ts | 6 ++++-- .../packages/theme-shared/src/lib/models/common.ts | 1 + .../theme-shared/src/lib/theme-shared.module.ts | 9 +++++++-- .../packages/theme-shared/src/lib/tokens/index.ts | 1 + .../src/lib/tokens/lodaer-delay.token.ts | 3 +++ 6 files changed, 25 insertions(+), 9 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tokens/lodaer-delay.token.ts diff --git a/npm/ng-packs/packages/core/src/lib/services/http-wait.service.ts b/npm/ng-packs/packages/core/src/lib/services/http-wait.service.ts index a74a9bb08d..a981ac400a 100644 --- a/npm/ng-packs/packages/core/src/lib/services/http-wait.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/http-wait.service.ts @@ -54,17 +54,21 @@ export class HttpWaitService { this.store.patch({ requests }); } - addFilter(request: HttpRequestInfo) { + addFilter(request: HttpRequestInfo | HttpRequestInfo[]) { + const requests = Array.isArray(request) ? request : [request]; const filteredRequests = [ - ...this.store.state.filteredRequests.filter(f => !this.isSameRequest(f, request)), - request, + ...this.store.state.filteredRequests.filter( + f => !requests.some(r => this.isSameRequest(f, r)), + ), + ...requests, ]; this.store.patch({ filteredRequests }); } - removeFilter(request: HttpRequestInfo) { + removeFilter(request: HttpRequestInfo | HttpRequestInfo[]) { + const requests = Array.isArray(request) ? request : [request]; const filteredRequests = this.store.state.filteredRequests.filter( - f => !this.isSameRequest(f, request), + f => !requests.some(r => this.isSameRequest(f, r)), ); this.store.patch({ filteredRequests }); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts index bf08790184..bae858ad09 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts @@ -1,7 +1,8 @@ import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core'; -import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { combineLatest, Subscription, timer } from 'rxjs'; +import { LOADER_DELAY } from '../../tokens/lodaer-delay.token'; @Component({ selector: 'abp-loader-bar', @@ -77,8 +78,9 @@ export class LoaderBarComponent implements OnDestroy, OnInit { private subscription: SubscriptionService, private httpWaitService: HttpWaitService, private routerWaiterService: RouterWaitService, + @Inject(LOADER_DELAY) delay: number, ) { - this.httpWaitService.setDelay(500); + this.httpWaitService.setDelay(delay); } ngOnInit() { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts index 64047e0db7..48c40abfe8 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts @@ -4,6 +4,7 @@ import { Validation } from '@ngx-validate/core'; export interface RootParams { httpErrorConfig: HttpErrorConfig; validation?: Partial; + loaderDelay?: number; } export type ErrorScreenErrorCodes = 401 | 403 | 404 | 500; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index 037faee882..4aa8ba7d85 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -34,8 +34,9 @@ import { initLazyStyleHandler } from './handlers/lazy-style.handler'; import { RootParams } from './models/common'; import { THEME_SHARED_ROUTE_PROVIDERS } from './providers/route.provider'; import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token'; -import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token'; +import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token'; import { DateParserFormatter } from './utils/date-parser-formatter'; +import { LOADER_DELAY } from './tokens/lodaer-delay.token'; const declarationsWithExports = [ BreadcrumbComponent, @@ -77,7 +78,7 @@ export class BaseThemeSharedModule {} }) export class ThemeSharedModule { static forRoot( - { httpErrorConfig, validation = {} } = {} as RootParams, + { httpErrorConfig, validation = {}, loaderDelay = 500 } = {} as RootParams, ): ModuleWithProviders { return { ngModule: ThemeSharedModule, @@ -123,6 +124,10 @@ export class ThemeSharedModule { provide: VALIDATION_VALIDATE_ON_SUBMIT, useValue: validation.validateOnSubmit, }, + { + provide: LOADER_DELAY, + useValue: loaderDelay, + }, ], }; } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts index 18a2aac2f6..2065727e3e 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts @@ -1,4 +1,5 @@ export * from './append-content.token'; export * from './http-error.token'; export * from './lazy-styles.token'; +export * from './lodaer-delay.token'; export * from './suppress-unsaved-changes-warning.token'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tokens/lodaer-delay.token.ts b/npm/ng-packs/packages/theme-shared/src/lib/tokens/lodaer-delay.token.ts new file mode 100644 index 0000000000..270059e437 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tokens/lodaer-delay.token.ts @@ -0,0 +1,3 @@ +import { InjectionToken } from '@angular/core'; + +export const LOADER_DELAY = new InjectionToken('LOADER_DELAY'); From d3b2d8b745c67fa3c98c1034f862b3eaa8ff8f6a Mon Sep 17 00:00:00 2001 From: muhammedaltug Date: Tue, 5 Jan 2021 14:30:10 +0300 Subject: [PATCH 3/3] provide loader delay token in testing --- .../src/lib/tests/loader-bar.component.spec.ts | 7 ++++++- .../testing/src/lib/theme-shared-testing.module.ts | 5 +++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts index 6d1ab85a46..af1f8d874a 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts @@ -4,6 +4,7 @@ import { Subject, timer } from 'rxjs'; import { LoaderBarComponent } from '../components/loader-bar/loader-bar.component'; import { HttpWaitService, SubscriptionService } from '@abp/ng.core'; import { HttpRequest } from '@angular/common/http'; +import { LOADER_DELAY } from '../tokens/lodaer-delay.token'; describe('LoaderBarComponent', () => { let spectator: Spectator; @@ -13,7 +14,11 @@ describe('LoaderBarComponent', () => { const createComponent = createComponentFactory({ component: LoaderBarComponent, detectChanges: false, - providers: [SubscriptionService, { provide: Router, useValue: { events: events$ } }], + providers: [ + SubscriptionService, + { provide: Router, useValue: { events: events$ } }, + { provide: LOADER_DELAY, useValue: 0 }, + ], }); beforeEach(() => { diff --git a/npm/ng-packs/packages/theme-shared/testing/src/lib/theme-shared-testing.module.ts b/npm/ng-packs/packages/theme-shared/testing/src/lib/theme-shared-testing.module.ts index 52abb12ffe..629ebaad79 100644 --- a/npm/ng-packs/packages/theme-shared/testing/src/lib/theme-shared-testing.module.ts +++ b/npm/ng-packs/packages/theme-shared/testing/src/lib/theme-shared-testing.module.ts @@ -3,6 +3,7 @@ import { DateParserFormatter, DEFAULT_VALIDATION_BLUEPRINTS, THEME_SHARED_ROUTE_PROVIDERS, + LOADER_DELAY, } from '@abp/ng.theme.shared'; import { ModuleWithProviders, NgModule } from '@angular/core'; import { RouterTestingModule } from '@angular/router/testing'; @@ -46,6 +47,10 @@ export class ThemeSharedTestingModule { provide: VALIDATION_VALIDATE_ON_SUBMIT, useValue: validation.validateOnSubmit, }, + { + provide: LOADER_DELAY, + useValue: 0, + }, ], }; }