From 0c65afeb22e5b8c9d32e73a34ef3e896fa136c53 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 30 Sep 2025 20:26:09 +0200
Subject: [PATCH] Feature/improve usability of create asset profile dialog in
 market data section of admin control panel (#5613)

* Improve usability

* Update changelog
---
 CHANGELOG.md                                             | 1 +
 .../create-asset-profile-dialog.component.ts             | 9 +++++----
 .../create-asset-profile-dialog.html                     | 9 ++++++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7593b5e2a..d8b5a688d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the number formatting of the y-axis labels in the investment chart component
 - Localized the number formatting of the y-axis labels in the line chart component
 - Improved the wording of the 4% rule in the _FIRE_ section
+- Improved the usability of the create asset profile dialog in the market data section of the admin control panel
 - Improved the language localization for German (`de`)
 
 ## 2.203.0 - 2025-09-27
diff --git a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts
index 94433e56c..18dc48c39 100644
--- a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts
+++ b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts
@@ -55,6 +55,7 @@ import { CreateAssetProfileDialogMode } from './interfaces/interfaces';
 })
 export class GfCreateAssetProfileDialogComponent implements OnInit, OnDestroy {
   public createAssetProfileForm: FormGroup;
+  public ghostfolioPrefix = `${ghostfolioPrefix}_`;
   public mode: CreateAssetProfileDialogMode;
 
   private customCurrencies: string[];
@@ -77,9 +78,7 @@ export class GfCreateAssetProfileDialogComponent implements OnInit, OnDestroy {
         addCurrency: new FormControl(null, [
           this.iso4217CurrencyCodeValidator()
         ]),
-        addSymbol: new FormControl(`${ghostfolioPrefix}_`, [
-          Validators.required
-        ]),
+        addSymbol: new FormControl(null, [Validators.required]),
         searchSymbol: new FormControl(null, [Validators.required])
       },
       {
@@ -95,6 +94,8 @@ export class GfCreateAssetProfileDialogComponent implements OnInit, OnDestroy {
   }
 
   public onRadioChange(mode: CreateAssetProfileDialogMode) {
+    this.createAssetProfileForm.reset();
+
     this.mode = mode;
   }
 
@@ -133,7 +134,7 @@ export class GfCreateAssetProfileDialogComponent implements OnInit, OnDestroy {
     } else if (this.mode === 'manual') {
       this.dialogRef.close({
         dataSource: 'MANUAL',
-        symbol: this.createAssetProfileForm.get('addSymbol').value
+        symbol: `${this.ghostfolioPrefix}${this.createAssetProfileForm.get('addSymbol').value}`
       });
     }
   }
diff --git a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html
index c60ca83b8..1474596aa 100644
--- a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html
+++ b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html
@@ -38,6 +38,7 @@
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Symbol</mat-label>
           <input formControlName="addSymbol" matInput />
+          <span matTextPrefix>{{ ghostfolioPrefix }}</span>
         </mat-form-field>
       </div>
     } @else if (mode === 'currency') {
@@ -53,7 +54,13 @@
     }
   </div>
   <div class="d-flex justify-content-end" mat-dialog-actions>
-    <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>
+    <button mat-button type="button" (click)="onCancel()">
+      @if (createAssetProfileForm.dirty) {
+        <ng-container i18n>Cancel</ng-container>
+      } @else {
+        <ng-container i18n>Close</ng-container>
+      }
+    </button>
     <button
       color="primary"
       mat-flat-button