Feature/add icon to asset profile dialog (#3240)

* Add asset profile icon

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added support to override the asset class of an asset profile in the asset profile details dialog of the admin control
 - Added support to override the asset sub class of an asset profile in the asset profile details dialog of the admin control
 - Added support to override the url of an asset profile in the asset profile details dialog of the admin control
+- Added the asset profile icon to the asset profile details dialog of the admin control
 - Extended the content of the _Self-Hosting_ section by the data providers on the Frequently Asked Questions (FAQ) page
 
 ### Changed

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -328,6 +328,7 @@ export class AdminMarketDataComponent
           data: <AssetProfileDialogParams>{
             dataSource,
             symbol,
+            colorScheme: this.user?.settings.colorScheme,
             deviceType: this.deviceType,
             locale: this.user?.settings?.locale
           },

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -157,17 +157,15 @@
           >Asset Sub Class</gf-value
         >
       </div>
-      <ng-container
+      @if (
-        *ngIf="
+        assetProfile?.countries?.length > 0 || assetProfile?.sectors?.length > 0
-          assetProfile?.countries?.length > 0 ||
+      ) {
-          assetProfile?.sectors?.length > 0
-        "
-      >
         @if (
           assetProfile?.countries?.length === 1 &&
           assetProfile?.sectors?.length === 1
         ) {
-          <div *ngIf="assetProfile?.sectors?.length === 1" class="col-6 mb-3">
+          @if (assetProfile?.sectors?.length === 1) {
+            <div class="col-6 mb-3">
               <gf-value
                 i18n
                 size="medium"
@@ -176,7 +174,9 @@
                 >Sector</gf-value
               >
             </div>
-          <div *ngIf="assetProfile?.countries?.length === 1" class="col-6 mb-3">
+          }
+          @if (assetProfile?.countries?.length === 1) {
+            <div class="col-6 mb-3">
               <gf-value
                 i18n
                 size="medium"
@@ -185,6 +185,7 @@
                 >Country</gf-value
               >
             </div>
+          }
         } @else {
           <div class="col-md-6 mb-3">
             <div class="h5" i18n>Sectors</div>
@@ -207,7 +208,7 @@
             />
           </div>
         }
-      </ng-container>
+      }
     </div>
     <div class="mt-3">
       <mat-form-field appearance="outline" class="w-100 without-hint">
@@ -215,7 +216,8 @@
         <input formControlName="name" matInput type="text" />
       </mat-form-field>
     </div>
-    <div *ngIf="assetProfile?.dataSource === 'MANUAL'" class="mt-3">
+    @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
@@ -224,6 +226,7 @@
           />
         </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>
@@ -282,7 +285,8 @@
         ></textarea>
       </mat-form-field>
     </div>
-    <div *ngIf="assetProfile?.dataSource === 'MANUAL'">
+    @if (assetProfile?.dataSource === 'MANUAL') {
+      <div>
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Scraper Configuration</mat-label>
           <div class="align-items-end d-flex">
@@ -307,7 +311,7 @@
           </div>
         </mat-form-field>
       </div>
-    <div *ngIf="assetProfile?.dataSource === 'MANUAL'">
+      <div>
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Sectors</mat-label>
           <textarea
@@ -318,7 +322,7 @@
           ></textarea>
         </mat-form-field>
       </div>
-    <div *ngIf="assetProfile?.dataSource === 'MANUAL'">
+      <div>
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Countries</mat-label>
           <textarea
@@ -329,10 +333,18 @@
           ></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.controls['url'].value) {
+          <gf-symbol-icon
+            class="mr-3"
+            matSuffix
+            [url]="assetProfileForm.controls['url'].value"
+          />
+        }
       </mat-form-field>
     </div>
     <div class="mt-3">

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts

@@ -1,5 +1,6 @@
 import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
 import { AdminMarketDataService } from '@ghostfolio/client/components/admin-market-data/admin-market-data.service';
+import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { GfCurrencySelectorModule } from '@ghostfolio/ui/currency-selector/currency-selector.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
@@ -26,6 +27,7 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
     GfAdminMarketDataDetailModule,
     GfCurrencySelectorModule,
     GfPortfolioProportionChartModule,
+    GfSymbolIconModule,
     GfValueModule,
     MatButtonModule,
     MatCheckboxModule,

apps/client/src/app/components/admin-market-data/asset-profile-dialog/interfaces/interfaces.ts

@@ -1,6 +1,9 @@
+import { ColorScheme } from '@ghostfolio/common/types';
+
 import { DataSource } from '@prisma/client';
 
 export interface AssetProfileDialogParams {
+  colorScheme: ColorScheme;
   dataSource: DataSource;
   deviceType: string;
   locale: string;