From dfab1e4085f20fa3c993da524c16778a3682f0bb Mon Sep 17 00:00:00 2001
From: theluckystrike <51033404+theluckystrike@users.noreply.github.com>
Date: Wed, 4 Mar 2026 22:58:07 +0700
Subject: [PATCH] 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.
---
 .../rule-settings-dialog.component.ts         | 20 +++++++++++++++++--
 .../rule-settings-dialog.html                 |  9 +++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
index 65300c6d8..86a3a445d 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
+++ b/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;
+  }
 }
diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
index 83d4e2d19..37b53a1aa 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
+++ b/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>