From 19d50f14846cf37555ec86ddb2e57743bf19bf60 Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Thu, 22 Jan 2026 16:24:48 +0200 Subject: [PATCH] Fixed send rpc and segmented button widgets --- ...gmented-button-basic-config.component.html | 2 - ...segmented-button-basic-config.component.ts | 48 ++++++++++++++++++ ...nted-button-widget-settings.component.html | 2 - ...mented-button-widget-settings.component.ts | 49 +++++++++++++++++++ .../send-rpc-widget-settings.component.html | 13 ++--- .../send-rpc-widget-settings.component.ts | 4 +- 6 files changed, 102 insertions(+), 16 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html index b677374c19..f748c13f81 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html @@ -126,7 +126,6 @@ subscriptSizing="dynamic" [predefinedValuesButton]="true" [predefinedValues]="predefinedValues" - [disabled]="!segmentedButtonWidgetConfigForm.get('leftAppearance').get('showLabel').value" placeholderText="{{ 'widget-config.set' | translate }}" formControlName="label" > @@ -164,7 +163,6 @@ subscriptSizing="dynamic" [predefinedValuesButton]="true" [predefinedValues]="predefinedValues" - [disabled]="!segmentedButtonWidgetConfigForm.get('rightAppearance').get('showLabel').value" placeholderText="{{ 'widget-config.set' | translate }}" formControlName="label" > diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts index d2d6968831..895848a933 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts @@ -142,4 +142,52 @@ export class SegmentedButtonBasicConfigComponent extends BasicWidgetConfigCompon return this.widgetConfig; } + + protected validatorTriggers(): string[] { + return ['appearance.leftAppearance.showLabel', 'appearance.leftAppearance.showIcon', 'appearance.rightAppearance.showLabel', 'appearance.rightAppearance.showIcon',]; + } + + protected updateValidators(emitEvent: boolean) { + const showLeftLabel: boolean = this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.showLabel').value; + const showRightLabel: boolean = this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.showLabel').value; + + const showLeftIcon: boolean = this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.showIcon').value; + const showRightIcon: boolean = this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.showIcon').value; + + if (showLeftLabel) { + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.label').enable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.labelFont').enable({emitEvent}); + } else { + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.label').disable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.labelFont').disable({emitEvent}); + } + + if (showRightLabel) { + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.label').enable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.labelFont').enable({emitEvent}); + } else { + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.label').disable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.labelFont').disable({emitEvent}); + } + + if (showLeftIcon) { + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.icon').enable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.iconSize').enable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.iconSizeUnit').enable({emitEvent}); + } else { + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.icon').disable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.iconSize').disable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.iconSizeUnit').disable({emitEvent}); + } + + if (showRightIcon) { + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.icon').enable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.iconSize').enable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.iconSizeUnit').enable({emitEvent}); + } else { + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.icon').disable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.iconSize').disable({emitEvent}); + this.segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.iconSizeUnit').disable({emitEvent}); + } + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html index 67579541c9..fc27e782e2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html @@ -117,7 +117,6 @@ brackets="curly" subscriptSizing="dynamic" predefinedValuesButton="true" - [disabled]="!segmentedButtonWidgetSettingsForm.get('leftAppearance').get('showLabel').value" [predefinedValues]="predefinedValues" placeholderText="{{ 'widget-config.set' | translate }}" formControlName="label" @@ -155,7 +154,6 @@ brackets="curly" subscriptSizing="dynamic" predefinedValuesButton="true" - [disabled]="!segmentedButtonWidgetSettingsForm.get('rightAppearance').get('showLabel').value" [predefinedValues]="predefinedValues" placeholderText="{{ 'widget-config.set' | translate }}" formControlName="label" diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts index b0eaf5c464..540688c18e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts @@ -38,6 +38,7 @@ import { WidgetButtonToggleState, widgetButtonToggleStatesTranslations } from '@home/components/widget/lib/button/segmented-button-widget.models'; +import { ValueCardLayout } from '@home/components/widget/lib/cards/value-card-widget.models'; @Component({ selector: 'tb-segmented-button-widget-settings', @@ -139,4 +140,52 @@ export class SegmentedButtonWidgetSettingsComponent extends WidgetSettingsCompon }) }); } + + protected validatorTriggers(): string[] { + return ['appearance.leftAppearance.showLabel', 'appearance.leftAppearance.showIcon', 'appearance.rightAppearance.showLabel', 'appearance.rightAppearance.showIcon',]; + } + + protected updateValidators(emitEvent: boolean) { + const showLeftLabel: boolean = this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.showLabel').value; + const showRightLabel: boolean = this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.showLabel').value; + + const showLeftIcon: boolean = this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.showIcon').value; + const showRightIcon: boolean = this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.showIcon').value; + + if (showLeftLabel) { + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.label').enable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.labelFont').enable({emitEvent}); + } else { + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.label').disable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.labelFont').disable({emitEvent}); + } + + if (showRightLabel) { + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.label').enable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.labelFont').enable({emitEvent}); + } else { + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.label').disable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.labelFont').disable({emitEvent}); + } + + if (showLeftIcon) { + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.icon').enable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.iconSize').enable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.iconSizeUnit').enable({emitEvent}); + } else { + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.icon').disable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.iconSize').disable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.iconSizeUnit').disable({emitEvent}); + } + + if (showRightIcon) { + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.icon').enable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.iconSize').enable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.iconSizeUnit').enable({emitEvent}); + } else { + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.icon').disable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.iconSize').disable({emitEvent}); + this.segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.iconSizeUnit').disable({emitEvent}); + } + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html index ea21202511..72bc8d8219 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html @@ -18,15 +18,10 @@
widgets.rpc.common-settings - + + widgets.rpc.widget-title + + widgets.rpc.button-label diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts index 91dbf23e85..b8af3eaf0d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts @@ -15,7 +15,7 @@ /// import { Component } from '@angular/core'; -import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models'; +import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; @@ -32,8 +32,6 @@ export class SendRpcWidgetSettingsComponent extends WidgetSettingsComponent { contentTypes = ContentType; - predefinedValues = widgetTitleAutocompleteValues; - constructor(protected store: Store, private fb: UntypedFormBuilder) { super(store);