From aff3231d99f684b2c1ebf70b89cb77bcc215e8d1 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Mon, 25 Mar 2024 15:40:18 +0300 Subject: [PATCH 1/6] fix: sidebar flicker on reloading acount pages --- .../components/dynamic-layout.component.ts | 68 +++++++------------ 1 file changed, 25 insertions(+), 43 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts index 5118f7ec42..6d1bc58ba2 100644 --- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts +++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts @@ -1,49 +1,37 @@ -import { - Component, - inject, - isDevMode, - OnInit, - Optional, - SkipSelf, - Type -} from '@angular/core'; -import {ActivatedRoute, Router} from '@angular/router'; -import {eLayoutType} from '../enums/common'; -import {ABP} from '../models'; -import {ReplaceableComponents} from '../models/replaceable-components'; -import {LocalizationService} from '../services/localization.service'; -import {ReplaceableComponentsService} from '../services/replaceable-components.service'; -import {RouterEvents} from '../services/router-events.service'; -import {RoutesService} from '../services/routes.service'; -import {SubscriptionService} from '../services/subscription.service'; -import {findRoute, getRoutePath} from '../utils/route-utils'; -import {TreeNode} from '../utils/tree-utils'; -import {DYNAMIC_LAYOUTS_TOKEN} from "../tokens/dynamic-layout.token"; +import { Component, inject, isDevMode, OnInit, Optional, SkipSelf, Type } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { eLayoutType } from '../enums/common'; +import { ABP } from '../models'; +import { ReplaceableComponents } from '../models/replaceable-components'; +import { LocalizationService } from '../services/localization.service'; +import { ReplaceableComponentsService } from '../services/replaceable-components.service'; +import { RouterEvents } from '../services/router-events.service'; +import { RoutesService } from '../services/routes.service'; +import { SubscriptionService } from '../services/subscription.service'; +import { findRoute, getRoutePath } from '../utils/route-utils'; +import { TreeNode } from '../utils/tree-utils'; +import { DYNAMIC_LAYOUTS_TOKEN } from '../tokens/dynamic-layout.token'; @Component({ selector: 'abp-dynamic-layout', - template: ` - `, + template: ` `, providers: [SubscriptionService], }) export class DynamicLayoutComponent implements OnInit { layout?: Type; layoutKey?: eLayoutType; - readonly layouts = inject(DYNAMIC_LAYOUTS_TOKEN) + readonly layouts = inject(DYNAMIC_LAYOUTS_TOKEN); isLayoutVisible = true; private readonly router = inject(Router); private readonly route = inject(ActivatedRoute); private readonly routes = inject(RoutesService); - private localizationService = inject(LocalizationService) - private replaceableComponents = inject(ReplaceableComponentsService) - private subscription = inject(SubscriptionService) - private routerEvents = inject(RouterEvents) + private localizationService = inject(LocalizationService); + private replaceableComponents = inject(ReplaceableComponentsService); + private subscription = inject(SubscriptionService); + private routerEvents = inject(RouterEvents); - - constructor( - @Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent, - ) { + constructor(@Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent) { if (dynamicLayoutComponent) { if (isDevMode()) console.warn('DynamicLayoutComponent must be used only in AppComponent.'); return; @@ -56,7 +44,7 @@ export class DynamicLayoutComponent implements OnInit { if (this.layout) { return; } - this.getLayout() + // this.getLayout(); } private checkLayoutOnNavigationEnd() { @@ -64,11 +52,9 @@ export class DynamicLayoutComponent implements OnInit { this.subscription.addOne(navigationEnd$, () => this.getLayout()); } - private getLayout() { let expectedLayout = this.getExtractedLayout(); - if (!expectedLayout) expectedLayout = eLayoutType.empty; if (this.layoutKey === expectedLayout) return; @@ -84,15 +70,11 @@ export class DynamicLayoutComponent implements OnInit { } private getExtractedLayout() { - const routeData = (this.route.snapshot.data || {}); + const routeData = this.route.snapshot.data || {}; let expectedLayout = routeData['layout'] as eLayoutType; - if (expectedLayout) { - return expectedLayout; - } - let node = findRoute(this.routes, getRoutePath(this.router)); - node = {parent: node} as TreeNode; + node = { parent: node } as TreeNode; while (node.parent) { node = node.parent; @@ -108,12 +90,12 @@ export class DynamicLayoutComponent implements OnInit { showLayoutNotFoundError(layoutName: string) { let message = `Layout ${layoutName} not found.`; if (layoutName === 'account') { - message = 'Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "AccountLayoutModule.forRoot()" to your app.module configuration.'; + message = + 'Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "AccountLayoutModule.forRoot()" to your app.module configuration.'; } console.warn(message); } - private listenToLanguageChange() { this.subscription.addOne(this.localizationService.languageChange$, () => { this.isLayoutVisible = false; From 780cf42ff4ca7a840243e63fba51e40db62413cd Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Mon, 25 Mar 2024 15:42:14 +0300 Subject: [PATCH 2/6] update: replacing the constructor service declarations with injection --- .../apps/dev-app/src/app/home/home.component.ts | 5 +++-- .../src/lib/components/login/login.component.ts | 16 +++++++--------- .../application-layout.component.ts | 8 +++----- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts index 28a70067ef..b6a6082a6c 100644 --- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts +++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts @@ -1,17 +1,18 @@ import { AuthService } from '@abp/ng.core'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', }) export class HomeComponent { + private authService = inject(AuthService); + loading = false; get hasLoggedIn(): boolean { return this.authService.isAuthenticated; } - constructor(private authService: AuthService) {} login() { this.loading = true; this.authService.navigateToLogin(); diff --git a/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts b/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts index 4ea5401092..81636eef03 100644 --- a/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts +++ b/npm/ng-packs/packages/account/src/lib/components/login/login.component.ts @@ -1,6 +1,6 @@ import { AuthService, ConfigStateService } from '@abp/ng.core'; import { ToasterService } from '@abp/ng.theme.shared'; -import { Component, Injector, OnInit } from '@angular/core'; +import { Component, Injector, OnInit, inject } from '@angular/core'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { throwError } from 'rxjs'; import { catchError, finalize } from 'rxjs/operators'; @@ -14,6 +14,12 @@ const { maxLength, required } = Validators; templateUrl: './login.component.html', }) export class LoginComponent implements OnInit { + protected injector = inject(Injector); + protected fb = inject(UntypedFormBuilder); + protected toasterService = inject(ToasterService); + protected authService = inject(AuthService); + protected configState = inject(ConfigStateService); + form!: UntypedFormGroup; inProgress?: boolean; @@ -22,14 +28,6 @@ export class LoginComponent implements OnInit { authWrapperKey = eAccountComponents.AuthWrapper; - constructor( - protected injector: Injector, - protected fb: UntypedFormBuilder, - protected toasterService: ToasterService, - protected authService: AuthService, - protected configState: ConfigStateService, - ) {} - ngOnInit() { this.init(); this.buildForm(); diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts index 32dd47bad6..ba1e2cfa9c 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts @@ -1,9 +1,8 @@ -import {eLayoutType, SubscriptionService} from '@abp/ng.core'; +import { eLayoutType, SubscriptionService } from '@abp/ng.core'; import { collapseWithMargin, slideFromBottom } from '@abp/ng.theme.shared'; -import {AfterViewInit, Component} from '@angular/core'; +import { AfterViewInit, Component, inject } from '@angular/core'; import { LayoutService } from '../../services/layout.service'; - @Component({ selector: 'abp-layout-application', templateUrl: './application-layout.component.html', @@ -11,11 +10,10 @@ import { LayoutService } from '../../services/layout.service'; providers: [LayoutService, SubscriptionService], }) export class ApplicationLayoutComponent implements AfterViewInit { + public service = inject(LayoutService); // required for dynamic component static type = eLayoutType.application; - constructor(public service: LayoutService) {} - ngAfterViewInit() { this.service.subscribeWindowSize(); } From a826f0bdd92d4e30905d2158ec94d7d9d47d63c9 Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Mon, 25 Mar 2024 16:43:40 +0300 Subject: [PATCH 3/6] update: modifier updates --- .../dev-app/src/app/home/home.component.ts | 2 +- .../components/dynamic-layout.component.ts | 23 +++++++------------ .../application-layout.component.ts | 2 +- 3 files changed, 10 insertions(+), 17 deletions(-) diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts index b6a6082a6c..97f1d14b32 100644 --- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts +++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts @@ -6,7 +6,7 @@ import { Component, inject } from '@angular/core'; templateUrl: './home.component.html', }) export class HomeComponent { - private authService = inject(AuthService); + protected readonly authService = inject(AuthService); loading = false; get hasLoggedIn(): boolean { diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts index 6d1bc58ba2..9d5df4d204 100644 --- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts +++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts @@ -17,19 +17,19 @@ import { DYNAMIC_LAYOUTS_TOKEN } from '../tokens/dynamic-layout.token'; template: ` `, providers: [SubscriptionService], }) -export class DynamicLayoutComponent implements OnInit { +export class DynamicLayoutComponent { layout?: Type; layoutKey?: eLayoutType; readonly layouts = inject(DYNAMIC_LAYOUTS_TOKEN); isLayoutVisible = true; - private readonly router = inject(Router); - private readonly route = inject(ActivatedRoute); - private readonly routes = inject(RoutesService); - private localizationService = inject(LocalizationService); - private replaceableComponents = inject(ReplaceableComponentsService); - private subscription = inject(SubscriptionService); - private routerEvents = inject(RouterEvents); + protected readonly router = inject(Router); + protected readonly route = inject(ActivatedRoute); + protected readonly routes = inject(RoutesService); + protected readonly localizationService = inject(LocalizationService); + protected readonly replaceableComponents = inject(ReplaceableComponentsService); + protected readonly subscription = inject(SubscriptionService); + protected readonly routerEvents = inject(RouterEvents); constructor(@Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent) { if (dynamicLayoutComponent) { @@ -40,13 +40,6 @@ export class DynamicLayoutComponent implements OnInit { this.listenToLanguageChange(); } - ngOnInit(): void { - if (this.layout) { - return; - } - // this.getLayout(); - } - private checkLayoutOnNavigationEnd() { const navigationEnd$ = this.routerEvents.getNavigationEvents('End'); this.subscription.addOne(navigationEnd$, () => this.getLayout()); diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts index ba1e2cfa9c..a8084a3513 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts @@ -10,7 +10,7 @@ import { LayoutService } from '../../services/layout.service'; providers: [LayoutService, SubscriptionService], }) export class ApplicationLayoutComponent implements AfterViewInit { - public service = inject(LayoutService); + public readonly service = inject(LayoutService); // required for dynamic component static type = eLayoutType.application; From 0e99f2adf601c131092c7ec1b9a95990a5f44e2a Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Thu, 28 Mar 2024 06:36:30 +0300 Subject: [PATCH 4/6] fix: environment config condition to recall the layout render --- .../lib/components/dynamic-layout.component.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts index 9d5df4d204..db4ef66510 100644 --- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts +++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts @@ -11,13 +11,14 @@ import { SubscriptionService } from '../services/subscription.service'; import { findRoute, getRoutePath } from '../utils/route-utils'; import { TreeNode } from '../utils/tree-utils'; import { DYNAMIC_LAYOUTS_TOKEN } from '../tokens/dynamic-layout.token'; +import { EnvironmentService } from '../services'; @Component({ selector: 'abp-dynamic-layout', template: ` `, providers: [SubscriptionService], }) -export class DynamicLayoutComponent { +export class DynamicLayoutComponent implements OnInit { layout?: Type; layoutKey?: eLayoutType; readonly layouts = inject(DYNAMIC_LAYOUTS_TOKEN); @@ -30,6 +31,18 @@ export class DynamicLayoutComponent { protected readonly replaceableComponents = inject(ReplaceableComponentsService); protected readonly subscription = inject(SubscriptionService); protected readonly routerEvents = inject(RouterEvents); + protected readonly environment = inject(EnvironmentService); + + ngOnInit(): void { + if (this.layout) { + return; + } + + const env = this.environment.getEnvironment(); + if (env?.oAuthConfig?.responseType === 'code') { + this.getLayout(); + } + } constructor(@Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent) { if (dynamicLayoutComponent) { From 06ef024e6a186ce1a029622b79af54b838e42c7a Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus Date: Thu, 28 Mar 2024 14:01:06 +0300 Subject: [PATCH 5/6] update: readibility for condition --- .../core/src/lib/components/dynamic-layout.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts index db4ef66510..e27d372fe5 100644 --- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts +++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts @@ -38,8 +38,9 @@ export class DynamicLayoutComponent implements OnInit { return; } - const env = this.environment.getEnvironment(); - if (env?.oAuthConfig?.responseType === 'code') { + const { oAuthConfig } = this.environment.getEnvironment() || {}; + + if (oAuthConfig.responseType && oAuthConfig.responseType === 'code') { this.getLayout(); } } From ecb1f80ae88a9d4b65cebf8e3bee853b96697501 Mon Sep 17 00:00:00 2001 From: Masum ULU <49063256+masumulu28@users.noreply.github.com> Date: Thu, 28 Mar 2024 16:22:55 +0300 Subject: [PATCH 6/6] Update dynamic-layout.component.ts --- .../components/dynamic-layout.component.ts | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts index e27d372fe5..da29147d9b 100644 --- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts +++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts @@ -33,18 +33,6 @@ export class DynamicLayoutComponent implements OnInit { protected readonly routerEvents = inject(RouterEvents); protected readonly environment = inject(EnvironmentService); - ngOnInit(): void { - if (this.layout) { - return; - } - - const { oAuthConfig } = this.environment.getEnvironment() || {}; - - if (oAuthConfig.responseType && oAuthConfig.responseType === 'code') { - this.getLayout(); - } - } - constructor(@Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent) { if (dynamicLayoutComponent) { if (isDevMode()) console.warn('DynamicLayoutComponent must be used only in AppComponent.'); @@ -53,6 +41,17 @@ export class DynamicLayoutComponent implements OnInit { this.checkLayoutOnNavigationEnd(); this.listenToLanguageChange(); } + + ngOnInit(): void { + if (this.layout) { + return; + } + + const { oAuthConfig } = this.environment.getEnvironment(); + if (oAuthConfig.responseType === 'code') { + this.getLayout(); + } + } private checkLayoutOnNavigationEnd() { const navigationEnd$ = this.routerEvents.getNavigationEvents('End');