Cleared code to access form values

This commit is contained in:
Vladyslav_Prykhodko 2020-06-11 10:09:14 +03:00
parent a2aa854378
commit 809375aa91
5 changed files with 138 additions and 137 deletions

View File

@ -28,8 +28,10 @@
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px;"> <mat-card-content style="padding-top: 16px;">
<form [formGroup]="securitySettingsFormGroup" (ngSubmit)="save()"> <form [formGroup]="securitySettingsFormGroup" (ngSubmit)="save()" autocomplete="off">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">
<div class="mat-accordion-container">
<mat-accordion multi="true">
<mat-expansion-panel [expanded]="true"> <mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
@ -67,13 +69,13 @@
min="5" min="5"
max="50" max="50"
required/> required/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy').get('minimumLength').hasError('required')"> <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('required')">
{{ 'admin.minimum-password-length-required' | translate }} {{ 'admin.minimum-password-length-required' | translate }}
</mat-error> </mat-error>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy').get('minimumLength').hasError('min')"> <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('min')">
{{ 'admin.minimum-password-length-range' | translate }} {{ 'admin.minimum-password-length-range' | translate }}
</mat-error> </mat-error>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy').get('minimumLength').hasError('max')"> <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLength').hasError('max')">
{{ 'admin.minimum-password-length-range' | translate }} {{ 'admin.minimum-password-length-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
@ -83,7 +85,7 @@
formControlName="minimumUppercaseLetters" formControlName="minimumUppercaseLetters"
step="1" step="1"
min="0"/> min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy').get('minimumUppercaseLetters').hasError('min')"> <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumUppercaseLetters').hasError('min')">
{{ 'admin.minimum-uppercase-letters-range' | translate }} {{ 'admin.minimum-uppercase-letters-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
@ -93,7 +95,7 @@
formControlName="minimumLowercaseLetters" formControlName="minimumLowercaseLetters"
step="1" step="1"
min="0"/> min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy').get('minimumLowercaseLetters').hasError('min')"> <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumLowercaseLetters').hasError('min')">
{{ 'admin.minimum-lowercase-letters-range' | translate }} {{ 'admin.minimum-lowercase-letters-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
@ -103,7 +105,7 @@
formControlName="minimumDigits" formControlName="minimumDigits"
step="1" step="1"
min="0"/> min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy').get('minimumDigits').hasError('min')"> <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumDigits').hasError('min')">
{{ 'admin.minimum-digits-range' | translate }} {{ 'admin.minimum-digits-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
@ -113,7 +115,7 @@
formControlName="minimumSpecialCharacters" formControlName="minimumSpecialCharacters"
step="1" step="1"
min="0"/> min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy').get('minimumSpecialCharacters').hasError('min')"> <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.minimumSpecialCharacters').hasError('min')">
{{ 'admin.minimum-special-characters-range' | translate }} {{ 'admin.minimum-special-characters-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
@ -123,7 +125,7 @@
formControlName="passwordExpirationPeriodDays" formControlName="passwordExpirationPeriodDays"
step="1" step="1"
min="0"/> min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy').get('passwordExpirationPeriodDays').hasError('min')"> <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.passwordExpirationPeriodDays').hasError('min')">
{{ 'admin.password-expiration-period-days-range' | translate }} {{ 'admin.password-expiration-period-days-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
@ -133,12 +135,14 @@
formControlName="passwordReuseFrequencyDays" formControlName="passwordReuseFrequencyDays"
step="1" step="1"
min="0"/> min="0"/>
<mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy').get('passwordReuseFrequencyDays').hasError('min')"> <mat-error *ngIf="securitySettingsFormGroup.get('passwordPolicy.passwordReuseFrequencyDays').hasError('min')">
{{ 'admin.password-reuse-frequency-days-range' | translate }} {{ 'admin.password-reuse-frequency-days-range' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</section> </section>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion>
</div>
<div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap"> <div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
<button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || securitySettingsFormGroup.invalid || !securitySettingsFormGroup.dirty" <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || securitySettingsFormGroup.invalid || !securitySettingsFormGroup.dirty"
type="submit">{{'action.save' | translate}} type="submit">{{'action.save' | translate}}

View File

@ -14,10 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
:host { :host {
mat-expansion-panel { .mat-accordion-container {
margin-bottom: 16px; margin-bottom: 16px;
} }
.tb-panel-title {
}
} }

View File

@ -174,8 +174,8 @@ export class NodeScriptTestDialogComponent extends DialogComponent<NodeScriptTes
const inputParams: TestScriptInputParams = { const inputParams: TestScriptInputParams = {
argNames: this.data.argNames, argNames: this.data.argNames,
scriptType: this.data.scriptType, scriptType: this.data.scriptType,
msgType: this.nodeScriptTestFormGroup.get('payload').get('msgType').value, msgType: this.nodeScriptTestFormGroup.get('payload.msgType').value,
msg: this.nodeScriptTestFormGroup.get('payload').get('msg').value, msg: this.nodeScriptTestFormGroup.get('payload.msg').value,
metadata: this.nodeScriptTestFormGroup.get('metadata').value, metadata: this.nodeScriptTestFormGroup.get('metadata').value,
script: this.nodeScriptTestFormGroup.get('script').value script: this.nodeScriptTestFormGroup.get('script').value
}; };

View File

@ -48,9 +48,9 @@
<tb-timeinterval <tb-timeinterval
formControlName="timewindowMs" formControlName="timewindowMs"
predefinedName="timewindow.last" predefinedName="timewindow.last"
[fxShow]="timewindowForm.get('history').get('historyType').value === historyTypes.LAST_INTERVAL" [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history').get('historyType').value === historyTypes.LAST_INTERVAL" timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
style="padding-top: 8px;"></tb-timeinterval> style="padding-top: 8px;"></tb-timeinterval>
</section> </section>
</mat-radio-button> </mat-radio-button>
@ -59,9 +59,9 @@
<span translate>timewindow.time-period</span> <span translate>timewindow.time-period</span>
<tb-datetime-period <tb-datetime-period
formControlName="fixedTimewindow" formControlName="fixedTimewindow"
[fxShow]="timewindowForm.get('history').get('historyType').value === historyTypes.FIXED" [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history').get('historyType').value === historyTypes.FIXED" timewindowForm.get('history.historyType').value === historyTypes.FIXED"
style="padding-top: 8px;"></tb-datetime-period> style="padding-top: 8px;"></tb-datetime-period>
</section> </section>
</mat-radio-button> </mat-radio-button>
@ -89,7 +89,7 @@
</mat-form-field> </mat-form-field>
</section> </section>
</section> </section>
<section fxLayout="row" [fxShow]="timewindowForm.get('aggregation').get('type').value === aggregationTypes.NONE"> <section fxLayout="row" [fxShow]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
<section fxLayout="column" [fxShow]="isEdit"> <section fxLayout="column" [fxShow]="isEdit">
<label class="tb-small hide-label" translate>timewindow.hide</label> <label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval" <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval"
@ -101,13 +101,13 @@
<span translate>aggregation.limit</span> <span translate>aggregation.limit</span>
<mat-slider fxFlex formControlName="limit" <mat-slider fxFlex formControlName="limit"
thumbLabel thumbLabel
[value]="timewindowForm.get('aggregation').get('limit').value" [value]="timewindowForm.get('aggregation.limit').value"
min="{{minDatapointsLimit()}}" min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"> max="{{maxDatapointsLimit()}}">
</mat-slider> </mat-slider>
<mat-form-field style="max-width: 80px;"> <mat-form-field style="max-width: 80px;">
<input matInput formControlName="limit" type="number" step="1" <input matInput formControlName="limit" type="number" step="1"
[value]="timewindowForm.get('aggregation').get('limit').value" [value]="timewindowForm.get('aggregation.limit').value"
min="{{minDatapointsLimit()}}" min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"/> max="{{maxDatapointsLimit()}}"/>
</mat-form-field> </mat-form-field>
@ -116,7 +116,7 @@
</section> </section>
</div> </div>
<div formGroupName="realtime" <div formGroupName="realtime"
*ngIf="aggregation && timewindowForm.get('aggregation').get('type').value !== aggregationTypes.NONE && *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
timewindow.selectedTab === timewindowTypes.REALTIME" class="mat-content mat-padding" fxLayout="column"> timewindow.selectedTab === timewindowTypes.REALTIME" class="mat-content mat-padding" fxLayout="column">
<tb-timeinterval <tb-timeinterval
formControlName="interval" formControlName="interval"
@ -128,7 +128,7 @@
</tb-timeinterval> </tb-timeinterval>
</div> </div>
<div formGroupName="history" <div formGroupName="history"
*ngIf="aggregation && timewindowForm.get('aggregation').get('type').value !== aggregationTypes.NONE && *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
timewindow.selectedTab === timewindowTypes.HISTORY" class="mat-content mat-padding" fxLayout="column"> timewindow.selectedTab === timewindowTypes.HISTORY" class="mat-content mat-padding" fxLayout="column">
<tb-timeinterval <tb-timeinterval
formControlName="interval" formControlName="interval"

View File

@ -174,11 +174,11 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
} }
minRealtimeAggInterval() { minRealtimeAggInterval() {
return this.timeService.minIntervalLimit(this.timewindowForm.get('realtime').get('timewindowMs').value); return this.timeService.minIntervalLimit(this.timewindowForm.get('realtime.timewindowMs').value);
} }
maxRealtimeAggInterval() { maxRealtimeAggInterval() {
return this.timeService.maxIntervalLimit(this.timewindowForm.get('realtime').get('timewindowMs').value); return this.timeService.maxIntervalLimit(this.timewindowForm.get('realtime.timewindowMs').value);
} }
minHistoryAggInterval() { minHistoryAggInterval() {
@ -203,31 +203,31 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
onHideIntervalChanged() { onHideIntervalChanged() {
if (this.timewindow.hideInterval) { if (this.timewindow.hideInterval) {
this.timewindowForm.get('history').get('historyType').disable({emitEvent: false}); this.timewindowForm.get('history.historyType').disable({emitEvent: false});
this.timewindowForm.get('history').get('timewindowMs').disable({emitEvent: false}); this.timewindowForm.get('history.timewindowMs').disable({emitEvent: false});
this.timewindowForm.get('history').get('fixedTimewindow').disable({emitEvent: false}); this.timewindowForm.get('history.fixedTimewindow').disable({emitEvent: false});
} else { } else {
this.timewindowForm.get('history').get('historyType').enable({emitEvent: false}); this.timewindowForm.get('history.historyType').enable({emitEvent: false});
this.timewindowForm.get('history').get('timewindowMs').enable({emitEvent: false}); this.timewindowForm.get('history.timewindowMs').enable({emitEvent: false});
this.timewindowForm.get('history').get('fixedTimewindow').enable({emitEvent: false}); this.timewindowForm.get('history.fixedTimewindow').enable({emitEvent: false});
} }
this.timewindowForm.markAsDirty(); this.timewindowForm.markAsDirty();
} }
onHideAggregationChanged() { onHideAggregationChanged() {
if (this.timewindow.hideAggregation) { if (this.timewindow.hideAggregation) {
this.timewindowForm.get('aggregation').get('type').disable({emitEvent: false}); this.timewindowForm.get('aggregation.type').disable({emitEvent: false});
} else { } else {
this.timewindowForm.get('aggregation').get('type').enable({emitEvent: false}); this.timewindowForm.get('aggregation.type').enable({emitEvent: false});
} }
this.timewindowForm.markAsDirty(); this.timewindowForm.markAsDirty();
} }
onHideAggIntervalChanged() { onHideAggIntervalChanged() {
if (this.timewindow.hideAggInterval) { if (this.timewindow.hideAggInterval) {
this.timewindowForm.get('aggregation').get('limit').disable({emitEvent: false}); this.timewindowForm.get('aggregation.limit').disable({emitEvent: false});
} else { } else {
this.timewindowForm.get('aggregation').get('limit').enable({emitEvent: false}); this.timewindowForm.get('aggregation.limit').enable({emitEvent: false});
} }
this.timewindowForm.markAsDirty(); this.timewindowForm.markAsDirty();
} }