From 90aaac0da8573aa8702f15a1a34cebbde6eb8867 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 20 Aug 2019 15:21:45 +0300 Subject: [PATCH 1/5] refactor(theme-basic): move change-password & profile components --- .../core/src/lib/plugins/config.plugin.ts | 1 + .../theme-basic/src/lib/theme-basic.module.ts | 12 +++++------- .../change-password.component.html | 0 .../change-password/change-password.component.ts | 2 +- .../theme-shared/src/lib/components/index.ts | 2 ++ .../lib/components/profile/profile.component.html | 0 .../lib/components/profile/profile.component.ts | 0 .../theme-shared/src/lib/theme-shared.module.ts | 15 ++++++++++++++- 8 files changed, 23 insertions(+), 9 deletions(-) rename npm/ng-packs/packages/{theme-basic => theme-shared}/src/lib/components/change-password/change-password.component.html (100%) rename npm/ng-packs/packages/{theme-basic => theme-shared}/src/lib/components/change-password/change-password.component.ts (97%) rename npm/ng-packs/packages/{theme-basic => theme-shared}/src/lib/components/profile/profile.component.html (100%) rename npm/ng-packs/packages/{theme-basic => theme-shared}/src/lib/components/profile/profile.component.ts (100%) diff --git a/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts b/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts index 5d4d1ab454..05f7a12250 100644 --- a/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts +++ b/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts @@ -58,6 +58,7 @@ function transformRoutes(routes: Routes = [], wrappers: ABP.FullRoute[] = []): a if (transformed.length === length) { transformed.push({ + ...route.data.routes, path: route.path, name: snq(() => route.data.routes.name, route.path), children: route.data.routes.children || [], diff --git a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts index a978a5c3da..2fe5dabae4 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts @@ -1,22 +1,20 @@ import { CoreModule } from '@abp/ng.core'; +import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { NgModule } from '@angular/core'; import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; -import { ChangePasswordComponent } from './components/change-password/change-password.component'; +import { NgxValidateCoreModule } from '@ngx-validate/core'; +import { NgxsModule } from '@ngxs/store'; +import { ToastModule } from 'primeng/toast'; import { AccountLayoutComponent } from './components/account-layout/account-layout.component'; import { ApplicationLayoutComponent } from './components/application-layout/application-layout.component'; import { EmptyLayoutComponent } from './components/empty-layout/empty-layout.component'; import { LayoutComponent } from './components/layout/layout.component'; -import { ProfileComponent } from './components/profile/profile.component'; -import { ThemeSharedModule } from '@abp/ng.theme.shared'; -import { ToastModule } from 'primeng/toast'; -import { NgxValidateCoreModule } from '@ngx-validate/core'; -import { NgxsModule } from '@ngxs/store'; import { LayoutState } from './states/layout.state'; export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent]; @NgModule({ - declarations: [...LAYOUTS, LayoutComponent, ChangePasswordComponent, ProfileComponent], + declarations: [...LAYOUTS, LayoutComponent], imports: [ CoreModule, ThemeSharedModule, diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/change-password/change-password.component.html similarity index 100% rename from npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html rename to npm/ng-packs/packages/theme-shared/src/lib/components/change-password/change-password.component.html diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/change-password/change-password.component.ts similarity index 97% rename from npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts rename to npm/ng-packs/packages/theme-shared/src/lib/components/change-password/change-password.component.ts index 6c372a4620..00d285b3c5 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/change-password/change-password.component.ts @@ -1,5 +1,4 @@ import { ChangePassword } from '@abp/ng.core'; -import { ToasterService } from '@abp/ng.theme.shared'; import { Component, EventEmitter, @@ -16,6 +15,7 @@ import { comparePasswords } from '@ngx-validate/core'; import { Store } from '@ngxs/store'; import snq from 'snq'; import { finalize } from 'rxjs/operators'; +import { ToasterService } from '../../services/toaster.service'; const { minLength, required } = Validators; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts index 2e559f366f..3d94c64329 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts @@ -1,5 +1,7 @@ export * from './button/button.component'; +export * from './change-password/change-password.component'; export * from './confirmation/confirmation.component'; export * from './loader-bar/loader-bar.component'; export * from './modal/modal.component'; +export * from './profile/profile.component'; export * from './toast/toast.component'; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/profile/profile.component.html similarity index 100% rename from npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html rename to npm/ng-packs/packages/theme-shared/src/lib/components/profile/profile.component.html diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/profile/profile.component.ts similarity index 100% rename from npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts rename to npm/ng-packs/packages/theme-shared/src/lib/components/profile/profile.component.ts 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 bf2b9e411a..ffa3ee3f44 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 @@ -15,6 +15,8 @@ import styles from './contants/styles'; import { ErrorHandler } from './handlers/error.handler'; import { ButtonComponent } from './components/button/button.component'; import { ValidationErrorComponent } from './components/errors/validation-error.component'; +import { ChangePasswordComponent } from './components/change-password/change-password.component'; +import { ProfileComponent } from './components/profile/profile.component'; export function appendScript(injector: Injector) { const fn = function() { @@ -61,8 +63,19 @@ export function appendScript(injector: Injector) { ErrorComponent, LoaderBarComponent, ValidationErrorComponent, + ChangePasswordComponent, + ProfileComponent, + ], + exports: [ + NgbModalModule, + ButtonComponent, + ConfirmationComponent, + ToastComponent, + ModalComponent, + LoaderBarComponent, + ChangePasswordComponent, + ProfileComponent, ], - exports: [NgbModalModule, ButtonComponent, ConfirmationComponent, ToastComponent, ModalComponent, LoaderBarComponent], entryComponents: [ErrorComponent, ValidationErrorComponent], }) export class ThemeSharedModule { From cffb173f046f8d7465a0b7e0c917f6847bc90c92 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Wed, 21 Aug 2019 08:16:55 +0300 Subject: [PATCH 2/5] feature(theme-shared): stop loading process when occured nav error --- .../src/lib/components/loader-bar/loader-bar.component.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 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 30065b0b02..b6104263cb 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,6 +1,6 @@ import { StartLoader, StopLoader } from '@abp/ng.core'; import { Component, Input, OnDestroy } from '@angular/core'; -import { NavigationEnd, NavigationStart, Router } from '@angular/router'; +import { NavigationEnd, NavigationStart, Router, NavigationError } from '@angular/router'; import { takeUntilDestroy } from '@ngx-validate/core'; import { Actions, ofActionSuccessful } from '@ngxs/store'; import { filter } from 'rxjs/operators'; @@ -45,7 +45,10 @@ export class LoaderBarComponent implements OnDestroy { router.events .pipe( - filter(event => event instanceof NavigationStart || event instanceof NavigationEnd), + filter( + event => + event instanceof NavigationStart || event instanceof NavigationEnd || event instanceof NavigationError, + ), takeUntilDestroy(this), ) .subscribe(event => { From efa0a4e1bd5184afc9bebd670aaa8447ca841ce5 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Wed, 21 Aug 2019 12:59:59 +0300 Subject: [PATCH 3/5] fix(core): localization pipe sync value problem --- .../core/src/lib/pipes/localization.pipe.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/pipes/localization.pipe.ts b/npm/ng-packs/packages/core/src/lib/pipes/localization.pipe.ts index 7073f6da3a..0766a50091 100644 --- a/npm/ng-packs/packages/core/src/lib/pipes/localization.pipe.ts +++ b/npm/ng-packs/packages/core/src/lib/pipes/localization.pipe.ts @@ -2,22 +2,26 @@ import { Pipe, PipeTransform, OnDestroy } from '@angular/core'; import { Store } from '@ngxs/store'; import { ConfigState } from '../states'; import { takeUntilDestroy } from '../utils'; -import { distinctUntilChanged } from 'rxjs/operators'; +import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; @Pipe({ name: 'abpLocalization', pure: false, // required to update the value }) export class LocalizationPipe implements PipeTransform, OnDestroy { - initialized: boolean = false; + initialValue: string = ''; value: string; + destroy$ = new Subject(); + constructor(private store: Store) {} - transform(value: string, ...interpolateParams: string[]): string { - if (!this.initialized) { - this.initialized = true; + transform(value: string = '', ...interpolateParams: string[]): string { + if (this.initialValue !== value) { + this.initialValue = value; + this.destroy$.next(); this.store .select( @@ -27,6 +31,7 @@ export class LocalizationPipe implements PipeTransform, OnDestroy { ), ) .pipe( + takeUntil(this.destroy$), takeUntilDestroy(this), distinctUntilChanged(), ) From d5035c4400cb1f99d32b79b42d05ffa0d60f26fd Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Wed, 21 Aug 2019 13:09:39 +0300 Subject: [PATCH 4/5] fix(account): rename appName --- .../account/src/lib/components/register/register.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts b/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts index e70bc35b7f..01b0377def 100644 --- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts +++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts @@ -47,7 +47,7 @@ export class RegisterComponent { userName: this.form.get('username').value, password: this.form.get('password').value, emailAddress: this.form.get('email').value, - appName: 'angular', + appName: 'Angular', } as RegisterRequest; this.accountService From 2b9e6002c6d8e67a1b2997f17ba75d96fd939642 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Wed, 21 Aug 2019 14:30:35 +0300 Subject: [PATCH 5/5] refactor(core): rename throwErr parameter in rest.service add throwError after the handle error add autofocus to confirmation --- .../src/lib/services/account.service.ts | 2 +- .../lib/directives/form-submit.directive.ts | 47 +++++++++++++------ .../packages/core/src/lib/models/rest.ts | 2 +- .../core/src/lib/services/profile.service.ts | 4 +- .../core/src/lib/services/rest.service.ts | 6 +-- .../confirmation/confirmation.component.ts | 8 +++- 6 files changed, 47 insertions(+), 22 deletions(-) diff --git a/npm/ng-packs/packages/account/src/lib/services/account.service.ts b/npm/ng-packs/packages/account/src/lib/services/account.service.ts index 6a660a695d..dc7693b693 100644 --- a/npm/ng-packs/packages/account/src/lib/services/account.service.ts +++ b/npm/ng-packs/packages/account/src/lib/services/account.service.ts @@ -25,6 +25,6 @@ export class AccountService { body, }; - return this.rest.request(request, { throwErr: true }); + return this.rest.request(request, { skipHandleError: true }); } } diff --git a/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts index a3ea93a753..c77016ce7f 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts @@ -1,19 +1,18 @@ import { + ChangeDetectorRef, Directive, ElementRef, + EventEmitter, + Input, OnDestroy, OnInit, - Self, - ChangeDetectorRef, - HostBinding, - Input, Output, - EventEmitter, + Self, } from '@angular/core'; -import { FormGroupDirective, FormGroup, FormControl, ɵNgNoValidate } from '@angular/forms'; +import { FormControl, FormGroup, FormGroupDirective } from '@angular/forms'; import { fromEvent } from 'rxjs'; -import { takeUntilDestroy } from '../utils'; import { debounceTime, filter } from 'rxjs/operators'; +import { takeUntilDestroy } from '../utils'; type Controls = { [key: string]: FormControl } | FormGroup[]; @@ -24,6 +23,11 @@ export class FormSubmitDirective implements OnInit, OnDestroy { @Input() notValidateOnSubmit: string | boolean; + @Output() + ngSubmit = new EventEmitter(); + + executedNgSubmit: boolean = false; + constructor( @Self() private formGroupDirective: FormGroupDirective, private host: ElementRef, @@ -31,6 +35,11 @@ export class FormSubmitDirective implements OnInit, OnDestroy { ) {} ngOnInit() { + this.formGroupDirective.ngSubmit.pipe(takeUntilDestroy(this)).subscribe(() => { + this.markAsDirty(); + this.executedNgSubmit = true; + }); + fromEvent(this.host.nativeElement as HTMLElement, 'keyup') .pipe( debounceTime(200), @@ -38,7 +47,11 @@ export class FormSubmitDirective implements OnInit, OnDestroy { takeUntilDestroy(this), ) .subscribe(() => { - this.host.nativeElement.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); + if (!this.executedNgSubmit) { + this.host.nativeElement.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); + } + + this.executedNgSubmit = false; }); fromEvent(this.host.nativeElement, 'submit') @@ -47,16 +60,22 @@ export class FormSubmitDirective implements OnInit, OnDestroy { filter(() => !this.notValidateOnSubmit && typeof this.notValidateOnSubmit !== 'string'), ) .subscribe(() => { - const { form } = this.formGroupDirective; - - setDirty(form.controls as { [key: string]: FormControl }); - form.markAsDirty(); - - this.cdRef.detectChanges(); + if (!this.executedNgSubmit) { + this.markAsDirty(); + } }); } ngOnDestroy(): void {} + + markAsDirty() { + const { form } = this.formGroupDirective; + + setDirty(form.controls as { [key: string]: FormControl }); + form.markAsDirty(); + + this.cdRef.detectChanges(); + } } function setDirty(controls: Controls) { diff --git a/npm/ng-packs/packages/core/src/lib/models/rest.ts b/npm/ng-packs/packages/core/src/lib/models/rest.ts index 81e035f0d4..a494bbbc63 100644 --- a/npm/ng-packs/packages/core/src/lib/models/rest.ts +++ b/npm/ng-packs/packages/core/src/lib/models/rest.ts @@ -2,7 +2,7 @@ import { HttpHeaders, HttpParams } from '@angular/common/http'; export namespace Rest { export interface Config { - throwErr?: boolean; + skipHandleError?: boolean; observe?: Observe; } diff --git a/npm/ng-packs/packages/core/src/lib/services/profile.service.ts b/npm/ng-packs/packages/core/src/lib/services/profile.service.ts index 48065619ff..38d5fb3a7b 100644 --- a/npm/ng-packs/packages/core/src/lib/services/profile.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/profile.service.ts @@ -28,13 +28,13 @@ export class ProfileService { return this.rest.request(request); } - changePassword(body: Profile.ChangePasswordRequest, throwErr: boolean = false): Observable { + changePassword(body: Profile.ChangePasswordRequest, skipHandleError: boolean = false): Observable { const request: Rest.Request = { method: 'POST', url: '/api/identity/my-profile/change-password', body, }; - return this.rest.request(request, { throwErr }); + return this.rest.request(request, { skipHandleError }); } } diff --git a/npm/ng-packs/packages/core/src/lib/services/rest.service.ts b/npm/ng-packs/packages/core/src/lib/services/rest.service.ts index 4d003e2daf..7ff1a42af0 100644 --- a/npm/ng-packs/packages/core/src/lib/services/rest.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/rest.service.ts @@ -16,17 +16,17 @@ export class RestService { handleError(err: any): Observable { this.store.dispatch(new RestOccurError(err)); console.error(err); - return NEVER; + return throwError(err); } request(request: HttpRequest | Rest.Request, config: Rest.Config = {}, api?: string): Observable { - const { observe = Rest.Observe.Body, throwErr } = config; + const { observe = Rest.Observe.Body, skipHandleError } = config; const url = api || this.store.selectSnapshot(ConfigState.getApiUrl()) + request.url; const { method, ...options } = request; return this.http.request(method, url, { observe, ...options } as any).pipe( observe === Rest.Observe.Body ? take(1) : null, catchError(err => { - if (throwErr) { + if (skipHandleError) { return throwError(err); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts index 6c3b9254c4..917e981338 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts @@ -27,7 +27,13 @@ import { Toaster } from '../../models/toaster'; -