SUPPORT-8638:add new component

frontend/src/resources/template/ervu-dashboard/CustomFilterGroup.html

@@ -0,0 +1,8 @@
+<div [id]="getObjectId()"
+     [class.disabled]="!isEnabled()"
+     class="filter-group"
+     [ngbTooltip]="tooltip | emptyIfNull">
+    <div>
+        <ng-content></ng-content>
+    </div>
+</div>

frontend/src/ts/ervu-dashboard/FilterRouteHandlerScript.ts

@@ -1,74 +0,0 @@
-import {
-  AnalyticalScope,
-  Behavior, CheckBox,
-  ComboBoxBase, DateTimePicker,
-  FilterComponent,
-  FilterGroup,
-  TextBase
-} from "@webbpm/base-package";
-import {Injector} from "@angular/core";
-import {FilterTransferService} from "./FilterTransferService";
-import {Subscription} from "rxjs";
-
-@AnalyticalScope(FilterGroup)
-export class FilterRouteHandlerScript extends Behavior {
-  private filterGroup: FilterGroup
-  private filterTransferService:FilterTransferService
-  private filtersSubscription: Subscription;
-
-  constructor(pageId?: string, objectId?: string, injector?: Injector, interfaces?: any[]) {
-    super(pageId, objectId, injector, interfaces);
-  }
-
-  public initialize() {
-    super.initialize();
-    this.filterTransferService = this.injector.get(FilterTransferService);
-    this.filterGroup = this.getScript(FilterGroup);
-
-  }
-
-  private applyFilters(params: any): void {
-    if (!params || Object.keys(params).length === 0) {
-      return;
-    }
-    const filterComponents: FilterComponent[] = this.filterGroup.getContainerComponents(FilterComponent);
-    filterComponents.forEach(filter => {
-      const objectName = filter.getObjectName();
-      const paramValue = params[objectName];
-
-      if (paramValue !== undefined && paramValue !== null) {
-        const controlWithValue = filter.getControlWithValue();
-        if (controlWithValue instanceof TextBase || (controlWithValue instanceof ComboBoxBase)) {
-          controlWithValue.initialValue = paramValue;
-        }
-        else if (controlWithValue instanceof CheckBox) {
-          controlWithValue.initialValue = paramValue.toLowerCase() === "true";
-        }
-        else if (controlWithValue instanceof DateTimePicker) {
-          controlWithValue.initialValue = new Date(paramValue);
-        }
-      }
-    });
-    this.filterGroup.triggerFilter();
-  }
-
-  bindEvents() {
-    super.bindEvents();
-    this.filtersSubscription = this.filterTransferService.currentFilters$.subscribe(params => {
-      if (this.filterTransferService.isClearingFilters) {
-        return;
-      }
-      if (params && Object.keys(params).length > 0) {
-        this.applyFilters(params);
-      }
-      this.filterTransferService.clearFilters()
-    });
-  }
-
-  unbindEvents() {
-    super.unbindEvents();
-    if (this.filtersSubscription) {
-      this.filtersSubscription.unsubscribe();
-    }
-  }
-}

frontend/src/ts/ervu-dashboard/FilterTransferService.ts

@@ -1,22 +1,20 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
 
 @Injectable({
               providedIn: 'root'
             })
 export class FilterTransferService {
-  private filtersSource = new BehaviorSubject<Record<string, any>>({});
-  public currentFilters$ = this.filtersSource.asObservable();
-  public isClearingFilters = false;
+  private filtersSource: Record<string, any> = {};
 
+  getFilters(): Record<string, any> {
+    return this.filtersSource;
+  }
 
   setFilters(filters: Record<string, any>) {
-    this.filtersSource.next(filters);
+    this.filtersSource = filters;
   }
 
   clearFilters() {
-    this.isClearingFilters = true;
-    this.filtersSource.next({});
-    this.isClearingFilters = false;
+    this.filtersSource = {};
   }
-}
+}

frontend/src/ts/ervu-dashboard/component/container/CustomFilterGroup.ts

@@ -0,0 +1,84 @@
+import {
+  CheckBox,
+  ComboBoxBase, DateTimePicker,
+  FilterComponent,
+  FilterGroup, TextBase,
+
+} from "@webbpm/base-package";
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef} from "@angular/core";
+import {FilterTransferService} from "../../FilterTransferService";
+
+@Component({
+             moduleId: module.id,
+             selector: 'custom-filter-group',
+             templateUrl: './../../../../../src/resources/template/ervu-dashboard/CustomFilterGroup.html',
+             changeDetection: ChangeDetectionStrategy.OnPush
+           })
+export class CustomFilterGroup extends FilterGroup {
+  private transferService:FilterTransferService
+  private filtersApplied: boolean = false;
+
+  constructor(el: ElementRef, cd: ChangeDetectorRef) {
+    super(el, cd);
+  }
+
+  public initialize() {
+    super.initialize();
+    this.transferService = this.injector.get(FilterTransferService);
+    this.applySavedFilters();
+  }
+  public postStart(): void {
+    if (this.liveFilter) {
+      this.registerLiveFilteringFieldChangeListeners();
+    }
+
+    if (this.skipInitialLoading && !this.filtersApplied) {
+      this.loadInitialValues();
+      return;
+    }
+
+    this.progressIndicationService.showProgressBar();
+    this.loadContainer()
+        .then(() => {
+          this.fireOnLoadEvent();
+          this.progressIndicationService.hideProgressBar();
+        })
+        .catch((reason) => {
+          console.error(
+              `Failed to load container with id = ${this.getObjectId()}. Reason: ${reason.stack}`);
+
+          this._isLoaded = false;
+          this.progressIndicationService.hideProgressBar();
+        });
+  }
+
+  private applySavedFilters(): void {
+    const filters = this.transferService.getFilters();
+    if (filters && Object.keys(filters).length > 0) {
+      this.applyFilters(filters);
+      this.transferService.clearFilters();
+    }
+  }
+
+  private applyFilters(filters: any): void {
+    const filterComponents: FilterComponent[] = this.getContainerComponents(FilterComponent);
+    filterComponents.forEach(filter => {
+      const objectName = filter.getObjectName();
+      const paramValue = filters[objectName];
+
+      if (paramValue) {
+        const controlWithValue = filter.getControlWithValue();
+        if (controlWithValue instanceof TextBase || (controlWithValue instanceof ComboBoxBase)) {
+          controlWithValue.initialValue = paramValue;
+        }
+        else if (controlWithValue instanceof CheckBox) {
+          controlWithValue.initialValue = paramValue.toLowerCase() === "true";
+        }
+        else if (controlWithValue instanceof DateTimePicker) {
+          controlWithValue.initialValue = new Date(paramValue);
+        }
+      }
+    });
+    this.filtersApplied = true;
+  }
+}

frontend/src/ts/modules/app/app.module.ts

@@ -29,6 +29,7 @@ import {TreeviewComponent} from "../../component/external/ngx-treeview/lib/treev
 import {TreeviewItemComponent} from "../../component/external/ngx-treeview/lib/treeview-item.component";
 import {DataDateComponent} from "./component/data-date.component";
 import {FilterTransferService} from "../../ervu-dashboard/FilterTransferService";
+import {CustomFilterGroup} from "../../ervu-dashboard/component/container/CustomFilterGroup";
 
 registerLocaleData(localeRu);
 export const DIRECTIVES = [
@@ -44,7 +45,8 @@ export const DIRECTIVES = [
   forwardRef(() => DropdownTreeviewSelectComponent),
   forwardRef(() => TreeviewComponent),
   forwardRef(() => TreeviewItemComponent),
-  forwardRef(() => DataDateComponent)
+  forwardRef(() => DataDateComponent),
+  forwardRef(() => CustomFilterGroup)
 ];
 
 @NgModule({