Feature/support permissions in fire calculator (#891)

* Support hasPermissionToUpdateUserSettings

* Update changelog

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`

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();
         }
       });

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)"

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() {