Merge pull request #10036 from ArtemDzhereleiko/AD/bug-fix/hide-progress-bar

Fixed progress bar
This commit is contained in:
Igor Kulikov 2024-02-12 13:20:34 +02:00 committed by GitHub
commit d49a0e299c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 51 additions and 17 deletions

View File

@ -26,9 +26,9 @@
<span fxFlex></span> <span fxFlex></span>
<div tb-help="repositorySettings"></div> <div tb-help="repositorySettings"></div>
</mat-card-header> </mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="!hideLoadingBar && isLoading$ | async">
</mat-progress-bar> </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;"> <mat-card-content style="padding-top: 16px;">
<form [formGroup]="repositorySettingsForm" #formDirective="ngForm" (ngSubmit)="save()"> <form [formGroup]="repositorySettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">

View File

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

View File

@ -15,9 +15,11 @@
limitations under the License. limitations under the License.
--> -->
<tb-repository-settings #repositorySettingsComponent [detailsMode]="detailsMode" <tb-repository-settings #repositorySettingsComponent
[detailsMode]="detailsMode"
hideLoadingBar
[popoverComponent]="popoverComponent" [popoverComponent]="popoverComponent"
*ngIf="!(hasRepository$ | async); else versionsTable"> *ngIf="!(hasRepository$ | async); else versionsTable">
</tb-repository-settings> </tb-repository-settings>
<ng-template #versionsTable> <ng-template #versionsTable>
<tb-entity-versions-table [singleEntityMode]="singleEntityMode" <tb-entity-versions-table [singleEntityMode]="singleEntityMode"

View File

@ -15,7 +15,7 @@
/// ///
import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core'; 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 { Store } from '@ngrx/store';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
@ -32,6 +32,8 @@ import { instanceOfSearchableComponent, ISearchableComponent } from '@home/model
import { ActiveComponentService } from '@core/services/active-component.service'; import { ActiveComponentService } from '@core/services/active-component.service';
import { RouterTabsComponent } from '@home/components/router-tabs.component'; import { RouterTabsComponent } from '@home/components/router-tabs.component';
import { FormBuilder } from '@angular/forms'; import { FormBuilder } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { isDefined, isDefinedAndNotNull } from '@core/utils';
@Component({ @Component({
selector: 'tb-home', selector: 'tb-home',
@ -70,8 +72,8 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,
@Inject(WINDOW) private window: Window, @Inject(WINDOW) private window: Window,
private activeComponentService: ActiveComponentService, private activeComponentService: ActiveComponentService,
public breakpointObserver: BreakpointObserver, private fb: FormBuilder,
private fb: FormBuilder) { public breakpointObserver: BreakpointObserver) {
super(store); super(store);
} }
@ -144,9 +146,18 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
private updateActiveComponent(activeComponent: any) { private updateActiveComponent(activeComponent: any) {
this.showSearch = false; this.showSearch = false;
this.hideLoadingBar = false;
this.textSearch.reset('', {emitEvent: false}); this.textSearch.reset('', {emitEvent: false});
this.activeComponent = activeComponent; this.activeComponent = activeComponent;
this.hideLoadingBar = activeComponent && activeComponent instanceof RouterTabsComponent;
if (activeComponent && activeComponent instanceof RouterTabsComponent
&& isDefinedAndNotNull(this.activeComponent.activatedRoute?.snapshot?.data?.showMainLoadingBar)) {
this.hideLoadingBar = !this.activeComponent.activatedRoute.snapshot.data.showMainLoadingBar;
} else if (activeComponent && activeComponent instanceof PageComponent
&& isDefinedAndNotNull(this.activeComponent?.showMainLoadingBar)) {
this.hideLoadingBar = !this.activeComponent.showMainLoadingBar;
}
if (this.activeComponent && instanceOfSearchableComponent(this.activeComponent)) { if (this.activeComponent && instanceOfSearchableComponent(this.activeComponent)) {
this.searchEnabled = true; this.searchEnabled = true;
this.searchableComponent = this.activeComponent; this.searchableComponent = this.activeComponent;

View File

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

View File

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

View File

@ -15,7 +15,14 @@
/// ///
import { Component, Inject, OnDestroy, OnInit } from '@angular/core'; 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 { import {
ClientAuthenticationMethod, ClientAuthenticationMethod,
DomainSchema, DomainSchema,
@ -26,9 +33,11 @@ import {
MapperConfigType, MapperConfigType,
OAuth2ClientRegistrationTemplate, OAuth2ClientRegistrationTemplate,
OAuth2DomainInfo, OAuth2DomainInfo,
OAuth2Info, OAuth2MobileInfo, OAuth2Info,
OAuth2MobileInfo,
OAuth2ParamsInfo, OAuth2ParamsInfo,
OAuth2RegistrationInfo, PlatformType, OAuth2RegistrationInfo,
PlatformType,
platformTypeTranslations, platformTypeTranslations,
TenantNameStrategy TenantNameStrategy
} from '@shared/models/oauth2.models'; } from '@shared/models/oauth2.models';
@ -105,6 +114,8 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
templateProvider = ['Custom']; templateProvider = ['Custom'];
showMainLoadingBar = false;
private loginProcessingUrl: string = this.route.snapshot.data.loginProcessingUrl; private loginProcessingUrl: string = this.route.snapshot.data.loginProcessingUrl;
private static validateScope(control: AbstractControl): ValidationErrors | null { private static validateScope(control: AbstractControl): ValidationErrors | null {

View File

@ -23,7 +23,8 @@ import {
AbstractControl, AbstractControl,
UntypedFormBuilder, UntypedFormBuilder,
UntypedFormControl, UntypedFormControl,
UntypedFormGroup, ValidationErrors, UntypedFormGroup,
ValidationErrors,
ValidatorFn, ValidatorFn,
Validators Validators
} from '@angular/forms'; } from '@angular/forms';
@ -35,10 +36,7 @@ import { randomAlphanumeric } from '@core/utils';
import { AuthService } from '@core/auth/auth.service'; import { AuthService } from '@core/auth/auth.service';
import { DialogService } from '@core/services/dialog.service'; import { DialogService } from '@core/services/dialog.service';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { forkJoin, Observable, of } from 'rxjs'; import { 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';
@Component({ @Component({
selector: 'tb-security-settings', selector: 'tb-security-settings',
@ -50,6 +48,8 @@ export class SecuritySettingsComponent extends PageComponent implements HasConfi
securitySettingsFormGroup: UntypedFormGroup; securitySettingsFormGroup: UntypedFormGroup;
jwtSecuritySettingsFormGroup: UntypedFormGroup; jwtSecuritySettingsFormGroup: UntypedFormGroup;
showMainLoadingBar = false;
private securitySettings: SecuritySettings; private securitySettings: SecuritySettings;
private jwtSettings: JwtSettings; private jwtSettings: JwtSettings;

View File

@ -47,6 +47,8 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
twoFactorAuthProviderType = TwoFactorAuthProviderType; twoFactorAuthProviderType = TwoFactorAuthProviderType;
twoFactorAuthProvidersData = twoFactorAuthProvidersData; twoFactorAuthProvidersData = twoFactorAuthProvidersData;
showMainLoadingBar = false;
@ViewChildren(MatExpansionPanel) expansionPanel: QueryList<MatExpansionPanel>; @ViewChildren(MatExpansionPanel) expansionPanel: QueryList<MatExpansionPanel>;
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,

View File

@ -30,4 +30,3 @@ export const entityDetailsPageBreadcrumbLabelFunction: BreadCrumbLabelFunction<E
return component.entity?.name; return component.entity?.name;
} }
}); });

View File

@ -29,6 +29,8 @@ export abstract class PageComponent implements OnDestroy {
loadingSubscription: Subscription; loadingSubscription: Subscription;
disabledOnLoadFormControls: Array<AbstractControl> = []; disabledOnLoadFormControls: Array<AbstractControl> = [];
showMainLoadingBar = true;
protected constructor(protected store: Store<AppState>) { protected constructor(protected store: Store<AppState>) {
this.isLoading$ = this.store.pipe(delay(0), select(selectIsLoading), share()); this.isLoading$ = this.store.pipe(delay(0), select(selectIsLoading), share());
} }