From c1f7a88c28691a5dc1a37c99bb4fa0bc694c630b Mon Sep 17 00:00:00 2001 From: Thomas <4159106+dtslvr@users.noreply.github.com> Date: Tue, 7 Mar 2023 22:02:04 +0100 Subject: [PATCH] Refactoring --- .../src/app/user/update-user-setting.dto.ts | 8 +- .../portfolio/fire/fire-page.component.ts | 2 +- .../app/pages/portfolio/fire/fire-page.html | 2 +- .../fire-calculator.component.ts | 151 +++++++++--------- .../fire-calculator/fire-calculator.module.ts | 2 - 5 files changed, 81 insertions(+), 84 deletions(-) diff --git a/apps/api/src/app/user/update-user-setting.dto.ts b/apps/api/src/app/user/update-user-setting.dto.ts index 63b5ae57e..c0f036a22 100644 --- a/apps/api/src/app/user/update-user-setting.dto.ts +++ b/apps/api/src/app/user/update-user-setting.dto.ts @@ -49,6 +49,10 @@ export class UpdateUserSettingDto { @IsOptional() locale?: string; + @IsNumber() + @IsOptional() + projectedTotalAmount?: number; + @IsDate() @IsOptional() retirementDate?: Date; @@ -57,10 +61,6 @@ export class UpdateUserSettingDto { @IsOptional() savingsRate?: number; - @IsNumber() - @IsOptional() - projectedTotalAmount?: number; - @IsIn(['DEFAULT', 'ZEN']) @IsOptional() viewMode?: ViewMode; 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 9e03deb08..03f2e7405 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 @@ -130,7 +130,7 @@ export class FirePageComponent implements OnDestroy, OnInit { }); } - public onProjectedTotalAmountChanged(projectedTotalAmount: number) { + public onProjectedTotalAmountChange(projectedTotalAmount: number) { this.dataService .putUserSetting({ projectedTotalAmount, 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 c7dbbb1ed..9a0196c7f 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.html +++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html @@ -20,7 +20,7 @@ [projectedTotalAmount]="user?.settings?.projectedTotalAmount" [retirementDate]="user?.settings?.retirementDate" [savingsRate]="user?.settings?.savingsRate" - (projectedTotalAmountChanged)="onProjectedTotalAmountChanged($event)" + (projectedTotalAmountChanged)="onProjectedTotalAmountChange($event)" (retirementDateChanged)="onRetirementDateChange($event)" (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 308fba252..d8d2e3adf 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts @@ -123,18 +123,18 @@ export class FireCalculatorComponent .subscribe((savingsRate) => { this.savingsRateChanged.emit(savingsRate); }); - this.calculatorForm - .get('retirementDate') - .valueChanges.pipe(takeUntil(this.unsubscribeSubject)) - .subscribe((retirementDate) => { - this.retirementDateChanged.emit(retirementDate); - }); this.calculatorForm .get('projectedTotalAmount') .valueChanges.pipe(takeUntil(this.unsubscribeSubject)) .subscribe((projectedTotalAmount) => { this.projectedTotalAmountChanged.emit(projectedTotalAmount); }); + this.calculatorForm + .get('retirementDate') + .valueChanges.pipe(takeUntil(this.unsubscribeSubject)) + .subscribe((retirementDate) => { + this.retirementDateChanged.emit(retirementDate); + }); } public ngAfterViewInit() { @@ -143,12 +143,12 @@ export class FireCalculatorComponent // Wait for the chartCanvas this.calculatorForm.patchValue( { - principalInvestmentAmount: this.getP(), paymentPerPeriod: this.getPMT(), - retirementDate: - this.getRetirementDate() ?? this.DEFAULT_RETIREMENT_DATE, + principalInvestmentAmount: this.getP(), projectedTotalAmount: - Number(this.getProjectedTotalAmount().toFixed(2)) ?? 0 + Number(this.getProjectedTotalAmount().toFixed(2)) ?? 0, + retirementDate: + this.getRetirementDate() ?? this.DEFAULT_RETIREMENT_DATE }, { emitEvent: false @@ -162,17 +162,16 @@ export class FireCalculatorComponent if (this.hasPermissionToUpdateUserSettings === true) { this.calculatorForm.get('paymentPerPeriod').enable({ emitEvent: false }); - this.calculatorForm.get('retirementDate').enable({ emitEvent: false }); - this.calculatorForm .get('projectedTotalAmount') .enable({ emitEvent: false }); + this.calculatorForm.get('retirementDate').enable({ emitEvent: false }); } else { this.calculatorForm.get('paymentPerPeriod').disable({ emitEvent: false }); - this.calculatorForm.get('retirementDate').disable({ emitEvent: false }); this.calculatorForm .get('projectedTotalAmount') .disable({ emitEvent: false }); + this.calculatorForm.get('retirementDate').disable({ emitEvent: false }); } } @@ -325,69 +324,6 @@ export class FireCalculatorComponent this.isLoading = false; } - private getP() { - return this.fireWealth || 0; - } - - private getPMT() { - return this.savingsRate ?? 0; - } - - private getR() { - return this.calculatorForm.get('annualInterestRate').value / 100; - } - - private getProjectedTotalAmount() { - if (this.projectedTotalAmount) { - return this.projectedTotalAmount || 0; - } else { - const { totalAmount } = - this.fireCalculatorService.calculateCompoundInterest({ - P: this.getP(), - periodInMonths: this.periodsToRetire, - PMT: this.getPMT(), - r: this.getR() - }); - - return totalAmount.toNumber(); - } - } - - private getPeriodsToRetire(): number { - if (this.projectedTotalAmount) { - const periods = this.fireCalculatorService.calculatePeriodsToRetire({ - P: this.getP(), - totalAmount: this.projectedTotalAmount, - PMT: this.getPMT(), - r: this.getR() - }); - - return periods; - } else { - const today = new Date(); - const retirementDate = - this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE; - - return ( - 12 * (retirementDate.getFullYear() - today.getFullYear()) + - retirementDate.getMonth() - - today.getMonth() - ); - } - } - - private getRetirementDate(): Date { - const monthsToRetire = this.periodsToRetire % 12; - const yearsToRetire = Math.floor(this.periodsToRetire / 12); - - return startOfMonth( - add(new Date(), { - months: monthsToRetire, - years: yearsToRetire - }) - ); - } - private getChartData() { const currentYear = new Date().getFullYear(); const labels = []; @@ -463,4 +399,67 @@ export class FireCalculatorComponent datasets: [datasetDeposit, datasetSavings, datasetInterest] }; } + + private getP() { + return this.fireWealth || 0; + } + + private getPMT() { + return this.savingsRate ?? 0; + } + + private getR() { + return this.calculatorForm.get('annualInterestRate').value / 100; + } + + private getPeriodsToRetire(): number { + if (this.projectedTotalAmount) { + const periods = this.fireCalculatorService.calculatePeriodsToRetire({ + P: this.getP(), + totalAmount: this.projectedTotalAmount, + PMT: this.getPMT(), + r: this.getR() + }); + + return periods; + } else { + const today = new Date(); + const retirementDate = + this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE; + + return ( + 12 * (retirementDate.getFullYear() - today.getFullYear()) + + retirementDate.getMonth() - + today.getMonth() + ); + } + } + + private getProjectedTotalAmount() { + if (this.projectedTotalAmount) { + return this.projectedTotalAmount || 0; + } else { + const { totalAmount } = + this.fireCalculatorService.calculateCompoundInterest({ + P: this.getP(), + periodInMonths: this.periodsToRetire, + PMT: this.getPMT(), + r: this.getR() + }); + + return totalAmount.toNumber(); + } + } + + private getRetirementDate(): Date { + const monthsToRetire = this.periodsToRetire % 12; + const yearsToRetire = Math.floor(this.periodsToRetire / 12); + + return startOfMonth( + add(new Date(), { + months: monthsToRetire, + years: yearsToRetire + }) + ); + } } diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.module.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.module.ts index 688684019..02b59dc27 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.module.ts +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.module.ts @@ -7,7 +7,6 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; -import { GfValueModule } from '../value'; import { FireCalculatorComponent } from './fire-calculator.component'; import { FireCalculatorService } from './fire-calculator.service'; @@ -17,7 +16,6 @@ import { FireCalculatorService } from './fire-calculator.service'; imports: [ CommonModule, FormsModule, - GfValueModule, MatButtonModule, MatDatepickerModule, MatFormFieldModule,