From 35b37f4875056d13307a62c98296347663a415a9 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 4 Mar 2021 17:17:26 +0200
Subject: [PATCH] UI: Added dynamic change state disable input fields at
 multiple attributes widget

---
 .../lib/multiple-input-widget.component.ts    | 40 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
index 027a303f81..c5b8eb21b4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@@ -24,16 +24,17 @@ import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DataKey, Datasource, DatasourceData, DatasourceType, WidgetConfig } from '@shared/models/widget.models';
 import { IWidgetSubscription } from '@core/api/widget-api.models';
-import { isDefined, isEqual, isUndefined, createLabelFromDatasource, isDefinedAndNotNull } from '@core/utils';
+import { createLabelFromDatasource, isDefined, isDefinedAndNotNull, isEqual, isUndefined } from '@core/utils';
 import { EntityType } from '@shared/models/entity-type.models';
 import * as _moment from 'moment';
 import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { RequestConfig } from '@core/http/http-utils';
 import { AttributeService } from '@core/http/attribute.service';
 import { AttributeData, AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
-import { forkJoin, Observable } from 'rxjs';
+import { forkJoin, Observable, Subject } from 'rxjs';
 import { EntityId } from '@shared/models/id/entity-id';
 import { ResizeObserver } from '@juggle/resize-observer';
+import { takeUntil } from 'rxjs/operators';
 
 type FieldAlignment = 'row' | 'column';
 
@@ -106,6 +107,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
   private widgetConfig: WidgetConfig;
   private subscription: IWidgetSubscription;
   private datasources: Array<Datasource>;
+  private destroy$ = new Subject();
   public sources: Array<MultipleInputWidgetSource> = [];
 
   isVerticalAlignment: boolean;
@@ -153,6 +155,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
     if (this.formResize$) {
       this.formResize$.disconnect();
     }
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   private initializeConfig() {
@@ -256,6 +260,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
   private buildForm() {
     this.multipleInputFormGroup = this.fb.group({});
     this.sources.forEach((source) => {
+      const addedFormControl = {};
+      const waitFormControl = {};
       for (const key of this.visibleKeys(source)) {
         const validators: ValidatorFn[] = [];
         if (key.settings.required) {
@@ -277,6 +283,36 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
                       disabled: key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition},
           validators
          );
+        if (this.settings.showActionButtons) {
+          addedFormControl[key.name] = formControl;
+          if (key.settings.isEditable === 'editable' && key.settings.disabledOnDataKey) {
+            if (addedFormControl.hasOwnProperty(key.settings.disabledOnDataKey)) {
+              addedFormControl[key.settings.disabledOnDataKey].valueChanges.pipe(
+                takeUntil(this.destroy$)
+              ).subscribe((value) => {
+                if (!value) {
+                  formControl.disable({emitEvent: false});
+                } else {
+                  formControl.enable({emitEvent: false});
+                }
+              });
+            } else {
+              waitFormControl[key.settings.disabledOnDataKey] = formControl;
+            }
+          }
+
+          if (waitFormControl.hasOwnProperty(key.name)) {
+            formControl.valueChanges.pipe(
+              takeUntil(this.destroy$)
+            ).subscribe((value) => {
+              if (!value) {
+                waitFormControl[key.name].disable({emitEvent: false});
+              } else {
+                waitFormControl[key.name].enable({emitEvent: false});
+              }
+            });
+          }
+        }
         this.multipleInputFormGroup.addControl(key.formId, formControl);
       }
     });