Move inactive rules to their own section

apps/api/src/app/portfolio/rules.service.ts

@@ -20,10 +20,10 @@ export class RulesService {
 
         return {
           evaluation,
+          value,
           isActive: true,
           key: rule.getKey(),
-          name: rule.getName(),
-          value
+          name: rule.getName()
         };
       } else {
         return {

apps/api/src/app/user/user.controller.ts

@@ -24,7 +24,7 @@ import { JwtService } from '@nestjs/jwt';
 import { AuthGuard } from '@nestjs/passport';
 import { User as UserModel } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
-import { size, merge } from 'lodash';
+import { merge, size } from 'lodash';
 
 import { DeleteOwnUserDto } from './delete-own-user.dto';
 import { UserItem } from './interfaces/user-item.interface';

apps/api/src/app/user/user.service.ts

@@ -197,7 +197,7 @@ export class UserService {
       (user.Settings.settings as UserSettings).viewMode = 'DEFAULT';
     }
 
-    // Set default values for x-ray rules
+    // Set default values for X-ray rules
     if (!(user.Settings.settings as UserSettings).xRayRules) {
       (user.Settings.settings as UserSettings).xRayRules = {
         AccountClusterRiskCurrentInvestment: { isActive: true },

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

@@ -64,7 +64,7 @@
         </button>
         <mat-menu #accountMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="onUpdateRule(rule)">
-            @if (rule?.evaluation) {
+            @if (rule?.isActive) {
               <ng-container i18n>Deactivate</ng-container>
             } @else {
               <ng-container i18n>Activate</ng-container>

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

@@ -19,6 +19,7 @@ import {
 export class RuleComponent implements OnInit {
   @Input() isLoading: boolean;
   @Input() rule: PortfolioReportRule;
+
   @Output() ruleUpdated = new EventEmitter<UpdateUserSettingDto>();
 
   public constructor() {}

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

@@ -12,6 +12,7 @@
       @if (rules?.length === 0) {
         <gf-rule [isLoading]="true" />
       }
+
       @if (rules !== null && rules !== undefined) {
         @for (rule of rules; track rule.key) {
           <gf-rule [rule]="rule" (ruleUpdated)="onRulesUpdated($event)" />

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

@@ -18,6 +18,7 @@ import {
 export class RulesComponent {
   @Input() hasPermissionToCreateOrder: boolean;
   @Input() rules: PortfolioReportRule[];
+
   @Output() rulesUpdated = new EventEmitter<UpdateUserSettingDto>();
 
   public constructor() {}

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -2,7 +2,11 @@ import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setti
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { PortfolioReportRule, User } from '@ghostfolio/common/interfaces';
+import {
+  PortfolioReport,
+  PortfolioReportRule,
+  User
+} from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
@@ -27,6 +31,8 @@ export class FirePageComponent implements OnDestroy, OnInit {
   public hasPermissionToCreateOrder: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public isLoading = false;
+  public isLoadingPortfolioReport = false;
+  public inactiveRules: PortfolioReportRule[];
   public user: User;
   public withdrawalRatePerMonth: Big;
   public withdrawalRatePerYear: Big;
@@ -65,21 +71,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
         this.changeDetectorRef.markForCheck();
       });
 
-    this.dataService
-      .fetchPortfolioReport()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((portfolioReport) => {
-        this.accountClusterRiskRules =
-          portfolioReport.rules['accountClusterRisk'] || null;
-        this.currencyClusterRiskRules =
-          portfolioReport.rules['currencyClusterRisk'] || null;
-        this.emergencyFundRules =
-          portfolioReport.rules['emergencyFund'] || null;
-        this.feeRules = portfolioReport.rules['fees'] || null;
-
-        this.changeDetectorRef.markForCheck();
-      });
-
+    this.initializePortfolioReport();
     this.impersonationStorageService
       .onChangeHasImpersonation()
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -111,6 +103,32 @@ export class FirePageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public initializePortfolioReport() {
+    this.isLoadingPortfolioReport = true;
+    this.dataService
+      .fetchPortfolioReport()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((portfolioReport) => {
+        this.inactiveRules = this.mergeInactiveRules(portfolioReport);
+        this.accountClusterRiskRules =
+          portfolioReport.rules['accountClusterRisk'].filter(
+            (rule) => rule.isActive
+          ) || null;
+        this.currencyClusterRiskRules =
+          portfolioReport.rules['currencyClusterRisk'].filter(
+            (rule) => rule.isActive
+          ) || null;
+        this.emergencyFundRules =
+          portfolioReport.rules['emergencyFund'].filter(
+            (rule) => rule.isActive
+          ) || null;
+        this.feeRules =
+          portfolioReport.rules['fees'].filter((rule) => rule.isActive) || null;
+        this.isLoadingPortfolioReport = false;
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
   public onAnnualInterestRateChange(annualInterestRate: number) {
     this.dataService
       .putUserSetting({ annualInterestRate })
@@ -156,20 +174,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
       .putUserSetting(event)
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.dataService
-          .fetchPortfolioReport()
-          .pipe(takeUntil(this.unsubscribeSubject))
-          .subscribe((portfolioReport) => {
-            this.accountClusterRiskRules =
-              portfolioReport.rules['accountClusterRisk'] || null;
-            this.currencyClusterRiskRules =
-              portfolioReport.rules['currencyClusterRisk'] || null;
-            this.emergencyFundRules =
-              portfolioReport.rules['emergencyFund'] || null;
-            this.feeRules = portfolioReport.rules['fees'] || null;
-            this.isLoading = false;
-            this.changeDetectorRef.markForCheck();
-          });
+        this.initializePortfolioReport();
       });
   }
 
@@ -212,6 +217,19 @@ export class FirePageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public mergeInactiveRules(report: PortfolioReport): PortfolioReportRule[] {
+    let inactiveRules: PortfolioReportRule[] = [];
+    for (const category in report.rules) {
+      const rulesArray = report.rules[category];
+      inactiveRules = inactiveRules.concat(
+        rulesArray.filter((rule) => !rule.isActive)
+      );
+      rulesArray.filter((rule) => rule.isActive);
+    }
+    console.log(inactiveRules);
+    return inactiveRules;
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -124,11 +124,13 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        <gf-rules
-          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
-          [rules]="emergencyFundRules"
-          (rulesUpdated)="onRulesUpdated($event)"
-        />
+        @if (!isLoadingPortfolioReport) {
+          <gf-rules
+            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+            [rules]="emergencyFundRules"
+            (rulesUpdated)="onRulesUpdated($event)"
+          />
+        }
       </div>
       <div class="mb-4">
         <h4 class="align-items-center d-flex m-0">
@@ -137,11 +139,13 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        <gf-rules
-          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
-          [rules]="currencyClusterRiskRules"
-          (rulesUpdated)="onRulesUpdated($event)"
-        />
+        @if (!isLoadingPortfolioReport) {
+          <gf-rules
+            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+            [rules]="currencyClusterRiskRules"
+            (rulesUpdated)="onRulesUpdated($event)"
+          />
+        }
       </div>
       <div class="mb-4">
         <h4 class="align-items-center d-flex m-0">
@@ -150,11 +154,13 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        <gf-rules
-          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
-          [rules]="accountClusterRiskRules"
-          (rulesUpdated)="onRulesUpdated($event)"
-        />
+        @if (!isLoadingPortfolioReport) {
+          <gf-rules
+            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+            [rules]="accountClusterRiskRules"
+            (rulesUpdated)="onRulesUpdated($event)"
+          />
+        }
       </div>
       <div>
         <h4 class="align-items-center d-flex m-0">
@@ -163,11 +169,28 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        <gf-rules
-          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
-          [rules]="feeRules"
-          (rulesUpdated)="onRulesUpdated($event)"
-        />
+        @if (!isLoadingPortfolioReport) {
+          <gf-rules
+            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+            [rules]="feeRules"
+            (rulesUpdated)="onRulesUpdated($event)"
+          />
+        }
+      </div>
+      <div>
+        <h4 class="align-items-center d-flex m-0">
+          <span i18n>Inactive</span>
+          @if (user?.subscription?.type === 'Basic') {
+            <gf-premium-indicator class="ml-1" />
+          }
+        </h4>
+        @if (!isLoadingPortfolioReport) {
+          <gf-rules
+            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+            [rules]="inactiveRules"
+            (rulesUpdated)="onRulesUpdated($event)"
+          />
+        }
       </div>
     </div>
   </div>