From b3e07c8446c19f2bcbb60781bba118c8b4997d81 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 8 May 2022 15:59:19 +0200
Subject: [PATCH] Feature/support permissions in fire calculator (#891)

* Support hasPermissionToUpdateUserSettings

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../portfolio/fire/fire-page.component.ts     |  7 +++++
 .../app/pages/portfolio/fire/fire-page.html   |  1 +
 .../fire-calculator.component.ts              | 30 +++++++++++++++----
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 502d2286..aa30f781 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Migrated the asset profile data gathering to the queue design pattern
 - Improved the allocations page with no filtering
 - Harmonized the _No data available_ label in the portfolio proportion chart component
+- Improved the _FIRE_ calculator for the _Live Demo_
 - Upgraded `angular` from version `13.2.2` to `13.3.6`
 - Upgraded `Nx` from version `13.8.5` to `14.1.4`
 - Upgraded `storybook` from version `6.4.18` to `6.4.22`
diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
index bd4175f9..68df48df 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import Big from 'big.js';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
@@ -16,6 +17,7 @@ import { takeUntil } from 'rxjs/operators';
 export class FirePageComponent implements OnDestroy, OnInit {
   public deviceType: string;
   public fireWealth: Big;
+  public hasPermissionToUpdateUserSettings: boolean;
   public isLoading = false;
   public user: User;
   public withdrawalRatePerMonth: Big;
@@ -63,6 +65,11 @@ export class FirePageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.hasPermissionToUpdateUserSettings = hasPermission(
+            this.user.permissions,
+            permissions.updateUserSettings
+          );
+
           this.changeDetectorRef.markForCheck();
         }
       });
diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.html b/apps/client/src/app/pages/portfolio/fire/fire-page.html
index 0aa0962e..d62eeab3 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.html
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html
@@ -59,6 +59,7 @@
       [currency]="user?.settings?.baseCurrency"
       [deviceType]="deviceType"
       [fireWealth]="fireWealth?.toNumber()"
+      [hasPermissionToUpdateUserSettings]="hasPermissionToUpdateUserSettings"
       [locale]="user?.settings?.locale"
       [savingsRate]="user?.settings?.savingsRate"
       (savingsRateChanged)="onSavingsRateChange($event)"
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
index ed381096..933d1899 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
@@ -41,6 +41,7 @@ export class FireCalculatorComponent
   @Input() currency: string;
   @Input() deviceType: string;
   @Input() fireWealth: number;
+  @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() locale: string;
   @Input() savingsRate = 0;
 
@@ -76,12 +77,17 @@ export class FireCalculatorComponent
       Tooltip
     );
 
-    this.calculatorForm.setValue({
-      annualInterestRate: 5,
-      paymentPerPeriod: this.savingsRate,
-      principalInvestmentAmount: 0,
-      time: 10
-    });
+    this.calculatorForm.setValue(
+      {
+        annualInterestRate: 5,
+        paymentPerPeriod: this.savingsRate,
+        principalInvestmentAmount: 0,
+        time: 10
+      },
+      {
+        emitEvent: false
+      }
+    );
 
     this.calculatorForm.valueChanges
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -115,6 +121,12 @@ export class FireCalculatorComponent
         this.changeDetectorRef.markForCheck();
       });
     }
+
+    if (this.hasPermissionToUpdateUserSettings === true) {
+      this.calculatorForm.get('paymentPerPeriod').enable({ emitEvent: false });
+    } else {
+      this.calculatorForm.get('paymentPerPeriod').disable({ emitEvent: false });
+    }
   }
 
   public ngOnChanges() {
@@ -135,6 +147,12 @@ export class FireCalculatorComponent
         this.changeDetectorRef.markForCheck();
       });
     }
+
+    if (this.hasPermissionToUpdateUserSettings === true) {
+      this.calculatorForm.get('paymentPerPeriod').enable({ emitEvent: false });
+    } else {
+      this.calculatorForm.get('paymentPerPeriod').disable({ emitEvent: false });
+    }
   }
 
   public ngOnDestroy() {