Feature/improve usability of create asset profile dialog in market data section of admin control panel (#5613)

* Improve usability

* Update changelog

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

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}_`, [
+        addSymbol: new FormControl(null, [Validators.required]),
-          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}`
       });
     }
   }

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