fix: disable Save button until form changes in rule settings dialog

Fixes #6479

The Save button in the rule settings dialog was incorrectly enabled by
default, even before any user interaction occurred. This fix tracks the
initial settings values and only enables the Save button once the user
makes changes to the form.

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

@@ -2,7 +2,7 @@ import { XRayRulesSettings } from '@ghostfolio/common/interfaces';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import {
@@ -27,11 +27,27 @@ import { RuleSettingsDialogParams } from './interfaces/interfaces';
   styleUrls: ['./rule-settings-dialog.scss'],
   templateUrl: './rule-settings-dialog.html'
 })
-export class GfRuleSettingsDialogComponent {
+export class GfRuleSettingsDialogComponent implements OnInit {
+  public hasChanges = false;
   public settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
 
+  private originalSettings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
+
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: RuleSettingsDialogParams,
     public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>
   ) {}
+
+  public ngOnInit() {
+    this.originalSettings = {
+      ...this.data.settings
+    };
+    this.settings = this.data.settings;
+  }
+
+  public onChange() {
+    this.hasChanges =
+      this.settings.thresholdMin !== this.originalSettings.thresholdMin ||
+      this.settings.thresholdMax !== this.originalSettings.thresholdMax;
+  }
 }

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

@@ -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 [(ngModel)]="data.settings.thresholdMin" (ngModelChange)="onChange()" />
+          <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" (ngModelChange)="onChange()" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -75,7 +75,7 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
+          <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" (ngModelChange)="onChange()" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -113,7 +113,7 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
+          <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" (ngModelChange)="onChange()" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -131,6 +131,7 @@
   <button
     color="primary"
     mat-flat-button
+    [disabled]="!hasChanges"
     (click)="dialogRef.close(data.settings)"
   >
     <ng-container i18n>Save</ng-container>