add business logic of rule settings

apps/api/src/app/user/update-user-setting.dto.ts

@@ -1,4 +1,5 @@
 import { IsCurrencyCode } from '@ghostfolio/api/validators/is-currency-code';
+import { PortfolioReportRule } from '@ghostfolio/common/interfaces';
 import type {
   ColorScheme,
   DateRange,
@@ -88,6 +89,9 @@ export class UpdateUserSettingDto {
   @IsOptional()
   locale?: string;
 
+  @IsOptional()
+  portfolioSettings?: PortfolioReportRule['settings'];
+
   @IsNumber()
   @IsOptional()
   projectedTotalAmount?: number;

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

@@ -2,6 +2,7 @@ import { PortfolioReportRule } from '@ghostfolio/common/interfaces';
 
 import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
@@ -16,6 +17,7 @@ import { IRuleSettingsDialogParams } from './interfaces/interfaces';
 @Component({
   imports: [
     CommonModule,
+    FormsModule,
     MatButtonModule,
     MatDialogModule,
     MatFormFieldModule,

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

@@ -1,13 +1,31 @@
 <div mat-dialog-title>{{ data.rule.name }}</div>
 
 <div class="py-3" mat-dialog-content>
-  <mat-form-field appearance="outline" class="w-100">
+  <mat-form-field
+    appearance="outline"
+    class="w-100"
+    [ngClass]="{ 'd-none': settings.thresholdMin === undefined }"
+  >
     <mat-label i18n>Threshold Min</mat-label>
-    <input matInput name="thresholdMin" type="number" />
+    <input
+      matInput
+      name="thresholdMin"
+      type="number"
+      [(ngModel)]="settings.thresholdMin"
+    />
   </mat-form-field>
-  <mat-form-field appearance="outline" class="w-100">
+  <mat-form-field
+    appearance="outline"
+    class="w-100"
+    [ngClass]="{ 'd-none': settings.thresholdMax === undefined }"
+  >
     <mat-label i18n>Threshold Max</mat-label>
-    <input matInput name="thresholdMax" type="number" />
+    <input
+      matInput
+      name="thresholdMax"
+      type="number"
+      [(ngModel)]="settings.thresholdMax"
+    />
   </mat-form-field>
 </div>
 

apps/client/src/app/components/rule/rule.component.html

@@ -62,7 +62,7 @@
             <ion-icon name="ellipsis-horizontal" />
           </button>
           <mat-menu #rulesMenu="matMenu" xPosition="before">
-            @if (rule?.isActive && !isEmpty(rule.settings) && false) {
+            @if (rule?.isActive && !isEmpty(rule.settings)) {
               <button mat-menu-item (click)="onCustomizeRule(rule)">
                 <ng-container i18n>Customize</ng-container>...
               </button>

apps/client/src/app/components/rule/rule.component.ts

@@ -58,10 +58,12 @@ export class RuleComponent implements OnInit {
       .subscribe(
         ({ settings }: { settings: PortfolioReportRule['settings'] }) => {
           if (settings) {
-            console.log(settings);
-
-            // TODO
-            // this.ruleUpdated.emit(settings);
+            const updatedSettings: UpdateUserSettingDto = {
+              portfolioSettings: {
+                ...settings
+              }
+            };
+            this.ruleUpdated.emit(updatedSettings);
           }
         }
       );