UI: Refactoring

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

@@ -15,18 +15,17 @@
     limitations under the License.
 
 -->
-<mat-select fxFlex
+<mat-form-field subscriptSizing="dynamic">
-            class="tb-rule-chain-select"
+  <mat-icon matPrefix>settings_ethernet</mat-icon>
-            [required]="required"
+  <mat-select fxFlex
-            [disabled]="disabled"
+              class="tb-rule-chain-select"
-            [(ngModel)]="ruleChain"
+              hideSingleSelectionIndicator="false"
-            [compareWith]="compareWith"
+              [required]="required"
-            (ngModelChange)="ruleChainIdChanged()">
+              [disabled]="disabled"
-  <mat-select-trigger fxFlex fxLayout="row">
+              [(ngModel)]="ruleChainId"
-    <mat-icon class="tb-rule-chain-select-trigger-icon">settings_ethernet</mat-icon>
+              (ngModelChange)="ruleChainIdChanged()">
-    <span class="tb-rule-chain-select-trigger-text">{{ruleChain?.name}}</span>
+    <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain.id.id">
-  </mat-select-trigger>
+      {{ruleChain.name}}
-  <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain">
+    </mat-option>
-    {{ruleChain.name}}
+  </mat-select>
-  </mat-option>
+</mat-form-field>
-</mat-select>

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

@@ -19,21 +19,14 @@
   padding: 0 6px;
   .tb-rule-chain-select {
     display: flex;
-    height: 48px;
     min-height: 100%;
     pointer-events: all;
+  }
+}
 
-    &-trigger {
+:host ::ng-deep {
-      &-text {
+  .mat-mdc-form-field-infix {
-        max-width: 190px;
+    min-height: 48px;
-        text-overflow: ellipsis;
+    padding: 12px 0 !important;
-        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,7 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
 
   ruleChains$: Observable<Array<RuleChain>>;
 
-  ruleChain: RuleChain;
+  ruleChainId: string | null;
 
   private propagateChange = (v: any) => { };
 
@@ -76,10 +76,6 @@ 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;
   }
@@ -94,21 +90,16 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
 
   writeValue(value: string | null): void {
     if (isDefinedAndNotNull(value)) {
-      this.ruleChainService.getRuleChain(value)
+      this.ruleChainId = value;
-        .subscribe(ruleChain => this.ruleChain = ruleChain);
     }
   }
 
-  getname() {
-    return this.ruleChain?.name;
-  }
-
   ruleChainIdChanged() {
     this.updateView();
   }
 
   private updateView() {
-    this.propagateChange(this.ruleChain.id.id);
+    this.propagateChange(this.ruleChainId);
   }
 
   private getRuleChains(pageLink: PageLink): Observable<PageData<RuleChain>> {