mirror of https://github.com/abpframework/abp.git
Browse Source
Replaced [ngStyle] with [style] bindings in multiple components for improved Angular compatibility and performance. Removed unnecessary NgStyle imports from affected components and updated their module imports accordingly.pull/24579/head
Fahri Gedik
5 months ago
10 changed files with 264 additions and 302 deletions
@ -1,181 +1,146 @@ |
|||||
@if (visible) { |
@if (visible) { |
||||
<abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }"> |
<abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }"> |
||||
<ng-template #abpHeader> |
<ng-template #abpHeader> |
||||
<h3> |
<h3> |
||||
{{ 'AbpFeatureManagement::Features' | abpLocalization }} |
{{ 'AbpFeatureManagement::Features' | abpLocalization }} |
||||
@if (providerTitle) { |
@if (providerTitle) { |
||||
- {{ providerTitle }} |
- {{ providerTitle }} |
||||
} |
} |
||||
</h3> |
</h3> |
||||
</ng-template> |
</ng-template> |
||||
|
|
||||
<ng-template #abpBody> |
<ng-template #abpBody> |
||||
<div class="row"> |
<div class="row"> |
||||
@if (groups.length) { |
@if (groups.length) { |
||||
<div class="col-md-4"> |
<div class="col-md-4"> |
||||
<ul |
<ul ngbNav #nav="ngbNav" [(activeId)]="selectedGroupDisplayName" class="nav-pills" orientation="vertical"> |
||||
ngbNav |
@for (group of groups; track group.name) { |
||||
#nav="ngbNav" |
<li [ngbNavItem]="group.displayName"> |
||||
[(activeId)]="selectedGroupDisplayName" |
<a ngbNavLink>{{ group.displayName }}</a> |
||||
class="nav-pills" |
<ng-template ngbNavContent> |
||||
orientation="vertical" |
<h4>{{ selectedGroupDisplayName }}</h4> |
||||
> |
<hr class="mt-2 mb-3" /> |
||||
@for (group of groups; track group.name) { |
|
||||
<li [ngbNavItem]="group.displayName"> |
|
||||
<a ngbNavLink>{{ group.displayName }}</a> |
|
||||
<ng-template ngbNavContent> |
|
||||
<h4>{{ selectedGroupDisplayName }}</h4> |
|
||||
<hr class="mt-2 mb-3" /> |
|
||||
|
|
||||
@for (feature of features[group.name]; track feature.id || i; let i = $index) { |
@for (feature of features[group.name]; track feature.id || i; let i = $index) { |
||||
@let provider = feature.provider.name; |
@let provider = feature.provider.name; |
||||
@let isFeatureDisabled = !feature.parentName ? isParentDisabled(feature.name, group.name, provider) : |
@let isFeatureDisabled = !feature.parentName ? isParentDisabled(feature.name, group.name, provider) : |
||||
(provider !== providerName && provider !== defaultProviderName); |
(provider !== providerName && provider !== defaultProviderName); |
||||
|
|
||||
<div class="mt-2" [ngStyle]="feature.style" (keyup.enter)="save()"> |
<div class="mt-2" [style]="feature.style" (keyup.enter)="save()"> |
||||
@switch (feature.valueType?.name) { |
@switch (feature.valueType?.name) { |
||||
@case (valueTypes.ToggleStringValueType) { |
@case (valueTypes.ToggleStringValueType) { |
||||
<div class="form-check" [class.px-4]="!!feature.parentName"> |
<div class="form-check" [class.px-4]="!!feature.parentName"> |
||||
<input |
<input class="form-check-input" type="checkbox" [id]="feature.name" [(ngModel)]="feature.value" |
||||
class="form-check-input" |
(ngModelChange)="onCheckboxClick($event, feature)" [disabled]="isFeatureDisabled" /> |
||||
type="checkbox" |
|
||||
[id]="feature.name" |
|
||||
[(ngModel)]="feature.value" |
|
||||
(ngModelChange)="onCheckboxClick($event, feature)" |
|
||||
[disabled]="isFeatureDisabled" |
|
||||
/> |
|
||||
|
|
||||
<label class="form-check-label" [htmlFor]="feature.name"> |
<label class="form-check-label" [htmlFor]="feature.name"> |
||||
{{ feature.displayName }} |
{{ feature.displayName }} |
||||
@if (isFeatureDisabled) { |
@if (isFeatureDisabled) { |
||||
<span>({{ provider }})</span> |
<span>({{ provider }})</span> |
||||
} |
} |
||||
</label> |
</label> |
||||
<ng-container |
<ng-container *ngTemplateOutlet=" |
||||
*ngTemplateOutlet=" |
|
||||
descTmp; |
descTmp; |
||||
context: { $implicit: feature.description } |
context: { $implicit: feature.description } |
||||
" |
"></ng-container> |
||||
></ng-container> |
</div> |
||||
</div> |
} |
||||
} |
@case (valueTypes.FreeTextStringValueType) { |
||||
@case (valueTypes.FreeTextStringValueType) { |
<div class="mb-3 form-group" [class.px-2]="!!feature.parentName"> |
||||
<div class="mb-3 form-group" [class.px-2]="!!feature.parentName"> |
<label [htmlFor]="feature.name" class="form-label"> |
||||
<label [htmlFor]="feature.name" class="form-label"> |
{{ feature.displayName }} |
||||
{{ feature.displayName }} |
@if (isFeatureDisabled) { |
||||
@if (isFeatureDisabled) { |
<span>({{ provider }})</span> |
||||
<span>({{ provider }})</span> |
} |
||||
} |
</label> |
||||
</label> |
<input class="form-control" type="text" [id]="feature.name" [(ngModel)]="feature.value" |
||||
<input |
[abpFeatureManagementFreeText]="feature" [disabled]="isFeatureDisabled" /> |
||||
class="form-control" |
|
||||
type="text" |
|
||||
[id]="feature.name" |
|
||||
[(ngModel)]="feature.value" |
|
||||
[abpFeatureManagementFreeText]="feature" |
|
||||
[disabled]="isFeatureDisabled" |
|
||||
/> |
|
||||
|
|
||||
<ng-container |
<ng-container *ngTemplateOutlet=" |
||||
*ngTemplateOutlet=" |
|
||||
descTmp; |
descTmp; |
||||
context: { $implicit: feature.description } |
context: { $implicit: feature.description } |
||||
" |
"></ng-container> |
||||
></ng-container> |
</div> |
||||
</div> |
} |
||||
} |
@case (valueTypes.SelectionStringValueType) { |
||||
@case (valueTypes.SelectionStringValueType) { |
@if (feature.valueType.itemSource?.items?.length) { |
||||
@if (feature.valueType.itemSource?.items?.length) { |
<div class="mb-3 form-group" [class.px-2]="!!feature.parentName"> |
||||
<div class="mb-3 form-group" [class.px-2]="!!feature.parentName"> |
<label [htmlFor]="feature.name" class="form-label"> |
||||
<label [htmlFor]="feature.name" class="form-label"> |
{{ feature.displayName }} |
||||
{{ feature.displayName }} |
@if (isFeatureDisabled) { |
||||
@if (isFeatureDisabled) { |
<span>({{ provider }})</span> |
||||
<span>({{ provider }})</span> |
} |
||||
} |
</label> |
||||
</label> |
<select class="form-select" [id]="feature.name" [(ngModel)]="feature.value" |
||||
<select |
[disabled]="isFeatureDisabled"> |
||||
class="form-select" |
@for ( |
||||
[id]="feature.name" |
item of feature.valueType.itemSource?.items; |
||||
[(ngModel)]="feature.value" |
track item.value |
||||
[disabled]="isFeatureDisabled" |
) { |
||||
> |
<option [ngValue]="item.value"> |
||||
@for ( |
{{ |
||||
item of feature.valueType.itemSource?.items; |
item.displayText?.resourceName + |
||||
track item.value |
'::' + |
||||
) { |
item.displayText?.name | abpLocalization |
||||
<option [ngValue]="item.value"> |
}} |
||||
{{ |
</option> |
||||
item.displayText?.resourceName + |
} |
||||
'::' + |
</select> |
||||
item.displayText?.name | abpLocalization |
<ng-container *ngTemplateOutlet=" |
||||
}} |
|
||||
</option> |
|
||||
} |
|
||||
</select> |
|
||||
<ng-container |
|
||||
*ngTemplateOutlet=" |
|
||||
descTmp; |
descTmp; |
||||
context: { $implicit: feature.description } |
context: { $implicit: feature.description } |
||||
" |
"></ng-container> |
||||
></ng-container> |
</div> |
||||
</div> |
} |
||||
} |
} |
||||
} |
@default { |
||||
@default { |
{{ feature.displayName }} |
||||
{{ feature.displayName }} |
} |
||||
} |
} |
||||
} |
</div> |
||||
</div> |
|
||||
} |
|
||||
</ng-template> |
|
||||
</li> |
|
||||
} |
} |
||||
</ul> |
</ng-template> |
||||
</div> |
</li> |
||||
|
} |
||||
<ng-template #descTmp let-description> |
</ul> |
||||
@if (description) { |
</div> |
||||
<small class="d-block form-text text-muted">{{ description }}</small> |
|
||||
} |
|
||||
</ng-template> |
|
||||
|
|
||||
<div class="col-md-8"><div class="py-0" [ngbNavOutlet]="nav"></div></div> |
<ng-template #descTmp let-description> |
||||
|
@if (description) { |
||||
|
<small class="d-block form-text text-muted">{{ description }}</small> |
||||
} |
} |
||||
|
</ng-template> |
||||
|
|
||||
@if (!groups.length) { |
<div class="col-md-8"> |
||||
<div class="col"> |
<div class="py-0" [ngbNavOutlet]="nav"></div> |
||||
{{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }} |
|
||||
</div> |
|
||||
} |
|
||||
</div> |
</div> |
||||
</ng-template> |
|
||||
|
|
||||
<ng-template #abpFooter> |
|
||||
<button abpClose type="button" class="btn btn-link"> |
|
||||
{{ 'AbpFeatureManagement::Cancel' | abpLocalization }} |
|
||||
</button> |
|
||||
|
|
||||
@if (groups.length) { |
|
||||
<abp-button |
|
||||
buttonClass="btn btn-outline-primary" |
|
||||
[disabled]="modalBusy" |
|
||||
(click)="resetToDefault()" |
|
||||
aria-hidden="true" |
|
||||
> |
|
||||
{{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }} |
|
||||
</abp-button> |
|
||||
} |
} |
||||
|
|
||||
@if (groups.length) { |
@if (!groups.length) { |
||||
<abp-button |
<div class="col"> |
||||
iconClass="fa fa-check" |
{{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }} |
||||
[disabled]="modalBusy" |
</div> |
||||
(click)="save()" |
|
||||
aria-hidden="true" |
|
||||
> |
|
||||
{{ 'AbpFeatureManagement::Save' | abpLocalization }} |
|
||||
</abp-button> |
|
||||
} |
} |
||||
</ng-template> |
</div> |
||||
</abp-modal> |
</ng-template> |
||||
} |
|
||||
|
<ng-template #abpFooter> |
||||
|
<button abpClose type="button" class="btn btn-link"> |
||||
|
{{ 'AbpFeatureManagement::Cancel' | abpLocalization }} |
||||
|
</button> |
||||
|
|
||||
|
@if (groups.length) { |
||||
|
<abp-button buttonClass="btn btn-outline-primary" [disabled]="modalBusy" (click)="resetToDefault()" |
||||
|
aria-hidden="true"> |
||||
|
{{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }} |
||||
|
</abp-button> |
||||
|
} |
||||
|
|
||||
|
@if (groups.length) { |
||||
|
<abp-button iconClass="fa fa-check" [disabled]="modalBusy" (click)="save()" aria-hidden="true"> |
||||
|
{{ 'AbpFeatureManagement::Save' | abpLocalization }} |
||||
|
</abp-button> |
||||
|
} |
||||
|
</ng-template> |
||||
|
</abp-modal> |
||||
|
} |
||||
@ -1,118 +1,116 @@ |
|||||
import { NgClass, NgStyle } from '@angular/common'; |
import { NgClass }ngular/common'; |
||||
import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core'; |
import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core'; |
||||
import { combineLatest, Subscription, timer } from 'rxjs'; |
import { combineLatest, Subscription, timer } from 'rxjs'; |
||||
import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core'; |
import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core'; |
||||
|
|
||||
@Component({ |
@Component({ |
||||
selector: 'abp-loader-bar', |
selector: 'abp-loader-bar', |
||||
template: ` |
template: ` |
||||
<div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading"> |
<di |
||||
<div |
<div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading"> |
||||
class="abp-progress" |
<div |
||||
[class.progressing]="progressLevel" |
class="abp-progress" |
||||
[style.width.vw]="progressLevel" |
[class.progressing]="progressLevel" |
||||
[ngStyle]="{ |
[style.width.vw]="progressLevel" |
||||
'background-color': color, |
[style]="{ |
||||
'box-shadow': boxShadow, |
'background-color': color, |
||||
}" |
'box-shadow': boxShadow, |
||||
></div> |
}" |
||||
</div> |
></div> |
||||
`,
|
</div> |
||||
styleUrls: ['./loader-bar.component.scss'], |
Urls: ['./loader-bar.component.scss'], |
||||
providers: [SubscriptionService], |
providers: [SubscriptionService], |
||||
imports: [NgClass, NgStyle], |
imports: [NgClass],
[NgClass]LoaderBarComponent implements OnDestroy, OnInit { |
||||
}) |
private cdRef = inject(ChangeDetectorRef); |
||||
export class LoaderBarComponent implements OnDestroy, OnInit { |
private subscription = inject(SubscriptionService); |
||||
private cdRef = inject(ChangeDetectorRef); |
private httpWaitService = inject(HttpWaitService); |
||||
private subscription = inject(SubscriptionService); |
private routerWaitService = inject(RouterWaitService); |
||||
private httpWaitService = inject(HttpWaitService); |
|
||||
private routerWaitService = inject(RouterWaitService); |
protected _isLoading!: boolean; |
||||
|
|
||||
protected _isLoading!: boolean; |
@Input() |
||||
|
set isLoading(value: boolean) { |
||||
@Input() |
this._isLoading = value; |
||||
set isLoading(value: boolean) { |
this.cdRef.detectChanges(); |
||||
this._isLoading = value; |
} |
||||
this.cdRef.detectChanges(); |
get isLoading(): boolean { |
||||
} |
return this._isLoading; |
||||
get isLoading(): boolean { |
} |
||||
return this._isLoading; |
|
||||
} |
@Input() |
||||
|
containerClass = 'abp-loader-bar'; |
||||
@Input() |
|
||||
containerClass = 'abp-loader-bar'; |
@Input() |
||||
|
color = '#77b6ff'; |
||||
@Input() |
|
||||
color = '#77b6ff'; |
progressLevel = 0; |
||||
|
|
||||
progressLevel = 0; |
interval = new Subscription(); |
||||
|
|
||||
interval = new Subscription(); |
timer = new Subscription(); |
||||
|
|
||||
timer = new Subscription(); |
intervalPeriod = 350; |
||||
|
|
||||
intervalPeriod = 350; |
stopDelay = 800; |
||||
|
|
||||
stopDelay = 800; |
private readonly clearProgress = () => { |
||||
|
this.progressLevel = 0; |
||||
private readonly clearProgress = () => { |
this.cdRef.detectChanges(); |
||||
this.progressLevel = 0; |
}; |
||||
this.cdRef.detectChanges(); |
|
||||
}; |
private readonly reportProgress = () => { |
||||
|
if (this.progressLevel < 75) { |
||||
private readonly reportProgress = () => { |
this.progressLevel += 1 + Math.random() * 9; |
||||
if (this.progressLevel < 75) { |
} else if (this.progressLevel < 90) { |
||||
this.progressLevel += 1 + Math.random() * 9; |
this.progressLevel += 0.4; |
||||
} else if (this.progressLevel < 90) { |
} else if (this.progressLevel < 100) { |
||||
this.progressLevel += 0.4; |
this.progressLevel += 0.1; |
||||
} else if (this.progressLevel < 100) { |
} else { |
||||
this.progressLevel += 0.1; |
this.interval.unsubscribe(); |
||||
} else { |
} |
||||
this.interval.unsubscribe(); |
this.cdRef.detectChanges(); |
||||
} |
}; |
||||
this.cdRef.detectChanges(); |
|
||||
}; |
get boxShadow(): string { |
||||
|
return `0 0 10px rgba(${this.color}, 0.5)`; |
||||
get boxShadow(): string { |
} |
||||
return `0 0 10px rgba(${this.color}, 0.5)`; |
|
||||
} |
ngOnInit() { |
||||
|
this.subscribeLoading(); |
||||
ngOnInit() { |
} |
||||
this.subscribeLoading(); |
|
||||
} |
subscribeLoading() { |
||||
|
this.subscription.addOne( |
||||
subscribeLoading() { |
combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]), |
||||
this.subscription.addOne( |
([httpLoading, routerLoading]) => { |
||||
combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]), |
if (httpLoading || routerLoading) this.startLoading(); |
||||
([httpLoading, routerLoading]) => { |
else this.stopLoading(); |
||||
if (httpLoading || routerLoading) this.startLoading(); |
}, |
||||
else this.stopLoading(); |
); |
||||
}, |
} |
||||
); |
|
||||
} |
ngOnDestroy() { |
||||
|
this.interval.unsubscribe(); |
||||
ngOnDestroy() { |
} |
||||
this.interval.unsubscribe(); |
|
||||
} |
startLoading() { |
||||
|
if (this.isLoading || !this.interval.closed) return; |
||||
startLoading() { |
|
||||
if (this.isLoading || !this.interval.closed) return; |
this.isLoading = true; |
||||
|
this.progressLevel = 0; |
||||
this.isLoading = true; |
this.cdRef.detectChanges(); |
||||
this.progressLevel = 0; |
this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress); |
||||
this.cdRef.detectChanges(); |
this.timer.unsubscribe(); |
||||
this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress); |
} |
||||
this.timer.unsubscribe(); |
|
||||
} |
stopLoading() { |
||||
|
this.interval.unsubscribe(); |
||||
stopLoading() { |
|
||||
this.interval.unsubscribe(); |
this.progressLevel = 100; |
||||
|
this.isLoading = false; |
||||
this.progressLevel = 100; |
|
||||
this.isLoading = false; |
if (!this.timer.closed) return; |
||||
|
|
||||
if (!this.timer.closed) return; |
this.timer = timer(this.stopDelay).subscribe(this.clearProgress); |
||||
|
} |
||||
this.timer = timer(this.stopDelay).subscribe(this.clearProgress); |
} |
||||
} |
|
||||
} |
|
||||
|
|||||
Loading…
Reference in new issue