Feature/set up rule settings dialog (#3771)

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;
+}

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;
+  }
+}

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>

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

@@ -0,0 +1,2 @@
+:host {
+}

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>

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;
 
-  public ngOnInit() {}
+  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);
+
+            // 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();
+  }
 }