UI: Fixed timewindows writeValue is being called twice, first time with a phantom null value

3 years ago · fa8decd293
7 changed files with 65 additions and 94 deletions
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@ -107,6 +107,7 @@
                         tooltipPosition="below"
                         aggregation="true"
                         timezone="true"
+                         isNgModel
                         [(ngModel)]="dashboardCtx.dashboardTimewindow">
          </tb-timewindow>
          <tb-filters-edit [fxShow]="!isEdit && displayFilters()"
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@ -40,9 +40,11 @@
            <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
              <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
              <tb-anchor #entityTableHeader></tb-anchor>
-              <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
-                              (ngModelChange)="onTimewindowChange()"
-                              asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
+              <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink"
+                             [(ngModel)]="timewindow" (ngModelChange)="onTimewindowChange()"
+                             asButton strokedButton historyOnly isNgModel
+                             [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled">
+              </tb-timewindow>
            </div>
            <span fxFlex></span>
            <div [fxShow]="addEnabled()">
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
@ -24,6 +24,7 @@ import {
  EventEmitter,
  Input,
  OnChanges,
+  OnDestroy,
  OnInit,
  SimpleChanges,
  ViewChild
@ -72,7 +73,7 @@ import { EntityDetailsPanelComponent } from '@home/components/entity/entity-deta
  styleUrls: ['./entities-table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class EntitiesTableComponent extends PageComponent implements IEntitiesTableComponent, AfterViewInit, OnInit, OnChanges {
+export class EntitiesTableComponent extends PageComponent implements IEntitiesTableComponent, AfterViewInit, OnInit, OnChanges, OnDestroy {

  @Input()
  entitiesTableConfig: EntityTableConfig<BaseData<HasId>>;
@ -162,6 +163,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
  }

  ngOnDestroy() {
+    super.ngOnDestroy();
    if (this.widgetResize$) {
      this.widgetResize$.disconnect();
    }
@ -366,12 +368,10 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
    );
    if (this.displayPagination) {
      paginatorSubscription$ = this.paginator.page.asObservable().pipe(
-        map((data) => {
-          return {
-            page: data.pageIndex === 0 ? null : data.pageIndex,
-            pageSize: data.pageSize === this.defaultPageSize ? null : data.pageSize
-          };
-        })
+        map((data) => ({
+          page: data.pageIndex === 0 ? null : data.pageIndex,
+          pageSize: data.pageSize === this.defaultPageSize ? null : data.pageSize
+        }))
      );
    }
    this.updateDataSubscription = ((this.displayPagination ? merge(sortSubscription$, paginatorSubscription$)
@ -421,8 +421,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
    }
  }

-  private getTimePageLinkInterval(): {startTime?: number, endTime?: number} {
-    const interval: {startTime?: number, endTime?: number} = {};
+  private getTimePageLinkInterval(): {startTime?: number; endTime?: number} {
+    const interval: {startTime?: number; endTime?: number} = {};
    switch (this.timewindow.history.historyType) {
      case HistoryWindowType.LAST_INTERVAL:
        const currentTime = Date.now();
--- a/ui-ngx/src/app/modules/home/components/event/event-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-table.component.ts
@ -14,7 +14,16 @@
 /// limitations under the License.
 ///

-import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
@ -32,7 +41,7 @@ import { Subscription } from 'rxjs';
  templateUrl: './event-table.component.html',
  styleUrls: ['./event-table.component.scss']
 })
-export class EventTableComponent implements OnInit, AfterViewInit {
+export class EventTableComponent implements OnInit, AfterViewInit, OnDestroy {

  @Input()
  tenantId: string;
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@ -50,6 +50,7 @@
                     historyOnly="{{widget.onlyHistoryTimewindow}}"
                     alwaysDisplayTypePrefix
                     timezone="true"
+                     isNgModel
                     [isEdit]="isEdit"
                     [(ngModel)]="widgetComponent.widget.config.timewindow"
                     (ngModelChange)="widgetComponent.onTimewindowChanged($event)">
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html
@ -46,7 +46,7 @@
        (click)="toggleTimewindow($event)"
        matTooltip="{{ 'timewindow.edit' | translate }}"
        [matTooltipPosition]="tooltipPosition">
-    {{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue.displayTimezoneAbbr}}</span></span>
+    {{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue?.displayTimezoneAbbr}}</span></span>
  </span>
  <button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
          type="button"
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts
@ -21,8 +21,6 @@ import {
  forwardRef,
  Injector,
  Input,
-  OnDestroy,
-  OnInit,
  StaticProvider,
  ViewContainerRef
 } from '@angular/core';
@ -68,7 +66,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
    }
  ]
 })
-export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAccessor {
+export class TimewindowComponent implements ControlValueAccessor {

  historyOnlyValue = false;

@ -91,76 +89,38 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
  @coerceBoolean()
  forAllTimeEnabled = false;

-  alwaysDisplayTypePrefixValue = false;
-
  @Input()
-  set alwaysDisplayTypePrefix(val) {
-    this.alwaysDisplayTypePrefixValue = coerceBooleanProperty(val);
-  }
-
-  get alwaysDisplayTypePrefix() {
-    return this.alwaysDisplayTypePrefixValue;
-  }
-
-  quickIntervalOnlyValue = false;
+  @coerceBoolean()
+  alwaysDisplayTypePrefix = false;

  @Input()
-  set quickIntervalOnly(val) {
-    this.quickIntervalOnlyValue = coerceBooleanProperty(val);
-  }
-
-  get quickIntervalOnly() {
-    return this.quickIntervalOnlyValue;
-  }
-
-  aggregationValue = false;
+  @coerceBoolean()
+  quickIntervalOnly = false;

  @Input()
-  set aggregation(val) {
-    this.aggregationValue = coerceBooleanProperty(val);
-  }
-
-  get aggregation() {
-    return this.aggregationValue;
-  }
-
-  timezoneValue = false;
+  @coerceBoolean()
+  aggregation = false;

  @Input()
-  set timezone(val) {
-    this.timezoneValue = coerceBooleanProperty(val);
-  }
-
-  get timezone() {
-    return this.timezoneValue;
-  }
-
-  isToolbarValue = false;
+  @coerceBoolean()
+  timezone = false;

  @Input()
-  set isToolbar(val) {
-    this.isToolbarValue = coerceBooleanProperty(val);
-  }
-
-  get isToolbar() {
-    return this.isToolbarValue;
-  }
-
-  asButtonValue = false;
+  @coerceBoolean()
+  isToolbar = false;

  @Input()
-  set asButton(val) {
-    this.asButtonValue = coerceBooleanProperty(val);
-  }
-
-  get asButton() {
-    return this.asButtonValue;
-  }
+  @coerceBoolean()
+  asButton = false;

  @Input()
  @coerceBoolean()
  strokedButton = false;

+  @Input()
+  @coerceBoolean()
+  isNgModel = false;
+
  isEditValue = false;

  @Input()
@ -179,7 +139,9 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
  @Input()
  tooltipPosition: TooltipPosition = 'above';

-  @Input() disabled: boolean;
+  @Input()
+  @coerceBoolean()
+  disabled: boolean;

  innerValue: Timewindow;

@ -187,6 +149,8 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces

  private propagateChange = (_: any) => {};

+  private _isControlInitialized = false;
+
  constructor(private overlay: Overlay,
              private translate: TranslateService,
              private timeService: TimeService,
@ -198,12 +162,6 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
              public breakpointObserver: BreakpointObserver) {
  }

-  ngOnInit(): void {
-  }
-
-  ngOnDestroy(): void {
-  }
-
  toggleTimewindow($event: Event) {
    if ($event) {
      $event.stopPropagation();
@ -215,7 +173,6 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
      maxHeight: '80vh',
      height: 'min-content'
    });
-    config.hasBackdrop = true;
    const connectedPosition: ConnectedPosition = {
      originX: 'start',
      originY: 'bottom',
@ -262,18 +219,17 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
  }

  private onHistoryOnlyChanged(): boolean {
-    if (this.historyOnlyValue && this.innerValue) {
-      if (this.innerValue.selectedTab !== TimewindowType.HISTORY) {
-        this.innerValue.selectedTab = TimewindowType.HISTORY;
-        this.updateDisplayValue();
-        return true;
-      }
+    if (this.historyOnlyValue && this.innerValue && this.innerValue.selectedTab !== TimewindowType.HISTORY) {
+      this.innerValue.selectedTab = TimewindowType.HISTORY;
+      this.updateDisplayValue();
+      return true;
    }
    return false;
  }

  registerOnChange(fn: any): void {
    this.propagateChange = fn;
+    this._isControlInitialized = true;
  }

  registerOnTouched(fn: any): void {
@ -285,14 +241,16 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
  }

  writeValue(obj: Timewindow): void {
-    this.innerValue = initModelFromDefaultTimewindow(obj, this.quickIntervalOnly, this.timeService);
-    this.timewindowDisabled = this.isTimewindowDisabled();
-    if (this.onHistoryOnlyChanged()) {
-      setTimeout(() => {
-        this.notifyChanged();
-      });
-    } else {
-      this.updateDisplayValue();
+    if (this._isControlInitialized || !this.isNgModel) {
+      this.innerValue = initModelFromDefaultTimewindow(obj, this.quickIntervalOnly, this.timeService);
+      this.timewindowDisabled = this.isTimewindowDisabled();
+      if (this.onHistoryOnlyChanged()) {
+        setTimeout(() => {
+          this.notifyChanged();
+        });
+      } else {
+        this.updateDisplayValue();
+      }
    }
  }