Merge pull request #9034 from vvlladd28/improvement/alarm-filter-config

Fixed resize alarm filter config component

ui-ngx/src/app/core/services/utils.service.ts

@@ -17,7 +17,7 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../../../../src/typings/rawloader.typings.d.ts" />
 
-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());
+  }
+
 }

ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html

@@ -55,29 +55,28 @@
   </form>
 </ng-template>
 <ng-template #alarmFilter>
-  <div class="tb-form-panel no-padding no-border" [formGroup]="alarmFilterConfigForm">
+  <div class="tb-form-panel tb-alarm-filter-config-component no-padding no-border" [formGroup]="alarmFilterConfigForm">
-    <div class="tb-form-row space-between" ngClass.xs="filters-row-mobile">
+    <div class="tb-form-row space-between column-xs">
-      <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.alarm-status-list</div>
+      <div class="fixed-title-width" translate>alarm.alarm-status-list</div>
       <mat-chip-listbox multiple formControlName="statusList">
         <mat-chip-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus">
           {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
         </mat-chip-option>
       </mat-chip-listbox>
     </div>
-    <div class="tb-form-row space-between" ngClass.xs="filters-row-mobile">
+    <div class="tb-form-row space-between column-xs">
-      <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.alarm-severity-list</div>
+      <div class="fixed-title-width" translate>alarm.alarm-severity-list</div>
       <mat-chip-listbox multiple formControlName="severityList">
         <mat-chip-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity">
           {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
         </mat-chip-option>
       </mat-chip-listbox>
     </div>
-    <div class="tb-form-row" ngClass.xs="filters-row-mobile">
+    <div class="tb-form-row column-xs">
-      <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.alarm-type-list</div>
+      <div class="fixed-title-width" translate>alarm.alarm-type-list</div>
       <mat-form-field fxFlex appearance="outline"
                       subscriptSizing="dynamic"
-                      class="tb-chips"
+                      class="tb-chips">
-                      ngClass.xs="filters-fields-width-mobile">
         <mat-chip-grid #alarmTypeChipList formControlName="typeList">
           <mat-chip-row *ngFor="let type of alarmTypeList()"
                         [removable]="true" (removed)="removeAlarmType(type)">
@@ -92,10 +91,9 @@
         </mat-chip-grid>
       </mat-form-field>
     </div>
-    <div class="tb-form-row" ngClass.xs="filters-row-mobile">
+    <div class="tb-form-row column-xs">
-      <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.assignee</div>
+      <div class="fixed-title-width" translate>alarm.assignee</div>
       <tb-alarm-assignee-select fxFlex inline="true"
-                                ngClass.xs="filters-fields-width-mobile"
                                 [userMode]="userMode"
         formControlName="assigneeId">
       </tb-alarm-assignee-select>

ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.scss

@@ -14,25 +14,11 @@
  * limitations under the License.
  */
 :host {
-  display: block;
+  display: flex;
-  overflow: scroll;
   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;
+      }
     }
   }
 }

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<any>('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();
     }
   }

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();
+    const config = new OverlayConfig({
-    config.backdropClass = 'cdk-overlay-transparent-backdrop';
+      panelClass: 'tb-filter-panel',
-    config.panelClass = 'tb-filter-panel';
+      backdropClass: 'cdk-overlay-transparent-backdrop',
-    config.hasBackdrop = true;
+      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);