UI: Refactoring after review

ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html

@@ -28,7 +28,7 @@
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="!hideLoadingBar && isLoading$ | async">
     </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(!hideLoadingBar && isLoading$ | async)"></div>
+    <div style="height: 4px;" *ngIf="hideLoadingBar && !(isLoading$ | async)"></div>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="repositorySettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">

ui-ngx/src/app/modules/home/home.component.ts

@@ -150,14 +150,14 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
     this.textSearch.reset('', {emitEvent: false});
     this.activeComponent = activeComponent;
     let showLoadingBar: boolean;
-    if (isDefined(this.activeComponent.activatedRoute?.data?.value?.showLoadingBar)) {
+    if (isDefined(this.activeComponent.activatedRoute?.snapshot?.data?.showMainLoadingBar)) {
-      showLoadingBar = this.activeComponent.activatedRoute?.data?.value?.showLoadingBar;
+      showLoadingBar = this.activeComponent.activatedRoute.snapshot.data.showMainLoadingBar;
-    } else if (isDefined(this.activeComponent?.showLoadingBar)) {
+    } else if (isDefined(this.activeComponent?.showMainLoadingBar)) {
-      showLoadingBar = this.activeComponent.showLoadingBar;
+      showLoadingBar = this.activeComponent.showMainLoadingBar;
     }
     if (activeComponent && activeComponent instanceof RouterTabsComponent) {
       this.hideLoadingBar = isDefinedAndNotNull(showLoadingBar) ? !showLoadingBar : true;
-    } else if (isDefinedAndNotNull(showLoadingBar)) {
+    } else if (activeComponent && activeComponent instanceof PageComponent && isDefinedAndNotNull(showLoadingBar)) {
       this.hideLoadingBar = !showLoadingBar;
     }
     if (this.activeComponent && instanceOfSearchableComponent(this.activeComponent)) {

ui-ngx/src/app/modules/home/pages/account/account-routing.module.ts

@@ -33,6 +33,7 @@ const routes: Routes = [
     component: RouterTabsComponent,
     data: {
       auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
+      showMainLoadingBar: false,
       breadcrumb: {
         label: 'account.account',
         icon: 'account_circle'

ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts

@@ -136,6 +136,7 @@ const routes: Routes = [
     component: RouterTabsComponent,
     data: {
       auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
+      showMainLoadingBar: false,
       breadcrumb: {
         label: 'admin.settings',
         icon: 'settings'

ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts

@@ -54,14 +54,13 @@ import { TranslateService } from '@ngx-translate/core';
 import { isDefined, isDefinedAndNotNull, randomAlphanumeric } from '@core/utils';
 import { OAuth2Service } from '@core/http/oauth2.service';
 import { ActivatedRoute } from '@angular/router';
-import { HasShowLoading } from '@home/pages/home-pages.models';
 
 @Component({
   selector: 'tb-oauth2-settings',
   templateUrl: './oauth2-settings.component.html',
   styleUrls: ['./oauth2-settings.component.scss', './settings-card.scss']
 })
-export class OAuth2SettingsComponent extends PageComponent implements OnInit, HasConfirmForm, HasShowLoading, OnDestroy {
+export class OAuth2SettingsComponent extends PageComponent implements OnInit, HasConfirmForm, OnDestroy {
 
   constructor(protected store: Store<AppState>,
               private route: ActivatedRoute,
@@ -115,7 +114,7 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
 
   templateProvider = ['Custom'];
 
-  showLoadingBar = false;
+  showMainLoadingBar = false;
 
   private loginProcessingUrl: string = this.route.snapshot.data.loginProcessingUrl;
 

ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts

@@ -37,19 +37,18 @@ import { AuthService } from '@core/auth/auth.service';
 import { DialogService } from '@core/services/dialog.service';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable, of } from 'rxjs';
-import { HasShowLoading } from '@home/pages/home-pages.models';
 
 @Component({
   selector: 'tb-security-settings',
   templateUrl: './security-settings.component.html',
   styleUrls: ['./security-settings.component.scss', './settings-card.scss']
 })
-export class SecuritySettingsComponent extends PageComponent implements HasConfirmForm, HasShowLoading {
+export class SecuritySettingsComponent extends PageComponent implements HasConfirmForm {
 
   securitySettingsFormGroup: UntypedFormGroup;
   jwtSecuritySettingsFormGroup: UntypedFormGroup;
 
-  showLoadingBar = false;
+  showMainLoadingBar = false;
 
   private securitySettings: SecuritySettings;
   private jwtSettings: JwtSettings;

ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts

@@ -32,14 +32,13 @@ import { isNotEmptyStr } from '@core/utils';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { MatExpansionPanel } from '@angular/material/expansion';
-import { HasShowLoading } from '@home/pages/home-pages.models';
 
 @Component({
   selector: 'tb-2fa-settings',
   templateUrl: './two-factor-auth-settings.component.html',
   styleUrls: [ './settings-card.scss', './two-factor-auth-settings.component.scss']
 })
-export class TwoFactorAuthSettingsComponent extends PageComponent implements OnInit, HasConfirmForm, HasShowLoading, OnDestroy {
+export class TwoFactorAuthSettingsComponent extends PageComponent implements OnInit, HasConfirmForm, OnDestroy {
 
   private readonly destroy$ = new Subject<void>();
   private readonly posIntValidation = [Validators.required, Validators.min(1), Validators.pattern(/^\d*$/)];
@@ -48,7 +47,7 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
   twoFactorAuthProviderType = TwoFactorAuthProviderType;
   twoFactorAuthProvidersData = twoFactorAuthProvidersData;
 
-  showLoadingBar = false;
+  showMainLoadingBar = false;
 
   @ViewChildren(MatExpansionPanel) expansionPanel: QueryList<MatExpansionPanel>;
 

ui-ngx/src/app/modules/home/pages/home-pages.models.ts

@@ -31,7 +31,7 @@ export const entityDetailsPageBreadcrumbLabelFunction: BreadCrumbLabelFunction<E
   }
 });
 
-export interface HasShowLoading {
+export interface HasShowMainLoading {
-  showLoadingBar?: boolean;
+  showMainLoadingBar?: boolean;
 }
 

ui-ngx/src/app/modules/home/pages/notification/notification-routing.module.ts

@@ -32,7 +32,6 @@ const routes: Routes = [
     component: RouterTabsComponent,
     data: {
       auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER, Authority.SYS_ADMIN],
-      showLoadingBar: true,
       breadcrumb: {
         label: 'notification.notification-center',
         icon: 'mdi:message-badge'

ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts

@@ -234,7 +234,6 @@ export const widgetsLibraryRoutes: Routes = [
     component: RouterTabsComponent,
     data: {
       auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
-      showLoadingBar: true,
       breadcrumb: {
         label: 'widget.widget-library',
         icon: 'now_widgets'

ui-ngx/src/app/shared/components/page.component.ts

@@ -21,14 +21,17 @@ import { Observable, Subscription } from 'rxjs';
 import { selectIsLoading } from '@core/interceptors/load.selectors';
 import { delay, share } from 'rxjs/operators';
 import { AbstractControl } from '@angular/forms';
+import { HasShowMainLoading } from '@home/pages/home-pages.models';
 
 @Directive()
-export abstract class PageComponent implements OnDestroy {
+export abstract class PageComponent implements OnDestroy, HasShowMainLoading {
 
   isLoading$: Observable<boolean>;
   loadingSubscription: Subscription;
   disabledOnLoadFormControls: Array<AbstractControl> = [];
 
+  showMainLoadingBar = true;
+
   protected constructor(protected store: Store<AppState>) {
     this.isLoading$ = this.store.pipe(delay(0), select(selectIsLoading), share());
   }