From 1d92cd227e89567540bc2ebe8f5f6ffbd1dc4291 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Mon, 20 May 2024 15:29:32 +0300
Subject: [PATCH] UI: refactored widget-action-dialog column index validation

---
 .../action/widget-action-dialog.component.ts  | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index 7a8d14e561..8f2398cab2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -118,7 +118,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
   ngOnInit(): void {
     this.widgetActionFormGroup = this.fb.group({
       actionSourceId: [this.action.actionSourceId, Validators.required],
-      columnIndex: [this.checkColumnIndex(this.action.columnIndex)],
+      columnIndex: [{value: this.checkColumnIndex(this.action.columnIndex), disabled: true}, Validators.required],
       name: [this.action.name, [this.validateActionName(), Validators.required]],
       icon: [this.action.icon, Validators.required],
       useShowWidgetActionFunction: [this.action.useShowWidgetActionFunction],
@@ -132,12 +132,11 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       this.widgetActionFormGroup.get('name').updateValueAndValidity();
       this.updateShowWidgetActionForm();
       if (value === 'cellClick') {
-        this.widgetActionFormGroup.get('columnIndex').setValidators([Validators.required]);
+        this.widgetActionFormGroup.get('columnIndex').enable();
         this.getCellClickColumnsInfo();
       } else {
-        this.widgetActionFormGroup.get('columnIndex').clearValidators();
+        this.widgetActionFormGroup.get('columnIndex').disable();
       }
-      this.widgetActionFormGroup.get('columnIndex').updateValueAndValidity();
     });
     this.widgetActionFormGroup.get('useShowWidgetActionFunction').valueChanges.pipe(
       takeUntil(this.destroy$)
@@ -145,12 +144,12 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       this.updateShowWidgetActionForm();
     });
     setTimeout(() => {
-      if (this.action?.actionSourceId === 'cellClick' && isDefinedAndNotNull(this.action.columnIndex) &&
-        this.widgetActionFormGroup.get('columnIndex').value === null) {
-        this.widgetActionFormGroup.get('columnIndex').setValidators([Validators.required]);
-        this.widgetActionFormGroup.get('columnIndex').updateValueAndValidity();
-        this.columnIndexPlaceholderText = `${this.action.columnIndex} (${this.translate.instant('widget-config.not-set')})`;
-        this.columnIndexSelect.focus();
+      if (this.action?.actionSourceId === 'cellClick') {
+        this.widgetActionFormGroup.get('columnIndex').enable();
+        if (isDefinedAndNotNull(this.action.columnIndex) && this.widgetActionFormGroup.get('columnIndex').value === null) {
+          this.columnIndexPlaceholderText = `${this.action.columnIndex} (${this.translate.instant('widget-config.not-set')})`;
+          this.columnIndexSelect.focus();
+        }
       }
     });
   }
@@ -255,9 +254,6 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
         {...this.widgetActionFormGroup.value, ...this.widgetActionFormGroup.get('widgetAction').value};
       delete (result as any).widgetAction;
       result.id = this.action.id;
-      if (!isDefinedAndNotNull(result.columnIndex)) {
-        delete result.columnIndex;
-      }
       this.dialogRef.close(result);
     }
   }