From 9cceda5df8a4596e650f9357d4b7f88bd89b3934 Mon Sep 17 00:00:00 2001 From: Shivansh-22866 Date: Mon, 6 Oct 2025 15:53:46 +0530 Subject: [PATCH] Suggested Changes --- .../portfolio/fire/fire-page.component.ts | 38 +++++++++++++++---- .../app/pages/portfolio/fire/fire-page.html | 21 +++++----- .../app/pages/portfolio/fire/fire-page.scss | 37 +++++++++++------- 3 files changed, 65 insertions(+), 31 deletions(-) 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 4db906178..07fc6a00f 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 @@ -6,9 +6,11 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { GfFireCalculatorComponent } from '@ghostfolio/ui/fire-calculator'; import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; import { GfValueComponent } from '@ghostfolio/ui/value'; -import { FormsModule } from '@angular/forms'; + import { CommonModule, NgStyle } from '@angular/common'; import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { FormControl } from '@angular/forms'; import { Big } from 'big.js'; import { DeviceDetectorService } from 'ngx-device-detector'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; @@ -19,6 +21,7 @@ import { takeUntil } from 'rxjs/operators'; imports: [ CommonModule, FormsModule, + ReactiveFormsModule, GfFireCalculatorComponent, GfPremiumIndicatorComponent, GfValueComponent, @@ -40,6 +43,8 @@ export class GfFirePageComponent implements OnDestroy, OnInit { public withdrawalRatePerMonth: Big; public withdrawalRatePerYear: Big; + public safeWithdrawalRateControl: FormControl; + private unsubscribeSubject = new Subject(); public constructor( @@ -54,6 +59,8 @@ export class GfFirePageComponent implements OnDestroy, OnInit { this.isLoading = true; this.deviceType = this.deviceService.getDeviceInfo().deviceType; + this.safeWithdrawalRateControl = new FormControl(0.025); + this.dataService .fetchPortfolioDetails() .pipe(takeUntil(this.unsubscribeSubject)) @@ -66,7 +73,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit { this.fireWealth = new Big(10000); } - this._calculateWithdrawalRates(); + this.calculateWithdrawalRates(); this.isLoading = false; @@ -86,6 +93,14 @@ export class GfFirePageComponent implements OnDestroy, OnInit { if (state?.user) { this.user = state.user; + const newSWR = this.user?.settings?.safeWithdrawalRate ?? 0.025; + + if (this.safeWithdrawalRateControl.value !== newSWR) { + this.safeWithdrawalRateControl.setValue(newSWR, { + emitEvent: false + }); + } + this.hasPermissionToUpdateUserSettings = this.user.subscription?.type === 'Basic' ? false @@ -94,10 +109,16 @@ export class GfFirePageComponent implements OnDestroy, OnInit { permissions.updateUserSettings ); - this._calculateWithdrawalRates(); + this.calculateWithdrawalRates(); + this.changeDetectorRef.markForCheck(); } }); + + this.safeWithdrawalRateControl.valueChanges.subscribe((value: number) => { + console.log('New SWR selected:', value); + this.onSafeWithdrawalRateChange(Number(value)); + }); } public onAnnualInterestRateChange(annualInterestRate: number) { @@ -137,7 +158,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit { public onSafeWithdrawalRateChange(safeWithdrawalRate: number) { this.dataService - .putUserSetting({ safeWithdrawalRate }) // No need for Number() conversion + .putUserSetting({ safeWithdrawalRate }) .pipe(takeUntil(this.unsubscribeSubject)) .subscribe(() => { this.userService @@ -145,11 +166,14 @@ export class GfFirePageComponent implements OnDestroy, OnInit { .pipe(takeUntil(this.unsubscribeSubject)) .subscribe((user) => { this.user = user; - this._calculateWithdrawalRates(); + + this.calculateWithdrawalRates(); + this.changeDetectorRef.markForCheck(); }); }); } + public onSavingsRateChange(savingsRate: number) { this.dataService .putUserSetting({ savingsRate }) @@ -190,7 +214,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit { this.unsubscribeSubject.complete(); } - private _calculateWithdrawalRates() { + private calculateWithdrawalRates() { if (this.fireWealth && this.user?.settings?.safeWithdrawalRate) { this.withdrawalRatePerYear = this.fireWealth.mul( this.user.settings.safeWithdrawalRate @@ -199,4 +223,4 @@ export class GfFirePageComponent implements OnDestroy, OnInit { this.withdrawalRatePerMonth = this.withdrawalRatePerYear.div(12); } } -} \ No newline at end of file +} 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 757c881ca..4a57b2049 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.html +++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html @@ -107,18 +107,17 @@ and a safe withdrawal rate (SWR) of   . + + } - \ No newline at end of file + diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.scss b/apps/client/src/app/pages/portfolio/fire/fire-page.scss index d503f55c2..c624b8969 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.scss +++ b/apps/client/src/app/pages/portfolio/fire/fire-page.scss @@ -1,21 +1,32 @@ :host { display: block; -} -.swr-select { - background-color: transparent; - border: 0; + .swr-select { + background-color: transparent; + border: 0; + + color: rgb(var(--dark-primary-text)); - color: white; + &:focus { + box-shadow: none; + outline: 0; + } - &:focus { - box-shadow: none; - outline: 0; + option { + background: rgb(var(--light-background)); + color: rgb(var(--dark-primary-text)); + border: 0; + } } +} - option { - background: #1c1c1e; - color: white; - border: 0; +:host-context(.theme-dark) { + .swr-select { + color: rgb(var(--light-primary-text)); + + option { + background: rgb(var(--dark-background)); + color: rgb(var(--light-primary-text)); + } } -} \ No newline at end of file +}