Kalutka Zhenya
5 years ago
5 changed files with 115 additions and 62 deletions
@ -0,0 +1,37 @@ |
|||
<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm" style = "margin-bottom: 26px;" fxFlex> |
|||
<mat-expansion-panel-header> |
|||
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> |
|||
<mat-panel-title> |
|||
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> |
|||
{{'filter.dynamic-value' | translate}} |
|||
</div> |
|||
</mat-panel-title> |
|||
<span fxFlex></span> |
|||
</div> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<div fxFlex fxLayout="column"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div fxFlex="40" fxLayout="column"> |
|||
<mat-form-field floatLabel="always" hideRequiredMarker class="mat-block"> |
|||
<mat-label></mat-label> |
|||
<mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}"> |
|||
<mat-option [value]="null"> |
|||
{{'filter.no-dynamic-value' | translate}} |
|||
</mat-option> |
|||
<mat-option *ngFor="let sourceType of dynamicValueSourceTypes" [value]="sourceType"> |
|||
{{dynamicValueSourceTypeTranslations.get(sourceType) | translate}} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
<div fxFlex fxLayout="column"> |
|||
<mat-form-field floatLabel="always" hideRequiredMarker class="mat-block source-attribute"> |
|||
<mat-label></mat-label> |
|||
<input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}"> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
@ -0,0 +1,68 @@ |
|||
import { Component, forwardRef, OnInit } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
FormGroup, |
|||
NG_VALUE_ACCESSOR, |
|||
} from '@angular/forms'; |
|||
import { |
|||
DynamicValueSourceType, |
|||
dynamicValueSourceTypeTranslationMap, |
|||
getDynamicSourcesForAllowUser |
|||
} from '@shared/models/query/query.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-alarm-dynamic-value', |
|||
templateUrl: './alarm-dynamic-value.component.html', |
|||
providers: [{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => AlarmDynamicValue), |
|||
multi: true |
|||
}] |
|||
}) |
|||
|
|||
export class AlarmDynamicValue implements ControlValueAccessor, OnInit{ |
|||
public dynamicValue: FormGroup; |
|||
public dynamicValueSourceTypes: DynamicValueSourceType[] = getDynamicSourcesForAllowUser(false); |
|||
public dynamicValueSourceTypeTranslations = dynamicValueSourceTypeTranslationMap; |
|||
private propagateChange = (v: any) => { }; |
|||
|
|||
constructor(private fb: FormBuilder) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.dynamicValue = this.fb.group({ |
|||
sourceType: [null], |
|||
sourceAttribute: [null] |
|||
}) |
|||
|
|||
this.dynamicValue.get('sourceType').valueChanges.subscribe( |
|||
(sourceType) => { |
|||
if (!sourceType) { |
|||
this.dynamicValue.get('sourceAttribute').patchValue(null, {emitEvent: false}); |
|||
} |
|||
} |
|||
); |
|||
|
|||
this.dynamicValue.valueChanges.subscribe(() => { |
|||
this.updateModel(); |
|||
}) |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
writeValue(dynamicValue: {sourceType: string, sourceAttribute: string}): void { |
|||
if(dynamicValue) { |
|||
this.dynamicValue.patchValue(dynamicValue, {emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
private updateModel() { |
|||
this.propagateChange(this.dynamicValue.value); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue