From 442bb837847a24be773965a4e5c2a06a61155bac Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 8 Feb 2022 13:35:49 +0200
Subject: [PATCH] UI: Fix timewindow panel form validation - disable
 aggregation limit check when aggregation is not none.

---
 .../time/timewindow-panel.component.html      |  2 +-
 .../time/timewindow-panel.component.ts        | 28 +++++++++++++++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
index 21011736e9..1bb893d219 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
@@ -130,7 +130,7 @@
             </mat-form-field>
           </section>
         </section>
-        <section fxLayout="row" [fxShow]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
+        <section fxLayout="row" *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
           <section fxLayout="column" [fxShow]="isEdit">
             <label class="tb-small hide-label" translate>timewindow.hide</label>
             <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval"
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
index 86d81e6840..09fa20aaa3 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
@@ -155,9 +155,9 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
             }),
             limit: this.fb.control({
               value: this.timewindow.aggregation && typeof this.timewindow.aggregation.limit !== 'undefined'
-                ? this.timewindow.aggregation.limit : null,
+                ? this.checkLimit(this.timewindow.aggregation.limit) : null,
               disabled: hideAggInterval
-            }, [Validators.min(this.minDatapointsLimit()), Validators.max(this.maxDatapointsLimit())])
+            }, [])
           }
         ),
         timezone: this.fb.control({
@@ -166,6 +166,30 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
           disabled: hideTimezone
         })
     });
+    this.updateValidators();
+    this.timewindowForm.get('aggregation.type').valueChanges.subscribe(() => {
+      this.updateValidators();
+    });
+  }
+
+  private checkLimit(limit?: number): number {
+    if (!limit || limit < this.minDatapointsLimit()) {
+      return this.minDatapointsLimit();
+    } else if (limit > this.maxDatapointsLimit()) {
+      return this.maxDatapointsLimit();
+    }
+    return limit;
+  }
+
+  private updateValidators() {
+    const aggType = this.timewindowForm.get('aggregation.type').value;
+    if (aggType !== AggregationType.NONE) {
+      this.timewindowForm.get('aggregation.limit').clearValidators();
+    } else {
+      this.timewindowForm.get('aggregation.limit').setValidators([Validators.min(this.minDatapointsLimit()),
+        Validators.max(this.maxDatapointsLimit())]);
+    }
+    this.timewindowForm.get('aggregation.limit').updateValueAndValidity({emitEvent: false});
   }
 
   update() {