Merge pull request #9522 from ArtemDzhereleiko/AD/bug-fix/display-columns-panel-scroll

Fixed display column panel in table widgets for scrolling long list columns
3 years ago · b84ad9ef0b
5 changed files with 75 additions and 49 deletions
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
@ -503,17 +503,16 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
      $event.stopPropagation();
    }
    const target = $event.target || $event.srcElement || $event.currentTarget;
-    const config = new OverlayConfig();
-    config.backdropClass = 'cdk-overlay-transparent-backdrop';
-    config.hasBackdrop = true;
-    const connectedPosition: ConnectedPosition = {
-      originX: 'end',
-      originY: 'bottom',
-      overlayX: 'end',
-      overlayY: 'top'
-    };
-    config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)
-      .withPositions([connectedPosition]);
+    const config = new OverlayConfig({
+      panelClass: 'tb-panel-container',
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: true,
+      height: 'fit-content',
+      maxHeight: '75vh'
+    });
+    config.positionStrategy = this.overlay.position()
+      .flexibleConnectedTo(target as HTMLElement)
+      .withPositions(DEFAULT_OVERLAY_POSITIONS);

    const overlayRef = this.overlay.create(config);
    overlayRef.backdropClick().subscribe(() => {
@ -549,9 +548,18 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
        useValue: overlayRef
      }
    ];
+
    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
-    overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
+    const componentRef = overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
      this.viewContainerRef, injector));
+
+    const resizeWindows$ = fromEvent(window, 'resize').subscribe(() => {
+      overlayRef.updatePosition();
+    });
+    componentRef.onDestroy(() => {
+      resizeWindows$.unsubscribe();
+    });
+
    this.ctx.detectChanges();
  }

--- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.scss
@ -17,7 +17,7 @@
  width: 100%;
  height: 100%;
  min-width: 300px;
-  overflow: hidden;
+  overflow: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow:
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts
@ -46,7 +46,7 @@ import { deepClone, hashCode, isDefined, isNumber, isObject, isUndefined } from
 import cssjs from '@core/css/css';
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
-import { BehaviorSubject, merge, Observable, Subject } from 'rxjs';
+import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
 import { emptyPageData, PageData } from '@shared/models/page/page-data';
 import { EntityId } from '@shared/models/id/entity-id';
 import { entityTypeTranslations } from '@shared/models/entity-type.models';
@ -83,7 +83,7 @@ import {
  TableWidgetSettings,
  widthStyle
 } from '@home/components/widget/lib/table-widget.models';
-import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import {
  DISPLAY_COLUMNS_PANEL_DATA,
@ -106,6 +106,7 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import { AggregationType } from '@shared/models/time/time.models';
 import { FormBuilder } from '@angular/forms';
+import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';

 interface EntitiesTableWidgetSettings extends TableWidgetSettings {
  entitiesTitle: string;
@ -462,18 +463,17 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
    if ($event) {
      $event.stopPropagation();
    }
-    const target = $event.target || $event.currentTarget;
-    const config = new OverlayConfig();
-    config.backdropClass = 'cdk-overlay-transparent-backdrop';
-    config.hasBackdrop = true;
-    const connectedPosition: ConnectedPosition = {
-      originX: 'end',
-      originY: 'bottom',
-      overlayX: 'end',
-      overlayY: 'top'
-    };
-    config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)
-      .withPositions([connectedPosition]);
+    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const config = new OverlayConfig({
+      panelClass: 'tb-panel-container',
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: true,
+      height: 'fit-content',
+      maxHeight: '75vh'
+    });
+    config.positionStrategy = this.overlay.position()
+      .flexibleConnectedTo(target as HTMLElement)
+      .withPositions(DEFAULT_OVERLAY_POSITIONS);

    const overlayRef = this.overlay.create(config);
    overlayRef.backdropClick().subscribe(() => {
@ -481,11 +481,11 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
    });

    const columns: DisplayColumn[] = this.columns.map(column => ({
-        title: column.title,
-        def: column.def,
-        display: this.displayedColumns.indexOf(column.def) > -1,
-        selectable: this.columnSelectionAvailability[column.def]
-      }));
+      title: column.title,
+      def: column.def,
+      display: this.displayedColumns.indexOf(column.def) > -1,
+      selectable: this.columnSelectionAvailability[column.def]
+    }));

    const providers: StaticProvider[] = [
      {
@ -506,9 +506,18 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
        useValue: overlayRef
      }
    ];
+
    const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
-    overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
+    const componentRef = overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
      this.viewContainerRef, injector));
+
+    const resizeWindows$ = fromEvent(window, 'resize').subscribe(() => {
+      overlayRef.updatePosition();
+    });
+    componentRef.onDestroy(() => {
+      resizeWindows$.unsubscribe();
+    });
+
    this.ctx.detectChanges();
  }

--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
@ -56,7 +56,7 @@ import cssjs from '@core/css/css';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction, SortOrder, sortOrderFromString } from '@shared/models/page/sort-order';
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
-import { BehaviorSubject, merge, Observable, of, Subject, Subscription } from 'rxjs';
+import { BehaviorSubject, fromEvent, merge, Observable, of, Subject, Subscription } from 'rxjs';
 import { emptyPageData, PageData } from '@shared/models/page/page-data';
 import { catchError, debounceTime, distinctUntilChanged, map, skip, startWith, takeUntil } from 'rxjs/operators';
 import { MatPaginator } from '@angular/material/paginator';
@ -81,7 +81,7 @@ import {
  TableWidgetDataKeySettings,
  TableWidgetSettings
 } from '@home/components/widget/lib/table-widget.models';
-import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { SubscriptionEntityInfo } from '@core/api/widget-api.models';
 import { DatePipe } from '@angular/common';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@ -93,6 +93,7 @@ import {
 } from '@home/components/widget/lib/display-columns-panel.component';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { FormBuilder } from '@angular/forms';
+import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';

 export interface TimeseriesTableWidgetSettings extends TableWidgetSettings {
  showTimestamp: boolean;
@ -411,23 +412,23 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
      $event.stopPropagation();
    }
    if (this.sources.length) {
-      const target = $event.target || $event.currentTarget;
-      const config = new OverlayConfig();
-      config.backdropClass = 'cdk-overlay-transparent-backdrop';
-      config.hasBackdrop = true;
-      const connectedPosition: ConnectedPosition = {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top'
-      };
-      config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)
-        .withPositions([connectedPosition]);
+      const target = $event.target || $event.srcElement || $event.currentTarget;
+      const config = new OverlayConfig({
+        panelClass: 'tb-panel-container',
+        backdropClass: 'cdk-overlay-transparent-backdrop',
+        hasBackdrop: true,
+        height: 'fit-content',
+        maxHeight: '75vh'
+      });
+      config.positionStrategy = this.overlay.position()
+        .flexibleConnectedTo(target as HTMLElement)
+        .withPositions(DEFAULT_OVERLAY_POSITIONS);

      const overlayRef = this.overlay.create(config);
      overlayRef.backdropClick().subscribe(() => {
        overlayRef.dispose();
      });
+
      const source = this.sources[this.sourceIndex];

      this.prepareDisplayedColumn();
@ -450,8 +451,16 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
      ];

      const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
-      overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
+      const componentRef = overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent,
        this.viewContainerRef, injector));
+
+      const resizeWindows$ = fromEvent(window, 'resize').subscribe(() => {
+        overlayRef.updatePosition();
+      });
+      componentRef.onDestroy(() => {
+        resizeWindows$.unsubscribe();
+      });
+
      this.ctx.detectChanges();
    }
  }
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@ -268,7 +268,7 @@ pre.tb-highlight {
  letter-spacing: normal;
 }

-.tb-timewindow-panel, .tb-legend-config-panel, .tb-filter-panel {
+.tb-timewindow-panel, .tb-legend-config-panel, .tb-filter-panel, .tb-panel-container {
  overflow: hidden;
  background: #fff;
  border-radius: 4px;