From c38639fb771a61c654e2df29c363f61411faeb67 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 29 Nov 2024 15:59:36 +0200
Subject: [PATCH] refactoring

---
 .../debug-settings-button.component.html      | 19 +++++---------
 .../debug-settings-button.component.ts        | 26 ++++++++++---------
 .../debug-settings-panel.component.html       | 18 ++++++-------
 .../debug-settings-panel.component.ts         |  6 ++---
 4 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
index cd43d56e96..11c396add1 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
@@ -23,17 +23,10 @@
         [disabled]="disabled"
         (click)="openDebugStrategyPanel($event, matButton)">
   <mat-icon [color]="debugSettingsFormGroup.disabled ? 'inherit' : 'primary'">bug_report</mat-icon>
-  @if (failuresEnabled) {
-    @if (isDebugAllActive$ | async) {
-      {{ 'debug-config.all' | translate }}
-    } @else {
-      {{ 'debug-config.failures' | translate }}
-    }
-  } @else {
-    @if (isDebugAllActive$ | async) {
-      {{ !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) }}
-    } @else {
-      {{ 'common.disabled' | translate }}
-    }
-  }
+  <span *ngIf="!failuresEnabled && !(isDebugAllActive$ | async)" translate>common.disabled</span>
+  <span *ngIf="(isDebugAllActive$ | async) && failuresEnabled" translate>debug-config.all</span>
+  <span *ngIf="(isDebugAllActive$ | async) && !failuresEnabled">
+    {{ !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) }}
+  </span>
+  <span *ngIf="!(isDebugAllActive$ | async) && failuresEnabled" translate>debug-config.failures</span>
 </button>
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
index 8f05d7dad0..292f11e6d7 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
@@ -41,7 +41,6 @@ import {
   ControlValueAccessor,
   FormBuilder,
   NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
 } from '@angular/forms';
 
 @Component({
@@ -66,13 +65,18 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
 
   @Input() debugLimitsConfiguration: string;
 
-  debugSettingsFormGroup: UntypedFormGroup;
+  debugSettingsFormGroup = this.fb.group({
+    failuresEnabled: [false],
+    allEnabled: [false],
+    allEnabledUntil: []
+  });
+
   disabled = false;
   isDebugAllActive$ = timer(0, SECOND).pipe(map(() => this.allEnabledUntil > new Date().getTime() || this.allEnabled), shareReplay(1));
 
   readonly maxDebugModeDurationMinutes = getCurrentAuthState(this.store).maxDebugModeDurationMinutes;
 
-  private onChange: (settings: DebugSettings) => void;
+  private propagateChange: (settings: DebugSettings) => void;
 
   constructor(private popoverService: TbPopoverService,
               private renderer: Renderer2,
@@ -81,14 +85,8 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
               private destroyRef: DestroyRef,
               private fb: FormBuilder,
   ) {
-    this.debugSettingsFormGroup = this.fb.group({
-      failuresEnabled: [false],
-      allEnabled: [false],
-      allEnabledUntil: []
-    });
-
     this.debugSettingsFormGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
-      this.onChange(value);
+      this.propagateChange(value);
     })
   }
 
@@ -132,7 +130,7 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
   }
 
   registerOnChange(fn: (settings: DebugSettings) => void): void {
-    this.onChange = fn;
+    this.propagateChange = fn;
   }
 
   registerOnTouched(_: () => void): void {}
@@ -143,6 +141,10 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
-    this.debugSettingsFormGroup[isDisabled ? 'disable' : 'enable']({emitEvent: false});
+    if (isDisabled) {
+      this.debugSettingsFormGroup.disable({emitEvent: false});
+    } else {
+      this.debugSettingsFormGroup.enable({emitEvent: false});
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
index 7e4b1fb231..4b0ea8217e 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
@@ -38,16 +38,14 @@
           {{ 'debug-config.all-messages' | translate: { time: (isDebugAllActive$ | async) && !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) } }}
         </div>
       </mat-slide-toggle>
-      @if ((isDebugAllActive$ | async) && !allEnabled) {
-        <button mat-icon-button
-                class="tb-mat-20"
-                matTooltip="{{ 'action.reset' | translate }}"
-                matTooltipPosition="above"
-                color="primary"
-                (click)="onReset()">
-          <mat-icon class="material-icons">refresh</mat-icon>
-        </button>
-      }
+      <button mat-icon-button *ngIf="(isDebugAllActive$ | async) && !allEnabled"
+              class="tb-mat-20"
+              matTooltip="{{ 'action.reset' | translate }}"
+              matTooltipPosition="above"
+              color="primary"
+              (click)="onReset()">
+        <mat-icon class="material-icons">refresh</mat-icon>
+      </button>
     </div>
   </div>
   <div class="flex justify-end">
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
index e9e7f084c3..b4c71fab5e 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
@@ -15,6 +15,7 @@
 ///
 
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -33,7 +34,6 @@ import { shareReplay, timer } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DebugSettings } from '@shared/models/entity.models';
 import { distinctUntilChanged, map, tap } from 'rxjs/operators';
-import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-debug-settings-panel',
@@ -49,8 +49,8 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 export class DebugSettingsPanelComponent extends PageComponent implements OnInit {
 
   @Input() popover: TbPopoverComponent<DebugSettingsPanelComponent>;
-  @Input() @coerceBoolean() failuresEnabled = false;
-  @Input() @coerceBoolean() allEnabled = false;
+  @Input({ transform: booleanAttribute }) failuresEnabled = false;
+  @Input({ transform: booleanAttribute }) allEnabled = false;
   @Input() allEnabledUntil = 0;
   @Input() maxDebugModeDurationMinutes: number;
   @Input() debugLimitsConfiguration: string;