UI: Refactoring timewindow component

ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, InjectionToken, OnInit, ViewContainerRef } from '@angular/core';
+import { Component, Input, OnInit, ViewContainerRef } from '@angular/core';
 import {
   aggregationTranslations,
   AggregationType,
@@ -25,14 +25,12 @@ import {
   Timewindow,
   TimewindowType
 } from '@shared/models/time/time.models';
-import { OverlayRef } from '@angular/cdk/overlay';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { TimeService } from '@core/services/time.service';
-
+import { isDefined } from '@core/utils';
-export const TIMEWINDOW_PANEL_DATA = new InjectionToken<any>('TimewindowPanelData');
 
 export interface TimewindowPanelData {
   historyOnly: boolean;
@@ -50,6 +48,12 @@ export interface TimewindowPanelData {
 })
 export class TimewindowPanelComponent extends PageComponent implements OnInit {
 
+  @Input()
+  data: any;
+
+  @Input()
+  onClose: (result: Timewindow | null) => void;
+
   historyOnly = false;
 
   quickIntervalOnly = false;
@@ -62,8 +66,6 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
 
   timewindow: Timewindow;
 
-  result: Timewindow;
-
   timewindowForm: FormGroup;
 
   historyTypes = HistoryWindowType;
@@ -78,22 +80,23 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
 
   aggregationTypesTranslations = aggregationTranslations;
 
-  constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData,
+  private result: Timewindow;
-              public overlayRef: OverlayRef,
+
-              protected store: Store<AppState>,
+  constructor(protected store: Store<AppState>,
               public fb: FormBuilder,
               private timeService: TimeService,
               public viewContainerRef: ViewContainerRef) {
     super(store);
-    this.historyOnly = data.historyOnly;
-    this.quickIntervalOnly = data.quickIntervalOnly;
-    this.timewindow = data.timewindow;
-    this.aggregation = data.aggregation;
-    this.timezone = data.timezone;
-    this.isEdit = data.isEdit;
   }
 
   ngOnInit(): void {
+    this.historyOnly = this.data.historyOnly;
+    this.quickIntervalOnly = this.data.quickIntervalOnly;
+    this.timewindow = this.data.timewindow;
+    this.aggregation = this.data.aggregation;
+    this.timezone = this.data.timezone;
+    this.isEdit = this.data.isEdit;
+
     const hideInterval = this.timewindow.hideInterval || false;
     const hideLastInterval = this.timewindow.hideLastInterval || false;
     const hideQuickInterval = this.timewindow.hideQuickInterval || false;
@@ -101,77 +104,60 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
     const hideAggInterval = this.timewindow.hideAggInterval || false;
     const hideTimezone = this.timewindow.hideTimezone || false;
 
+    const realtime = this.timewindow.realtime;
+    const history = this.timewindow.history;
+    const aggregation = this.timewindow.aggregation;
+
     this.timewindowForm = this.fb.group({
-        realtime: this.fb.group(
+      realtime: this.fb.group({
-          {
+        realtimeType: [{
-            realtimeType: this.fb.control({
+          value: this.defined(realtime, realtime.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL,
-              value: this.timewindow.realtime && typeof this.timewindow.realtime.realtimeType !== 'undefined'
+          disabled: hideInterval
-                ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL,
+        }],
-              disabled: hideInterval
+        timewindowMs: [{
-            }),
+          value: this.defined(realtime, realtime.timewindowMs) ? this.timewindow.realtime.timewindowMs : null,
-            timewindowMs: this.fb.control({
+          disabled: hideInterval || hideLastInterval
-                value: this.timewindow.realtime && typeof this.timewindow.realtime.timewindowMs !== 'undefined'
+        }],
-                  ? this.timewindow.realtime.timewindowMs : null,
+        interval: [this.defined(realtime, realtime.interval) ? this.timewindow.realtime.interval : null],
-              disabled: hideInterval || hideLastInterval
+        quickInterval: [{
-              }),
+          value: this.defined(realtime, realtime.quickInterval) ? this.timewindow.realtime.quickInterval : null,
-            interval: [
+          disabled: hideInterval || hideQuickInterval
-              this.timewindow.realtime && typeof this.timewindow.realtime.interval !== 'undefined'
+        }]
-                ? this.timewindow.realtime.interval : null
+      }),
-            ],
+      history: this.fb.group({
-            quickInterval: this.fb.control({
+        historyType: [{
-              value: this.timewindow.realtime && typeof this.timewindow.realtime.quickInterval !== 'undefined'
+          value: this.defined(history, history.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL,
-                ? this.timewindow.realtime.quickInterval : null,
+          disabled: hideInterval
-              disabled: hideInterval || hideQuickInterval
+        }],
-            })
+        timewindowMs: [{
-          }
+          value: this.defined(history, history.timewindowMs) ? this.timewindow.history.timewindowMs : null,
-        ),
+          disabled: hideInterval
-        history: this.fb.group(
+        }],
-          {
+        interval: [ this.defined(history, history.interval) ? this.timewindow.history.interval : null
-            historyType: this.fb.control({
+        ],
-              value: this.timewindow.history && typeof this.timewindow.history.historyType !== 'undefined'
+        fixedTimewindow: [{
-                ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL,
+          value: this.defined(history, history.fixedTimewindow) ? this.timewindow.history.fixedTimewindow : null,
-              disabled: hideInterval
+          disabled: hideInterval
-            }),
+        }],
-            timewindowMs: this.fb.control({
+        quickInterval: [{
-              value: this.timewindow.history && typeof this.timewindow.history.timewindowMs !== 'undefined'
+          value: this.defined(history, history.quickInterval) ? this.timewindow.history.quickInterval : null,
-                ? this.timewindow.history.timewindowMs : null,
+          disabled: hideInterval
-              disabled: hideInterval
+        }]
-            }),
+      }),
-            interval: [
+      aggregation: this.fb.group({
-              this.timewindow.history && typeof this.timewindow.history.interval !== 'undefined'
+        type: [{
-                ? this.timewindow.history.interval : null
+          value: this.defined(aggregation, aggregation.type) ? this.timewindow.aggregation.type : null,
-            ],
+          disabled: hideAggregation
-            fixedTimewindow: this.fb.control({
+        }],
-              value: this.timewindow.history && typeof this.timewindow.history.fixedTimewindow !== 'undefined'
+        limit: [{
-                ? this.timewindow.history.fixedTimewindow : null,
+          value: this.defined(aggregation, aggregation.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null,
-              disabled: hideInterval
+          disabled: hideAggInterval
-            }),
+        }, []]
-            quickInterval: this.fb.control({
+      }),
-              value: this.timewindow.history && typeof this.timewindow.history.quickInterval !== 'undefined'
+      timezone: [{
-                ? this.timewindow.history.quickInterval : null,
+        value: isDefined(this.timewindow.timezone) ? this.timewindow.timezone : null,
-              disabled: hideInterval
+        disabled: hideTimezone
-            })
+      }]
-          }
-        ),
-        aggregation: this.fb.group(
-          {
-            type: this.fb.control({
-              value: this.timewindow.aggregation && typeof this.timewindow.aggregation.type !== 'undefined'
-                ? this.timewindow.aggregation.type : null,
-              disabled: hideAggregation
-            }),
-            limit: this.fb.control({
-              value: this.timewindow.aggregation && typeof this.timewindow.aggregation.limit !== 'undefined'
-                ? this.checkLimit(this.timewindow.aggregation.limit) : null,
-              disabled: hideAggInterval
-            }, [])
-          }
-        ),
-        timezone: this.fb.control({
-          value: this.timewindow.timezone !== 'undefined'
-            ? this.timewindow.timezone : null,
-          disabled: hideTimezone
-        })
     });
     this.updateValidators();
     this.timewindowForm.get('aggregation.type').valueChanges.subscribe(() => {
@@ -179,6 +165,10 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
     });
   }
 
+  private defined(arg1, arg2) {
+    return arg1 && isDefined(arg2);
+  }
+
   private checkLimit(limit?: number): number {
     if (!limit || limit < this.minDatapointsLimit()) {
       return this.minDatapointsLimit();
@@ -224,11 +214,13 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
       this.timewindow.timezone = timewindowFormValue.timezone;
     }
     this.result = this.timewindow;
-    this.overlayRef.dispose();
+    this.cancel(this.result);
   }
 
-  cancel() {
+  cancel(result: Timewindow | null = null) {
-    this.overlayRef.dispose();
+    if (this.onClose) {
+      this.onClose(result);
+    }
   }
 
   minDatapointsLimit() {

ui-ngx/src/app/shared/components/time/timewindow.component.html

@@ -15,30 +15,34 @@
     limitations under the License.
 
 -->
-<button *ngIf="asButton" cdkOverlayOrigin #timewindowPanelOrigin="cdkOverlayOrigin" [disabled]="timewindowDisabled"
+<button *ngIf="asButton"
+        [disabled]="timewindowDisabled"
         type="button"
-        mat-raised-button color="primary" (click)="openEditMode()">
+        mat-raised-button color="primary"
+        (click)="toggleTimewindow($event)">
   <mat-icon class="material-icons">query_builder</mat-icon>
   <span>{{innerValue?.displayValue}}</span>
 </button>
-<section *ngIf="!asButton" cdkOverlayOrigin #timewindowPanelOrigin="cdkOverlayOrigin"
+<section *ngIf="!asButton"
-         class="tb-timewindow" fxLayout="row" fxLayoutAlign="start center">
+         class="tb-timewindow"
+         fxLayout="row"
+         fxLayoutAlign="start center">
   <button *ngIf="direction === 'left'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
           type="button"
-          (click)="openEditMode()"
+          (click)="toggleTimewindow($event)"
           matTooltip="{{ 'timewindow.edit' | translate }}"
           [matTooltipPosition]="tooltipPosition">
     <mat-icon class="material-icons">query_builder</mat-icon>
   </button>
   <span [fxHide]="hideLabel()"
-        (click)="openEditMode()"
+        (click)="toggleTimewindow($event)"
         matTooltip="{{ 'timewindow.edit' | translate }}"
         [matTooltipPosition]="tooltipPosition">
     {{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"
-          (click)="openEditMode()"
+          (click)="toggleTimewindow($event)"
           matTooltip="{{ 'timewindow.edit' | translate }}"
           [matTooltipPosition]="tooltipPosition">
     <mat-icon class="material-icons">query_builder</mat-icon>

ui-ngx/src/app/shared/components/time/timewindow.component.ts

@@ -18,13 +18,10 @@ import {
   ChangeDetectorRef,
   Component,
   forwardRef,
-  Inject,
-  Injector,
   Input,
   OnDestroy,
   OnInit,
-  StaticProvider,
+  Renderer2,
-  ViewChild,
   ViewContainerRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -40,21 +37,15 @@ import {
   Timewindow,
   TimewindowType
 } from '@shared/models/time/time.models';
-import { DatePipe, DOCUMENT } from '@angular/common';
+import { DatePipe } from '@angular/common';
-import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { TimewindowPanelComponent } from '@shared/components/time/timewindow-panel.component';
-import {
-  TIMEWINDOW_PANEL_DATA,
-  TimewindowPanelComponent,
-  TimewindowPanelData
-} from '@shared/components/time/timewindow-panel.component';
-import { ComponentPortal } from '@angular/cdk/portal';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { WINDOW } from '@core/services/window.service';
 import { TimeService } from '@core/services/time.service';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { deepClone, isDefinedAndNotNull } from '@core/utils';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { TbPopoverService } from '@shared/components/popover.service';
 
 // @dynamic
 @Component({
@@ -174,8 +165,6 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
 
   @Input() disabled: boolean;
 
-  @ViewChild('timewindowPanelOrigin') timewindowPanelOrigin: CdkOverlayOrigin;
-
   innerValue: Timewindow;
 
   timewindowDisabled: boolean;
@@ -186,12 +175,11 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
               private timeService: TimeService,
               private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe,
               private datePipe: DatePipe,
-              private overlay: Overlay,
               private cd: ChangeDetectorRef,
+              private popoverService: TbPopoverService,
+              private renderer: Renderer2,
               public viewContainerRef: ViewContainerRef,
-              public breakpointObserver: BreakpointObserver,
+              public breakpointObserver: BreakpointObserver) {
-              @Inject(DOCUMENT) private document: Document,
-              @Inject(WINDOW) private window: Window) {
   }
 
   ngOnInit(): void {
@@ -200,98 +188,39 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
   ngOnDestroy(): void {
   }
 
-  openEditMode() {
+  toggleTimewindow($event: Event) {
-    if (this.timewindowDisabled) {
+    if ($event) {
-      return;
+      $event.stopPropagation();
     }
-    const isGtXs = this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
+    const trigger = ($event.target || $event.srcElement || $event.currentTarget) as Element;
-    const position = this.overlay.position();
+    if (this.popoverService.hasPopover(trigger)) {
-    const config = new OverlayConfig({
+      this.popoverService.hidePopover(trigger);
-      panelClass: 'tb-timewindow-panel',
-      backdropClass: 'cdk-overlay-transparent-backdrop',
-      hasBackdrop: isGtXs,
-    });
-    if (isGtXs) {
-      config.minWidth = '417px';
-      config.maxHeight = '550px';
-      const panelHeight = 375;
-      const panelWidth = 417;
-      const el = this.timewindowPanelOrigin.elementRef.nativeElement;
-      const offset = el.getBoundingClientRect();
-      const scrollTop = this.window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
-      const scrollLeft = this.window.pageXOffset || this.document.documentElement.scrollLeft || this.document.body.scrollLeft || 0;
-      const bottomY = offset.bottom - scrollTop;
-      const leftX = offset.left - scrollLeft;
-      let originX;
-      let originY;
-      let overlayX;
-      let overlayY;
-      const wHeight = this.document.documentElement.clientHeight;
-      const wWidth = this.document.documentElement.clientWidth;
-      if (bottomY + panelHeight > wHeight) {
-        originY = 'top';
-        overlayY = 'bottom';
-      } else {
-        originY = 'bottom';
-        overlayY = 'top';
-      }
-      if (leftX + panelWidth > wWidth) {
-        originX = 'end';
-        overlayX = 'end';
-      } else {
-        originX = 'start';
-        overlayX = 'start';
-      }
-      const connectedPosition: ConnectedPosition = {
-        originX,
-        originY,
-        overlayX,
-        overlayY
-      };
-      config.positionStrategy = position.flexibleConnectedTo(this.timewindowPanelOrigin.elementRef)
-        .withPositions([connectedPosition]);
     } else {
-      config.minWidth = '100%';
+      const timewindowPopover = this.popoverService.displayPopover(trigger, this.renderer,
-      config.minHeight = '100%';
+        this.viewContainerRef, TimewindowPanelComponent, 'leftTop', true, null,
-      config.positionStrategy = position.global().top('0%').left('0%')
+        {
-        .right('0%').bottom('0%');
+          data: {
+            timewindow: deepClone(this.innerValue),
+            historyOnly: this.historyOnly,
+            quickIntervalOnly: this.quickIntervalOnly,
+            aggregation: this.aggregation,
+            timezone: this.timezone,
+            isEdit: this.isEdit
+          },
+          onClose: (result: Timewindow) => {
+            timewindowPopover.hide();
+            if (result) {
+              this.innerValue = result;
+              this.timewindowDisabled = this.isTimewindowDisabled();
+              this.updateDisplayValue();
+              this.notifyChanged();
+            }
+          }
+        },
+        {maxHeight: '100vh', height: '100%', padding: '10px'},
+        {minWidth: '100%', maxWidth: '100%'}, {}, false);
+      timewindowPopover.tbComponentRef.instance.popoverComponent = timewindowPopover;
     }
-
-    const overlayRef = this.overlay.create(config);
-
-    overlayRef.backdropClick().subscribe(() => {
-      overlayRef.dispose();
-    });
-
-    const injector = this._createTimewindowPanelInjector(
-      overlayRef,
-      {
-        timewindow: deepClone(this.innerValue),
-        historyOnly: this.historyOnly,
-        quickIntervalOnly: this.quickIntervalOnly,
-        aggregation: this.aggregation,
-        timezone: this.timezone,
-        isEdit: this.isEdit
-      }
-    );
-
-    const componentRef = overlayRef.attach(new ComponentPortal(TimewindowPanelComponent, this.viewContainerRef, injector));
-    componentRef.onDestroy(() => {
-      if (componentRef.instance.result) {
-        this.innerValue = componentRef.instance.result;
-        this.timewindowDisabled = this.isTimewindowDisabled();
-        this.updateDisplayValue();
-        this.notifyChanged();
-      }
-    });
-  }
-
-  private _createTimewindowPanelInjector(overlayRef: OverlayRef, data: TimewindowPanelData): Injector {
-    const providers: StaticProvider[] = [
-      {provide: TIMEWINDOW_PANEL_DATA, useValue: data},
-      {provide: OverlayRef, useValue: overlayRef}
-    ];
-    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   private onHistoryOnlyChanged(): boolean {