Improve usability

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

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
+import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { PortfolioReportRule, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@@ -20,6 +21,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
   public deviceType: string;
   public feeRules: PortfolioReportRule[];
   public fireWealth: Big;
+  public hasImpersonationId: boolean;
   public hasPermissionToCreateOrder: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public isLoading = false;
@@ -33,6 +35,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
+    private impersonationStorageService: ImpersonationStorageService,
     private userService: UserService
   ) {}
 
@@ -70,6 +73,13 @@ export class FirePageComponent implements OnDestroy, OnInit {
         this.changeDetectorRef.markForCheck();
       });
 
+    this.impersonationStorageService
+      .onChangeHasImpersonation()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((impersonationId) => {
+        this.hasImpersonationId = !!impersonationId;
+      });
+
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {

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

@@ -16,7 +16,7 @@
           [currency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
           [fireWealth]="fireWealth?.toNumber()"
-          [hasPermissionToUpdateUserSettings]="hasPermissionToUpdateUserSettings"
+          [hasPermissionToUpdateUserSettings]="!hasImpersonationId && hasPermissionToUpdateUserSettings"
           [locale]="user?.settings?.locale"
           [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
           [retirementDate]="user?.settings?.retirementDate"

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -30,20 +30,27 @@
 
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Retirement Date</mat-label>
+          <div>
+            {{
+              calculatorForm.controls['retirementDate'].value
+                | date : 'MMMM YYYY'
+            }}
+          </div>
           <input
+            class="d-none"
             formControlName="retirementDate"
             matInput
             [matDatepicker]="datepicker"
           />
           <mat-datepicker-toggle
             matIconSuffix
-            [disabled]="false"
+            [disabled]="hasPermissionToUpdateUserSettings !== true"
             [for]="datepicker"
           ></mat-datepicker-toggle>
           <mat-datepicker
             #datepicker
             startView="multi-year"
-            [disabled]="false"
+            [disabled]="hasPermissionToUpdateUserSettings !== true"
             (monthSelected)="setMonthAndYear($event, datepicker)"
           >
           </mat-datepicker>

libs/ui/src/lib/fire-calculator/fire-calculator.component.scss

@@ -8,4 +8,31 @@
       height: 100%;
     }
   }
+
+  ::ng-deep {
+    .mdc-text-field--disabled {
+      .mdc-floating-label,
+      .mdc-text-field__input {
+        color: inherit;
+      }
+
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__notch,
+      .mdc-notched-outline__trailing {
+        border-color: rgba(var(--dark-disabled-text));
+      }
+    }
+  }
+}
+
+:host-context(.is-dark-theme) {
+  ::ng-deep {
+    .mdc-text-field--disabled {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__notch,
+      .mdc-notched-outline__trailing {
+        border-color: rgba(var(--dark-disabled-text));
+      }
+    }
+  }
 }

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -1,7 +1,6 @@
 import 'chartjs-adapter-date-fns';
 
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -49,9 +48,7 @@ import { FireCalculatorService } from './fire-calculator.service';
   styleUrls: ['./fire-calculator.component.scss'],
   templateUrl: './fire-calculator.component.html'
 })
-export class FireCalculatorComponent
-  implements AfterViewInit, OnChanges, OnDestroy
-{
+export class FireCalculatorComponent implements OnChanges, OnDestroy {
   @Input() annualInterestRate = 5;
   @Input() colorScheme: ColorScheme;
   @Input() currency: string;
@@ -145,47 +142,9 @@ export class FireCalculatorComponent
       });
   }
 
-  public ngAfterViewInit() {
-    if (isNumber(this.fireWealth) && this.fireWealth >= 0) {
-      setTimeout(() => {
-        // Wait for the chartCanvas
-        this.calculatorForm.patchValue(
-          {
-            annualInterestRate: this.annualInterestRate,
-            paymentPerPeriod: this.getPMT(),
-            principalInvestmentAmount: this.getP(),
-            projectedTotalAmount:
-              Number(this.getProjectedTotalAmount().toFixed(0)) ?? 0,
-            retirementDate:
-              this.getRetirementDate() ?? this.DEFAULT_RETIREMENT_DATE
-          },
-          {
-            emitEvent: false
-          }
-        );
-        this.calculatorForm.get('principalInvestmentAmount').disable();
-
-        this.changeDetectorRef.markForCheck();
-      });
-    }
-
-    if (this.hasPermissionToUpdateUserSettings === true) {
-      this.calculatorForm.get('paymentPerPeriod').enable({ emitEvent: false });
-      this.calculatorForm
-        .get('projectedTotalAmount')
-        .enable({ emitEvent: false });
-    } else {
-      this.calculatorForm.get('paymentPerPeriod').disable({ emitEvent: false });
-      this.calculatorForm
-        .get('projectedTotalAmount')
-        .disable({ emitEvent: false });
-    }
-
-    this.calculatorForm.get('retirementDate').disable({ emitEvent: false });
-  }
-
   public ngOnChanges() {
     this.periodsToRetire = this.getPeriodsToRetire();
+
     if (isNumber(this.fireWealth) && this.fireWealth >= 0) {
       setTimeout(() => {
         // Wait for the chartCanvas
@@ -210,11 +169,17 @@ export class FireCalculatorComponent
     }
 
     if (this.hasPermissionToUpdateUserSettings === true) {
+      this.calculatorForm
+        .get('annualInterestRate')
+        .enable({ emitEvent: false });
       this.calculatorForm.get('paymentPerPeriod').enable({ emitEvent: false });
       this.calculatorForm
         .get('projectedTotalAmount')
         .enable({ emitEvent: false });
     } else {
+      this.calculatorForm
+        .get('annualInterestRate')
+        .disable({ emitEvent: false });
       this.calculatorForm.get('paymentPerPeriod').disable({ emitEvent: false });
       this.calculatorForm
         .get('projectedTotalAmount')