From 165b1068bccb932e03e995187bcbe52cdbc335cb Mon Sep 17 00:00:00 2001 From: rusikv Date: Tue, 1 Aug 2023 17:54:39 +0300 Subject: [PATCH 1/3] 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} }} - - - + 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('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}); + } } } } From 12c8903ff559ed96ab741a0335e860cc3c62381f Mon Sep 17 00:00:00 2001 From: rusikv Date: Wed, 2 Aug 2023 12:48:19 +0300 Subject: [PATCH 2/3] Delete timeseries panel form is builded by FormBuilder and is now FormGroup, result of panel is now in result field --- .../attribute/attribute-table.component.html | 2 +- .../attribute/attribute-table.component.ts | 19 ++++---- .../delete-timeseries-panel.component.ts | 44 ++++++++++--------- 3 files changed, 35 insertions(+), 30 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 788aeeaabc..10a5b03dba 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,7 +85,7 @@ 'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }} - @@ -41,13 +41,13 @@ attribute.delete-timeseries.start-time - + attribute.delete-timeseries.ends-on - + @@ -57,18 +57,18 @@ -
- - - -
- +
+ + + +
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 04db1ee223..8adb9bcd5a 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 @@ -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('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}); } } }