From 850a7d3338071dbe7e12474292ad9b16775cc399 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 3 Aug 2023 13:00:25 +0300 Subject: [PATCH] UI: Fixed resize alarm filter config component --- ui-ngx/src/app/core/services/utils.service.ts | 26 +++++++++++++++-- .../alarm/alarm-filter-config.component.html | 22 +++++++------- .../alarm/alarm-filter-config.component.scss | 29 +++++++------------ .../alarm/alarm-filter-config.component.ts | 7 +++++ .../lib/alarms-table-widget.component.ts | 15 +++++++--- 5 files changed, 63 insertions(+), 36 deletions(-) diff --git a/ui-ngx/src/app/core/services/utils.service.ts b/ui-ngx/src/app/core/services/utils.service.ts index a6065dfe62..e585b2a19a 100644 --- a/ui-ngx/src/app/core/services/utils.service.ts +++ b/ui-ngx/src/app/core/services/utils.service.ts @@ -17,7 +17,7 @@ // eslint-disable-next-line @typescript-eslint/triple-slash-reference /// -import { Inject, Injectable, NgZone } from '@angular/core'; +import { ElementRef, Inject, Injectable, NgZone } from '@angular/core'; import { WINDOW } from '@core/services/window.service'; import { ExceptionData } from '@app/shared/models/error.models'; import { @@ -45,7 +45,7 @@ import { alarmFields, alarmSeverityTranslations, alarmStatusTranslations } from import { materialColors } from '@app/shared/models/material.models'; import { WidgetInfo } from '@home/models/widget-component.models'; import jsonSchemaDefaults from 'json-schema-defaults'; -import { Observable } from 'rxjs'; +import { fromEvent, Observable, Subscription } from 'rxjs'; import { publishReplay, refCount } from 'rxjs/operators'; import { WidgetContext } from '@app/modules/home/models/widget-component.models'; import { @@ -57,6 +57,8 @@ import { import { EntityId } from '@shared/models/id/entity-id'; import { DatePipe } from '@angular/common'; import { entityTypeTranslations } from '@shared/models/entity-type.models'; +import { OverlayRef } from '@angular/cdk/overlay'; +import { ResizeObserver } from '@juggle/resize-observer'; const i18nRegExp = new RegExp(`{${i18nPrefix}:[^{}]+}`, 'g'); @@ -528,4 +530,24 @@ export class UtilsService { return base64toObj(b64Encoded); } + public updateOverlayMaxHeigth(overlay: OverlayRef, observeElementRef?: ElementRef): Subscription { + const observeElement = observeElementRef ? observeElementRef.nativeElement : overlay.overlayElement.children[0]; + + const setMaxHeigthOverlay = () => { + const top = observeElement.getBoundingClientRect().top; + const viewport = window.innerHeight; + overlay.updateSize({ + maxHeight: viewport - top + }); + }; + + const observer = new ResizeObserver(() => { + setMaxHeigthOverlay(); + observer.unobserve(observeElement); + }); + observer.observe(observeElement); + + return fromEvent(window, 'resize').subscribe(() => setMaxHeigthOverlay()); + } + } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html index cbbcc2ccb9..3ccfc6ae9c 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html @@ -55,29 +55,28 @@ -
-
-
alarm.alarm-status-list
+
+
+
alarm.alarm-status-list
{{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
-
-
alarm.alarm-severity-list
+
+
alarm.alarm-severity-list
{{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
-
-
alarm.alarm-type-list
+
+
alarm.alarm-type-list
+ class="tb-chips"> @@ -92,10 +91,9 @@
-
-
alarm.assignee
+
+
alarm.assignee
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.scss index 95f78f8fde..edac6ddef1 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.scss +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.scss @@ -14,25 +14,11 @@ * limitations under the License. */ :host { - display: block; - overflow: scroll; + display: flex; max-width: 100%; .mdc-button { max-width: 100%; } - - .filters-row-mobile { - flex-direction: column; - align-items: start; - border: none; - padding: 0; - } - .filters-title-mobile { - font-size: 14px; - } - .filters-fields-width-mobile { - width: 100%; - } } :host ::ng-deep { @@ -45,9 +31,16 @@ text-overflow: ellipsis; } } - .mat-mdc-chip { - .mdc-evolution-chip__cell, .mat-mdc-chip-action, .mat-mdc-chip-action-label { - overflow: hidden; +} + +::ng-deep { + .tb-alarm-filter-config-component { + flex: 1; + + .mat-mdc-chip { + .mdc-evolution-chip__cell, .mat-mdc-chip-action, .mat-mdc-chip-action-label { + overflow: hidden; + } } } } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts index 46402923a9..adc741fcdd 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts @@ -44,6 +44,8 @@ import { MatChipInputEvent } from '@angular/material/chips'; import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes'; import { TranslateService } from '@ngx-translate/core'; import { deepClone } from '@core/utils'; +import { Subscription } from 'rxjs'; +import { UtilsService } from '@core/services/utils.service'; export const ALARM_FILTER_CONFIG_DATA = new InjectionToken('AlarmFilterConfigData'); @@ -114,6 +116,7 @@ export class AlarmFilterConfigComponent implements OnInit, OnDestroy, ControlVal panelResult: AlarmFilterConfig = null; private alarmFilterConfig: AlarmFilterConfig; + private resizeWindows: Subscription; private propagateChange = (_: any) => {}; @@ -125,6 +128,7 @@ export class AlarmFilterConfigComponent implements OnInit, OnDestroy, ControlVal private translate: TranslateService, private overlay: Overlay, private nativeElement: ElementRef, + private utils: UtilsService, private viewContainerRef: ViewContainerRef) { } @@ -213,6 +217,7 @@ export class AlarmFilterConfigComponent implements OnInit, OnDestroy, ControlVal }); this.alarmFilterOverlayRef.attach(new TemplatePortal(this.alarmFilterPanel, this.viewContainerRef)); + this.resizeWindows = this.utils.updateOverlayMaxHeigth(this.alarmFilterOverlayRef); } cancel() { @@ -220,6 +225,7 @@ export class AlarmFilterConfigComponent implements OnInit, OnDestroy, ControlVal if (this.overlayRef) { this.overlayRef.dispose(); } else { + this.resizeWindows.unsubscribe(); this.alarmFilterOverlayRef.dispose(); } } @@ -233,6 +239,7 @@ export class AlarmFilterConfigComponent implements OnInit, OnDestroy, ControlVal if (this.overlayRef) { this.overlayRef.dispose(); } else { + this.resizeWindows.unsubscribe(); this.alarmFilterOverlayRef.dispose(); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts index 8c08d900a3..f799ed43ff 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts @@ -585,10 +585,13 @@ 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.panelClass = 'tb-filter-panel'; - config.hasBackdrop = true; + const config = new OverlayConfig({ + panelClass: 'tb-filter-panel', + backdropClass: 'cdk-overlay-transparent-backdrop', + hasBackdrop: true, + height: 'fit-content', + maxHeight: '75vh' + }); const connectedPosition: ConnectedPosition = { originX: 'end', originY: 'bottom', @@ -630,7 +633,11 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); const componentRef = overlayRef.attach(new ComponentPortal(AlarmFilterConfigComponent, this.viewContainerRef, injector)); + + const resizeWindows = this.utils.updateOverlayMaxHeigth(overlayRef, componentRef.location); + componentRef.onDestroy(() => { + resizeWindows.unsubscribe(); if (componentRef.instance.panelResult) { const result = componentRef.instance.panelResult; const alarmFilter = this.entityService.resolveAlarmFilter(result, false);