Improvement show edit filter dialog for customer

ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts

@@ -22,13 +22,15 @@ import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { deepClone } from '@core/utils';
-import { FilterInfo, isFilterEditable } from '@shared/models/query/query.models';
+import { Filter, FilterInfo, isFilterEditable } from '@shared/models/query/query.models';
 import {
   FILTER_EDIT_PANEL_DATA,
   FiltersEditPanelComponent,
   FiltersEditPanelData
 } from '@home/components/filter/filters-edit-panel.component';
 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { UserFilterDialogComponent, UserFilterDialogData } from '@home/components/filter/user-filter-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'tb-filters-edit',
@@ -65,7 +67,8 @@ export class FiltersEditComponent implements OnInit, OnDestroy {
   constructor(private translate: TranslateService,
               private overlay: Overlay,
               private breakpointObserver: BreakpointObserver,
-              private viewContainerRef: ViewContainerRef) {
+              private viewContainerRef: ViewContainerRef,
+              private dialog: MatDialog) {
   }
 
   private setupAliasController(aliasController: IAliasController) {
@@ -101,33 +104,53 @@ export class FiltersEditComponent implements OnInit, OnDestroy {
     if (this.disabled || !this.hasEditableFilters) {
       return;
     }
-    const position = this.overlay.position();
+    const filteredArray = Object.entries(this.filtersInfo);
-    const config = new OverlayConfig({
+
-      panelClass: 'tb-filters-edit-panel',
+    if (filteredArray.length === 1) {
-      backdropClass: 'cdk-overlay-transparent-backdrop',
+      const singleFilter: Filter = {id: filteredArray[0][0], ...filteredArray[0][1]};
-      hasBackdrop: true,
+      this.dialog.open<UserFilterDialogComponent, UserFilterDialogData,
-    });
+        Filter>(UserFilterDialogComponent, {
-    const connectedPosition: ConnectedPosition = {
+        disableClose: true,
-      originX: 'start',
+        panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-      originY: 'bottom',
+        data: {
-      overlayX: 'start',
+          filter: singleFilter
-      overlayY: 'top'
+        }
-    };
+      }).afterClosed().subscribe(
-    config.positionStrategy = position.flexibleConnectedTo(this.filtersEditPanelOrigin.elementRef)
+        (result) => {
-      .withPositions([connectedPosition]);
+          if (result) {
-    const overlayRef = this.overlay.create(config);
+            this.filtersInfo[result.id] = result;
-    overlayRef.backdropClick().subscribe(() => {
+            this.aliasController.updateUserFilter(result);
-      overlayRef.dispose();
+          }
-    });
+        });
-
+    } else {
-    const injector = this._createFiltersEditPanelInjector(
+      const position = this.overlay.position();
-      overlayRef,
+      const config = new OverlayConfig({
-      {
+        panelClass: 'tb-filters-edit-panel',
-        aliasController: this.aliasController,
+        backdropClass: 'cdk-overlay-transparent-backdrop',
-        filtersInfo: deepClone(this.filtersInfo)
+        hasBackdrop: true,
-      }
+      });
-    );
+      const connectedPosition: ConnectedPosition = {
-    overlayRef.attach(new ComponentPortal(FiltersEditPanelComponent, this.viewContainerRef, injector));
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top'
+      };
+      config.positionStrategy = position.flexibleConnectedTo(this.filtersEditPanelOrigin.elementRef)
+        .withPositions([connectedPosition]);
+      const overlayRef = this.overlay.create(config);
+      overlayRef.backdropClick().subscribe(() => {
+        overlayRef.dispose();
+      });
+
+      const injector = this._createFiltersEditPanelInjector(
+        overlayRef,
+        {
+          aliasController: this.aliasController,
+          filtersInfo: deepClone(this.filtersInfo)
+        }
+      );
+      overlayRef.attach(new ComponentPortal(FiltersEditPanelComponent, this.viewContainerRef, injector));
+    }
   }
 
   private _createFiltersEditPanelInjector(overlayRef: OverlayRef, data: FiltersEditPanelData): PortalInjector {