From 36e819e5d5687e2bce36f53db8479c512fe619a8 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Thu, 1 Aug 2019 10:25:07 +0300 Subject: [PATCH 1/3] refactor(theme-shared): add error destroy, change name, fix code quality --- .../components/errors/error-500.component.ts | 33 ------------- ...00.component.scss => error.component.scss} | 0 .../lib/components/errors/error.component.ts | 45 ++++++++++++++++++ .../src/lib/handlers/error.handler.ts | 47 ++++++++++++++----- .../src/lib/theme-shared.module.ts | 6 +-- 5 files changed, 83 insertions(+), 48 deletions(-) delete mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.ts rename npm/ng-packs/packages/theme-shared/src/lib/components/errors/{error-500.component.scss => error.component.scss} (100%) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.ts deleted file mode 100644 index d4871f20ab..0000000000 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Store } from '@ngxs/store'; - -@Component({ - selector: 'abp-error-500', - template: ` -
-
-
-
-

- Oops! -

-
- Sorry, an error has occured. -
-
- Take Me Home - -
-
-
-
-
- `, - styleUrls: ['error-500.component.scss'], -}) -export class Error500Component implements OnInit { - constructor(private store: Store) {} - - ngOnInit(): void {} -} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.scss similarity index 100% rename from npm/ng-packs/packages/theme-shared/src/lib/components/errors/error-500.component.scss rename to npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.scss diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts new file mode 100644 index 0000000000..f532e8689d --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts @@ -0,0 +1,45 @@ +import { Component, Renderer2, ElementRef } from '@angular/core'; + +@Component({ + selector: 'abp-error', + template: ` +
+ +
+
+
+

+ {{ title }} +

+
+ {{ details }} +
+
+ Take me home + +
+
+
+
+
+ `, + styleUrls: ['error.component.scss'], +}) +export class ErrorComponent { + title = 'Oops!'; + + details = 'Sorry, an error has occured.'; + + renderer: Renderer2; + + elementRef: ElementRef; + + host: any; + + destroy() { + this.renderer.removeChild(this.host, this.elementRef.nativeElement); + } +} 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 0d09158e23..07328a1356 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 @@ -1,22 +1,19 @@ import { RestOccurError } from '@abp/ng.core'; import { HttpErrorResponse } from '@angular/common/http'; import { - Injectable, ApplicationRef, ComponentFactoryResolver, - RendererFactory2, - Inject, - ReflectiveInjector, - Injector, EmbeddedViewRef, + Injectable, + Injector, + RendererFactory2, } from '@angular/core'; import { Navigate, RouterState } from '@ngxs/router-plugin'; import { Actions, ofActionSuccessful, Store } from '@ngxs/store'; import { Observable } from 'rxjs'; +import { ErrorComponent } from '../components/errors/error.component'; import { Toaster } from '../models/toaster'; import { ConfirmationService } from '../services/confirmation.service'; -import { DOCUMENT } from '@angular/common'; -import { Error500Component } from '../components/errors/error-500.component'; const DEFAULTS = { defaultError: { @@ -71,17 +68,17 @@ export class ErrorHandler { ); break; case 403: - this.showError(DEFAULTS.defaultError403.details, DEFAULTS.defaultError403.message); + this.show403(); break; case 404: this.showError(DEFAULTS.defaultError404.details, DEFAULTS.defaultError404.message); break; case 500: - this.show500Component(); + this.show500(); break; case 0: if ((err as HttpErrorResponse).statusText === 'Unknown Error') { - this.show500Component(); + this.show500(); } break; default: @@ -116,11 +113,37 @@ export class ErrorHandler { ); } - private show500Component() { + private show500() { + this.createErrorComponent({ + title: '500', + details: 'Sorry, an error has occured.', + }); + } + + private show403() { + this.createErrorComponent({ + title: DEFAULTS.defaultError403.message, + details: DEFAULTS.defaultError403.details, + }); + } + + createErrorComponent(instance: Partial) { const renderer = this.rendererFactory.createRenderer(null, null); const host = renderer.selectRootElement('app-root', true); - const componentRef = this.cfRes.resolveComponentFactory(Error500Component).create(this.injector); + + const componentRef = this.cfRes.resolveComponentFactory(ErrorComponent).create(this.injector); + + for (const key in componentRef.instance) { + if (componentRef.instance.hasOwnProperty(key)) { + componentRef.instance[key] = instance[key]; + } + } + this.appRef.attachView(componentRef.hostView); renderer.appendChild(host, (componentRef.hostView as EmbeddedViewRef).rootNodes[0]); + + componentRef.instance.renderer = renderer; + componentRef.instance.elementRef = componentRef.location; + componentRef.instance.host = host; } } 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 5e02fb1c84..c90f969b91 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 @@ -7,7 +7,7 @@ import { ToastModule } from 'primeng/toast'; import { forkJoin } from 'rxjs'; import { take } from 'rxjs/operators'; import { ConfirmationComponent } from './components/confirmation/confirmation.component'; -import { Error500Component } from './components/errors/error-500.component'; +import { ErrorComponent } from './components/errors/error.component'; import { LoaderBarComponent } from './components/loader-bar/loader-bar.component'; import { ModalComponent } from './components/modal/modal.component'; import { ToastComponent } from './components/toast/toast.component'; @@ -41,9 +41,9 @@ export function appendScript(injector: Injector) { targetSelector: '.form-group', }), ], - declarations: [ConfirmationComponent, ToastComponent, ModalComponent, Error500Component, LoaderBarComponent], + declarations: [ConfirmationComponent, ToastComponent, ModalComponent, ErrorComponent, LoaderBarComponent], exports: [NgbModalModule, ConfirmationComponent, ToastComponent, ModalComponent, LoaderBarComponent], - entryComponents: [Error500Component], + entryComponents: [ErrorComponent], }) export class ThemeSharedModule { static forRoot(): ModuleWithProviders { From 1b852f5fb705eeeaf7f0c5ebb1265a9dbc22d192 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Thu, 1 Aug 2019 10:25:31 +0300 Subject: [PATCH 2/3] feature(theme-shared): add route subscription to loader-bar.component --- .../loader-bar/loader-bar.component.ts | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) 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 7ab7d2935e..a76e051db2 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,9 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, OnDestroy } from '@angular/core'; import { Actions, ofActionSuccessful } from '@ngxs/store'; import { LoaderStart, LoaderStop } from '@abp/ng.core'; import { filter } from 'rxjs/operators'; +import { Router, NavigationStart, NavigationEnd } from '@angular/router'; +import { takeUntilDestroy } from '@ngx-validate/core'; @Component({ selector: 'abp-loader-bar', @@ -12,7 +14,7 @@ import { filter } from 'rxjs/operators'; `, styleUrls: ['./loader-bar.component.scss'], }) -export class LoaderBarComponent { +export class LoaderBarComponent implements OnDestroy { @Input() containerClass: string = 'abp-loader-bar'; @@ -29,21 +31,31 @@ export class LoaderBarComponent { interval: any; - constructor(private actions: Actions) { + constructor(private actions: Actions, private router: Router) { actions .pipe( ofActionSuccessful(LoaderStart, LoaderStop), filter(this.filter), + takeUntilDestroy(this), ) .subscribe(action => { - if (action instanceof LoaderStart) { - this.startLoading(); - } else { - this.stopLoading(); - } + if (action instanceof LoaderStart) this.startLoading(); + else this.stopLoading(); + }); + + router.events + .pipe( + filter(event => event instanceof NavigationStart || event instanceof NavigationEnd), + takeUntilDestroy(this), + ) + .subscribe(event => { + if (event instanceof NavigationStart) this.startLoading(); + else this.stopLoading(); }); } + ngOnDestroy() {} + startLoading() { this.isLoading = true; const interval = setInterval(() => { From 2809ec8d4e17fdc05e67254346d0dea7fbd08677 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Thu, 1 Aug 2019 10:37:06 +0300 Subject: [PATCH 3/3] fix(theme-shared): improve code quality of error.handler --- .../src/lib/handlers/error.handler.ts | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) 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 07328a1356..3291c1b1af 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 @@ -68,17 +68,26 @@ export class ErrorHandler { ); break; case 403: - this.show403(); + this.createErrorComponent({ + title: DEFAULTS.defaultError403.message, + details: DEFAULTS.defaultError403.details, + }); break; case 404: this.showError(DEFAULTS.defaultError404.details, DEFAULTS.defaultError404.message); break; case 500: - this.show500(); + this.createErrorComponent({ + title: '500', + details: 'Sorry, an error has occured.', + }); break; case 0: if ((err as HttpErrorResponse).statusText === 'Unknown Error') { - this.show500(); + this.createErrorComponent({ + title: 'Unknown Error', + details: 'Sorry, an error has occured.', + }); } break; default: @@ -113,20 +122,6 @@ export class ErrorHandler { ); } - private show500() { - this.createErrorComponent({ - title: '500', - details: 'Sorry, an error has occured.', - }); - } - - private show403() { - this.createErrorComponent({ - title: DEFAULTS.defaultError403.message, - details: DEFAULTS.defaultError403.details, - }); - } - createErrorComponent(instance: Partial) { const renderer = this.rendererFactory.createRenderer(null, null); const host = renderer.selectRootElement('app-root', true);