From d17d6b1c16dca21c682b116d2d3847f10e4856bd Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Wed, 27 Nov 2019 09:07:30 +0300 Subject: [PATCH] refactor(theme-shared): rename error.component BREAKING CHANGE: renamed error.component to http-error-wrapper.component --- .../http-error-wrapper.component.html} | 2 +- .../http-error-wrapper.component.scss} | 1 - .../http-error-wrapper.component.ts} | 19 +++++++++++++------ .../src/lib/handlers/error.handler.ts | 8 ++++---- .../src/lib/tests/error.component.spec.ts | 8 ++++---- .../src/lib/tests/error.handler.spec.ts | 14 ++++++++++---- .../src/lib/theme-shared.module.ts | 6 +++--- 7 files changed, 35 insertions(+), 23 deletions(-) rename npm/ng-packs/packages/theme-shared/src/lib/components/{error/error.component.html => http-error-wrapper/http-error-wrapper.component.html} (88%) rename npm/ng-packs/packages/theme-shared/src/lib/components/{error/error.component.scss => http-error-wrapper/http-error-wrapper.component.scss} (87%) rename npm/ng-packs/packages/theme-shared/src/lib/components/{error/error.component.ts => http-error-wrapper/http-error-wrapper.component.ts} (81%) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html similarity index 88% rename from npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.html rename to npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html index 8801240bbf..95f259225c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.scss similarity index 87% rename from npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.scss rename to npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.scss index a98b5a3ca6..b9f7690a5b 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.scss +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.scss @@ -1,7 +1,6 @@ .error { position: fixed; top: 0; - background-color: #fff; width: 100vw; height: 100vh; z-index: 999999; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts similarity index 81% rename from npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts rename to npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts index 70ddce726e..35ef50bf2a 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts @@ -1,25 +1,26 @@ import { Config, takeUntilDestroy } from '@abp/ng.core'; import { AfterViewInit, + ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, + Injector, OnDestroy, + OnInit, Type, ViewChild, - ApplicationRef, - Injector, } from '@angular/core'; import { fromEvent, Subject } from 'rxjs'; import { debounceTime, filter } from 'rxjs/operators'; @Component({ - selector: 'abp-error', - templateUrl: './error.component.html', - styleUrls: ['error.component.scss'], + selector: 'abp-http-error-wrapper', + templateUrl: './http-error-wrapper.component.html', + styleUrls: ['http-error-wrapper.component.scss'], }) -export class ErrorComponent implements AfterViewInit, OnDestroy { +export class HttpErrorWrapperComponent implements AfterViewInit, OnDestroy, OnInit { appRef: ApplicationRef; cfRes: ComponentFactoryResolver; @@ -38,6 +39,8 @@ export class ErrorComponent implements AfterViewInit, OnDestroy { hideCloseIcon = false; + backgroundColor: string; + @ViewChild('container', { static: false }) containerRef: ElementRef; @@ -45,6 +48,10 @@ export class ErrorComponent implements AfterViewInit, OnDestroy { return this.status ? `[${this.status}]` : ''; } + ngOnInit() { + this.backgroundColor = window.getComputedStyle(document.body).getPropertyValue('background-color'); + } + ngAfterViewInit() { if (this.customComponent) { const customComponentRef = this.cfRes.resolveComponentFactory(this.customComponent).create(this.injector); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts b/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts index ec0d3ac808..e4663c38aa 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts @@ -15,7 +15,7 @@ import { Navigate, RouterError, RouterState, RouterDataResolved } from '@ngxs/ro import { Actions, ofActionSuccessful, Store } from '@ngxs/store'; import { Observable, Subject } from 'rxjs'; import snq from 'snq'; -import { ErrorComponent } from '../components/error/error.component'; +import { HttpErrorWrapperComponent } from '../components/http-error-wrapper/http-error-wrapper.component'; import { HttpErrorConfig, ErrorScreenErrorCodes } from '../models/common'; import { Toaster } from '../models/toaster'; import { ConfirmationService } from '../services/confirmation.service'; @@ -45,7 +45,7 @@ export const DEFAULT_ERROR_MESSAGES = { @Injectable({ providedIn: 'root' }) export class ErrorHandler { - componentRef: ComponentRef; + componentRef: ComponentRef; constructor( private actions: Actions, @@ -196,11 +196,11 @@ export class ErrorHandler { ); } - createErrorComponent(instance: Partial) { + createErrorComponent(instance: Partial) { const renderer = this.rendererFactory.createRenderer(null, null); const host = renderer.selectRootElement(document.body, true); - this.componentRef = this.cfRes.resolveComponentFactory(ErrorComponent).create(this.injector); + this.componentRef = this.cfRes.resolveComponentFactory(HttpErrorWrapperComponent).create(this.injector); for (const key in this.componentRef.instance) { if (this.componentRef.instance.hasOwnProperty(key)) { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.component.spec.ts index 05e303e4c9..1d1f256c68 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.component.spec.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.component.spec.ts @@ -1,14 +1,14 @@ import { SpectatorHost, createHostFactory } from '@ngneat/spectator/jest'; -import { ErrorComponent } from '../components/error/error.component'; +import { HttpErrorWrapperComponent } from '../components/http-error-wrapper/http-error-wrapper.component'; import { LocalizationPipe } from '@abp/ng.core'; import { Store } from '@ngxs/store'; import { Renderer2, ElementRef } from '@angular/core'; import { Subject } from 'rxjs'; describe('ErrorComponent', () => { - let spectator: SpectatorHost; + let spectator: SpectatorHost; const createHost = createHostFactory({ - component: ErrorComponent, + component: HttpErrorWrapperComponent, declarations: [LocalizationPipe], mocks: [Store], providers: [ @@ -18,7 +18,7 @@ describe('ErrorComponent', () => { }); beforeEach(() => { - spectator = createHost(''); + spectator = createHost(''); spectator.component.destroy$ = new Subject(); }); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts index d3265691de..88ae00a874 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts @@ -22,14 +22,17 @@ describe('ErrorHandler', () => { component: DummyComponent, imports: [CoreModule, ThemeSharedModule.forRoot(), NgxsModule.forRoot([])], stubsEnabled: false, - routes: [{ path: '', component: DummyComponent }, { path: 'account/login', component: RouterOutletComponent }], + routes: [ + { path: '', component: DummyComponent }, + { path: 'account/login', component: RouterOutletComponent }, + ], }); beforeEach(() => { spectator = createComponent(); store = spectator.get(Store); - const abpError = document.querySelector('abp-error'); + const abpError = document.querySelector('abp-http-error-wrapper'); if (abpError) document.body.removeChild(abpError); }); @@ -133,14 +136,17 @@ describe('ErrorHandler with custom error component', () => { ErrorModule, ], stubsEnabled: false, - routes: [{ path: '', component: DummyComponent }, { path: 'account/login', component: RouterOutletComponent }], + routes: [ + { path: '', component: DummyComponent }, + { path: 'account/login', component: RouterOutletComponent }, + ], }); beforeEach(() => { spectator = createComponent(); store = spectator.get(Store); - const abpError = document.querySelector('abp-error'); + const abpError = document.querySelector('abp-http-error-wrapper'); if (abpError) document.body.removeChild(abpError); }); 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 f9cf4097cd..7464df328a 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 @@ -8,7 +8,7 @@ import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.componen import { ButtonComponent } from './components/button/button.component'; import { ChartComponent } from './components/chart/chart.component'; import { ConfirmationComponent } from './components/confirmation/confirmation.component'; -import { ErrorComponent } from './components/error/error.component'; +import { HttpErrorWrapperComponent } from './components/http-error-wrapper/http-error-wrapper.component'; import { LoaderBarComponent } from './components/loader-bar/loader-bar.component'; import { ModalComponent } from './components/modal/modal.component'; import { SortOrderIconComponent } from './components/sort-order-icon/sort-order-icon.component'; @@ -42,7 +42,7 @@ export function appendScript(injector: Injector) { ButtonComponent, ChartComponent, ConfirmationComponent, - ErrorComponent, + HttpErrorWrapperComponent, LoaderBarComponent, ModalComponent, TableEmptyMessageComponent, @@ -63,7 +63,7 @@ export function appendScript(injector: Injector) { TableSortDirective, ], providers: [DatePipe], - entryComponents: [ErrorComponent], + entryComponents: [HttpErrorWrapperComponent], }) export class ThemeSharedModule { constructor(private errorHandler: ErrorHandler) {}