Merge d7e6b326c8 into 8b9c8e04f2

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

@@ -3,21 +3,15 @@ import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogModule,
-  MatDialogRef
-} from '@angular/material/dialog';
-import { MatSliderModule } from '@angular/material/slider';
 
-import { RuleSettingsDialogParams } from './interfaces/interfaces';
+import { RuleSettingsDialogInput } from './interfaces';
 
 @Component({
   imports: [
     CommonModule,
-    FormsModule,
+    ReactiveFormsModule,
     GfValueComponent,
     MatButtonModule,
     MatDialogModule,
@@ -28,10 +22,22 @@ import { RuleSettingsDialogParams } from './interfaces/interfaces';
   templateUrl: './rule-settings-dialog.html'
 })
 export class GfRuleSettingsDialogComponent {
-  public settings: XRayRulesSettings['AccountClusterRiskCurrentInvestment'];
+  public settingsForm: FormGroup;
 
   public constructor(
-    @Inject(MAT_DIALOG_DATA) public data: RuleSettingsDialogParams,
+    @Inject(MAT_DIALOG_DATA) public data: RuleSettingsDialogInput,
     public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>
-  ) {}
+  ) {
+    this.settingsForm = new FormGroup({
+      thresholdMin: new FormControl(data.settings?.thresholdMin ?? null),
+      thresholdMax: new FormControl(data.settings?.thresholdMax ?? null)
+    });
+  }
+
+  public get updatedSettings(): XRayRulesSettings {
+    return {
+      ...this.data.settings,
+      ...(this.settingsForm.value as Partial<XRayRulesSettings>)
+    };
+  }
 }

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

@@ -1,6 +1,6 @@
-<div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>
+<div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>
 
-<div class="py-3" mat-dialog-content>
+<div class="py-3" mat-dialog-content [formGroup]="settingsForm">
   @if (
     data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
   ) {
@@ -35,8 +35,8 @@
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
         >
-          <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
+          <input matSliderStartThumb formControlName="thresholdMin" />
-          <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
+          <input matSliderEndThumb formControlName="thresholdMax" />
         </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 formControlName="thresholdMin" />
         </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 formControlName="thresholdMax" />
         </mat-slider>
         <gf-value
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
@@ -131,7 +131,7 @@
   <button
     color="primary"
     mat-flat-button
-    (click)="dialogRef.close(data.settings)"
+    [disabled]="!settingsForm.dirty" (click)="dialogRef.close(updatedSettings)"
   >
     <ng-container i18n>Save</ng-container>
   </button>