From cdaedc8b51785c5a2d66b047045e6dbadffc6bed Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 2 Nov 2023 16:52:51 +0200
Subject: [PATCH] UI: Refactoring event filter panel

---
 .../event/event-filter-panel.component.html   | 86 ++++++++++---------
 .../event/event-filter-panel.component.scss   | 19 ++--
 .../components/event/event-table-config.ts    | 30 ++++---
 3 files changed, 65 insertions(+), 70 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
index adfe411670..77e5dafca8 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
@@ -15,50 +15,52 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" class="mat-content mat-padding" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
-  <ng-container *ngFor="let column of showColumns">
-    <ng-container [ngSwitch]="column.key">
-      <ng-template [ngSwitchCase]="isSelector(column.key)">
-        <mat-form-field>
-          <mat-label>{{ column.title | translate}}</mat-label>
-          <mat-select [formControlName]="column.key">
-            <mat-option [value]="">{{ 'event.all-events' | translate}}</mat-option>
-            <mat-option *ngFor="let value of selectorValues(column.key)" [value]="value">
-              {{ value }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </ng-template>
-      <ng-template [ngSwitchCase]="isNumberFields(column.key)">
-        <mat-form-field>
-          <mat-label>{{ column.title | translate}}</mat-label>
-          <input matInput type="number" min="0" [name]="column.key" [formControlName]="column.key">
-          <mat-error *ngIf="eventFilterFormGroup.get(column.key).hasError('min')">
-            {{ 'event.min-value' | translate }}
-          </mat-error>
-        </mat-form-field>
-      </ng-template>
-      <ng-template [ngSwitchCase]="'isError'">
-        <tb-checkbox formControlName="isError" [falseValue]="''"
-                     (ngModelChange)="changeIsError($event)">
-          {{ 'event.has-error' | translate }}
-        </tb-checkbox>
-      </ng-template>
-      <ng-template [ngSwitchCase]="'errorStr'">
-        <mat-form-field fxHide [fxShow]="showErrorMsgFields()">
-          <mat-label>{{ column.title | translate}}</mat-label>
-          <input matInput type="text" name="errorSearchText" formControlName="errorStr">
-        </mat-form-field>
-      </ng-template>
-      <ng-container *ngSwitchDefault>
-        <mat-form-field>
-          <mat-label>{{ column.title | translate}}</mat-label>
-          <input matInput type="text" [name]="column.key" [formControlName]="column.key">
-        </mat-form-field>
+<form fxLayout="column" class="tb-filter" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
+  <div fxLayout="column" class="tb-filter-container mat-padding">
+    <ng-container *ngFor="let column of showColumns">
+      <ng-container [ngSwitch]="column.key">
+        <ng-template [ngSwitchCase]="isSelector(column.key)">
+          <mat-form-field>
+            <mat-label>{{ column.title | translate}}</mat-label>
+            <mat-select [formControlName]="column.key">
+              <mat-option [value]="">{{ 'event.all-events' | translate}}</mat-option>
+              <mat-option *ngFor="let value of selectorValues(column.key)" [value]="value">
+                {{ value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </ng-template>
+        <ng-template [ngSwitchCase]="isNumberFields(column.key)">
+          <mat-form-field>
+            <mat-label>{{ column.title | translate}}</mat-label>
+            <input matInput type="number" min="0" [name]="column.key" [formControlName]="column.key">
+            <mat-error *ngIf="eventFilterFormGroup.get(column.key).hasError('min')">
+              {{ 'event.min-value' | translate }}
+            </mat-error>
+          </mat-form-field>
+        </ng-template>
+        <ng-template [ngSwitchCase]="'isError'">
+          <tb-checkbox formControlName="isError" [falseValue]="''"
+                       (ngModelChange)="changeIsError($event)">
+            {{ 'event.has-error' | translate }}
+          </tb-checkbox>
+        </ng-template>
+        <ng-template [ngSwitchCase]="'errorStr'">
+          <mat-form-field fxHide [fxShow]="showErrorMsgFields()">
+            <mat-label>{{ column.title | translate}}</mat-label>
+            <input matInput type="text" name="errorSearchText" formControlName="errorStr">
+          </mat-form-field>
+        </ng-template>
+        <ng-container *ngSwitchDefault>
+          <mat-form-field>
+            <mat-label>{{ column.title | translate}}</mat-label>
+            <input matInput type="text" [name]="column.key" [formControlName]="column.key">
+          </mat-form-field>
+        </ng-container>
       </ng-container>
     </ng-container>
-  </ng-container>
-  <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+  </div>
+  <div fxLayout="row" class="tb-panel-actions mat-padding" fxLayoutAlign="end center">
     <button type="button"
             mat-button
             (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.scss b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.scss
index 11aed43fa6..0b6b1539d3 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.scss
@@ -16,20 +16,11 @@
 :host {
   width: 100%;
   min-width: 300px;
-  overflow: auto;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow:
-    0 7px 8px -4px rgba(0, 0, 0, .2),
-    0 13px 19px 2px rgba(0, 0, 0, .14),
-    0 5px 24px 4px rgba(0, 0, 0, .12);
 
-  .mat-content {
-    overflow: hidden;
-    background-color: #fff;
-  }
-
-  .mat-padding {
-    padding: 16px;
+  .tb-filter {
+    height: 100%;
+    &-container {
+      overflow: auto;
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
index 4e1db0a5cb..f29b245b13 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
@@ -30,7 +30,7 @@ import { EntityId } from '@shared/models/id/entity-id';
 import { EventService } from '@app/core/http/event.service';
 import { EventTableHeaderComponent } from '@home/components/event/event-table-header.component';
 import { EntityTypeResource } from '@shared/models/entity-type.models';
-import { Observable } from 'rxjs';
+import { fromEvent, Observable } from 'rxjs';
 import { PageData } from '@shared/models/page/page-data';
 import { Direction } from '@shared/models/page/sort-order';
 import { DialogService } from '@core/services/dialog.service';
@@ -50,6 +50,7 @@ import {
   EventFilterPanelData,
   FilterEntityColumn
 } from '@home/components/event/event-filter-panel.component';
+import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
 
 export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
 
@@ -457,19 +458,16 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
       $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]);
-    config.maxHeight = '70vh';
-    config.height = 'min-content';
+    const config = new OverlayConfig({
+      panelClass: 'tb-panel-container',
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: true,
+      height: 'fit-content',
+      maxHeight: '65vh'
+    });
+    config.positionStrategy = this.overlay.position()
+      .flexibleConnectedTo(target as HTMLElement)
+      .withPositions(DEFAULT_OVERLAY_POSITIONS);
 
     const overlayRef = this.overlay.create(config);
     overlayRef.backdropClick().subscribe(() => {
@@ -491,7 +489,11 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
     const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
     const componentRef = overlayRef.attach(new ComponentPortal(EventFilterPanelComponent,
       this.viewContainerRef, injector));
+    const resizeWindows$ = fromEvent(window, 'resize').subscribe(() => {
+      overlayRef.updatePosition();
+    });
     componentRef.onDestroy(() => {
+      resizeWindows$.unsubscribe();
       if (componentRef.instance.result && !isEqual(this.filterParams, componentRef.instance.result.filterParams)) {
         this.filterParams = componentRef.instance.result.filterParams;
         this.getTable().paginator.pageIndex = 0;