From 08e7bed74ca6e872532ea7129fb578a29843867f Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 29 Oct 2025 15:36:49 +0200
Subject: [PATCH] UI: Fixed cf disabled state in component

---
 .../calculated-field-dialog.component.html     | 18 ++++++++++--------
 .../calculated-field-output.component.ts       | 12 +++++++++++-
 .../entity-key-autocomplete.component.html     |  4 ++--
 .../entity-key-autocomplete.component.ts       | 10 +++++++++-
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
index 478d41f42b..7e538a8dc7 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
@@ -64,23 +64,26 @@
       </div>
       @switch (fieldFormGroup.get('type').value) {
         @case (CalculatedFieldType.GEOFENCING) {
-          <tb-geofencing-configuration formControlName="configuration" [entityId]="data.entityId" [entityName]="data.entityName" [tenantId]="data.tenantId">
-          </tb-geofencing-configuration>
+          <tb-geofencing-configuration formControlName="configuration"
+                                       [entityId]="data.entityId"
+                                       [entityName]="data.entityName"
+                                       [tenantId]="data.tenantId"
+          ></tb-geofencing-configuration>
         }
         @case (CalculatedFieldType.PROPAGATION) {
           <tb-propagation-configuration formControlName="configuration"
                                         [entityId]="data.entityId"
                                         [entityName]="data.entityName"
                                         [tenantId]="data.tenantId"
-                                        [testScript]="onTestScript.bind(this)">
-          </tb-propagation-configuration>
+                                        [testScript]="onTestScript.bind(this)"
+          ></tb-propagation-configuration>
         }
         @case (CalculatedFieldType.RELATED_ENTITIES_AGGREGATION) {
           <tb-related-entities-aggregation-component formControlName="configuration"
                                                      [entityId]="data.entityId"
                                                      [entityName]="data.entityName"
-                                                     [tenantId]="data.tenantId">
-          </tb-related-entities-aggregation-component>
+                                                     [tenantId]="data.tenantId"
+          ></tb-related-entities-aggregation-component>
         }
         @default {
           <tb-simple-configuration formControlName="configuration"
@@ -89,8 +92,7 @@
                                    [tenantId]="data.tenantId"
                                    [isScript]="fieldFormGroup.get('type').value === CalculatedFieldType.SCRIPT"
                                    [testScript]="onTestScript.bind(this)"
-          >
-          </tb-simple-configuration>
+          ></tb-simple-configuration>
         }
       }
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.ts
index 464ca99bd2..2a9215b7cf 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.ts
@@ -113,7 +113,7 @@ export class CalculatedFieldOutputComponent implements ControlValueAccessor, Val
   }
 
   validate(): ValidationErrors | null {
-    return this.outputForm.valid ? null : {outputConfig: false};
+    return this.outputForm.valid || this.outputForm.disabled ? null : {outputConfig: false};
   }
 
   writeValue(value: CalculatedFieldOutput | CalculatedFieldSimpleOutput): void {
@@ -127,6 +127,16 @@ export class CalculatedFieldOutputComponent implements ControlValueAccessor, Val
 
   registerOnTouched(_: any): void { }
 
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.outputForm.disable({emitEvent: false});
+    } else {
+      this.outputForm.enable({emitEvent: false});
+      this.updatedFormWithMode();
+      this.toggleScopeByOutputType(this.outputForm.get('type').value);
+    }
+  }
+
   private updatedModel(value: CalculatedFieldOutput | CalculatedFieldSimpleOutput) {
     if (this.simpleMode && 'name' in value) {
       value.name = value.name?.trim() ?? '';
diff --git a/ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.html b/ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.html
index efc90ec048..c08355462f 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.html
@@ -22,13 +22,13 @@
          required
          (focusin)="keyInputSubject.next()"
          [matAutocomplete]="keysAutocomplete">
-  @if (keyControl.value) {
+  @if (keyControl.value && keyControl.enabled) {
     <button type="button"
             matSuffix mat-icon-button aria-label="Clear"
             (click)="clear()">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
-  } @else if (keyControl.hasError('required') && keyControl.touched) {
+  } @else if (keyControl.hasError('required') && keyControl.touched && keyControl.enabled) {
     <mat-icon matSuffix
               matTooltipPosition="above"
               matTooltipClass="tb-error-tooltip"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.ts b/ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.ts
index 9b656594bc..8727c17f77 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-key-autocomplete.component.ts
@@ -152,10 +152,18 @@ export class EntityKeyAutocompleteComponent implements ControlValueAccessor, Val
   registerOnTouched(_): void {}
 
   validate(): ValidationErrors | null {
-    return this.keyControl.valid ? null : { keyControl: false };
+    return this.keyControl.valid || this.keyControl.disabled ? null : { keyControl: false };
   }
 
   writeValue(value: string): void {
     this.keyControl.patchValue(value, {emitEvent: false});
   }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.keyControl.disable({emitEvent: false});
+    } else {
+      this.keyControl.enable({emitEvent: false});
+    }
+  }
 }