Commit 35b37f4875056d13307a62c98296347663a415a9
1 parent
2e096cf2
UI: Added dynamic change state disable input fields at multiple attributes widget
Showing
1 changed file
with
38 additions
and
2 deletions
... | ... | @@ -24,16 +24,17 @@ import { UtilsService } from '@core/services/utils.service'; |
24 | 24 | import { TranslateService } from '@ngx-translate/core'; |
25 | 25 | import { DataKey, Datasource, DatasourceData, DatasourceType, WidgetConfig } from '@shared/models/widget.models'; |
26 | 26 | import { IWidgetSubscription } from '@core/api/widget-api.models'; |
27 | -import { isDefined, isEqual, isUndefined, createLabelFromDatasource, isDefinedAndNotNull } from '@core/utils'; | |
27 | +import { createLabelFromDatasource, isDefined, isDefinedAndNotNull, isEqual, isUndefined } from '@core/utils'; | |
28 | 28 | import { EntityType } from '@shared/models/entity-type.models'; |
29 | 29 | import * as _moment from 'moment'; |
30 | 30 | import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; |
31 | 31 | import { RequestConfig } from '@core/http/http-utils'; |
32 | 32 | import { AttributeService } from '@core/http/attribute.service'; |
33 | 33 | import { AttributeData, AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; |
34 | -import { forkJoin, Observable } from 'rxjs'; | |
34 | +import { forkJoin, Observable, Subject } from 'rxjs'; | |
35 | 35 | import { EntityId } from '@shared/models/id/entity-id'; |
36 | 36 | import { ResizeObserver } from '@juggle/resize-observer'; |
37 | +import { takeUntil } from 'rxjs/operators'; | |
37 | 38 | |
38 | 39 | type FieldAlignment = 'row' | 'column'; |
39 | 40 | |
... | ... | @@ -106,6 +107,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni |
106 | 107 | private widgetConfig: WidgetConfig; |
107 | 108 | private subscription: IWidgetSubscription; |
108 | 109 | private datasources: Array<Datasource>; |
110 | + private destroy$ = new Subject(); | |
109 | 111 | public sources: Array<MultipleInputWidgetSource> = []; |
110 | 112 | |
111 | 113 | isVerticalAlignment: boolean; |
... | ... | @@ -153,6 +155,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni |
153 | 155 | if (this.formResize$) { |
154 | 156 | this.formResize$.disconnect(); |
155 | 157 | } |
158 | + this.destroy$.next(); | |
159 | + this.destroy$.complete(); | |
156 | 160 | } |
157 | 161 | |
158 | 162 | private initializeConfig() { |
... | ... | @@ -256,6 +260,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni |
256 | 260 | private buildForm() { |
257 | 261 | this.multipleInputFormGroup = this.fb.group({}); |
258 | 262 | this.sources.forEach((source) => { |
263 | + const addedFormControl = {}; | |
264 | + const waitFormControl = {}; | |
259 | 265 | for (const key of this.visibleKeys(source)) { |
260 | 266 | const validators: ValidatorFn[] = []; |
261 | 267 | if (key.settings.required) { |
... | ... | @@ -277,6 +283,36 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni |
277 | 283 | disabled: key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition}, |
278 | 284 | validators |
279 | 285 | ); |
286 | + if (this.settings.showActionButtons) { | |
287 | + addedFormControl[key.name] = formControl; | |
288 | + if (key.settings.isEditable === 'editable' && key.settings.disabledOnDataKey) { | |
289 | + if (addedFormControl.hasOwnProperty(key.settings.disabledOnDataKey)) { | |
290 | + addedFormControl[key.settings.disabledOnDataKey].valueChanges.pipe( | |
291 | + takeUntil(this.destroy$) | |
292 | + ).subscribe((value) => { | |
293 | + if (!value) { | |
294 | + formControl.disable({emitEvent: false}); | |
295 | + } else { | |
296 | + formControl.enable({emitEvent: false}); | |
297 | + } | |
298 | + }); | |
299 | + } else { | |
300 | + waitFormControl[key.settings.disabledOnDataKey] = formControl; | |
301 | + } | |
302 | + } | |
303 | + | |
304 | + if (waitFormControl.hasOwnProperty(key.name)) { | |
305 | + formControl.valueChanges.pipe( | |
306 | + takeUntil(this.destroy$) | |
307 | + ).subscribe((value) => { | |
308 | + if (!value) { | |
309 | + waitFormControl[key.name].disable({emitEvent: false}); | |
310 | + } else { | |
311 | + waitFormControl[key.name].enable({emitEvent: false}); | |
312 | + } | |
313 | + }); | |
314 | + } | |
315 | + } | |
280 | 316 | this.multipleInputFormGroup.addControl(key.formId, formControl); |
281 | 317 | } |
282 | 318 | }); | ... | ... |