UI: Added icon for rule chain selector

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

@@ -30,7 +30,7 @@
                     fxLayout="column">
           <mat-toolbar color="primary" class="tb-dark">
             <tb-rule-chain-select
-              fxFlex
+              fxFlex fxLayout="row" fxLayoutAlign="start center"
               *ngIf="!isImport"
               [ruleChainType]="ruleChainType"
               [disabled]="isDirtyValue"

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

@@ -19,9 +19,14 @@
             class="tb-rule-chain-select"
             [required]="required"
             [disabled]="disabled"
-            [(ngModel)]="ruleChainId"
+            [(ngModel)]="ruleChain"
+            [compareWith]="compareWith"
             (ngModelChange)="ruleChainIdChanged()">
-  <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain.id.id">
+  <mat-select-trigger fxFlex fxLayout="row">
+    <mat-icon class="tb-rule-chain-select-trigger-icon">settings_ethernet</mat-icon>
+    <span class="tb-rule-chain-select-trigger-text">{{ruleChain?.name}}</span>
+  </mat-select-trigger>
+  <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain">
     {{ruleChain.name}}
   </mat-option>
 </mat-select>

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

@@ -22,5 +22,18 @@
     height: 48px;
     min-height: 100%;
     pointer-events: all;
+
+    &-trigger {
+      &-text {
+        max-width: 190px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      &-icon {
+        display: flex;
+        width: 36px;
+        justify-content: center;
+      }
+    }
   }
 }

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

@@ -57,7 +57,9 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
 
   ruleChains$: Observable<Array<RuleChain>>;
 
-  ruleChainId: string | null;
+  ruleChain: RuleChain;
+
+  selected: any;
 
   private propagateChange = (v: any) => { };
 
@@ -76,6 +78,10 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
     );
   }
 
+  public compareWith(object1: any, object2: any) {
+    return object1 && object2 && object1.id.id === object2.id.id;
+  }
+
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }
@@ -90,16 +96,21 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
 
   writeValue(value: string | null): void {
     if (isDefinedAndNotNull(value)) {
-      this.ruleChainId = value;
+      this.ruleChainService.getRuleChain(value)
+        .subscribe(ruleChain => this.ruleChain = ruleChain);
     }
   }
 
+  getname() {
+    return this.ruleChain?.name;
+  }
+
   ruleChainIdChanged() {
     this.updateView();
   }
 
   private updateView() {
-    this.propagateChange(this.ruleChainId);
+    this.propagateChange(this.ruleChain.id.id);
   }
 
   private getRuleChains(pageLink: PageLink): Observable<PageData<RuleChain>> {