UI: Refactoring

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="!(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/components/vc/repository-settings.component.ts

@@ -34,6 +34,7 @@ import { selectHasRepository } from '@core/auth/auth.selectors';
 import { catchError, mergeMap, take } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { TbPopoverComponent } from '@shared/components/popover.component';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-repository-settings',
@@ -49,6 +50,7 @@ export class RepositorySettingsComponent extends PageComponent implements OnInit
   popoverComponent: TbPopoverComponent;
 
   @Input()
+  @coerceBoolean()
   hideLoadingBar = false;
 
   repositorySettingsForm: UntypedFormGroup;

ui-ngx/src/app/modules/home/components/vc/version-control.component.html

@@ -17,7 +17,7 @@
 -->
 <tb-repository-settings #repositorySettingsComponent
                         [detailsMode]="detailsMode"
-                        [hideLoadingBar]="true"
+                        hideLoadingBar
                         [popoverComponent]="popoverComponent"
                         *ngIf="!(hasRepository$ | async); else versionsTable">
 </tb-repository-settings>

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

@@ -15,7 +15,7 @@
 ///
 
 import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { startWith, skip, Subject } from 'rxjs';
+import { skip, startWith, Subject } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 
@@ -151,10 +151,10 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
     this.textSearch.reset('', {emitEvent: false});
     this.activeComponent = activeComponent;
     let showLoadingBar: boolean;
-    if (isDefined(this.route.children[0]?.snapshot?.data?.showLoadingBar)) {
-      showLoadingBar = this.route.children[0]?.snapshot?.data?.showLoadingBar;
-    } else if (isDefined(this.route.children[0]?.children[0]?.snapshot?.data?.showLoadingBar)) {
-      showLoadingBar = this.route.children[0]?.children[0]?.snapshot?.data?.showLoadingBar;
+    if (isDefined(this.activeComponent.activatedRoute?.data?.value?.showLoadingBar)) {
+      showLoadingBar = this.activeComponent.activatedRoute?.data?.value?.showLoadingBar;
+    } else if (isDefined(this.activeComponent?.showLoadingBar)) {
+      showLoadingBar = this.activeComponent.showLoadingBar;
     }
     if (activeComponent && activeComponent instanceof RouterTabsComponent) {
       this.hideLoadingBar = isDefinedAndNotNull(showLoadingBar) ? !showLoadingBar : true;

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

@@ -323,7 +323,6 @@ const routes: Routes = [
         canDeactivate: [ConfirmOnExitGuard],
         data: {
           auth: [Authority.SYS_ADMIN],
-          showLoadingBar: false,
           title: 'admin.general',
           breadcrumb: {
             label: 'admin.general',
@@ -337,7 +336,6 @@ const routes: Routes = [
         canDeactivate: [ConfirmOnExitGuard],
         data: {
           auth: [Authority.SYS_ADMIN],
-          showLoadingBar: false,
           title: 'admin.2fa.2fa',
           breadcrumb: {
             label: 'admin.2fa.2fa',
@@ -351,7 +349,6 @@ const routes: Routes = [
         canDeactivate: [ConfirmOnExitGuard],
         data: {
           auth: [Authority.SYS_ADMIN],
-          showLoadingBar: false,
           title: 'admin.oauth2.oauth2',
           breadcrumb: {
             label: 'admin.oauth2.oauth2',

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

@@ -15,7 +15,14 @@
 ///
 
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, Validators } from '@angular/forms';
+import {
+  AbstractControl,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  ValidationErrors,
+  Validators
+} from '@angular/forms';
 import {
   ClientAuthenticationMethod,
   DomainSchema,
@@ -26,9 +33,11 @@ import {
   MapperConfigType,
   OAuth2ClientRegistrationTemplate,
   OAuth2DomainInfo,
-  OAuth2Info, OAuth2MobileInfo,
+  OAuth2Info,
+  OAuth2MobileInfo,
   OAuth2ParamsInfo,
-  OAuth2RegistrationInfo, PlatformType,
+  OAuth2RegistrationInfo,
+  PlatformType,
   platformTypeTranslations,
   TenantNameStrategy
 } from '@shared/models/oauth2.models';
@@ -45,13 +54,14 @@ 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, OnDestroy {
+export class OAuth2SettingsComponent extends PageComponent implements OnInit, HasConfirmForm, HasShowLoading, OnDestroy {
 
   constructor(protected store: Store<AppState>,
               private route: ActivatedRoute,
@@ -105,6 +115,8 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
 
   templateProvider = ['Custom'];
 
+  showLoadingBar = false;
+
   private loginProcessingUrl: string = this.route.snapshot.data.loginProcessingUrl;
 
   private static validateScope(control: AbstractControl): ValidationErrors | null {

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

@@ -23,7 +23,8 @@ import {
   AbstractControl,
   UntypedFormBuilder,
   UntypedFormControl,
-  UntypedFormGroup, ValidationErrors,
+  UntypedFormGroup,
+  ValidationErrors,
   ValidatorFn,
   Validators
 } from '@angular/forms';
@@ -35,21 +36,21 @@ import { randomAlphanumeric } from '@core/utils';
 import { AuthService } from '@core/auth/auth.service';
 import { DialogService } from '@core/services/dialog.service';
 import { TranslateService } from '@ngx-translate/core';
-import { forkJoin, Observable, of } from 'rxjs';
-import { MatCheckboxChange } from '@angular/material/checkbox';
-import { AlarmInfo } from '@shared/models/alarm.models';
-import { QueueProcessingStrategyTypes, QueueProcessingStrategyTypesMap } from '@shared/models/queue.models';
+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 {
+export class SecuritySettingsComponent extends PageComponent implements HasConfirmForm, HasShowLoading {
 
   securitySettingsFormGroup: UntypedFormGroup;
   jwtSecuritySettingsFormGroup: UntypedFormGroup;
 
+  showLoadingBar = false;
+
   private securitySettings: SecuritySettings;
   private jwtSettings: JwtSettings;
 

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

@@ -32,13 +32,14 @@ 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, OnDestroy {
+export class TwoFactorAuthSettingsComponent extends PageComponent implements OnInit, HasConfirmForm, HasShowLoading, OnDestroy {
 
   private readonly destroy$ = new Subject<void>();
   private readonly posIntValidation = [Validators.required, Validators.min(1), Validators.pattern(/^\d*$/)];
@@ -47,6 +48,8 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
   twoFactorAuthProviderType = TwoFactorAuthProviderType;
   twoFactorAuthProvidersData = twoFactorAuthProvidersData;
 
+  showLoadingBar = false;
+
   @ViewChildren(MatExpansionPanel) expansionPanel: QueryList<MatExpansionPanel>;
 
   constructor(protected store: Store<AppState>,

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

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