From 609ba690f5f0d53ea8a803b54dddb1860886f7dc Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Wed, 26 Mar 2025 17:06:45 +0200
Subject: [PATCH] Fixed Calculated fields creation of arguments with same name
 and adjustments

---
 .../calculated-fields-table-config.ts         |  2 +-
 ...lated-field-arguments-table.component.html |  6 ++--
 ...culated-field-arguments-table.component.ts | 36 +++++++++----------
 ...lculated-field-argument-panel.component.ts | 11 +++---
 ...entity-debug-settings-panel.component.html |  2 +-
 5 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts
index 69c0a35fb5..c5b256ea89 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts
@@ -160,7 +160,7 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
 
   private getExpressionLabel(entity: CalculatedField): string {
     if (entity.type === CalculatedFieldType.SCRIPT) {
-      return 'function calculate(' + Object.keys(entity.configuration.arguments).join(', ') + ')';
+      return 'function calculate(ctx, ' + Object.keys(entity.configuration.arguments).join(', ') + ')';
     } else {
       return entity.configuration.expression;
     }
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
index 39cd4b757c..53d8a9d7b6 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
@@ -87,17 +87,17 @@
       </ng-container>
       <ng-container matColumnDef="actions" stickyEnd>
         <mat-header-cell *matHeaderCellDef class="w-20 min-w-20"/>
-        <mat-cell *matCellDef="let argument; let $index = index">
+        <mat-cell *matCellDef="let argument;">
           <div class="tb-form-table-row-cell-buttons flex w-20 min-w-20">
             <button type="button"
                     mat-icon-button
                     #button
-                    (click)="manageArgument($event, button, argument, $index)"
+                    (click)="manageArgument($event, button, argument)"
                     [matTooltip]="'action.edit' | translate"
                     matTooltipPosition="above">
               <mat-icon
                 [matBadgeHidden]="!(argument.refEntityKey.type === ArgumentType.Rolling
-                          && calculatedFieldType === CalculatedFieldType.SIMPLE) && !entityNameErrorSet.has(argument.refEntityId?.id)"
+                          && calculatedFieldType === CalculatedFieldType.SIMPLE) && argument.refEntityId?.id !== NULL_UUID"
                 matBadgeColor="warn"
                 matBadgeSize="small"
                 matBadge="*"
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts
index 945fc67ad4..faca709b17 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.ts
@@ -28,7 +28,6 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import {
-  AbstractControl,
   ControlValueAccessor,
   FormBuilder,
   NG_VALIDATORS,
@@ -60,6 +59,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { catchError } from 'rxjs/operators';
 import { NEVER } from 'rxjs';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
 
 @Component({
   selector: 'tb-calculated-field-arguments-table',
@@ -88,9 +88,8 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   errorText = '';
-  argumentsFormArray = this.fb.array<AbstractControl>([]);
-  entityNameMap = new Map<string, string>();
-  entityNameErrorSet = new Set<string>();
+  argumentsFormArray = this.fb.array<CalculatedFieldArgumentValue>([]);
+  entityNameMap = new Map<string, string>([[NULL_UUID, '']]);
   sortOrder = { direction: 'asc', property: '' };
   dataSource = new CalculatedFieldArgumentDatasource();
 
@@ -100,6 +99,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
   readonly ArgumentType = ArgumentType;
   readonly CalculatedFieldType = CalculatedFieldType;
   readonly maxArgumentsPerCF = getCurrentAuthState(this.store).maxArgumentsPerCF;
+  readonly NULL_UUID = NULL_UUID;
 
   private popoverComponent: TbPopoverComponent<CalculatedFieldArgumentPanelComponent>;
   private propagateChange: (argumentsObj: Record<string, CalculatedFieldArgument>) => void = () => {};
@@ -154,7 +154,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
     this.argumentsFormArray.markAsDirty();
   }
 
-  manageArgument($event: Event, matButton: MatButton, argument = {} as CalculatedFieldArgumentValue, index?: number): void {
+  manageArgument($event: Event, matButton: MatButton, argument = {} as CalculatedFieldArgumentValue): void {
     $event?.stopPropagation();
     if (this.popoverComponent && !this.popoverComponent.tbHidden) {
       this.popoverComponent.hide();
@@ -163,31 +163,30 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
     if (this.popoverService.hasPopover(trigger)) {
       this.popoverService.hidePopover(trigger);
     } else {
+      const index = this.argumentsFormArray.controls.findIndex(control => isEqual(control.value, argument));
+      const isExists = index !== -1;
       const ctx = {
         index,
         argument,
         entityId: this.entityId,
         calculatedFieldType: this.calculatedFieldType,
-        buttonTitle: this.argumentsFormArray.at(index)?.value ? 'action.apply' : 'action.add',
+        buttonTitle: isExists ? 'action.apply' : 'action.add',
         tenantId: this.tenantId,
         entityName: this.entityName,
-        entityHasError: this.entityNameErrorSet.has(argument.refEntityId?.id),
         usedArgumentNames: this.argumentsFormArray.value.map(({ argumentName }) => argumentName).filter(name => name !== argument.argumentName),
       };
       this.popoverComponent = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, CalculatedFieldArgumentPanelComponent, isDefined(index) ? 'left' : 'right', false, null,
+        this.viewContainerRef, CalculatedFieldArgumentPanelComponent, isExists ? 'left' : 'right', false, null,
         ctx,
         {},
         {}, {}, true);
-      this.popoverComponent.tbComponentRef.instance.argumentsDataApplied.subscribe(({ value, index }) => {
+      this.popoverComponent.tbComponentRef.instance.argumentsDataApplied.subscribe((value ) => {
         this.popoverComponent.hide();
-        const formGroup = this.fb.group(value);
-        if (isDefinedAndNotNull(index)) {
-          this.argumentsFormArray.setControl(index, formGroup);
+        if (isExists) {
+          this.argumentsFormArray.at(index).setValue(value);
         } else {
-          this.argumentsFormArray.push(formGroup);
+          this.argumentsFormArray.push(this.fb.control(value));
         }
-        formGroup.markAsDirty();
         this.cd.markForCheck();
       });
     }
@@ -202,7 +201,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
     if (this.calculatedFieldType === CalculatedFieldType.SIMPLE
       && this.argumentsFormArray.controls.some(control => control.value.refEntityKey.type === ArgumentType.Rolling)) {
       this.errorText = 'calculated-fields.hint.arguments-simple-with-rolling';
-    } else if (this.entityNameErrorSet.size) {
+    } else if (this.argumentsFormArray.controls.some(control => control.value.refEntityId?.id === NULL_UUID)) {
       this.errorText = 'calculated-fields.hint.arguments-entity-not-found';
     } else if (!this.argumentsFormArray.controls.length) {
       this.errorText = 'calculated-fields.hint.arguments-empty';
@@ -234,20 +233,21 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
         ...argumentsObj[key],
         argumentName: key
       };
-      this.argumentsFormArray.push(this.fb.group(value), { emitEvent: false });
+      this.argumentsFormArray.push(this.fb.control(value), { emitEvent: false });
     });
     this.argumentsFormArray.updateValueAndValidity();
   }
 
   private updateEntityNameMap(value: CalculatedFieldArgumentValue[]): void {
-    this.entityNameErrorSet.clear();
     value.forEach(({ refEntityId = {}}) => {
       if (refEntityId.id && !this.entityNameMap.has(refEntityId.id)) {
         const { id, entityType } = refEntityId as EntityId;
         this.entityService.getEntity(entityType as EntityType, id, { ignoreLoading: true, ignoreErrors: true })
           .pipe(
             catchError(() => {
-              this.entityNameErrorSet.add(id);
+              const control = this.argumentsFormArray.controls.find(control => control.value.refEntityId?.id === id);
+              control.setValue({ ...control.value, refEntityId: { ...control.value.refEntityId, id: NULL_UUID } });
+
               return NEVER;
             }),
             takeUntilDestroyed(this.destroyRef)
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-argument-panel.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-argument-panel.component.ts
index 8aa61eb1a4..70cf529348 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-argument-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-argument-panel.component.ts
@@ -42,6 +42,7 @@ import { getCurrentAuthState } from '@core/auth/auth.selectors';
 import { AppState } from '@core/core.state';
 import { Store } from '@ngrx/store';
 import { EntityAutocompleteComponent } from '@shared/components/entity/entity-autocomplete.component';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
 
 @Component({
   selector: 'tb-calculated-field-argument-panel',
@@ -51,18 +52,16 @@ import { EntityAutocompleteComponent } from '@shared/components/entity/entity-au
 export class CalculatedFieldArgumentPanelComponent implements OnInit, AfterViewInit {
 
   @Input() buttonTitle: string;
-  @Input() index: number;
   @Input() argument: CalculatedFieldArgumentValue;
   @Input() entityId: EntityId;
   @Input() tenantId: string;
   @Input() entityName: string;
-  @Input() entityHasError: boolean;
   @Input() calculatedFieldType: CalculatedFieldType;
   @Input() usedArgumentNames: string[];
 
   @ViewChild('entityAutocomplete') entityAutocomplete: EntityAutocompleteComponent;
 
-  argumentsDataApplied = output<{ value: CalculatedFieldArgumentValue, index: number }>();
+  argumentsDataApplied = output<CalculatedFieldArgumentValue>();
 
   readonly maxDataPointsPerRollingArg = getCurrentAuthState(this.store).maxDataPointsPerRollingArg;
   readonly defaultLimit = Math.floor(this.maxDataPointsPerRollingArg / 10);
@@ -106,7 +105,7 @@ export class CalculatedFieldArgumentPanelComponent implements OnInit, AfterViewI
     private store: Store<AppState>
   ) {
     this.observeEntityFilterChanges();
-    this.observeEntityTypeChanges()
+    this.observeEntityTypeChanges();
     this.observeEntityKeyChanges();
     this.observeUpdatePosition();
   }
@@ -141,7 +140,7 @@ export class CalculatedFieldArgumentPanelComponent implements OnInit, AfterViewI
   }
 
   ngAfterViewInit(): void {
-    if (this.entityHasError) {
+    if (this.argument.refEntityId.id === NULL_UUID) {
       this.entityAutocomplete.selectEntityFormGroup.get('entity').markAsTouched();
     }
   }
@@ -156,7 +155,7 @@ export class CalculatedFieldArgumentPanelComponent implements OnInit, AfterViewI
       value.defaultValue = value.defaultValue.trim();
     }
     value.refEntityKey.key = value.refEntityKey.key.trim();
-    this.argumentsDataApplied.emit({ value, index: this.index });
+    this.argumentsDataApplied.emit(value);
   }
 
   cancel(): void {
diff --git a/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.html
index 4a9bc57d8d..5863a295d6 100644
--- a/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.html
@@ -53,7 +53,7 @@
                 color="primary"
                 type="button"
                 (click)="onCancel(); additionalActionConfig.action()">
-          {{ additionalActionConfig.title | translate }}
+          {{ additionalActionConfig.title }}
         </button>
       }
     </div>