From 6b8befdd3698bd0b24c9a44eaeb5c25303bdeb8b Mon Sep 17 00:00:00 2001
From: Shaunak Das <51281688+shaun-ak@users.noreply.github.com>
Date: Fri, 27 Sep 2024 09:03:43 +0530
Subject: [PATCH] add business logic of rule settings

---
 .../src/app/user/update-user-setting.dto.ts   |  4 +++
 .../rule-settings-dialog.component.ts         |  2 ++
 .../rule-settings-dialog.html                 | 26 ++++++++++++++++---
 .../app/components/rule/rule.component.html   |  2 +-
 .../src/app/components/rule/rule.component.ts | 10 ++++---
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/apps/api/src/app/user/update-user-setting.dto.ts b/apps/api/src/app/user/update-user-setting.dto.ts
index 6ea6d7427..09e9cc75a 100644
--- a/apps/api/src/app/user/update-user-setting.dto.ts
+++ b/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;
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 41ebf49db..4fb68e780 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,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,
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 e24db29f7..2a968195d 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
@@ -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>
 
diff --git a/apps/client/src/app/components/rule/rule.component.html b/apps/client/src/app/components/rule/rule.component.html
index f19436aba..5491933c0 100644
--- a/apps/client/src/app/components/rule/rule.component.html
+++ b/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>
diff --git a/apps/client/src/app/components/rule/rule.component.ts b/apps/client/src/app/components/rule/rule.component.ts
index e6aafdcb1..90196e897 100644
--- a/apps/client/src/app/components/rule/rule.component.ts
+++ b/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);
           }
         }
       );