diff --git a/CHANGELOG.md b/CHANGELOG.md index 502d2286b..aa30f781a 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 bd4175f93..68df48df4 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 0aa0962e4..d62eeab30 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 ed3810961..933d1899a 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() {