Merge pull request #8272 from kalutkaz/dashboardSelectRefactoring

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,
-  DashboardSelectPanelData
+  DashboardSelectPanelComponent
 } 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) {
-      return;
-    }
-    const panelHeight = this.breakpointObserver.isMatched('min-height: 350px') ? 250 : 150;
-    const panelWidth = 300;
-    const position = this.overlay.position();
-    const config = new OverlayConfig({
-      panelClass: 'tb-dashboard-select-panel',
-      backdropClass: 'cdk-overlay-transparent-backdrop',
-      hasBackdrop: true,
-    });
-    const el = this.dashboardSelectPanelOrigin.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.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();
+    if (!this.disabled) {
+      const config = new OverlayConfig({
+        panelClass: 'tb-dashboard-select-panel',
+        backdropClass: 'cdk-overlay-transparent-backdrop',
+        hasBackdrop: true
+      });
+
+      const connectedPosition: ConnectedPosition = {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top'
+      };
+
+      config.positionStrategy = this.overlay.position().flexibleConnectedTo(this.nativeElement)
+        .withPositions([connectedPosition]);
+      const overlayRef = this.overlay.create(config);
+      overlayRef.backdropClick().subscribe(() => {
+        overlayRef.dispose();
+      });
+
+      const providers: StaticProvider[] = [
+        {
+          provide: DASHBOARD_SELECT_PANEL_DATA,
+          useValue: {
+            dashboards$: this.dashboards$,
+            dashboardId: this.dashboardId,
+            onDashboardSelected: (dashboardId) => {
+              overlayRef.dispose();
+              this.dashboardId = dashboardId;
+              this.updateView();
+            }
+          }
+        },
+        {
+          provide: OverlayRef,
+          useValue: overlayRef
         }
-      }
-    );
-    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});
+      ];
+      const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
+      overlayRef.attach(new ComponentPortal(DashboardSelectPanelComponent, this.viewContainerRef, injector));
+    }
   }
 
   private updateView() {