From 82c027420f6d1fbc05558ec6687206a7ea6c9ba9 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 14 Sep 2024 20:32:00 +0200
Subject: [PATCH] Set up rule settings dialog

---
 .../interfaces/interfaces.ts                  |  5 ++
 .../rule-settings-dialog.component.ts         | 40 +++++++++++++++
 .../rule-settings-dialog.html                 | 23 +++++++++
 .../rule-settings-dialog.scss                 |  2 +
 .../app/components/rule/rule.component.html   |  5 ++
 .../src/app/components/rule/rule.component.ts | 49 ++++++++++++++++++-
 6 files changed, 122 insertions(+), 2 deletions(-)
 create mode 100644 apps/client/src/app/components/rule/rule-settings-dialog/interfaces/interfaces.ts
 create mode 100644 apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
 create mode 100644 apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
 create mode 100644 apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.scss

diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/interfaces/interfaces.ts b/apps/client/src/app/components/rule/rule-settings-dialog/interfaces/interfaces.ts
new file mode 100644
index 000000000..a409ab503
--- /dev/null
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/interfaces/interfaces.ts
@@ -0,0 +1,5 @@
+import { PortfolioReportRule } from '@ghostfolio/common/interfaces';
+
+export interface IRuleSettingsDialogParams {
+  rule: PortfolioReportRule;
+}
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
new file mode 100644
index 000000000..41ebf49db
--- /dev/null
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts
@@ -0,0 +1,40 @@
+import { PortfolioReportRule } from '@ghostfolio/common/interfaces';
+
+import { CommonModule } from '@angular/common';
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+import { IRuleSettingsDialogParams } from './interfaces/interfaces';
+
+@Component({
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule
+  ],
+  selector: 'gf-rule-settings-dialog',
+  standalone: true,
+  styleUrls: ['./rule-settings-dialog.scss'],
+  templateUrl: './rule-settings-dialog.html'
+})
+export class GfRuleSettingsDialogComponent {
+  public settings: PortfolioReportRule['settings'];
+
+  public constructor(
+    @Inject(MAT_DIALOG_DATA) public data: IRuleSettingsDialogParams,
+    public dialogRef: MatDialogRef<GfRuleSettingsDialogComponent>
+  ) {
+    console.log(this.data.rule);
+
+    this.settings = this.data.rule.settings;
+  }
+}
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
new file mode 100644
index 000000000..e24db29f7
--- /dev/null
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
@@ -0,0 +1,23 @@
+<div mat-dialog-title>{{ data.rule.name }}</div>
+
+<div class="py-3" mat-dialog-content>
+  <mat-form-field appearance="outline" class="w-100">
+    <mat-label i18n>Threshold Min</mat-label>
+    <input matInput name="thresholdMin" type="number" />
+  </mat-form-field>
+  <mat-form-field appearance="outline" class="w-100">
+    <mat-label i18n>Threshold Max</mat-label>
+    <input matInput name="thresholdMax" type="number" />
+  </mat-form-field>
+</div>
+
+<div align="end" mat-dialog-actions>
+  <button i18n mat-button (click)="dialogRef.close()">Close</button>
+  <button
+    color="primary"
+    mat-flat-button
+    (click)="dialogRef.close({ settings })"
+  >
+    <ng-container i18n>Save</ng-container>
+  </button>
+</div>
diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.scss b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.scss
new file mode 100644
index 000000000..dc9093b45
--- /dev/null
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.scss
@@ -0,0 +1,2 @@
+:host {
+}
diff --git a/apps/client/src/app/components/rule/rule.component.html b/apps/client/src/app/components/rule/rule.component.html
index 80b442b7b..f19436aba 100644
--- a/apps/client/src/app/components/rule/rule.component.html
+++ b/apps/client/src/app/components/rule/rule.component.html
@@ -62,6 +62,11 @@
             <ion-icon name="ellipsis-horizontal" />
           </button>
           <mat-menu #rulesMenu="matMenu" xPosition="before">
+            @if (rule?.isActive && !isEmpty(rule.settings) && false) {
+              <button mat-menu-item (click)="onCustomizeRule(rule)">
+                <ng-container i18n>Customize</ng-container>...
+              </button>
+            }
             <button mat-menu-item (click)="onUpdateRule(rule)">
               @if (rule?.isActive) {
                 <ng-container i18n>Deactivate</ng-container>
diff --git a/apps/client/src/app/components/rule/rule.component.ts b/apps/client/src/app/components/rule/rule.component.ts
index da45fd0d2..e6aafdcb1 100644
--- a/apps/client/src/app/components/rule/rule.component.ts
+++ b/apps/client/src/app/components/rule/rule.component.ts
@@ -9,6 +9,13 @@ import {
   OnInit,
   Output
 } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { isEmpty } from 'lodash';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject, takeUntil } from 'rxjs';
+
+import { IRuleSettingsDialogParams } from './rule-settings-dialog/interfaces/interfaces';
+import { GfRuleSettingsDialogComponent } from './rule-settings-dialog/rule-settings-dialog.component';
 
 @Component({
   selector: 'gf-rule',
@@ -23,9 +30,42 @@ export class RuleComponent implements OnInit {
 
   @Output() ruleUpdated = new EventEmitter<UpdateUserSettingDto>();
 
-  public constructor() {}
+  public isEmpty = isEmpty;
+
+  private deviceType: string;
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private deviceService: DeviceDetectorService,
+    private dialog: MatDialog
+  ) {}
+
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+  }
+
+  public onCustomizeRule(rule: PortfolioReportRule) {
+    const dialogRef = this.dialog.open(GfRuleSettingsDialogComponent, {
+      data: <IRuleSettingsDialogParams>{
+        rule
+      },
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(
+        ({ settings }: { settings: PortfolioReportRule['settings'] }) => {
+          if (settings) {
+            console.log(settings);
 
-  public ngOnInit() {}
+            // TODO
+            // this.ruleUpdated.emit(settings);
+          }
+        }
+      );
+  }
 
   public onUpdateRule(rule: PortfolioReportRule) {
     const settings: UpdateUserSettingDto = {
@@ -36,4 +76,9 @@ export class RuleComponent implements OnInit {
 
     this.ruleUpdated.emit(settings);
   }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
 }