Refactoring dashborad-select component

ui-ngx/src/app/shared/components/dashboard-select.component.ts

@@ -16,6 +16,7 @@
 
 import {
   Component,
+  ElementRef,
   forwardRef,
   Inject,
   Injector,
@@ -45,8 +46,7 @@ import { WINDOW } from '@core/services/window.service';
 import { ComponentPortal } from '@angular/cdk/portal';
 import {
   DASHBOARD_SELECT_PANEL_DATA,
-  DashboardSelectPanelComponent,
+  DashboardSelectPanelComponent
-  DashboardSelectPanelData
 } from './dashboard-select-panel.component';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 
@@ -97,6 +97,7 @@ export class DashboardSelectComponent implements ControlValueAccessor, OnInit {
               private overlay: Overlay,
               private breakpointObserver: BreakpointObserver,
               private viewContainerRef: ViewContainerRef,
+              private nativeElement: ElementRef,
               @Inject(DOCUMENT) private document: Document,
               @Inject(WINDOW) private window: Window) {
   }
@@ -131,77 +132,48 @@ export class DashboardSelectComponent implements ControlValueAccessor, OnInit {
   }
 
   openDashboardSelectPanel() {
-    if (this.disabled) {
+    if (!this.disabled) {
-      return;
+      const config = new OverlayConfig({
-    }
+        panelClass: 'tb-dashboard-select-panel',
-    const panelHeight = this.breakpointObserver.isMatched('min-height: 350px') ? 250 : 150;
+        backdropClass: 'cdk-overlay-transparent-backdrop',
-    const panelWidth = 300;
+        hasBackdrop: true
-    const position = this.overlay.position();
+      });
-    const config = new OverlayConfig({
+
-      panelClass: 'tb-dashboard-select-panel',
+      const connectedPosition: ConnectedPosition = {
-      backdropClass: 'cdk-overlay-transparent-backdrop',
+        originX: 'start',
-      hasBackdrop: true,
+        originY: 'bottom',
-    });
+        overlayX: 'start',
-    const el = this.dashboardSelectPanelOrigin.elementRef.nativeElement;
+        overlayY: 'top'
-    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;
+      config.positionStrategy = this.overlay.position().flexibleConnectedTo(this.nativeElement)
-    const bottomY = offset.bottom - scrollTop;
+        .withPositions([connectedPosition]);
-    const leftX = offset.left - scrollLeft;
+      const overlayRef = this.overlay.create(config);
-    let originX;
+      overlayRef.backdropClick().subscribe(() => {
-    let originY;
+        overlayRef.dispose();
-    let overlayX;
+      });
-    let overlayY;
+
-    const wHeight = this.document.documentElement.clientHeight;
+      const providers: StaticProvider[] = [
-    const wWidth = this.document.documentElement.clientWidth;
+        {
-    if (bottomY + panelHeight > wHeight) {
+          provide: DASHBOARD_SELECT_PANEL_DATA,
-      originY = 'top';
+          useValue: {
-      overlayY = 'bottom';
+            dashboards$: this.dashboards$,
-    } else {
+            dashboardId: this.dashboardId,
-      originY = 'bottom';
+            onDashboardSelected: (dashboardId) => {
-      overlayY = 'top';
+              overlayRef.dispose();
-    }
+              this.dashboardId = dashboardId;
-    if (leftX + panelWidth > wWidth) {
+              this.updateView();
-      originX = 'end';
+            }
-      overlayX = 'end';
+          }
-    } else {
+        },
-      originX = 'start';
+        {
-      overlayX = 'start';
+          provide: OverlayRef,
-    }
+          useValue: overlayRef
-    const connectedPosition: ConnectedPosition = {
-      originX,
-      originY,
-      overlayX,
-      overlayY
-    };
-    config.positionStrategy = position.flexibleConnectedTo(this.dashboardSelectPanelOrigin.elementRef)
-      .withPositions([connectedPosition]);
-    const overlayRef = this.overlay.create(config);
-    overlayRef.backdropClick().subscribe(() => {
-      overlayRef.dispose();
-    });
-
-    const injector = this._createDashboardSelectPanelInjector(
-      overlayRef,
-      {
-        dashboards$: this.dashboards$,
-        dashboardId: this.dashboardId,
-        onDashboardSelected: (dashboardId) => {
-          overlayRef.dispose();
-          this.dashboardId = dashboardId;
-          this.updateView();
         }
-      }
+      ];
-    );
+      const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
-    overlayRef.attach(new ComponentPortal(DashboardSelectPanelComponent, this.viewContainerRef, injector));
+      overlayRef.attach(new ComponentPortal(DashboardSelectPanelComponent, this.viewContainerRef, injector));
-  }
+    }
-
-  private _createDashboardSelectPanelInjector(overlayRef: OverlayRef, data: DashboardSelectPanelData): Injector {
-    const providers: StaticProvider[] = [
-      {provide: DASHBOARD_SELECT_PANEL_DATA, useValue: data},
-      {provide: OverlayRef, useValue: overlayRef}
-    ];
-    return Injector.create({parent: this.viewContainerRef.injector, providers});
   }
 
   private updateView() {