Feature/Allow to edit identifier in asset profile dialog (#4469)

* Allow to edit identifier in asset profile dialog * Update changelog
2025-03-30 05:26:57 -03:00 · 2025-03-30 05:26:57 -03:00 · 91394160b9
commit 91394160b9
parent 64cbd276ce
12 changed files with 694 additions and 325 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Added

+- Added support for changing the asset profile identifier (`dataSource` and `symbol`) in the asset profile details dialog of the admin control panel (experimental)
 - Set up the terms of service for the _Ghostfolio_ SaaS (cloud)

 ### Changed
--- a/apps/api/src/app/admin/admin.controller.ts
+++ b/apps/api/src/app/admin/admin.controller.ts
@ -334,15 +334,14 @@ export class AdminController {
  @Patch('profile-data/:dataSource/:symbol')
  @UseGuards(AuthGuard('jwt'), HasPermissionGuard)
  public async patchAssetProfileData(
-    @Body() assetProfileData: UpdateAssetProfileDto,
+    @Body() assetProfile: UpdateAssetProfileDto,
    @Param('dataSource') dataSource: DataSource,
    @Param('symbol') symbol: string
  ): Promise<EnhancedSymbolProfile> {
-    return this.adminService.patchAssetProfileData({
-      ...assetProfileData,
-      dataSource,
-      symbol
-    });
+    return this.adminService.patchAssetProfileData(
+      { dataSource, symbol },
+      assetProfile
+    );
  }

  @HasPermission(permissions.accessAdminControl)
--- a/apps/api/src/app/admin/admin.service.ts
+++ b/apps/api/src/app/admin/admin.service.ts
@ -32,16 +32,23 @@ import {
 import { Sector } from '@ghostfolio/common/interfaces/sector.interface';
 import { MarketDataPreset } from '@ghostfolio/common/types';

-import { BadRequestException, Injectable, Logger } from '@nestjs/common';
+import {
+  BadRequestException,
+  HttpException,
+  Injectable,
+  Logger
+} from '@nestjs/common';
 import {
  AssetClass,
  AssetSubClass,
+  DataSource,
  Prisma,
  PrismaClient,
  Property,
  SymbolProfile
 } from '@prisma/client';
 import { differenceInDays } from 'date-fns';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 import { groupBy } from 'lodash';

@Injectable()
@ -463,61 +470,124 @@ export class AdminService {
    return { count, users };
  }

-  public async patchAssetProfileData({
-    assetClass,
-    assetSubClass,
-    comment,
-    countries,
-    currency,
-    dataSource,
-    holdings,
-    name,
-    scraperConfiguration,
-    sectors,
-    symbol,
-    symbolMapping,
-    url
-  }: AssetProfileIdentifier & Prisma.SymbolProfileUpdateInput) {
-    const symbolProfileOverrides = {
-      assetClass: assetClass as AssetClass,
-      assetSubClass: assetSubClass as AssetSubClass,
-      name: name as string,
-      url: url as string
-    };
-
-    const updatedSymbolProfile: AssetProfileIdentifier &
-      Prisma.SymbolProfileUpdateInput = {
+  public async patchAssetProfileData(
+    { dataSource, symbol }: AssetProfileIdentifier,
+    {
+      assetClass,
+      assetSubClass,
      comment,
      countries,
      currency,
-      dataSource,
+      dataSource: newDataSource,
      holdings,
+      name,
      scraperConfiguration,
      sectors,
-      symbol,
+      symbol: newSymbol,
      symbolMapping,
-      ...(dataSource === 'MANUAL'
-        ? { assetClass, assetSubClass, name, url }
-        : {
-            SymbolProfileOverrides: {
-              upsert: {
-                create: symbolProfileOverrides,
-                update: symbolProfileOverrides
-              }
-            }
-          })
-    };
+      url
+    }: Prisma.SymbolProfileUpdateInput
+  ) {
+    if (
+      newSymbol &&
+      newDataSource &&
+      (newSymbol !== symbol || newDataSource !== dataSource)
+    ) {
+      const [assetProfile] = await this.symbolProfileService.getSymbolProfiles([
+        {
+          dataSource: DataSource[newDataSource.toString()],
+          symbol: newSymbol as string
+        }
+      ]);

-    await this.symbolProfileService.updateSymbolProfile(updatedSymbolProfile);
-
-    const [symbolProfile] = await this.symbolProfileService.getSymbolProfiles([
-      {
-        dataSource,
-        symbol
+      if (assetProfile) {
+        throw new HttpException(
+          getReasonPhrase(StatusCodes.CONFLICT),
+          StatusCodes.CONFLICT
+        );
      }
-    ]);

-    return symbolProfile;
+      try {
+        Promise.all([
+          await this.symbolProfileService.updateAssetProfileIdentifier(
+            {
+              dataSource,
+              symbol
+            },
+            {
+              dataSource: DataSource[newDataSource.toString()],
+              symbol: newSymbol as string
+            }
+          ),
+          await this.marketDataService.updateAssetProfileIdentifier(
+            {
+              dataSource,
+              symbol
+            },
+            {
+              dataSource: DataSource[newDataSource.toString()],
+              symbol: newSymbol as string
+            }
+          )
+        ]);
+
+        return this.symbolProfileService.getSymbolProfiles([
+          {
+            dataSource: DataSource[newDataSource.toString()],
+            symbol: newSymbol as string
+          }
+        ])?.[0];
+      } catch {
+        throw new HttpException(
+          getReasonPhrase(StatusCodes.BAD_REQUEST),
+          StatusCodes.BAD_REQUEST
+        );
+      }
+    } else {
+      const symbolProfileOverrides = {
+        assetClass: assetClass as AssetClass,
+        assetSubClass: assetSubClass as AssetSubClass,
+        name: name as string,
+        url: url as string
+      };
+
+      const updatedSymbolProfile: Prisma.SymbolProfileUpdateInput = {
+        comment,
+        countries,
+        currency,
+        dataSource,
+        holdings,
+        scraperConfiguration,
+        sectors,
+        symbol,
+        symbolMapping,
+        ...(dataSource === 'MANUAL'
+          ? { assetClass, assetSubClass, name, url }
+          : {
+              SymbolProfileOverrides: {
+                upsert: {
+                  create: symbolProfileOverrides,
+                  update: symbolProfileOverrides
+                }
+              }
+            })
+      };
+
+      await this.symbolProfileService.updateSymbolProfile(
+        {
+          dataSource,
+          symbol
+        },
+        updatedSymbolProfile
+      );
+
+      return this.symbolProfileService.getSymbolProfiles([
+        {
+          dataSource: dataSource as DataSource,
+          symbol: symbol as string
+        }
+      ])?.[0];
+    }
  }

  public async putSetting(key: string, value: string) {
--- a/apps/api/src/app/admin/update-asset-profile.dto.ts
+++ b/apps/api/src/app/admin/update-asset-profile.dto.ts
@ -1,6 +1,6 @@
 import { IsCurrencyCode } from '@ghostfolio/api/validators/is-currency-code';

-import { AssetClass, AssetSubClass, Prisma } from '@prisma/client';
+import { AssetClass, AssetSubClass, DataSource, Prisma } from '@prisma/client';
 import {
  IsArray,
  IsEnum,
@ -19,8 +19,8 @@ export class UpdateAssetProfileDto {
  @IsOptional()
  assetSubClass?: AssetSubClass;

-  @IsString()
  @IsOptional()
+  @IsString()
  comment?: string;

  @IsArray()
@ -31,8 +31,12 @@ export class UpdateAssetProfileDto {
  @IsOptional()
  currency?: string;

-  @IsString()
+  @IsEnum(DataSource, { each: true })
  @IsOptional()
+  dataSource?: DataSource;
+
+  @IsOptional()
+  @IsString()
  name?: string;

  @IsObject()
@ -43,6 +47,10 @@ export class UpdateAssetProfileDto {
  @IsOptional()
  sectors?: Prisma.InputJsonArray;

+  @IsOptional()
+  @IsString()
+  symbol?: string;
+
  @IsObject()
  @IsOptional()
  symbolMapping?: {
--- a/apps/api/src/services/market-data/market-data.service.ts
+++ b/apps/api/src/services/market-data/market-data.service.ts
@ -110,6 +110,22 @@ export class MarketDataService {
    });
  }

+  public async updateAssetProfileIdentifier(
+    oldAssetProfileIdentifier: AssetProfileIdentifier,
+    newAssetProfileIdentifier: AssetProfileIdentifier
+  ) {
+    return this.prismaService.marketData.updateMany({
+      data: {
+        dataSource: newAssetProfileIdentifier.dataSource,
+        symbol: newAssetProfileIdentifier.symbol
+      },
+      where: {
+        dataSource: oldAssetProfileIdentifier.dataSource,
+        symbol: oldAssetProfileIdentifier.symbol
+      }
+    });
+  }
+
  public async updateMarketData(params: {
    data: {
      state: MarketDataState;
--- a/apps/api/src/services/symbol-profile/symbol-profile.service.ts
+++ b/apps/api/src/services/symbol-profile/symbol-profile.service.ts
@ -126,23 +126,42 @@ export class SymbolProfileService {
      });
  }

-  public updateSymbolProfile({
-    assetClass,
-    assetSubClass,
-    comment,
-    countries,
-    currency,
-    dataSource,
-    holdings,
-    isActive,
-    name,
-    scraperConfiguration,
-    sectors,
-    symbol,
-    symbolMapping,
-    SymbolProfileOverrides,
-    url
-  }: AssetProfileIdentifier & Prisma.SymbolProfileUpdateInput) {
+  public updateAssetProfileIdentifier(
+    oldAssetProfileIdentifier: AssetProfileIdentifier,
+    newAssetProfileIdentifier: AssetProfileIdentifier
+  ) {
+    return this.prismaService.symbolProfile.update({
+      data: {
+        dataSource: newAssetProfileIdentifier.dataSource,
+        symbol: newAssetProfileIdentifier.symbol
+      },
+      where: {
+        dataSource_symbol: {
+          dataSource: oldAssetProfileIdentifier.dataSource,
+          symbol: oldAssetProfileIdentifier.symbol
+        }
+      }
+    });
+  }
+
+  public updateSymbolProfile(
+    { dataSource, symbol }: AssetProfileIdentifier,
+    {
+      assetClass,
+      assetSubClass,
+      comment,
+      countries,
+      currency,
+      holdings,
+      isActive,
+      name,
+      scraperConfiguration,
+      sectors,
+      symbolMapping,
+      SymbolProfileOverrides,
+      url
+    }: Prisma.SymbolProfileUpdateInput
+  ) {
    return this.prismaService.symbolProfile.update({
      data: {
        assetClass,
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
@ -389,9 +389,15 @@ export class AdminMarketDataComponent
        dialogRef
          .afterClosed()
          .pipe(takeUntil(this.unsubscribeSubject))
-          .subscribe(() => {
-            this.router.navigate(['.'], { relativeTo: this.route });
-          });
+          .subscribe(
+            (newAssetProfileIdentifier: AssetProfileIdentifier | undefined) => {
+              if (newAssetProfileIdentifier) {
+                this.onOpenAssetProfileDialog(newAssetProfileIdentifier);
+              } else {
+                this.router.navigate(['.'], { relativeTo: this.route });
+              }
+            }
+          );
      });
  }

--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.scss
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.scss
@ -8,6 +8,12 @@
      aspect-ratio: 16/9;
    }

+    .edit-asset-profile-identifier-container {
+      bottom: 0;
+      right: 1rem;
+      top: 0;
+    }
+
    .mat-expansion-panel {
      --mat-expansion-container-background-color: transparent;

--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts
@ -15,17 +15,27 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';

+import { HttpErrorResponse } from '@angular/common/http';
 import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
+  ElementRef,
  Inject,
  OnDestroy,
  OnInit,
+  ViewChild,
  signal
 } from '@angular/core';
-import { FormBuilder, FormControl, Validators } from '@angular/forms';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormControl,
+  ValidationErrors,
+  Validators
+} from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import {
  AssetClass,
  AssetSubClass,
@ -33,6 +43,8 @@ import {
  SymbolProfile
 } from '@prisma/client';
 import { format } from 'date-fns';
+import { StatusCodes } from 'http-status-codes';
+import ms from 'ms';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';

@ -47,14 +59,26 @@ import { AssetProfileDialogParams } from './interfaces/interfaces';
  standalone: false
 })
 export class AssetProfileDialog implements OnDestroy, OnInit {
+  private static readonly HISTORICAL_DATA_TEMPLATE = `date;marketPrice\n${format(
+    new Date(),
+    DATE_FORMAT
+  )};123.45`;
+
+  @ViewChild('assetProfileFormElement')
+  assetProfileFormElement: ElementRef<HTMLFormElement>;
+
  public assetProfileClass: string;
+
  public assetClasses = Object.keys(AssetClass).map((assetClass) => {
    return { id: assetClass, label: translate(assetClass) };
  });
+
  public assetSubClasses = Object.keys(AssetSubClass).map((assetSubClass) => {
    return { id: assetSubClass, label: translate(assetSubClass) };
  });
+
  public assetProfile: AdminMarketDataDetails['assetProfile'];
+
  public assetProfileForm = this.formBuilder.group({
    assetClass: new FormControl<AssetClass>(undefined),
    assetSubClass: new FormControl<AssetSubClass>(undefined),
@ -77,16 +101,35 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
    symbolMapping: '',
    url: ''
  });
+
+  public assetProfileIdentifierForm = this.formBuilder.group(
+    {
+      assetProfileIdentifier: new FormControl<AssetProfileIdentifier>(
+        { symbol: null, dataSource: null },
+        [Validators.required]
+      )
+    },
+    {
+      validators: (control) => {
+        return this.isNewSymbolValid(control);
+      }
+    }
+  );
+
  public assetProfileSubClass: string;
  public benchmarks: Partial<SymbolProfile>[];
+
  public countries: {
    [code: string]: { name: string; value: number };
  };
+
  public currencies: string[] = [];
  public ghostfolioScraperApiSymbolPrefix = ghostfolioScraperApiSymbolPrefix;
  public historicalDataItems: LineChartItem[];
  public isBenchmark = false;
+  public isEditAssetProfileIdentifierMode = false;
  public marketDataItems: MarketData[] = [];
+
  public modeValues = [
    {
      value: 'lazy',
@ -97,16 +140,15 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
      viewValue: $localize`Instant` + ' (' + $localize`real-time` + ')'
    }
  ];
+
  public scraperConfiguationIsExpanded = signal(false);
+
  public sectors: {
    [name: string]: { name: string; value: number };
  };
+
  public user: User;

-  private static readonly HISTORICAL_DATA_TEMPLATE = `date;marketPrice\n${format(
-    new Date(),
-    DATE_FORMAT
-  )};123.45`;
  private unsubscribeSubject = new Subject<void>();

  public constructor(
@ -118,9 +160,22 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
    public dialogRef: MatDialogRef<AssetProfileDialog>,
    private formBuilder: FormBuilder,
    private notificationService: NotificationService,
+    private snackBar: MatSnackBar,
    private userService: UserService
  ) {}

+  public get canEditAssetProfileIdentifier() {
+    return (
+      this.assetProfile?.assetClass &&
+      !['MANUAL'].includes(this.assetProfile?.dataSource) &&
+      this.user?.settings?.isExperimentalFeatures
+    );
+  }
+
+  public get canSaveAssetProfileIdentifier() {
+    return !this.assetProfileForm.dirty;
+  }
+
  public ngOnInit() {
    const { benchmarks, currencies } = this.dataService.fetchInfo();

@ -223,6 +278,14 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
      });
  }

+  public onCancelEditAssetProfileIdentifierMode() {
+    this.isEditAssetProfileIdentifierMode = false;
+
+    this.assetProfileForm.enable();
+
+    this.assetProfileIdentifierForm.reset();
+  }
+
  public onClose() {
    this.dialogRef.close();
  }
@ -269,7 +332,13 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
      });
  }

-  public async onSubmit() {
+  public onSetEditAssetProfileIdentifierMode() {
+    this.isEditAssetProfileIdentifierMode = true;
+
+    this.assetProfileForm.disable();
+  }
+
+  public async onSubmitAssetProfileForm() {
    let countries = [];
    let scraperConfiguration = {};
    let sectors = [];
@ -317,7 +386,7 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
      );
    } catch {}

-    const assetProfileData: UpdateAssetProfileDto = {
+    const assetProfile: UpdateAssetProfileDto = {
      countries,
      scraperConfiguration,
      sectors,
@ -334,7 +403,7 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
      await validateObjectForForm({
        classDto: UpdateAssetProfileDto,
        form: this.assetProfileForm,
-        object: assetProfileData
+        object: assetProfile
      });
    } catch (error) {
      console.error(error);
@ -342,16 +411,80 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
    }

    this.adminService
-      .patchAssetProfile({
-        ...assetProfileData,
-        dataSource: this.data.dataSource,
-        symbol: this.data.symbol
-      })
+      .patchAssetProfile(
+        {
+          dataSource: this.data.dataSource,
+          symbol: this.data.symbol
+        },
+        assetProfile
+      )
      .subscribe(() => {
        this.initialize();
      });
  }

+  public async onSubmitAssetProfileIdentifierForm() {
+    const assetProfileIdentifier: UpdateAssetProfileDto = {
+      dataSource: this.assetProfileIdentifierForm.get('assetProfileIdentifier')
+        .value.dataSource,
+      symbol: this.assetProfileIdentifierForm.get('assetProfileIdentifier')
+        .value.symbol
+    };
+
+    try {
+      await validateObjectForForm({
+        classDto: UpdateAssetProfileDto,
+        form: this.assetProfileIdentifierForm,
+        object: assetProfileIdentifier
+      });
+    } catch (error) {
+      console.error(error);
+
+      return;
+    }
+
+    this.adminService
+      .patchAssetProfile(
+        {
+          dataSource: this.data.dataSource,
+          symbol: this.data.symbol
+        },
+        assetProfileIdentifier
+      )
+      .pipe(
+        catchError((error: HttpErrorResponse) => {
+          if (error.status === StatusCodes.CONFLICT) {
+            this.snackBar.open(
+              $localize`${assetProfileIdentifier.symbol} (${assetProfileIdentifier.dataSource}) is already in use.`,
+              undefined,
+              {
+                duration: ms('3 seconds')
+              }
+            );
+          } else {
+            this.snackBar.open(
+              $localize`An error occurred while updating to ${assetProfileIdentifier.symbol} (${assetProfileIdentifier.dataSource}).`,
+              undefined,
+              {
+                duration: ms('3 seconds')
+              }
+            );
+          }
+
+          return EMPTY;
+        }),
+        takeUntil(this.unsubscribeSubject)
+      )
+      .subscribe(() => {
+        const newAssetProfileIdentifier = {
+          dataSource: assetProfileIdentifier.dataSource,
+          symbol: assetProfileIdentifier.symbol
+        };
+
+        this.dialogRef.close(newAssetProfileIdentifier);
+      });
+  }
+
  public onTestMarketData() {
    this.adminService
      .testMarketData({
@ -422,4 +555,24 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
    this.unsubscribeSubject.next();
    this.unsubscribeSubject.complete();
  }
+
+  public onTriggerSubmitAssetProfileForm() {
+    if (this.assetProfileForm) {
+      this.assetProfileFormElement.nativeElement.requestSubmit();
+    }
+  }
+
+  private isNewSymbolValid(control: AbstractControl): ValidationErrors {
+    const currentAssetProfileIdentifier: AssetProfileIdentifier | undefined =
+      control.get('assetProfileIdentifier').value;
+
+    if (
+      currentAssetProfileIdentifier?.dataSource === this.data?.dataSource &&
+      currentAssetProfileIdentifier?.symbol === this.data?.symbol
+    ) {
+      return {
+        equalsPreviousProfileIdentifier: true
+      };
+    }
+  }
 }
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
@ -1,9 +1,4 @@
-<form
-  class="d-flex flex-column h-100"
-  [formGroup]="assetProfileForm"
-  (keyup.enter)="assetProfileForm.valid && onSubmit()"
-  (ngSubmit)="onSubmit()"
->
+<div class="d-flex flex-column h-100">
  <div class="d-flex mb-3">
    <h1 class="flex-grow-1 m-0" mat-dialog-title>
      {{ assetProfile?.name ?? data.symbol }}
@ -91,21 +86,84 @@
    />

    <div class="row">
-      <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="assetProfile?.symbol"
-          >Symbol</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [value]="
-            assetProfile?.dataProviderInfo?.name ?? assetProfile?.dataSource
-          "
-          >Data Source</gf-value
-        >
-      </div>
+      @if (isEditAssetProfileIdentifierMode) {
+        <div class="col-12 mb-4">
+          <form
+            class="align-items-center d-flex"
+            [formGroup]="assetProfileIdentifierForm"
+            (keyup.enter)="
+              assetProfileIdentifierForm.valid &&
+                onSubmitAssetProfileIdentifierForm()
+            "
+            (ngSubmit)="onSubmitAssetProfileIdentifierForm()"
+          >
+            <mat-form-field appearance="outline" class="gf-spacer without-hint">
+              <mat-label i18n>Name, symbol or ISIN</mat-label>
+              <gf-symbol-autocomplete
+                formControlName="assetProfileIdentifier"
+                [includeIndices]="true"
+              />
+            </mat-form-field>
+            <button
+              class="ml-2 no-min-width px-2"
+              color="primary"
+              mat-flat-button
+              type="submit"
+              [disabled]="
+                assetProfileIdentifierForm.hasError(
+                  'invalidData',
+                  'assetProfileIdentifier'
+                ) ||
+                assetProfileIdentifierForm.hasError(
+                  'equalsPreviousProfileIdentifier'
+                )
+              "
+            >
+              <ng-container i18n>Apply</ng-container>
+            </button>
+            <button
+              class="ml-2 no-min-width px-2"
+              mat-button
+              type="button"
+              (click)="onCancelEditAssetProfileIdentifierMode()"
+            >
+              <ng-container i18n>Cancel</ng-container>
+            </button>
+          </form>
+        </div>
+      } @else {
+        <div class="col-6 mb-3">
+          <gf-value i18n size="medium" [value]="assetProfile?.symbol"
+            >Symbol</gf-value
+          >
+        </div>
+        <div class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [value]="
+              assetProfile?.dataProviderInfo?.name ?? assetProfile?.dataSource
+            "
+            >Data Source</gf-value
+          >
+          <div
+            class="edit-asset-profile-identifier-container position-absolute"
+          >
+            <button
+              class="h-100 no-min-width px-2"
+              mat-button
+              type="button"
+              [disabled]="!canSaveAssetProfileIdentifier"
+              [ngClass]="{
+                'd-none': !canEditAssetProfileIdentifier
+              }"
+              (click)="onSetEditAssetProfileIdentifierMode()"
+            >
+              <ion-icon name="create-outline" />
+            </button>
+          </div>
+        </div>
+      }
      <div class="col-6 mb-3">
        <gf-value i18n size="medium" [value]="assetProfile?.currency"
          >Currency</gf-value
@ -202,230 +260,256 @@
        }
      }
    </div>
-    <div class="mt-3">
-      <mat-form-field appearance="outline" class="w-100 without-hint">
-        <mat-label i18n>Name</mat-label>
-        <input formControlName="name" matInput type="text" />
-      </mat-form-field>
-    </div>
-    @if (assetProfile?.dataSource === 'MANUAL') {
+    <form
+      #assetProfileFormElement
+      [formGroup]="assetProfileForm"
+      (keyup.enter)="assetProfileForm.valid && onSubmitAssetProfileForm()"
+      (ngSubmit)="onSubmitAssetProfileForm()"
+    >
      <div class="mt-3">
        <mat-form-field appearance="outline" class="w-100 without-hint">
-          <mat-label i18n>Currency</mat-label>
-          <gf-currency-selector
-            formControlName="currency"
-            [currencies]="currencies"
-          />
+          <mat-label i18n>Name</mat-label>
+          <input formControlName="name" matInput type="text" />
        </mat-form-field>
      </div>
-    }
-    <div class="mt-3">
-      <mat-form-field appearance="outline" class="w-100 without-hint">
-        <mat-label i18n>Asset Class</mat-label>
-        <mat-select formControlName="assetClass">
-          <mat-option [value]="null" />
-          @for (assetClass of assetClasses; track assetClass) {
-            <mat-option [value]="assetClass.id">{{
-              assetClass.label
-            }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    </div>
-    <div class="mt-3">
-      <mat-form-field appearance="outline" class="w-100 without-hint">
-        <mat-label i18n>Asset Sub Class</mat-label>
-        <mat-select formControlName="assetSubClass">
-          <mat-option [value]="null" />
-          @for (assetSubClass of assetSubClasses; track assetSubClass) {
-            <mat-option [value]="assetSubClass.id">{{
-              assetSubClass.label
-            }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    </div>
-    <div class="d-flex my-3">
-      <div class="w-50">
-        <mat-checkbox
-          color="primary"
-          i18n
-          [checked]="isBenchmark"
-          (change)="
-            isBenchmark
-              ? onUnsetBenchmark({
-                  dataSource: data.dataSource,
-                  symbol: data.symbol
-                })
-              : onSetBenchmark({
-                  dataSource: data.dataSource,
-                  symbol: data.symbol
-                })
-          "
-          >Benchmark</mat-checkbox
-        >
+      @if (assetProfile?.dataSource === 'MANUAL') {
+        <div class="mt-3">
+          <mat-form-field appearance="outline" class="w-100 without-hint">
+            <mat-label i18n>Currency</mat-label>
+            <gf-currency-selector
+              formControlName="currency"
+              [currencies]="currencies"
+            />
+          </mat-form-field>
+        </div>
+      }
+      <div class="mt-3">
+        <mat-form-field appearance="outline" class="w-100 without-hint">
+          <mat-label i18n>Asset Class</mat-label>
+          <mat-select formControlName="assetClass">
+            <mat-option [value]="null" />
+            @for (assetClass of assetClasses; track assetClass) {
+              <mat-option [value]="assetClass.id">{{
+                assetClass.label
+              }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
      </div>
-    </div>
-    <div class="mt-3">
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>Symbol Mapping</mat-label>
-        <textarea
-          cdkTextareaAutosize
-          formControlName="symbolMapping"
-          matInput
-          type="text"
-        ></textarea>
-      </mat-form-field>
-    </div>
-    @if (assetProfile?.dataSource === 'MANUAL') {
-      <div class="mb-3">
-        <mat-accordion class="my-3">
-          <mat-expansion-panel
-            class="shadow-none"
-            [expanded]="
-              assetProfileForm.controls.scraperConfiguration.controls.selector
-                .value !== '' &&
-              assetProfileForm.controls.scraperConfiguration.controls.url
-                .value !== ''
+      <div class="mt-3">
+        <mat-form-field appearance="outline" class="w-100 without-hint">
+          <mat-label i18n>Asset Sub Class</mat-label>
+          <mat-select formControlName="assetSubClass">
+            <mat-option [value]="null" />
+            @for (assetSubClass of assetSubClasses; track assetSubClass) {
+              <mat-option [value]="assetSubClass.id">{{
+                assetSubClass.label
+              }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div class="d-flex my-3">
+        <div class="w-50">
+          <mat-checkbox
+            color="primary"
+            i18n
+            [checked]="isBenchmark"
+            [disabled]="isEditAssetProfileIdentifierMode"
+            (change)="
+              isBenchmark
+                ? onUnsetBenchmark({
+                    dataSource: data.dataSource,
+                    symbol: data.symbol
+                  })
+                : onSetBenchmark({
+                    dataSource: data.dataSource,
+                    symbol: data.symbol
+                  })
            "
-            (closed)="scraperConfiguationIsExpanded.set(false)"
-            (opened)="scraperConfiguationIsExpanded.set(true)"
+            >Benchmark</mat-checkbox
          >
-            <mat-expansion-panel-header class="p-0">
-              <mat-panel-title i18n>Scraper Configuration</mat-panel-title>
-            </mat-expansion-panel-header>
-            <div formGroupName="scraperConfiguration">
-              <div class="mt-3">
-                <mat-form-field appearance="outline" class="w-100 without-hint">
-                  <mat-label i18n>Default Market Price</mat-label>
-                  <input
-                    formControlName="defaultMarketPrice"
-                    matInput
-                    type="number"
-                  />
-                </mat-form-field>
-              </div>
-              <div class="mt-3">
-                <mat-form-field appearance="outline" class="w-100 without-hint">
-                  <mat-label i18n>HTTP Request Headers</mat-label>
-                  <textarea
-                    cdkTextareaAutosize
-                    formControlName="headers"
-                    matInput
-                    type="text"
-                    [matAutocomplete]="auto"
-                  ></textarea>
-                </mat-form-field>
-              </div>
-              <div class="mt-3">
-                <mat-form-field appearance="outline" class="w-100 without-hint">
-                  <mat-label i18n>Locale</mat-label>
-                  <input formControlName="locale" matInput type="text" />
-                </mat-form-field>
-              </div>
-              <div class="mt-3">
-                <mat-form-field appearance="outline" class="w-100 without-hint">
-                  <mat-label i18n>Mode</mat-label>
-                  <mat-select formControlName="mode">
-                    @for (modeValue of modeValues; track modeValue) {
-                      <mat-option [value]="modeValue.value">{{
-                        modeValue.viewValue
-                      }}</mat-option>
-                    }
-                  </mat-select>
-                </mat-form-field>
-              </div>
-              <div class="mt-3">
-                <mat-form-field appearance="outline" class="w-100 without-hint">
-                  <mat-label>
-                    <ng-container i18n>Selector</ng-container>*
-                  </mat-label>
-                  <textarea
-                    cdkTextareaAutosize
-                    formControlName="selector"
-                    matInput
-                    type="text"
-                  ></textarea>
-                </mat-form-field>
-              </div>
-              <div class="mt-3">
-                <mat-form-field appearance="outline" class="w-100 without-hint">
-                  <mat-label>
-                    <ng-container i18n>Url</ng-container>*
-                  </mat-label>
-                  <input formControlName="url" matInput type="text" />
-                </mat-form-field>
-              </div>
-              <div class="my-3 text-right">
-                <button
-                  color="accent"
-                  mat-flat-button
-                  type="button"
-                  [disabled]="
-                    assetProfileForm.controls.scraperConfiguration.controls
-                      .selector.value === '' ||
-                    assetProfileForm.controls.scraperConfiguration.controls.url
-                      .value === ''
-                  "
-                  (click)="onTestMarketData()"
-                >
-                  <ng-container i18n>Test</ng-container>
-                </button>
-              </div>
-            </div>
-          </mat-expansion-panel>
-        </mat-accordion>
+        </div>
      </div>
-    }
-    @if (assetProfile?.dataSource === 'MANUAL') {
-      <div>
+      <div class="mt-3">
        <mat-form-field appearance="outline" class="w-100">
-          <mat-label i18n>Sectors</mat-label>
+          <mat-label i18n>Symbol Mapping</mat-label>
          <textarea
            cdkTextareaAutosize
-            formControlName="sectors"
+            formControlName="symbolMapping"
            matInput
            type="text"
          ></textarea>
        </mat-form-field>
      </div>
+      @if (assetProfile?.dataSource === 'MANUAL') {
+        <div class="mb-3">
+          <mat-accordion class="my-3">
+            <mat-expansion-panel
+              class="shadow-none"
+              [expanded]="
+                assetProfileForm.controls.scraperConfiguration.controls.selector
+                  .value !== '' &&
+                assetProfileForm.controls.scraperConfiguration.controls.url
+                  .value !== ''
+              "
+              (closed)="scraperConfiguationIsExpanded.set(false)"
+              (opened)="scraperConfiguationIsExpanded.set(true)"
+            >
+              <mat-expansion-panel-header class="p-0">
+                <mat-panel-title i18n>Scraper Configuration</mat-panel-title>
+              </mat-expansion-panel-header>
+              <div formGroupName="scraperConfiguration">
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label i18n>Default Market Price</mat-label>
+                    <input
+                      formControlName="defaultMarketPrice"
+                      matInput
+                      type="number"
+                    />
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label i18n>HTTP Request Headers</mat-label>
+                    <textarea
+                      cdkTextareaAutosize
+                      formControlName="headers"
+                      matInput
+                      type="text"
+                      [matAutocomplete]="auto"
+                    ></textarea>
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label i18n>Locale</mat-label>
+                    <input formControlName="locale" matInput type="text" />
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label i18n>Mode</mat-label>
+                    <mat-select formControlName="mode">
+                      @for (modeValue of modeValues; track modeValue) {
+                        <mat-option [value]="modeValue.value">{{
+                          modeValue.viewValue
+                        }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label>
+                      <ng-container i18n>Selector</ng-container>*
+                    </mat-label>
+                    <textarea
+                      cdkTextareaAutosize
+                      formControlName="selector"
+                      matInput
+                      type="text"
+                    ></textarea>
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label>
+                      <ng-container i18n>Url</ng-container>*
+                    </mat-label>
+                    <input formControlName="url" matInput type="text" />
+                  </mat-form-field>
+                </div>
+                <div class="my-3 text-right">
+                  <button
+                    color="accent"
+                    mat-flat-button
+                    type="button"
+                    [disabled]="
+                      assetProfileForm.controls.scraperConfiguration.controls
+                        .selector.value === '' ||
+                      assetProfileForm.controls.scraperConfiguration.controls
+                        .url.value === ''
+                    "
+                    (click)="onTestMarketData()"
+                  >
+                    <ng-container i18n>Test</ng-container>
+                  </button>
+                </div>
+              </div>
+            </mat-expansion-panel>
+          </mat-accordion>
+        </div>
+      }
+      @if (assetProfile?.dataSource === 'MANUAL') {
+        <div>
+          <mat-form-field appearance="outline" class="w-100">
+            <mat-label i18n>Sectors</mat-label>
+            <textarea
+              cdkTextareaAutosize
+              formControlName="sectors"
+              matInput
+              type="text"
+            ></textarea>
+          </mat-form-field>
+        </div>
+        <div>
+          <mat-form-field appearance="outline" class="w-100">
+            <mat-label i18n>Countries</mat-label>
+            <textarea
+              cdkTextareaAutosize
+              formControlName="countries"
+              matInput
+              type="text"
+            ></textarea>
+          </mat-form-field>
+        </div>
+      }
      <div>
+        <mat-form-field appearance="outline" class="w-100 without-hint">
+          <mat-label i18n>Url</mat-label>
+          <input formControlName="url" matInput type="text" />
+          @if (assetProfileForm.get('url').value) {
+            <gf-asset-profile-icon
+              class="mr-3"
+              matSuffix
+              [url]="assetProfileForm.get('url').value"
+            />
+          }
+        </mat-form-field>
+      </div>
+      <div class="mt-3">
        <mat-form-field appearance="outline" class="w-100">
-          <mat-label i18n>Countries</mat-label>
+          <mat-label i18n>Note</mat-label>
          <textarea
+            cdkAutosizeMinRows="2"
            cdkTextareaAutosize
-            formControlName="countries"
+            formControlName="comment"
            matInput
-            type="text"
+            (keyup.enter)="$event.stopPropagation()"
          ></textarea>
        </mat-form-field>
      </div>
-    }
-    <div>
-      <mat-form-field appearance="outline" class="w-100 without-hint">
-        <mat-label i18n>Url</mat-label>
-        <input formControlName="url" matInput type="text" />
-        @if (assetProfileForm.get('url').value) {
-          <gf-asset-profile-icon
-            class="mr-3"
-            matSuffix
-            [url]="assetProfileForm.get('url').value"
-          />
-        }
-      </mat-form-field>
-    </div>
-    <div class="mt-3">
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>Note</mat-label>
-        <textarea
-          cdkAutosizeMinRows="2"
-          cdkTextareaAutosize
-          formControlName="comment"
-          matInput
-          (keyup.enter)="$event.stopPropagation()"
-        ></textarea>
-      </mat-form-field>
-    </div>
+    </form>
  </div>

  <div class="d-flex justify-content-end" mat-dialog-actions>
@ -433,10 +517,10 @@
    <button
      color="primary"
      mat-flat-button
-      type="submit"
      [disabled]="!(assetProfileForm.dirty && assetProfileForm.valid)"
+      (click)="onTriggerSubmitAssetProfileForm()"
    >
      <ng-container i18n>Save</ng-container>
    </button>
  </div>
-</form>
+</div>
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts
@ -4,6 +4,7 @@ import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector';
 import { GfHistoricalMarketDataEditorComponent } from '@ghostfolio/ui/historical-market-data-editor';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
+import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete';
 import { GfValueComponent } from '@ghostfolio/ui/value';

 import { TextFieldModule } from '@angular/cdk/text-field';
@ -31,6 +32,7 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
    GfHistoricalMarketDataEditorComponent,
    GfLineChartComponent,
    GfPortfolioProportionChartComponent,
+    GfSymbolAutocompleteComponent,
    GfValueComponent,
    MatButtonModule,
    MatCheckboxModule,
--- a/apps/client/src/app/services/admin.service.ts
+++ b/apps/client/src/app/services/admin.service.ts
@ -203,20 +203,23 @@ export class AdminService {
    return this.http.get<IDataProviderHistoricalResponse>(url);
  }

-  public patchAssetProfile({
-    assetClass,
-    assetSubClass,
-    comment,
-    countries,
-    currency,
-    dataSource,
-    name,
-    scraperConfiguration,
-    sectors,
-    symbol,
-    symbolMapping,
-    url
-  }: AssetProfileIdentifier & UpdateAssetProfileDto) {
+  public patchAssetProfile(
+    { dataSource, symbol }: AssetProfileIdentifier,
+    {
+      assetClass,
+      assetSubClass,
+      comment,
+      countries,
+      currency,
+      dataSource: newDataSource,
+      name,
+      scraperConfiguration,
+      sectors,
+      symbol: newSymbol,
+      symbolMapping,
+      url
+    }: UpdateAssetProfileDto
+  ) {
    return this.http.patch<EnhancedSymbolProfile>(
      `/api/v1/admin/profile-data/${dataSource}/${symbol}`,
      {
@ -225,9 +228,11 @@ export class AdminService {
        comment,
        countries,
        currency,
+        dataSource: newDataSource,
        name,
        scraperConfiguration,
        sectors,
+        symbol: newSymbol,
        symbolMapping,
        url
      }