Merge 02e3e4e30f into fda0c3afc8

CHANGELOG.md

@@ -17,6 +17,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Upgraded `countries-list` from version `3.2.2` to `3.3.0`
 - Upgraded `ng-extract-i18n-merge` from `3.2.1` to `3.3.0`
 
+### Fixed
+
+- Fixed the _Save_ button state in the rule settings dialog of the _X-ray_ section
+
 ## 2.251.0 - 2026-03-24
 
 ### Added

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts

@@ -2,8 +2,8 @@ import { XRayRulesSettings } from '@ghostfolio/common/interfaces';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
-import { Component, Inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
@@ -17,21 +17,47 @@ import { RuleSettingsDialogParams } from './interfaces/interfaces';
 @Component({
   imports: [
     CommonModule,
-    FormsModule,
     GfValueComponent,
     MatButtonModule,
     MatDialogModule,
-    MatSliderModule
+    MatSliderModule,
+    ReactiveFormsModule
   ],
   selector: 'gf-rule-settings-dialog',
   styleUrls: ['./rule-settings-dialog.scss'],
   templateUrl: './rule-settings-dialog.html'
 })
-export class GfRuleSettingsDialogComponent {
+export class GfRuleSettingsDialogComponent implements OnInit {
   public settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
+  public thresholdMaxControl: FormControl<number>;
+  public thresholdMinControl: FormControl<number>;
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: RuleSettingsDialogParams,
     public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>
   ) {}
+
+  public get isDirty(): boolean {
+    return this.thresholdMinControl.dirty || this.thresholdMaxControl.dirty;
+  }
+
+  public ngOnInit() {
+    this.thresholdMinControl = new FormControl<number>(
+      this.data.settings.thresholdMin,
+      { nonNullable: true }
+    );
+
+    this.thresholdMaxControl = new FormControl<number>(
+      this.data.settings.thresholdMax,
+      { nonNullable: true }
+    );
+  }
+
+  public onSave() {
+    this.dialogRef.close({
+      ...this.data.settings,
+      thresholdMax: this.thresholdMaxControl.value,
+      thresholdMin: this.thresholdMinControl.value
+    });
+  }
 }

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -12,14 +12,14 @@
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
-          [value]="data.settings.thresholdMin"
+          [value]="thresholdMinControl.value"
         />
         <span class="mx-1">-</span>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
-          [value]="data.settings.thresholdMax"
+          [value]="thresholdMaxControl.value"
         />
       </h6>
       <div class="align-items-center d-flex w-100">
@@ -35,8 +35,8 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
-          <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
+          <input matSliderStartThumb [formControl]="thresholdMinControl" />
+          <input matSliderEndThumb [formControl]="thresholdMaxControl" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -58,7 +58,7 @@
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
-          [value]="data.settings.thresholdMin"
+          [value]="thresholdMinControl.value"
         />
       </h6>
       <div class="align-items-center d-flex w-100">
@@ -75,7 +75,7 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
+          <input matSliderThumb [formControl]="thresholdMinControl" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -96,7 +96,7 @@
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
-          [value]="data.settings.thresholdMax"
+          [value]="thresholdMaxControl.value"
         />
       </h6>
       <div class="align-items-center d-flex w-100">
@@ -113,7 +113,7 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
+          <input matSliderThumb [formControl]="thresholdMaxControl" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -131,7 +131,8 @@
   <button
     color="primary"
     mat-flat-button
-    (click)="dialogRef.close(data.settings)"
+    [disabled]="!isDirty"
+    (click)="onSave()"
   >
     <ng-container i18n>Save</ng-container>
   </button>