Add validation for time fields in delete timeseries panel form

ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html

@@ -16,13 +16,13 @@
 
 -->
 
-<form class="mat-elevation-z1" [formGroup]="deleteTimeseriesFormGroup" (ngSubmit)="delete()" style="max-width: 488px">
+<form [formGroup]="deleteTimeseriesFormGroup" style="max-width: 488px">
   <mat-toolbar>
     <h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
     <span fxFlex></span>
     <button mat-icon-button
-            (click)="cancel()"
-            type="button">
+            type="button"
+            (click)="cancel()">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
@@ -41,13 +41,13 @@
           <mat-label translate>attribute.delete-timeseries.start-time</mat-label>
           <mat-datetimepicker-toggle [for]="startDateTimePicker" matPrefix></mat-datetimepicker-toggle>
           <mat-datetimepicker #startDateTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-          <input matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
+          <input required matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
         </mat-form-field>
         <mat-form-field class="mat-block">
           <mat-label translate>attribute.delete-timeseries.ends-on</mat-label>
           <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
           <mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-          <input matInput formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
+          <input required matInput formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
         </mat-form-field>
       </div>
     </div>
@@ -57,18 +57,18 @@
       </mat-slide-toggle>
     </div>
   </div>
-  <div fxLayout="row" class="tb-panel-actions">
-    <span fxFlex></span>
-    <button mat-button color="primary"
-            type="button"
-            (click)="cancel()" cdkFocusInitial>
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="isPeriodStrategy() && (!getStartDateTimeFormControl().value || !getEndDateTimeFormControl().value)">
-      {{ 'action.apply' | translate }}
-    </button>
-  </div>
 </form>
-
+<div fxLayout="row" class="tb-panel-actions">
+  <span fxFlex></span>
+  <button mat-button color="primary"
+          type="button"
+          (click)="cancel()" cdkFocusInitial>
+    {{ 'action.cancel' | translate }}
+  </button>
+  <button mat-button mat-raised-button color="primary"
+          type="button"
+          (click)="delete()"
+          [disabled]="deleteTimeseriesFormGroup.invalid">
+    {{ 'action.apply' | translate }}
+  </button>
+</div>

ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts

@@ -21,8 +21,8 @@ import {
   timeseriesDeleteStrategyTranslations
 } from '@shared/models/telemetry/telemetry.models';
 import { MINUTE } from '@shared/models/time/time.models';
-import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
-import { Subject, Subscription } from 'rxjs';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 export const DELETE_TIMESERIES_PANEL_DATA = new InjectionToken<any>('DeleteTimeseriesPanelData');
@@ -47,10 +47,6 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
 
   deleteTimeseriesFormGroup: FormGroup;
 
-  startDateTimeSubscription: Subscription;
-
-  endDateTimeSubscription: Subscription;
-
   result: DeleteTimeseriesPanelResult = null;
 
   strategiesTranslationsMap = timeseriesDeleteStrategyTranslations;
@@ -76,14 +72,28 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
     }
     this.deleteTimeseriesFormGroup = this.fb.group({
       strategy: [TimeseriesDeleteStrategy.DELETE_ALL_DATA],
-      startDateTime: [new Date(today.getFullYear(), today.getMonth() - 1, today.getDate())],
-      endDateTime: [today],
+      startDateTime: [
+        { value: new Date(today.getFullYear(), today.getMonth() - 1, today.getDate()), disabled: true },
+        [Validators.required]
+      ],
+      endDateTime: [{ value: today, disabled: true }, [Validators.required]],
       rewriteLatest: [true]
     })
-    this.startDateTimeSubscription = this.getStartDateTimeFormControl().valueChanges.pipe(
+    this.deleteTimeseriesFormGroup.get('strategy').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(value => {
+      if (value === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD) {
+        this.deleteTimeseriesFormGroup.get('startDateTime').enable({onlySelf: true, emitEvent: false});
+        this.deleteTimeseriesFormGroup.get('endDateTime').enable({onlySelf: true, emitEvent: false});
+      } else {
+        this.deleteTimeseriesFormGroup.get('startDateTime').disable({onlySelf: true, emitEvent: false});
+        this.deleteTimeseriesFormGroup.get('endDateTime').disable({onlySelf: true, emitEvent: false});
+      }
+    })
+    this.deleteTimeseriesFormGroup.get('startDateTime').valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(value => this.onStartDateTimeChange(value));
-    this.endDateTimeSubscription = this.getEndDateTimeFormControl().valueChanges.pipe(
+    this.deleteTimeseriesFormGroup.get('endDateTime').valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(value => this.onEndDateTimeChange(value));
   }
@@ -94,8 +104,12 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
   }
 
   delete(): void {
-    this.result = this.deleteTimeseriesFormGroup.value;
-    this.overlayRef.dispose();
+    if (this.deleteTimeseriesFormGroup.valid) {
+      this.result = this.deleteTimeseriesFormGroup.value;
+      this.overlayRef.dispose();
+    } else {
+      this.deleteTimeseriesFormGroup.markAllAsTouched();
+    }
   }
 
   cancel(): void {
@@ -103,33 +117,22 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
   }
 
   isPeriodStrategy(): boolean {
-    return this.getStrategyFormControl().value === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD;
+    return this.deleteTimeseriesFormGroup.get('strategy').value === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD;
   }
 
   isDeleteLatestStrategy(): boolean {
-    return this.getStrategyFormControl().value === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE;
-  }
-
-  getStrategyFormControl(): AbstractControl {
-    return this.deleteTimeseriesFormGroup.get('strategy');
-  }
-
-  getStartDateTimeFormControl(): AbstractControl {
-    return this.deleteTimeseriesFormGroup.get('startDateTime');
-  }
-
-  getEndDateTimeFormControl(): AbstractControl {
-    return this.deleteTimeseriesFormGroup.get('endDateTime');
+    return this.deleteTimeseriesFormGroup.get('strategy').value === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE;
   }
 
   onStartDateTimeChange(newStartDateTime: Date) {
     if (newStartDateTime) {
       const endDateTimeTs = this.deleteTimeseriesFormGroup.get('endDateTime').value.getTime();
-      const startDateTimeControl = this.getStartDateTimeFormControl();
       if (newStartDateTime.getTime() >= endDateTimeTs) {
-        startDateTimeControl.patchValue(new Date(endDateTimeTs - MINUTE), {onlySelf: true, emitEvent: false});
+        this.deleteTimeseriesFormGroup.get('startDateTime')
+          .patchValue(new Date(endDateTimeTs - MINUTE), {onlySelf: true, emitEvent: false});
       } else {
-        startDateTimeControl.patchValue(newStartDateTime, {onlySelf: true, emitEvent: false});
+        this.deleteTimeseriesFormGroup.get('startDateTime')
+          .patchValue(newStartDateTime, {onlySelf: true, emitEvent: false});
       }
     }
   }
@@ -137,11 +140,12 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
   onEndDateTimeChange(newEndDateTime: Date) {
     if (newEndDateTime) {
       const startDateTimeTs = this.deleteTimeseriesFormGroup.get('startDateTime').value.getTime();
-      const endDateTimeControl = this.getEndDateTimeFormControl();
       if (newEndDateTime.getTime() <= startDateTimeTs) {
-        endDateTimeControl.patchValue(new Date(startDateTimeTs + MINUTE), {onlySelf: true, emitEvent: false});
+        this.deleteTimeseriesFormGroup.get('endDateTime')
+          .patchValue(new Date(startDateTimeTs + MINUTE), {onlySelf: true, emitEvent: false});
       } else {
-        endDateTimeControl.patchValue(newEndDateTime, {onlySelf: true, emitEvent: false});
+        this.deleteTimeseriesFormGroup.get('endDateTime')
+          .patchValue(newEndDateTime, {onlySelf: true, emitEvent: false});
       }
     }
   }