From 165b1068bccb932e03e995187bcbe52cdbc335cb Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Tue, 1 Aug 2023 17:54:39 +0300
Subject: [PATCH] Refactoring

---
 .../attribute/attribute-table.component.html  | 12 +--
 .../attribute/attribute-table.component.ts    | 16 +++-
 .../delete-timeseries-panel.component.html    | 16 ++--
 .../delete-timeseries-panel.component.scss    |  2 +-
 .../delete-timeseries-panel.component.ts      | 92 +++++++++++++------
 5 files changed, 88 insertions(+), 50 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 95ade10645..788aeeaabc 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -85,20 +85,12 @@
                 'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }}
         </span>
         <span fxFlex></span>
-        <button [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)"
+        <button [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope) || attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
                 class="button-widget-action"
                 mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
                 matTooltipPosition="above"
-                (click)="deleteAttributes($event)">
-          <mat-icon>delete</mat-icon>
-        </button>
-        <button [fxShow]="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
-                class="button-widget-action"
-                mat-icon-button [disabled]="isLoading$ | async"
-                matTooltip="{{ 'action.delete' | translate }}"
-                matTooltipPosition="above"
-                (click)="deleteTimeseries($event)">
+                (click)="deleteTelemetry($event)">
           <mat-icon>delete</mat-icon>
         </button>
         <button mat-raised-button color="accent"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
index 245411f2f9..53d2907468 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
@@ -438,14 +438,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
           deleteLatest = false;
         }
         if (strategy === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE) {
-          rewriteLatestIfDeleted = componentRef.instance.rewriteLatestIfDeleted;
+          rewriteLatestIfDeleted = componentRef.instance.getRewriteLatestFormControl().value;
           startTs = deleteTimeseries[0].lastUpdateTs;
           endTs = startTs + 1;
         }
         if (strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD) {
-          startTs = componentRef.instance.startDateTime.getTime();
-          endTs = componentRef.instance.endDateTime.getTime();
-          rewriteLatestIfDeleted = componentRef.instance.rewriteLatestIfDeleted;
+          startTs = componentRef.instance.getStartDateTimeFormControl().value.getTime();
+          endTs = componentRef.instance.getEndDateTimeFormControl().value.getTime();
+          rewriteLatestIfDeleted = componentRef.instance.getRewriteLatestFormControl().value;
         }
         this.attributeService.deleteEntityTimeseries(this.entityIdValue, deleteTimeseries, deleteAllDataForKeys,
           startTs, endTs, rewriteLatestIfDeleted, deleteLatest).subscribe(() => this.reloadAttributes());
@@ -477,6 +477,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     }
   }
 
+  deleteTelemetry($event: Event) {
+    if (this.attributeScope === this.latestTelemetryTypes.LATEST_TELEMETRY) {
+      this.deleteTimeseries($event);
+    } else {
+      this.deleteAttributes($event);
+    }
+  }
+
   enterWidgetMode() {
     this.mode = 'widget';
     this.widgetsList = [];
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
index a49f89a6cc..53e871c41a 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 
-<div class="mat-elevation-z1" style="max-width: 488px">
+<form class="mat-elevation-z1" [formGroup]="deleteTimeseriesFormGroup" (ngSubmit)="delete()" style="max-width: 488px">
   <mat-toolbar>
     <h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
     <span fxFlex></span>
@@ -29,7 +29,7 @@
   <div style="padding: 16px; min-height: 188px">
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>attribute.delete-timeseries.strategy</mat-label>
-      <mat-select [(ngModel)]="strategy">
+      <mat-select formControlName="strategy">
         <mat-option *ngFor="let strategy of strategiesTranslationsMap.keys()" [value]="strategy">
           {{ strategiesTranslationsMap.get(strategy) | translate }}
         </mat-option>
@@ -41,20 +41,18 @@
           <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 required matInput [(ngModel)]="startDateTime" [matDatetimepicker]="startDateTimePicker"
-                 (ngModelChange)="onStartDateTimeChange($event)">
+          <input 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 required matInput [(ngModel)]="endDateTime" [matDatetimepicker]="endDatePicker"
-                 (ngModelChange)="onEndDateTimeChange($event)">
+          <input matInput formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
         </mat-form-field>
       </div>
     </div>
     <div *ngIf="isPeriodStrategy() || isDeleteLatestStrategy()">
-      <mat-slide-toggle [(ngModel)]="rewriteLatestIfDeleted">
+      <mat-slide-toggle formControlName="rewriteLatest">
         {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
       </mat-slide-toggle>
     </div>
@@ -68,9 +66,9 @@
     </button>
     <button mat-button mat-raised-button color="primary"
             type="submit"
-            (click)="delete()">
+            [disabled]="isPeriodStrategy() && (!getStartDateTimeFormControl().value || !getEndDateTimeFormControl().value)">
       {{ 'action.apply' | translate }}
     </button>
   </div>
-</div>
+</form>
 
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
index c0f26644d5..d223b29b47 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
@@ -22,7 +22,7 @@
 }
 
 :host ::ng-deep{
-  div .mat-toolbar {
+  form .mat-toolbar {
     background: none;
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts
index 364ecd2c9a..96eaa5aa1b 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts
@@ -14,13 +14,15 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, InjectionToken, OnInit } from '@angular/core';
+import { Component, Inject, InjectionToken, OnDestroy, OnInit } from '@angular/core';
 import { OverlayRef } from '@angular/cdk/overlay';
 import {
   TimeseriesDeleteStrategy,
   timeseriesDeleteStrategyTranslations
 } from '@shared/models/telemetry/telemetry.models';
 import { MINUTE } from '@shared/models/time/time.models';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { Subscription } from 'rxjs';
 
 export const DELETE_TIMESERIES_PANEL_DATA = new InjectionToken<any>('DeleteTimeseriesPanelData');
 
@@ -33,18 +35,16 @@ export interface DeleteTimeseriesPanelData {
   templateUrl: './delete-timeseries-panel.component.html',
   styleUrls: ['./delete-timeseries-panel.component.scss']
 })
-export class DeleteTimeseriesPanelComponent implements OnInit {
+export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
 
-  strategy: string = TimeseriesDeleteStrategy.DELETE_ALL_DATA;
+  deleteTimeseriesFormGroup: UntypedFormGroup;
+
+  startDateTimeSubscription: Subscription;
+
+  endDateTimeSubscription: Subscription;
 
   result: string = null;
 
-  startDateTime: Date;
-
-  endDateTime: Date;
-
-  rewriteLatestIfDeleted: boolean = true;
-
   strategiesTranslationsMap = timeseriesDeleteStrategyTranslations;
 
   multipleDeletionStrategies = [
@@ -53,22 +53,40 @@ export class DeleteTimeseriesPanelComponent implements OnInit {
   ];
 
   constructor(@Inject(DELETE_TIMESERIES_PANEL_DATA) public data: DeleteTimeseriesPanelData,
-              public overlayRef: OverlayRef) { }
+              public overlayRef: OverlayRef,
+              public fb: UntypedFormBuilder) { }
 
   ngOnInit(): void {
-    let today = new Date();
-    this.startDateTime = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
-    this.endDateTime = today;
+    const today = new Date();
     if (this.data.isMultipleDeletion) {
       this.strategiesTranslationsMap = new Map(Array.from(this.strategiesTranslationsMap.entries())
         .filter(([strategy]) => {
           return this.multipleDeletionStrategies.includes(strategy);
       }))
     }
+    this.deleteTimeseriesFormGroup = this.fb.group({
+      strategy: [TimeseriesDeleteStrategy.DELETE_ALL_DATA],
+      startDateTime: [new Date(today.getFullYear(), today.getMonth() - 1, today.getDate())],
+      endDateTime: [today],
+      rewriteLatest: [true]
+    })
+    this.startDateTimeSubscription = this.getStartDateTimeFormControl().valueChanges.subscribe(
+      value => this.onStartDateTimeChange(value)
+    )
+    this.endDateTimeSubscription = this.getEndDateTimeFormControl().valueChanges.subscribe(
+      value => this.onEndDateTimeChange(value)
+    )
+  }
+
+  ngOnDestroy(): void {
+    this.startDateTimeSubscription.unsubscribe();
+    this.startDateTimeSubscription = null;
+    this.endDateTimeSubscription.unsubscribe();
+    this.endDateTimeSubscription = null;
   }
 
   delete(): void {
-    this.result = this.strategy;
+    this.result = this.getStrategyFormControl().value;
     this.overlayRef.dispose();
   }
 
@@ -77,28 +95,50 @@ export class DeleteTimeseriesPanelComponent implements OnInit {
   }
 
   isPeriodStrategy(): boolean {
-    return this.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD;
+    return this.getStrategyFormControl().value === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD;
   }
 
   isDeleteLatestStrategy(): boolean {
-    return this.strategy === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE;
+    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');
+  }
+
+  getRewriteLatestFormControl(): AbstractControl {
+    return this.deleteTimeseriesFormGroup.get('rewriteLatest');
   }
 
   onStartDateTimeChange(newStartDateTime: Date) {
-    const endDateTimeTs = this.endDateTime.getTime();
-    if (newStartDateTime.getTime() >= endDateTimeTs) {
-      this.startDateTime = new Date(endDateTimeTs - MINUTE);
-    } else {
-      this.startDateTime = newStartDateTime;
+    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});
+      } else {
+        startDateTimeControl.patchValue(newStartDateTime, {onlySelf: true, emitEvent: false});
+      }
     }
   }
 
   onEndDateTimeChange(newEndDateTime: Date) {
-    const startDateTimeTs = this.startDateTime.getTime();
-    if (newEndDateTime.getTime() <= startDateTimeTs) {
-      this.endDateTime = new Date(startDateTimeTs + MINUTE);
-    } else {
-      this.endDateTime = newEndDateTime;
+    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});
+      } else {
+        endDateTimeControl.patchValue(newEndDateTime, {onlySelf: true, emitEvent: false});
+      }
     }
   }
 }