UI: Refactoring and add support edge rule chains

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html

@@ -32,6 +32,7 @@
             <tb-rule-chain-select
               fxFlex
               *ngIf="!isImport"
+              [ruleChainType]="ruleChainType"
               [disabled]="isDirtyValue"
               [(ngModel)]="ruleChain.id.id"
               (ngModelChange)="currentRuleChainIdChanged(ruleChain.id?.id)">

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts

@@ -15,7 +15,9 @@
 ///
 
 import {
+  AfterViewChecked,
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -90,6 +92,7 @@ import { MatMiniFabButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { VersionControlComponent } from '@home/components/vc/version-control.component';
 import { ComponentClusteringMode } from '@shared/models/component-descriptor.models';
+import { MatDrawer } from '@angular/material/sidenav';
 import Timeout = NodeJS.Timeout;
 
 @Component({
@@ -99,7 +102,7 @@ import Timeout = NodeJS.Timeout;
   encapsulation: ViewEncapsulation.None
 })
 export class RuleChainPageComponent extends PageComponent
-  implements AfterViewInit, OnInit, OnDestroy, HasDirtyFlag, ISearchableComponent {
+  implements AfterViewInit, OnInit, OnDestroy, HasDirtyFlag, ISearchableComponent, AfterViewChecked {
 
   get isDirty(): boolean {
     return this.isDirtyValue || this.isImport;
@@ -121,6 +124,8 @@ export class RuleChainPageComponent extends PageComponent
 
   @ViewChild('ruleChainMenuTrigger', {static: true}) ruleChainMenuTrigger: MatMenuTrigger;
 
+  @ViewChild('drawer') drawer: MatDrawer;
+
   eventTypes = EventType;
 
   debugEventTypes = DebugEventType;
@@ -265,6 +270,7 @@ export class RuleChainPageComponent extends PageComponent
               private popoverService: TbPopoverService,
               private renderer: Renderer2,
               private viewContainerRef: ViewContainerRef,
+              private changeDetector: ChangeDetectorRef,
               public dialog: MatDialog,
               public dialogService: DialogService,
               public fb: UntypedFormBuilder) {
@@ -280,6 +286,10 @@ export class RuleChainPageComponent extends PageComponent
   ngOnInit() {
   }
 
+  ngAfterViewChecked(){
+    this.changeDetector.detectChanges();
+  }
+
   ngAfterViewInit() {
     fromEvent(this.ruleNodeSearchInputField.nativeElement, 'keyup')
       .pipe(
@@ -299,7 +309,11 @@ export class RuleChainPageComponent extends PageComponent
   }
 
   currentRuleChainIdChanged(ruleChainId: string) {
-    this.router.navigateByUrl(`ruleChains/${ruleChainId}`);
+    if (this.ruleChainType === RuleChainType.CORE) {
+      this.router.navigateByUrl(`ruleChains/${ruleChainId}`);
+    } else {
+      this.router.navigateByUrl(`edgeManagement/ruleChains/${ruleChainId}`);
+    }
   }
 
   onSearchTextUpdated(searchText: string) {

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html

@@ -16,6 +16,7 @@
 
 -->
 <mat-select fxFlex
+            class="tb-rule-chain-select"
             [required]="required"
             [disabled]="disabled"
             [(ngModel)]="ruleChainId"

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss

@@ -17,22 +17,10 @@
   min-width: 52px;
   width: 100%;
   padding: 0 6px;
-  .mat-mdc-select {
+  .tb-rule-chain-select {
     display: flex;
-    max-width: 300px;
     height: 48px;
     min-height: 100%;
     pointer-events: all;
   }
 }
-
-:host ::ng-deep {
-  .mat-mdc-select {
-    .mat-mdc-select-value {
-      max-width: 282px;
-    }
-    .mat-mdc-select-arrow {
-      width: 24px;
-    }
-  }
-}

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, forwardRef, Inject, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
@@ -22,19 +22,13 @@ import { map, share } from 'rxjs/operators';
 import { PageData } from '@shared/models/page/page-data';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TooltipPosition } from '@angular/material/tooltip';
-import { CdkOverlayOrigin, Overlay } from '@angular/cdk/overlay';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { DOCUMENT } from '@angular/common';
-import { WINDOW } from '@core/services/window.service';
 import { RuleChain, RuleChainType } from '@shared/models/rule-chain.models';
 import { RuleChainService } from '@core/http/rule-chain.service';
 import { isDefinedAndNotNull } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { Direction } from '@shared/models/page/sort-order';
 
-// @dynamic
 @Component({
   selector: 'tb-rule-chain-select',
   templateUrl: './rule-chain-select.component.html',
@@ -58,33 +52,20 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
   @coerceBoolean()
   disabled: boolean;
 
+  @Input()
+  ruleChainType: RuleChainType = RuleChainType.CORE;
+
   ruleChains$: Observable<Array<RuleChain>>;
 
   ruleChainId: string | null;
 
-  @ViewChild('ruleChainSelectPanelOrigin') ruleChainSelectPanelOrigin: CdkOverlayOrigin;
-
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
-              private ruleChainService: RuleChainService,
-              private overlay: Overlay,
-              private breakpointObserver: BreakpointObserver,
-              private viewContainerRef: ViewContainerRef,
-              private nativeElement: ElementRef,
-              @Inject(DOCUMENT) private document: Document,
-              @Inject(WINDOW) private window: Window) {
-  }
-
-  registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
+              private ruleChainService: RuleChainService) {
   }
 
   ngOnInit() {
-
     const pageLink = new PageLink(100, 0, null, {
       property: 'name',
       direction: Direction.ASC
@@ -96,6 +77,14 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
     );
   }
 
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
   }
@@ -115,7 +104,7 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
   }
 
   private getRuleChains(pageLink: PageLink): Observable<PageData<RuleChain>> {
-    return this.ruleChainService.getRuleChains(pageLink, RuleChainType.CORE, {ignoreLoading: true});
+    return this.ruleChainService.getRuleChains(pageLink, this.ruleChainType, {ignoreLoading: true});
   }
 
 }