Reuse currency selector

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -14,6 +14,7 @@ import { downloadAsFile } from '@ghostfolio/common/helper';
 import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
+import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
@@ -31,6 +32,7 @@ import {
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   NonNullableFormBuilder,
+  FormBuilder,
   FormsModule,
   ReactiveFormsModule,
   Validators
@@ -59,6 +61,7 @@ import { catchError } from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     FormsModule,
+    GfCurrencySelectorComponent,
     GfValueComponent,
     IonIcon,
     MatButtonModule,
@@ -78,6 +81,9 @@ import { catchError } from 'rxjs/operators';
 export class GfUserAccountSettingsComponent implements OnInit {
   protected readonly appearancePlaceholder = $localize`Auto`;
   protected readonly baseCurrency: string;
+  protected readonly baseCurrencyForm = inject(FormBuilder).group({
+    baseCurrency: ['']
+  });
   protected closeUserAccountMailHref: string;
   protected readonly currencies: string[] = [];
   protected readonly deleteOwnUserForm = inject(NonNullableFormBuilder).group({
@@ -182,6 +188,17 @@ export class GfUserAccountSettingsComponent implements OnInit {
             permissions.updateViewMode
           );
 
+          this.baseCurrencyForm.setValue(
+            { baseCurrency: this.user.settings.baseCurrency ?? null },
+            { emitEvent: false }
+          );
+
+          if (this.hasPermissionToUpdateUserSettings) {
+            this.baseCurrencyForm.enable({ emitEvent: false });
+          } else {
+            this.baseCurrencyForm.disable({ emitEvent: false });
+          }
+
           if (this.user.settings.locale) {
             this.locales.push(this.user.settings.locale);
           }
@@ -194,6 +211,16 @@ export class GfUserAccountSettingsComponent implements OnInit {
         }
       });
 
+    this.baseCurrencyForm.controls.baseCurrency.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        // The currency selector emits null while the user is typing and only
+        // emits a currency once an option has been selected
+        if (value && value !== this.user?.settings.baseCurrency) {
+          this.onChangeUserSetting('baseCurrency', value);
+        }
+      });
+
     addIcons({ eyeOffOutline, eyeOutline });
   }
 

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -8,20 +8,12 @@
             <div class="align-items-center d-flex pt-1 pt-1 w-50">
               <ng-container i18n>Base Currency</ng-container>
             </div>
-            <div class="pl-1 w-50">
+            <div class="pl-1 w-50" [formGroup]="baseCurrencyForm">
               <mat-form-field appearance="outline" class="w-100 without-hint">
-                <mat-select
-                  name="baseCurrency"
-                  [disabled]="!hasPermissionToUpdateUserSettings"
-                  [value]="user.settings.baseCurrency"
-                  (selectionChange)="
-                    onChangeUserSetting('baseCurrency', $event.value)
-                  "
-                >
-                  @for (currency of currencies; track currency) {
-                    <mat-option [value]="currency">{{ currency }}</mat-option>
-                  }
-                </mat-select>
+                <gf-currency-selector
+                  formControlName="baseCurrency"
+                  [currencies]="currencies"
+                />
               </mat-form-field>
             </div>
           </div>

libs/ui/src/lib/currency-selector/currency-selector.component.ts

@@ -174,6 +174,14 @@ export class GfCurrencySelectorComponent
     super.value = option.value;
   }
 
+  public setDisabledState(isDisabled: boolean) {
+    if (isDisabled) {
+      this.control.disable({ emitEvent: false });
+    } else {
+      this.control.enable({ emitEvent: false });
+    }
+  }
+
   private filter(value: string) {
     const filterValue = value.toLowerCase();