diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html index bc8bde2b17..026454ed18 100644 --- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html +++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html @@ -15,18 +15,17 @@ limitations under the License. --> - - - settings_ethernet - {{ruleChain?.name}} - - - {{ruleChain.name}} - - + + settings_ethernet + + + {{ruleChain.name}} + + + diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss index 6221000d64..d2b3580be2 100644 --- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss +++ b/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 { - &-text { - max-width: 190px; - text-overflow: ellipsis; - overflow: hidden; - } - &-icon { - display: flex; - width: 36px; - justify-content: center; - } - } +:host ::ng-deep { + .mat-mdc-form-field-infix { + min-height: 48px; + padding: 12px 0 !important; } } diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts index 0b2564f2ae..003d85b751 100644 --- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts +++ b/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>; - 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) - .subscribe(ruleChain => this.ruleChain = ruleChain); + this.ruleChainId = value; } } - 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> {