From 6adbc1ad1e6f04649608c02ce1365474ca51e1c3 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 30 Oct 2023 11:33:32 +0200 Subject: [PATCH 1/3] UI: Fixed panel for long list --- .../components/widget/lib/display-columns-panel.component.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git 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 index b1abff0335..f3b531f32e 100644 --- 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 @@ -16,8 +16,9 @@ :host { width: 100%; height: 100%; + max-height: 80vh; min-width: 300px; - overflow: hidden; + overflow: auto; background: #fff; border-radius: 4px; box-shadow: From 8f9ac73ee34565806fc4f45e60ab79e167e8fd03 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 1 Nov 2023 15:55:08 +0200 Subject: [PATCH 2/3] UI: Refactoring display columns for tables --- .../alarm/alarms-table-widget.component.ts | 32 ++++++++----- .../lib/display-columns-panel.component.scss | 1 - .../entity/entities-table-widget.component.ts | 47 +++++++++++-------- .../lib/timeseries-table-widget.component.ts | 39 +++++++++------ ui-ngx/src/styles.scss | 2 +- 5 files changed, 73 insertions(+), 48 deletions(-) diff --git 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 index 034c131769..7fbd741fe1 100644 --- 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-display-columns', + 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(); } diff --git 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 index f3b531f32e..7017c61de0 100644 --- 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 @@ -16,7 +16,6 @@ :host { width: 100%; height: 100%; - max-height: 80vh; min-width: 300px; overflow: auto; background: #fff; diff --git 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 index df71fce4f8..f7e5025a26 100644 --- 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'; @@ -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-display-columns', + 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(); } diff --git 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 index 20dff4d85a..5e9dabbeb2 100644 --- 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-display-columns', + 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(); } } diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index 0ee154cf7d..716af758f2 100644 --- 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-display-columns { overflow: hidden; background: #fff; border-radius: 4px; From 7ab9051a52dabd92ffe75b40432c8a941a9c2094 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Thu, 2 Nov 2023 13:03:21 +0200 Subject: [PATCH 3/3] UI: Change panel class name --- .../widget/lib/alarm/alarms-table-widget.component.ts | 2 +- .../widget/lib/entity/entities-table-widget.component.ts | 4 ++-- .../widget/lib/timeseries-table-widget.component.ts | 2 +- ui-ngx/src/styles.scss | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git 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 index 7fbd741fe1..b6129b74a7 100644 --- 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 @@ -504,7 +504,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, } const target = $event.target || $event.srcElement || $event.currentTarget; const config = new OverlayConfig({ - panelClass: 'tb-display-columns', + panelClass: 'tb-panel-container', backdropClass: 'cdk-overlay-transparent-backdrop', hasBackdrop: true, height: 'fit-content', diff --git 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 index f7e5025a26..b7d1841431 100644 --- 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 @@ -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, @@ -465,7 +465,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni } const target = $event.target || $event.srcElement || $event.currentTarget; const config = new OverlayConfig({ - panelClass: 'tb-display-columns', + panelClass: 'tb-panel-container', backdropClass: 'cdk-overlay-transparent-backdrop', hasBackdrop: true, height: 'fit-content', diff --git 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 index 5e9dabbeb2..2b7d538a4d 100644 --- 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 @@ -414,7 +414,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI if (this.sources.length) { const target = $event.target || $event.srcElement || $event.currentTarget; const config = new OverlayConfig({ - panelClass: 'tb-display-columns', + panelClass: 'tb-panel-container', backdropClass: 'cdk-overlay-transparent-backdrop', hasBackdrop: true, height: 'fit-content', diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index 716af758f2..2f068fd9ca 100644 --- 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-display-columns { +.tb-timewindow-panel, .tb-legend-config-panel, .tb-filter-panel, .tb-panel-container { overflow: hidden; background: #fff; border-radius: 4px;