From 9fe75a673b5ae590a6eb281ab79e7859dbadcdd2 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 2 Aug 2019 11:07:22 +0300 Subject: [PATCH 01/20] refactor(angular-template): remove unnecessary variable --- templates/app/angular/src/app/app.component.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/templates/app/angular/src/app/app.component.ts b/templates/app/angular/src/app/app.component.ts index 6e89cd41a5..bf2a27962a 100644 --- a/templates/app/angular/src/app/app.component.ts +++ b/templates/app/angular/src/app/app.component.ts @@ -7,6 +7,4 @@ import { Component } from '@angular/core'; `, }) -export class AppComponent { - title = 'myProjectName'; -} +export class AppComponent {} From dfa4555e2fdc48dc9ab61edb57a83f95b061e68c Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 2 Aug 2019 11:08:42 +0300 Subject: [PATCH 02/20] feature(theme): add route animation --- .../src/lib/components/layout/layout.component.html | 8 ++++++-- .../src/lib/components/layout/layout.component.ts | 2 ++ .../packages/theme-shared/src/lib/animations/index.ts | 1 + .../theme-shared/src/lib/animations/slide.animation.ts | 6 ++++++ npm/ng-packs/packages/theme-shared/src/public-api.ts | 1 + 5 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html index 969f41fa1c..0aebd0927b 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html @@ -8,8 +8,12 @@ -
- +
+
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts index cc2113d31a..8e5fddcc46 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts @@ -1,8 +1,10 @@ import { Component } from '@angular/core'; +import { slideFromBottom } from '@abp/ng.theme.shared'; @Component({ selector: ' abp-layout', templateUrl: './layout.component.html', + animations: [slideFromBottom], }) export class LayoutComponent { isCollapsed: boolean = false; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts new file mode 100644 index 0000000000..6fd1d939c4 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts @@ -0,0 +1 @@ +export * from './slide.animation'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts new file mode 100644 index 0000000000..90f46662be --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts @@ -0,0 +1,6 @@ +import { animate, state, style, transition, trigger, query } from '@angular/animations'; +export const slideFromBottom = trigger('routeAnimations', [ + state('void', style({ 'margin-top': '20px', opacity: '0' })), + state('*', style({ 'margin-top': '0px', opacity: '1' })), + transition(':enter', [animate('0.2s ease-out', style({ opacity: '1', 'margin-top': '0px' }))]), +]); diff --git a/npm/ng-packs/packages/theme-shared/src/public-api.ts b/npm/ng-packs/packages/theme-shared/src/public-api.ts index b7f52bc3f0..6a9eae0f64 100644 --- a/npm/ng-packs/packages/theme-shared/src/public-api.ts +++ b/npm/ng-packs/packages/theme-shared/src/public-api.ts @@ -3,6 +3,7 @@ */ export * from './lib/theme-shared.module'; +export * from './lib/animations'; export * from './lib/components'; export * from './lib/models'; export * from './lib/services'; From 492de784dc02501d459c372227e09d1449e62eaf Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 2 Aug 2019 11:09:03 +0300 Subject: [PATCH 03/20] feature(scripts): add process exit --- npm/ng-packs/scripts/build.js | 2 ++ npm/ng-packs/scripts/sync.js | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/scripts/build.js b/npm/ng-packs/scripts/build.js index 6b21c48e0f..ddd5de2663 100644 --- a/npm/ng-packs/scripts/build.js +++ b/npm/ng-packs/scripts/build.js @@ -35,4 +35,6 @@ import fse from 'fs-extra'; cwd: '../', }); }); + + process.exit(0); })(); diff --git a/npm/ng-packs/scripts/sync.js b/npm/ng-packs/scripts/sync.js index 366057bf8e..a212995cb3 100644 --- a/npm/ng-packs/scripts/sync.js +++ b/npm/ng-packs/scripts/sync.js @@ -1,5 +1,4 @@ // ESM syntax is supported. -import execa from 'execa'; import fse from 'fs-extra'; (async () => { @@ -21,4 +20,6 @@ import fse from 'fs-extra'; await fse.writeJSON(srcPackagePath, { ...srcPackage, version }, { spaces: 2 }); }); + + process.exit(0); })(); From aef116395f05b0cb916740e3172e943db7110798 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Fri, 2 Aug 2019 11:09:25 +0300 Subject: [PATCH 04/20] feature(account): add register functionality --- .../register/register.component.html | 20 +++++++---- .../components/register/register.component.ts | 33 +++++++++++++++++-- .../packages/account/src/lib/models/user.ts | 29 ++++++++++++++++ 3 files changed, 72 insertions(+), 10 deletions(-) create mode 100644 npm/ng-packs/packages/account/src/lib/models/user.ts diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html index 097af3ad0d..b834d9c6c4 100644 --- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html @@ -3,22 +3,28 @@
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 01e6eb59bd..ee0cdf6635 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 @@ -1,8 +1,12 @@ +import { ToasterService } from '@abp/ng.theme.shared'; import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { Router } from '@angular/router'; import { validatePassword } from '@ngx-validate/core'; -import { OAuthService } from 'angular-oauth2-oidc'; +import { throwError } from 'rxjs'; +import { catchError, finalize, take } from 'rxjs/operators'; +import snq from 'snq'; +import { RegisterRequest } from '../../models'; +import { AccountService } from '../../services/account.service'; const { maxLength, minLength, required, email } = Validators; @@ -13,7 +17,9 @@ const { maxLength, minLength, required, email } = Validators; export class RegisterComponent { form: FormGroup; - constructor(private fb: FormBuilder, private oauthService: OAuthService, private router: Router) { + inProgress: boolean; + + constructor(private fb: FormBuilder, private accountService: AccountService, private toasterService: ToasterService) { this.form = this.fb.group({ username: ['', [required, maxLength(255)]], password: [ @@ -26,5 +32,26 @@ export class RegisterComponent { onSubmit() { if (this.form.invalid) return; + + this.inProgress = true; + + const newUser = { + userName: this.form.get('username').value, + password: this.form.get('password').value, + emailAddress: this.form.get('email').value, + appName: 'angular', + } as RegisterRequest; + + this.accountService + .register(newUser) + .pipe( + take(1), + catchError(err => { + this.toasterService.error(snq(() => err.error.error_description, 'An error occured.'), 'Error'); + return throwError(err); + }), + finalize(() => (this.inProgress = false)), + ) + .subscribe(); } } diff --git a/npm/ng-packs/packages/account/src/lib/models/user.ts b/npm/ng-packs/packages/account/src/lib/models/user.ts new file mode 100644 index 0000000000..89e307ddc5 --- /dev/null +++ b/npm/ng-packs/packages/account/src/lib/models/user.ts @@ -0,0 +1,29 @@ +export interface RegisterRequest { + userName: string; + emailAddress: string; + password: string; + appName?: string; +} + +export interface RegisterResponse { + tenantId: string; + userName: string; + name: string; + surname: string; + email: string; + emailConfirmed: boolean; + phoneNumber: string; + phoneNumberConfirmed: boolean; + twoFactorEnabled: boolean; + lockoutEnabled: boolean; + lockoutEnd: string; + concurrencyStamp: string; + isDeleted: boolean; + deleterId: string; + deletionTime: string; + lastModificationTime: string; + lastModifierId: string; + creationTime: string; + creatorId: string; + id: string; +} From 5f24fb86c7704e1c9ea76eb11a575b70c973802a Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 2 Aug 2019 11:09:55 +0300 Subject: [PATCH 05/20] fix(ng-core): add type error control --- .../packages/core/src/lib/plugins/config.plugin.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 719de83566..a55b815064 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 @@ -1,9 +1,9 @@ -import { Injectable, Inject, InjectionToken, Type } from '@angular/core'; -import { NgxsPlugin, setValue, actionMatcher, InitState, UpdateState, NgxsNextPluginFn } from '@ngxs/store'; +import { Inject, Injectable, InjectionToken } from '@angular/core'; import { Router, Routes } from '@angular/router'; -import { ABP } from '../models'; +import { actionMatcher, InitState, NgxsNextPluginFn, NgxsPlugin, setValue, UpdateState } from '@ngxs/store'; import snq from 'snq'; -import { setChildRoute, sortRoutes, organizeRoutes } from '../utils/route-utils'; +import { ABP } from '../models'; +import { organizeRoutes } from '../utils/route-utils'; export const NGXS_CONFIG_PLUGIN_OPTIONS = new InjectionToken('NGXS_CONFIG_PLUGIN_OPTIONS'); @@ -45,7 +45,7 @@ function transformRoutes(routes: Routes = [], wrappers: ABP.FullRoute[] = []): a wrappers = abpRoutes.filter(ar => ar.wrapper); const transformed = [] as ABP.FullRoute[]; routes - .filter(route => route.component || route.loadChildren) + .filter(route => route.component || route.loadChildren || (route.data || {}).routes) .forEach(route => { const abpPackage = abpRoutes.find(abp => abp.path.toLowerCase() === route.path.toLowerCase()); const { length } = transformed; From 9676ea1bed44f1399190fe18c56c4110da7fa4e3 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 2 Aug 2019 11:10:20 +0300 Subject: [PATCH 06/20] fix(theme-shared): modal component --- .../theme-shared/src/lib/abstracts/toaster.ts | 8 +++--- .../lib/components/modal/modal.component.html | 5 ++-- .../lib/components/modal/modal.component.ts | 27 +++++++++++++------ .../src/lib/services/confirmation.service.ts | 8 +++--- .../src/lib/services/toaster.service.ts | 4 +-- 5 files changed, 31 insertions(+), 21 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts b/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts index 0e7d017edd..ece1288c7a 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts @@ -2,12 +2,12 @@ import { MessageService } from 'primeng/components/common/messageservice'; import { Observable, Subject } from 'rxjs'; import { Toaster } from '../models/toaster'; -export class AbstractToasterClass { - protected status$: Subject; +export class AbstractToaster { + status$: Subject; - protected key: string = 'abpToast'; + key: string = 'abpToast'; - protected sticky: boolean = false; + sticky: boolean = false; constructor(protected messageService: MessageService) {} info(message: string, title: string, options?: T): Observable { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html index 607350879f..8387246db3 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html @@ -1,9 +1,8 @@
- 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 new file mode 100644 index 0000000000..e27c32240f --- /dev/null +++ b/npm/ng-packs/packages/account/src/lib/services/account.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { RestService, Rest } from '@abp/ng.core'; +import { RegisterResponse, RegisterRequest, Tenant } from '../models'; + +@Injectable({ + providedIn: 'root', +}) +export class AccountService { + constructor(private rest: RestService) {} + + findTenant(tenantName: string): Observable { + const request: Rest.Request = { + method: 'GET', + url: `/api/abp/multi-tenancy/find-tenant/${tenantName}`, + }; + + return this.rest.request(request); + } + + register(body: RegisterRequest): Observable { + const request: Rest.Request = { + method: 'POST', + url: `/api/account/register`, + body, + }; + + return this.rest.request(request, { throwErr: true }); + } +} diff --git a/npm/ng-packs/packages/account/src/lib/services/index.ts b/npm/ng-packs/packages/account/src/lib/services/index.ts new file mode 100644 index 0000000000..e69de29bb2 From 86c16b5ee071a556cb613e98b97e1133b53bb85d Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Fri, 2 Aug 2019 11:12:18 +0300 Subject: [PATCH 09/20] feature(core): add tenantId to session state --- .../core/src/lib/actions/session.actions.ts | 4 ++++ .../packages/core/src/lib/models/session.ts | 1 + .../core/src/lib/states/session.state.ts | 16 ++++++++++++++-- .../src/lib/handlers/error.handler.ts | 3 ++- 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/actions/session.actions.ts b/npm/ng-packs/packages/core/src/lib/actions/session.actions.ts index 7b596a25c3..278fb59f4e 100644 --- a/npm/ng-packs/packages/core/src/lib/actions/session.actions.ts +++ b/npm/ng-packs/packages/core/src/lib/actions/session.actions.ts @@ -2,3 +2,7 @@ export class SessionSetLanguage { static readonly type = '[Session] Set Language'; constructor(public payload: string) {} } +export class SessionSetTenantId { + static readonly type = '[Session] Set Tenant Id'; + constructor(public payload: string) {} +} diff --git a/npm/ng-packs/packages/core/src/lib/models/session.ts b/npm/ng-packs/packages/core/src/lib/models/session.ts index ec595ff38d..44392b2692 100644 --- a/npm/ng-packs/packages/core/src/lib/models/session.ts +++ b/npm/ng-packs/packages/core/src/lib/models/session.ts @@ -1,5 +1,6 @@ export namespace Session { export interface State { language: string; + tenantId: string; } } diff --git a/npm/ng-packs/packages/core/src/lib/states/session.state.ts b/npm/ng-packs/packages/core/src/lib/states/session.state.ts index e312d605e8..8008084371 100644 --- a/npm/ng-packs/packages/core/src/lib/states/session.state.ts +++ b/npm/ng-packs/packages/core/src/lib/states/session.state.ts @@ -1,5 +1,5 @@ -import { State, Action, StateContext, Selector } from '@ngxs/store'; -import { SessionSetLanguage } from '../actions/session.actions'; +import { Action, Selector, State, StateContext } from '@ngxs/store'; +import { SessionSetLanguage, SessionSetTenantId } from '../actions/session.actions'; import { Session } from '../models/session'; @State({ @@ -12,6 +12,11 @@ export class SessionState { return language; } + @Selector() + static getSelectedTenantId({ tenantId }: Session.State): string { + return tenantId; + } + constructor() {} @Action(SessionSetLanguage) @@ -20,4 +25,11 @@ export class SessionState { language: payload, }); } + + @Action(SessionSetTenantId) + sessionSetTenantId({ patchState }: StateContext, { payload }: SessionSetTenantId) { + patchState({ + tenantId: payload, + }); + } } 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 3291c1b1af..9d1cfb9662 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 @@ -14,6 +14,7 @@ import { Observable } from 'rxjs'; import { ErrorComponent } from '../components/errors/error.component'; import { Toaster } from '../models/toaster'; import { ConfirmationService } from '../services/confirmation.service'; +import snq from 'snq'; const DEFAULTS = { defaultError: { @@ -50,7 +51,7 @@ export class ErrorHandler { ) { actions.pipe(ofActionSuccessful(RestOccurError)).subscribe(res => { const { payload: err = {} as HttpErrorResponse | any } = res; - const body = (err as HttpErrorResponse).error.error; + const body = snq(() => (err as HttpErrorResponse).error.error, DEFAULTS.defaultError.message); if (err.headers.get('_AbpErrorFormat')) { const confirmation$ = this.showError(null, null, body); From 903b27e6a91dbe86a11bc16e6c8423200a641671 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Fri, 2 Aug 2019 11:33:04 +0300 Subject: [PATCH 10/20] refactor(account): tenant dispatch --- .../src/lib/components/tenant-box/tenant-box.component.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts b/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts index 0ef6cc58ad..2052d135f4 100644 --- a/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts +++ b/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts @@ -26,7 +26,7 @@ export class TenantBoxComponent { } save() { - this.selected.name = this.selected.name ? this.selected.name : ''; + this.selected.name = this.selected.name || ''; this.accountService .findTenant(this.selected.name) @@ -39,13 +39,12 @@ export class TenantBoxComponent { ) .subscribe(({ success, tenantId }) => { if (success) { - this.store.dispatch(new SessionSetTenantId(tenantId)); this.isModalVisible = false; } else { this.toasterService.error(`Given tenant is not available: ${this.selected.name}`, 'Error'); this.selected = {} as ABP.BasicItem; - this.store.dispatch(new SessionSetTenantId(null)); } + this.store.dispatch(new SessionSetTenantId(success ? tenantId : null)); }); } } From c05f5c7305973283458d0e032cfbb3e931fdadbc Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 2 Aug 2019 15:11:06 +0300 Subject: [PATCH 11/20] feature: add autofocus directive & implement first input of all forms --- .../src/lib/components/login/login.component.html | 1 + .../components/register/register.component.html | 2 +- .../tenant-box/tenant-box.component.html | 4 ++-- npm/ng-packs/packages/core/src/lib/core.module.ts | 10 +++++++--- .../src/lib/directives/autofocus.directive.ts | 15 +++++++++++++++ .../packages/core/src/lib/directives/index.ts | 1 + .../core/src/lib/plugins/config.plugin.ts | 2 +- .../src/lib/components/roles/roles.component.html | 4 ++-- .../src/lib/components/users/users.component.html | 4 ++-- .../permission-management.component.html | 2 +- .../lib/components/tenants/tenants.component.html | 6 +++--- .../change-password.component.html | 5 +++-- .../lib/components/profile/profile.component.html | 4 ++-- 13 files changed, 41 insertions(+), 19 deletions(-) create mode 100644 npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts diff --git a/npm/ng-packs/packages/account/src/lib/components/login/login.component.html b/npm/ng-packs/packages/account/src/lib/components/login/login.component.html index d9cf92fe8e..170db44a8e 100644 --- a/npm/ng-packs/packages/account/src/lib/components/login/login.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/login/login.component.html @@ -14,6 +14,7 @@ type="text" id="login-input-user-name-or-email-address" formControlName="username" + autofocus />
diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html index b834d9c6c4..4590b521ac 100644 --- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html @@ -8,7 +8,7 @@
* + >
)
- +
Switch Tenant
 @@ -21,7 +21,7 @@
- +

{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}

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 3937da3a1e..9e822a4823 100644 --- a/npm/ng-packs/packages/core/src/lib/core.module.ts +++ b/npm/ng-packs/packages/core/src/lib/core.module.ts @@ -19,6 +19,7 @@ import { ProfileState } from './states/profile.state'; import { SessionState } from './states/session.state'; import { getInitialData } from './utils/initial-utils'; import { EllipsisDirective } from './directives/ellipsis.directive'; +import { AutofocusDirective } from './directives/autofocus.directive'; @NgModule({ imports: [ @@ -34,10 +35,11 @@ import { EllipsisDirective } from './directives/ellipsis.directive'; declarations: [ RouterOutletComponent, DynamicLayoutComponent, + AutofocusDirective, + EllipsisDirective, + LocalizationPipe, PermissionDirective, VisibilityDirective, - LocalizationPipe, - EllipsisDirective, ], exports: [ CommonModule, @@ -47,9 +49,11 @@ import { EllipsisDirective } from './directives/ellipsis.directive'; RouterModule, RouterOutletComponent, DynamicLayoutComponent, + AutofocusDirective, + EllipsisDirective, + LocalizationPipe, PermissionDirective, VisibilityDirective, - EllipsisDirective, LocalizationPipe, ], providers: [LocalizationPipe], diff --git a/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts new file mode 100644 index 0000000000..edd7c8497a --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts @@ -0,0 +1,15 @@ +import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core'; + +@Directive({ + selector: '[autofocus]', +}) +export class AutofocusDirective implements AfterViewInit { + @Input('autofocus') + delay: number = 0; + + constructor(private elRef: ElementRef) {} + + ngAfterViewInit(): void { + setTimeout(() => this.elRef.nativeElement.focus(), this.delay); + } +} diff --git a/npm/ng-packs/packages/core/src/lib/directives/index.ts b/npm/ng-packs/packages/core/src/lib/directives/index.ts index a20dd40c55..de5846382c 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/index.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/index.ts @@ -1,3 +1,4 @@ +export * from './autofocus.directive'; export * from './ellipsis.directive'; export * from './permission.directive'; export * from './visibility.directive'; 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 a55b815064..14e05c05b8 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 @@ -45,7 +45,7 @@ function transformRoutes(routes: Routes = [], wrappers: ABP.FullRoute[] = []): a wrappers = abpRoutes.filter(ar => ar.wrapper); const transformed = [] as ABP.FullRoute[]; routes - .filter(route => route.component || route.loadChildren || (route.data || {}).routes) + .filter(route => (route.data || {}).routes && (route.component || route.loadChildren)) .forEach(route => { const abpPackage = abpRoutes.find(abp => abp.path.toLowerCase() === route.path.toLowerCase()); const { length } = transformed; 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 0749ef51ab..a87c23efb7 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 @@ -58,7 +58,7 @@
- +

{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}

 @@ -68,7 +68,7 @@
* - +
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 3801acc6d2..44edb889e6 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 @@ -77,7 +77,7 @@
- +

{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}

 @@ -92,7 +92,7 @@
* - +
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html index 94b45d982b..d91bac10c1 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html @@ -1,4 +1,4 @@ - +

{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}

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 102b1fd506..6bf58659ef 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 @@ -88,7 +88,7 @@
- +

{{ selectedModalContent.title | abpLocalization }}

 @@ -112,7 +112,7 @@
- +
@@ -123,7 +123,7 @@
- + diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html index 76b83162b5..9993242caa 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html @@ -1,4 +1,4 @@ - +

{{ 'AbpIdentity::ChangePassword' | abpLocalization }}

 @@ -6,7 +6,8 @@
* + > *
+

{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}

 @@ -6,7 +6,7 @@
* + > *
From 19e671eac19a525601756fde2f3396fc41eece0c Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 2 Aug 2019 15:11:41 +0300 Subject: [PATCH 12/20] refactor(theme-shared): improve modal ux performance --- .../src/lib/components/modal/README.md | 2 +- .../lib/components/modal/modal.component.ts | 25 +++++++++++-------- .../theme-shared/src/lib/contants/styles.ts | 4 +-- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md index bb4f9a7aa2..cf51e03845 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md @@ -3,7 +3,7 @@ Example Usage: ```html - +

Modal Title

 diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts index b4beff5ec7..daea872593 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts @@ -17,6 +17,8 @@ import { Toaster } from '../../models/toaster'; export type ModalSize = 'sm' | 'md' | 'lg' | 'xl'; +const ANIMATION_TIMEOUT = 200; + @Component({ selector: 'abp-modal', templateUrl: './modal.component.html', @@ -30,10 +32,12 @@ export class ModalComponent implements OnDestroy { if (typeof value !== 'boolean') return; if (!this.modalContent) { - setTimeout(() => { - this.showModal = value; - this.visible = value; - }, 0); + if (value) { + setTimeout(() => { + this.showModal = value; + this.visible = value; + }, 0); + } return; } @@ -47,7 +51,7 @@ export class ModalComponent implements OnDestroy { this.setVisible(value); // this.renderer.removeClass(this.modalContent.nativeElement, 'fade-out-top'); this.ngOnDestroy(); - }, 350); + }, ANIMATION_TIMEOUT - 10); } } @@ -91,7 +95,7 @@ export class ModalComponent implements OnDestroy { this.showModal = value; value - ? timer(500) + ? timer(ANIMATION_TIMEOUT + 100) .pipe(take(1)) .subscribe(_ => (this.closable = true)) : (this.closable = false); @@ -100,7 +104,7 @@ export class ModalComponent implements OnDestroy { listen() { fromEvent(document, 'click') .pipe( - debounceTime(350), + debounceTime(100), takeUntil(this.destroy$), filter((event: MouseEvent) => { const isOpenConfirmation = this.isOpenConfirmation || document.querySelector('p-toastitem'); @@ -120,8 +124,8 @@ export class ModalComponent implements OnDestroy { fromEvent(document, 'keyup') .pipe( takeUntil(this.destroy$), + debounceTime(250), filter((key: KeyboardEvent) => key && key.code === 'Escape' && this.closable), - debounceTime(350), ) .subscribe(_ => { this.close(); @@ -133,7 +137,6 @@ export class ModalComponent implements OnDestroy { .pipe( takeUntil(this.destroy$), filter(() => !!(this.closable && this.modalContent)), - debounceTime(350), ) .subscribe(() => this.close()); } @@ -150,7 +153,7 @@ export class ModalComponent implements OnDestroy { this.confirmationService .warn('AbpAccount::AreYouSureYouWantToCancelEditingWarningMessage', 'AbpAccount::AreYouSure') .subscribe((status: Toaster.Status) => { - timer(400).subscribe(() => { + timer(ANIMATION_TIMEOUT).subscribe(() => { this.isOpenConfirmation = false; }); @@ -166,7 +169,7 @@ export class ModalComponent implements OnDestroy { function getFlatNodes(nodes: NodeList): HTMLElement[] { return Array.from(nodes).reduce( - (acc, val) => [...acc, ...(val.childNodes && val.childNodes.length ? Array.from(val.childNodes) : [val])], + (acc, val) => [...acc, ...(val.childNodes && val.childNodes.length ? getFlatNodes(val.childNodes) : [val])], [], ); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts index 348e9ab2aa..12aeadabf5 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts @@ -38,11 +38,11 @@ export default ` /* Date: Fri, 2 Aug 2019 15:36:57 +0300 Subject: [PATCH 13/20] fix(theme-basic): add pointer class to nav elements --- .../lib/components/roles/roles.component.html | 2 +- .../layout-application.component.html | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 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 0749ef51ab..bb9b405162 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 @@ -58,7 +58,7 @@
- +

{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}

 diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html index be9eee5775..76df81b208 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html @@ -16,13 +16,13 @@
  • - + {{ route.name | abpLocalization }}
    @@ -53,13 +53,13 @@
    -
    +
    -
  • - +
  • + {{ defaultLanguage$ | async }}
    @@ -106,8 +106,8 @@ -
  • - +
  • + {{ (currentUser$ | async)?.userName }}
    From b7a7a68aa69c682abe61733d476b42ba4fcf3c0b Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 2 Aug 2019 17:41:06 +0300 Subject: [PATCH 14/20] feature(theme-shared): add new inputs and output to modal --- .../src/lib/components/modal/modal.component.html | 7 ++++++- .../src/lib/components/modal/modal.component.ts | 10 +++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html index 8387246db3..8db9f31cb7 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html @@ -19,7 +19,12 @@
    -
    +