Add Custom SWR and style for Select Component

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -6,8 +6,8 @@ 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 { NgStyle } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CommonModule, NgStyle } from '@angular/common';
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Big } from 'big.js';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -17,6 +17,8 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
   imports: [
+    CommonModule,
+    FormsModule,
     GfFireCalculatorComponent,
     GfPremiumIndicatorComponent,
     GfValueComponent,
@@ -33,6 +35,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public isLoading = false;
+  public safeWithdrawalRateOptions = [0.025, 0.03, 0.035, 0.04, 0.045];
   public user: User;
   public withdrawalRatePerMonth: Big;
   public withdrawalRatePerYear: Big;
@@ -63,11 +66,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
           this.fireWealth = new Big(10000);
         }
 
-        this.withdrawalRatePerYear = this.fireWealth.mul(
-          this.user.settings.safeWithdrawalRate
-        );
-
-        this.withdrawalRatePerMonth = this.withdrawalRatePerYear.div(12);
+        this._calculateWithdrawalRates();
 
         this.isLoading = false;
 
@@ -95,6 +94,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
                   permissions.updateUserSettings
                 );
 
+          this._calculateWithdrawalRates();
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -134,6 +134,22 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
           });
       });
   }
+
+  public onSafeWithdrawalRateChange(safeWithdrawalRate: number) {
+    this.dataService
+      .putUserSetting({ safeWithdrawalRate }) // No need for Number() conversion
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService
+          .get(true)
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+            this._calculateWithdrawalRates();
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
   public onSavingsRateChange(savingsRate: number) {
     this.dataService
       .putUserSetting({ savingsRate })
@@ -173,4 +189,14 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
   }
-}
+
+  private _calculateWithdrawalRates() {
+    if (this.fireWealth && this.user?.settings?.safeWithdrawalRate) {
+      this.withdrawalRatePerYear = this.fireWealth.mul(
+        this.user.settings.safeWithdrawalRate
+      );
+
+      this.withdrawalRatePerMonth = this.withdrawalRatePerYear.div(12);
+    }
+  }
+}

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -106,15 +106,19 @@
         <ng-container>&nbsp;</ng-container>
         <ng-container i18n>and a safe withdrawal rate (SWR) of</ng-container>
         <ng-container>&nbsp;</ng-container>
-        <span class="font-weight-bold"
-          ><gf-value
-            class="d-inline-block"
-            [isPercent]="true"
-            [locale]="user?.settings?.locale"
-            [precision]="1"
-            [value]="user?.settings?.safeWithdrawalRate" /></span
-        >.
+        <select
+          class="custom-select custom-select-sm d-inline-block font-weight-bold w-auto swr-select"
+          [disabled]="user?.subscription?.type === 'Basic' || hasImpersonationId"
+          [(ngModel)]="user.settings.safeWithdrawalRate"
+          (ngModelChange)="onSafeWithdrawalRateChange($event)"
+        >
+          @for (rate of safeWithdrawalRateOptions; track rate) {
+            <option [ngValue]="rate">
+              {{ rate | percent: '1.1-1' }}
+            </option>
+          }
+        </select>.
       </div>
     }
   </div>
-</div>
+</div>

apps/client/src/app/pages/portfolio/fire/fire-page.scss

@@ -1,3 +1,21 @@
 :host {
   display: block;
 }
+
+.swr-select {
+  background-color: transparent;
+  border: 0;
+
+  color: white;
+
+  &:focus {
+    box-shadow: none;
+    outline: 0;
+  }
+
+  option {
+    background: #1c1c1e;
+    color: white;
+    border: 0;
+  }
+}