Commit 35b37f4875056d13307a62c98296347663a415a9

Authored by Vladyslav_Prykhodko
1 parent 2e096cf2

UI: Added dynamic change state disable input fields at multiple attributes widget

... ... @@ -24,16 +24,17 @@ import { UtilsService } from '@core/services/utils.service';
24 24 import { TranslateService } from '@ngx-translate/core';
25 25 import { DataKey, Datasource, DatasourceData, DatasourceType, WidgetConfig } from '@shared/models/widget.models';
26 26 import { IWidgetSubscription } from '@core/api/widget-api.models';
27   -import { isDefined, isEqual, isUndefined, createLabelFromDatasource, isDefinedAndNotNull } from '@core/utils';
  27 +import { createLabelFromDatasource, isDefined, isDefinedAndNotNull, isEqual, isUndefined } from '@core/utils';
28 28 import { EntityType } from '@shared/models/entity-type.models';
29 29 import * as _moment from 'moment';
30 30 import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
31 31 import { RequestConfig } from '@core/http/http-utils';
32 32 import { AttributeService } from '@core/http/attribute.service';
33 33 import { AttributeData, AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
34   -import { forkJoin, Observable } from 'rxjs';
  34 +import { forkJoin, Observable, Subject } from 'rxjs';
35 35 import { EntityId } from '@shared/models/id/entity-id';
36 36 import { ResizeObserver } from '@juggle/resize-observer';
  37 +import { takeUntil } from 'rxjs/operators';
37 38
38 39 type FieldAlignment = 'row' | 'column';
39 40
... ... @@ -106,6 +107,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
106 107 private widgetConfig: WidgetConfig;
107 108 private subscription: IWidgetSubscription;
108 109 private datasources: Array<Datasource>;
  110 + private destroy$ = new Subject();
109 111 public sources: Array<MultipleInputWidgetSource> = [];
110 112
111 113 isVerticalAlignment: boolean;
... ... @@ -153,6 +155,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
153 155 if (this.formResize$) {
154 156 this.formResize$.disconnect();
155 157 }
  158 + this.destroy$.next();
  159 + this.destroy$.complete();
156 160 }
157 161
158 162 private initializeConfig() {
... ... @@ -256,6 +260,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
256 260 private buildForm() {
257 261 this.multipleInputFormGroup = this.fb.group({});
258 262 this.sources.forEach((source) => {
  263 + const addedFormControl = {};
  264 + const waitFormControl = {};
259 265 for (const key of this.visibleKeys(source)) {
260 266 const validators: ValidatorFn[] = [];
261 267 if (key.settings.required) {
... ... @@ -277,6 +283,36 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
277 283 disabled: key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition},
278 284 validators
279 285 );
  286 + if (this.settings.showActionButtons) {
  287 + addedFormControl[key.name] = formControl;
  288 + if (key.settings.isEditable === 'editable' && key.settings.disabledOnDataKey) {
  289 + if (addedFormControl.hasOwnProperty(key.settings.disabledOnDataKey)) {
  290 + addedFormControl[key.settings.disabledOnDataKey].valueChanges.pipe(
  291 + takeUntil(this.destroy$)
  292 + ).subscribe((value) => {
  293 + if (!value) {
  294 + formControl.disable({emitEvent: false});
  295 + } else {
  296 + formControl.enable({emitEvent: false});
  297 + }
  298 + });
  299 + } else {
  300 + waitFormControl[key.settings.disabledOnDataKey] = formControl;
  301 + }
  302 + }
  303 +
  304 + if (waitFormControl.hasOwnProperty(key.name)) {
  305 + formControl.valueChanges.pipe(
  306 + takeUntil(this.destroy$)
  307 + ).subscribe((value) => {
  308 + if (!value) {
  309 + waitFormControl[key.name].disable({emitEvent: false});
  310 + } else {
  311 + waitFormControl[key.name].enable({emitEvent: false});
  312 + }
  313 + });
  314 + }
  315 + }
280 316 this.multipleInputFormGroup.addControl(key.formId, formControl);
281 317 }
282 318 });
... ...