Fixed bugs, removed redundant code

This commit is contained in:
deaflynx 2022-07-25 17:19:07 +03:00
parent a0fd18221d
commit b3fdc881f4
11 changed files with 47 additions and 101 deletions

View File

@ -422,18 +422,18 @@
{{ 'tenant-profile.rate-limits.rate-limits' | translate }} {{ 'tenant-profile.rate-limits.rate-limits' | translate }}
</legend> </legend>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px"> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex="50" formControlName="transportTenantMsgRateLimit" <tb-rate-limits fxFlex formControlName="transportTenantMsgRateLimit"
[type]="rateLimitsType.TENANT_MESSAGES"> [type]="rateLimitsType.TENANT_MESSAGES">
</tb-rate-limits> </tb-rate-limits>
<tb-rate-limits fxFlex="50" formControlName="transportDeviceMsgRateLimit" <tb-rate-limits fxFlex formControlName="transportDeviceMsgRateLimit"
[type]="rateLimitsType.DEVICE_MESSAGES"> [type]="rateLimitsType.DEVICE_MESSAGES">
</tb-rate-limits> </tb-rate-limits>
</div> </div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px"> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex="50" formControlName="transportTenantTelemetryMsgRateLimit" <tb-rate-limits fxFlex formControlName="transportTenantTelemetryMsgRateLimit"
[type]="rateLimitsType.TENANT_TELEMETRY_MESSAGES"> [type]="rateLimitsType.TENANT_TELEMETRY_MESSAGES">
</tb-rate-limits> </tb-rate-limits>
<tb-rate-limits fxFlex="50" formControlName="transportDeviceTelemetryMsgRateLimit" <tb-rate-limits fxFlex formControlName="transportDeviceTelemetryMsgRateLimit"
[type]="rateLimitsType.DEVICE_TELEMETRY_MESSAGES"> [type]="rateLimitsType.DEVICE_TELEMETRY_MESSAGES">
</tb-rate-limits> </tb-rate-limits>
</div> </div>
@ -445,34 +445,34 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px"> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex="50" formControlName="transportTenantTelemetryDataPointsRateLimit" <tb-rate-limits fxFlex formControlName="transportTenantTelemetryDataPointsRateLimit"
[type]="rateLimitsType.TENANT_TELEMETRY_DATA_POINTS"> [type]="rateLimitsType.TENANT_TELEMETRY_DATA_POINTS">
</tb-rate-limits> </tb-rate-limits>
<tb-rate-limits fxFlex="50" formControlName="transportDeviceTelemetryDataPointsRateLimit" <tb-rate-limits fxFlex formControlName="transportDeviceTelemetryDataPointsRateLimit"
[type]="rateLimitsType.DEVICE_TELEMETRY_DATA_POINTS"> [type]="rateLimitsType.DEVICE_TELEMETRY_DATA_POINTS">
</tb-rate-limits> </tb-rate-limits>
</div> </div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px"> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex="50" formControlName="tenantServerRestLimitsConfiguration" <tb-rate-limits fxFlex formControlName="tenantServerRestLimitsConfiguration"
[type]="rateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION"> [type]="rateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION">
</tb-rate-limits> </tb-rate-limits>
<tb-rate-limits fxFlex="50" formControlName="customerServerRestLimitsConfiguration" <tb-rate-limits fxFlex formControlName="customerServerRestLimitsConfiguration"
[type]="rateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION"> [type]="rateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION">
</tb-rate-limits> </tb-rate-limits>
</div> </div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px"> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex="50" formControlName="tenantEntityExportRateLimit" <tb-rate-limits fxFlex formControlName="tenantEntityExportRateLimit"
[type]="rateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT"> [type]="rateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT">
</tb-rate-limits> </tb-rate-limits>
<tb-rate-limits fxFlex="50" formControlName="tenantEntityImportRateLimit" <tb-rate-limits fxFlex formControlName="tenantEntityImportRateLimit"
[type]="rateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT"> [type]="rateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT">
</tb-rate-limits> </tb-rate-limits>
</div> </div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px"> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex="50" formControlName="wsUpdatesPerSessionRateLimit" <tb-rate-limits fxFlex formControlName="wsUpdatesPerSessionRateLimit"
[type]="rateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT"> [type]="rateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT">
</tb-rate-limits> </tb-rate-limits>
<tb-rate-limits fxFlex="50" formControlName="cassandraQueryTenantRateLimitsConfiguration" <tb-rate-limits fxFlex formControlName="cassandraQueryTenantRateLimitsConfiguration"
[type]="rateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION"> [type]="rateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION">
</tb-rate-limits> </tb-rate-limits>
</div> </div>

View File

@ -21,7 +21,7 @@ import { AppState } from '@app/core/core.state';
import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { DefaultTenantProfileConfiguration, TenantProfileConfiguration } from '@shared/models/tenant.model'; import { DefaultTenantProfileConfiguration, TenantProfileConfiguration } from '@shared/models/tenant.model';
import { isDefinedAndNotNull } from '@core/utils'; import { isDefinedAndNotNull } from '@core/utils';
import { RateLimitsType } from '@shared/models/rate-limits.models'; import { RateLimitsType } from './rate-limits/rate-limits.models';
@Component({ @Component({
selector: 'tb-default-tenant-profile-configuration', selector: 'tb-default-tenant-profile-configuration',

View File

@ -25,14 +25,11 @@
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
</mat-toolbar> </mat-toolbar>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div mat-dialog-content> <div mat-dialog-content>
<fieldset [disabled]="isLoading$ | async"> <fieldset>
<div fxFlex fxLayout="column"> <div fxFlex fxLayout="column">
<tb-rate-limits-list <tb-rate-limits-list
formControlName="rateLimits" formControlName="rateLimits">
[disabled]="isLoading$ | async">
</tb-rate-limits-list> </tb-rate-limits-list>
</div> </div>
</fieldset> </fieldset>
@ -40,12 +37,11 @@
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions fxLayoutAlign="end center">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)"
(click)="cancel()" cdkFocusInitial> (click)="cancel()" cdkFocusInitial>
{{ 'action.cancel' | translate }} {{ 'action.cancel' | translate }}
</button> </button>
<button *ngIf="!data.readonly" mat-raised-button color="primary" (click)="save()" <button *ngIf="!data.readonly" mat-raised-button color="primary" (click)="save()"
[disabled]="(isLoading$ | async) || editDetailsFormGroup.invalid || !editDetailsFormGroup.dirty"> [disabled]="editDetailsFormGroup.invalid || !editDetailsFormGroup.dirty">
{{ 'action.save' | translate }} {{ 'action.save' | translate }}
</button> </button>
</div> </div>

View File

@ -19,7 +19,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { DialogComponent } from '@app/shared/components/dialog.component'; import { DialogComponent } from '@app/shared/components/dialog.component';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
@ -31,16 +31,12 @@ export interface RateLimitsDetailsDialogData {
} }
@Component({ @Component({
templateUrl: './rate-limits-details-dialog.component.html', templateUrl: './rate-limits-details-dialog.component.html'
providers: [{provide: ErrorStateMatcher, useExisting: RateLimitsDetailsDialogComponent}]
}) })
export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimitsDetailsDialogComponent, any> export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimitsDetailsDialogComponent> implements OnInit {
implements OnInit, ErrorStateMatcher {
editDetailsFormGroup: FormGroup; editDetailsFormGroup: FormGroup;
submitted: boolean = false;
rateLimits: string = this.data.rateLimits; rateLimits: string = this.data.rateLimits;
title: string = this.data.title; title: string = this.data.title;
@ -49,7 +45,7 @@ export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimits
protected router: Router, protected router: Router,
@Inject(MAT_DIALOG_DATA) public data: RateLimitsDetailsDialogData, @Inject(MAT_DIALOG_DATA) public data: RateLimitsDetailsDialogData,
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
public dialogRef: MatDialogRef<RateLimitsDetailsDialogComponent, any>, public dialogRef: MatDialogRef<RateLimitsDetailsDialogComponent>,
private fb: FormBuilder, private fb: FormBuilder,
public translate: TranslateService) { public translate: TranslateService) {
super(store, router, dialogRef); super(store, router, dialogRef);
@ -65,18 +61,11 @@ export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimits
ngOnInit(): void { ngOnInit(): void {
} }
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
const customErrorState = !!(control && control.invalid && this.submitted);
return originalErrorState || customErrorState;
}
cancel(): void { cancel(): void {
this.dialogRef.close(false); this.dialogRef.close(undefined);
} }
save(): void { save(): void {
this.submitted = true;
this.dialogRef.close(this.editDetailsFormGroup.get('rateLimits').value); this.dialogRef.close(this.editDetailsFormGroup.get('rateLimits').value);
} }

View File

@ -15,9 +15,9 @@
limitations under the License. limitations under the License.
--> -->
<section fxFlex fxLayout="column" [formGroup]="rateLimitsListFormGroup"> <section [formGroup]="rateLimitsListFormGroup">
<div fxFlex fxLayout="column" [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray().controls; let $index = index"> <div fxFlex [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
<div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray().controls.length > 1" translate> <div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray.controls.length > 1" translate>
tenant-profile.rate-limits.but-less-than tenant-profile.rate-limits.but-less-than
</div> </div>
<div fxFlex fxLayout="row" fxLayoutGap="8px"> <div fxFlex fxLayout="row" fxLayoutGap="8px">
@ -45,7 +45,7 @@
</mat-form-field> </mat-form-field>
<button mat-icon-button type="button" color="primary" <button mat-icon-button type="button" color="primary"
class="tb-rate-limits-button" class="tb-rate-limits-button"
*ngIf="!rateLimitsFormArray().disabled" *ngIf="!rateLimitsFormArray.disabled"
(click)="removeRateLimits($index)" (click)="removeRateLimits($index)"
[disabled]="disabled" [disabled]="disabled"
[matTooltip]="'tenant-profile.rate-limits.remove-limit' | translate" matTooltipPosition="above"> [matTooltip]="'tenant-profile.rate-limits.remove-limit' | translate" matTooltipPosition="above">
@ -53,14 +53,12 @@
</button> </button>
</div> </div>
</div> </div>
<div> <button mat-raised-button color="primary" *ngIf="!rateLimitsFormArray.disabled"
<button mat-raised-button color="primary" *ngIf="!rateLimitsFormArray().disabled" (click)="addRateLimits()"
(click)="addRateLimits()" [disabled]="disabled"
[disabled]="disabled" [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
[matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above"> <span translate>tenant-profile.rate-limits.add-limit</span>
<span translate>tenant-profile.rate-limits.add-limit</span> </button>
</button>
</div>
<div fxFlex fxLayoutGap="8px" fxLayout="column" class="tb-rate-limits-preview" [ngClass]="{'tb-rate-limits-preview-short': !disabled}"> <div fxFlex fxLayoutGap="8px" fxLayout="column" class="tb-rate-limits-preview" [ngClass]="{'tb-rate-limits-preview-short': !disabled}">
<span translate>tenant-profile.rate-limits.preview</span> <span translate>tenant-profile.rate-limits.preview</span>
<div> <div>

View File

@ -32,7 +32,7 @@ import {
RateLimits, RateLimits,
rateLimitsArrayToString, rateLimitsArrayToString,
stringToRateLimitsArray stringToRateLimitsArray
} from '@shared/models/rate-limits.models'; } from './rate-limits.models';
import { isDefinedAndNotNull } from '@core/utils'; import { isDefinedAndNotNull } from '@core/utils';
@Component({ @Component({
@ -68,17 +68,17 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
} }
ngOnInit(): void { ngOnInit(): void {
this.rateLimitsListFormGroup = this.fb.group({}); this.rateLimitsListFormGroup = this.fb.group({
this.rateLimitsListFormGroup.addControl('rateLimits', rateLimits: this.fb.array([])
this.fb.array([])); });
this.rateLimitsControl = this.fb.control(null); this.rateLimitsControl = this.fb.control(null);
this.rateLimitsListFormGroup.valueChanges.subscribe((value) => { this.valueChangeSubscription = this.rateLimitsListFormGroup.valueChanges.subscribe((value) => {
this.updateView(value?.rateLimits); this.updateView(value?.rateLimits);
} }
); );
} }
rateLimitsFormArray(): FormArray { get rateLimitsFormArray(): FormArray {
return this.rateLimitsListFormGroup.get('rateLimits') as FormArray; return this.rateLimitsListFormGroup.get('rateLimits') as FormArray;
} }
@ -107,16 +107,11 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
} }
writeValue(value: string) { writeValue(value: string) {
if (this.valueChangeSubscription) {
this.valueChangeSubscription.unsubscribe();
}
const rateLimitsControls: Array<FormGroup> = []; const rateLimitsControls: Array<FormGroup> = [];
if (value) { if (value) {
let rateLimitsArray = value.split(','); let rateLimitsArray = value.split(',');
for (let i = 0; i < rateLimitsArray.length; i++) { for (let i = 0; i < rateLimitsArray.length; i++) {
let valueTime = rateLimitsArray[i].split(':'); const [value, time] = rateLimitsArray[i].split(':');
let value = valueTime[0];
let time = valueTime[1];
const rateLimitsControl = this.fb.group({ const rateLimitsControl = this.fb.group({
value: [value, [Validators.required]], value: [value, [Validators.required]],
time: [time, [Validators.required]] time: [time, [Validators.required]]
@ -127,11 +122,8 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
rateLimitsControls.push(rateLimitsControl); rateLimitsControls.push(rateLimitsControl);
} }
} }
this.rateLimitsListFormGroup.setControl('rateLimits', this.fb.array(rateLimitsControls)); this.rateLimitsListFormGroup.setControl('rateLimits', this.fb.array(rateLimitsControls), {emitEvent: false});
this.rateLimitsControl.patchValue(stringToRateLimitsArray(value), {emitEvent: false}); this.rateLimitsControl.patchValue(stringToRateLimitsArray(value), {emitEvent: false});
this.valueChangeSubscription = this.rateLimitsListFormGroup.valueChanges.subscribe((value) => {
this.updateView(value?.rateLimits);
});
} }
public removeRateLimits(index: number) { public removeRateLimits(index: number) {
@ -139,17 +131,17 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
} }
public addRateLimits() { public addRateLimits() {
const rateLimitsArray = this.rateLimitsListFormGroup.get('rateLimits') as FormArray; this.rateLimitsFormArray.push(this.fb.group({
rateLimitsArray.push(this.fb.group({
value: [null, [Validators.required]], value: [null, [Validators.required]],
time: [null, [Validators.required]] time: [null, [Validators.required]]
})); }));
this.rateLimitsListFormGroup.updateValueAndValidity();
} }
updateView(rateLimitsArray: Array<RateLimits>) { updateView(rateLimitsArray: Array<RateLimits>) {
if (rateLimitsArray.length > 0) { if (rateLimitsArray.length > 0) {
const notNullRateLimits = rateLimitsArray.filter(rateLimits => isDefinedAndNotNull(rateLimits.value) && isDefinedAndNotNull(rateLimits.time)); const notNullRateLimits = rateLimitsArray.filter(rateLimits =>
isDefinedAndNotNull(rateLimits.value) && isDefinedAndNotNull(rateLimits.time)
);
const rateLimitsString = rateLimitsArrayToString(notNullRateLimits); const rateLimitsString = rateLimitsArrayToString(notNullRateLimits);
this.propagateChange(rateLimitsString); this.propagateChange(rateLimitsString);
this.rateLimitsControl.patchValue(stringToRateLimitsArray(rateLimitsString), {emitEvent: false}); this.rateLimitsControl.patchValue(stringToRateLimitsArray(rateLimitsString), {emitEvent: false});

View File

@ -15,5 +15,5 @@
limitations under the License. limitations under the License.
--> -->
<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled, required: requiredClass, nowrap: nowrap}" <div class="tb-rate-limits-text" [ngClass]="{disabled: disabled}"
[innerHTML]="rateLimitsText"></div> [innerHTML]="rateLimitsText"></div>

View File

@ -20,14 +20,6 @@
&.disabled { &.disabled {
opacity: 0.7; opacity: 0.7;
} }
&.required {
color: #f44336;
padding: 0 4px;
}
&.nowrap {
white-space: nowrap;
overflow: hidden;
}
} }
} }

View File

@ -18,8 +18,7 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { RateLimits, rateLimitsArrayToHtml } from './rate-limits.models';
import { RateLimits, rateLimitsArrayToHtml } from '@shared/models/rate-limits.models';
@Component({ @Component({
selector: 'tb-rate-limits-text', selector: 'tb-rate-limits-text',
@ -35,26 +34,11 @@ import { RateLimits, rateLimitsArrayToHtml } from '@shared/models/rate-limits.mo
}) })
export class RateLimitsTextComponent implements ControlValueAccessor, OnInit { export class RateLimitsTextComponent implements ControlValueAccessor, OnInit {
private requiredValue: boolean;
get required(): boolean {
return this.requiredValue;
}
@Input()
set required(value: boolean) {
this.requiredValue = coerceBooleanProperty(value);
}
@Input() @Input()
disabled: boolean; disabled: boolean;
@Input()
noRateLimitsText = this.translate.instant('tenant-profile.rate-limits.not-set'); noRateLimitsText = this.translate.instant('tenant-profile.rate-limits.not-set');
@Input()
nowrap = false;
requiredClass = false;
public rateLimitsText: string; public rateLimitsText: string;
private propagateChange = (v: any) => { }; private propagateChange = (v: any) => { };
@ -83,15 +67,10 @@ export class RateLimitsTextComponent implements ControlValueAccessor, OnInit {
} }
private updateText(value: Array<RateLimits>) { private updateText(value: Array<RateLimits>) {
this.requiredClass = false;
if (value && value.length) { if (value && value.length) {
this.rateLimitsText = rateLimitsArrayToHtml(this.translate, value); this.rateLimitsText = rateLimitsArrayToHtml(this.translate, value);
} else { } else {
if (this.required && !this.disabled) { this.rateLimitsText = this.noRateLimitsText;
this.requiredClass = true;
} else {
this.rateLimitsText = this.noRateLimitsText;
}
} }
} }

View File

@ -34,7 +34,7 @@ import {
rateLimitsLabelTranslationMap, rateLimitsLabelTranslationMap,
RateLimitsType, RateLimitsType,
stringToRateLimitsArray stringToRateLimitsArray
} from '@shared/models/rate-limits.models'; } from './rate-limits.models';
@Component({ @Component({
selector: 'tb-rate-limits', selector: 'tb-rate-limits',