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,34 +157,35 @@
           >Asset Sub Class</gf-value
         >
       </div>
-      <ng-container
-        *ngIf="
-          assetProfile?.countries?.length > 0 ||
-          assetProfile?.sectors?.length > 0
-        "
-      >
+      @if (
+        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">
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="assetProfile?.sectors[0].name"
-              >Sector</gf-value
-            >
-          </div>
-          <div *ngIf="assetProfile?.countries?.length === 1" class="col-6 mb-3">
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="assetProfile?.countries[0].name"
-              >Country</gf-value
-            >
-          </div>
+          @if (assetProfile?.sectors?.length === 1) {
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [locale]="data.locale"
+                [value]="assetProfile?.sectors[0].name"
+                >Sector</gf-value
+              >
+            </div>
+          }
+          @if (assetProfile?.countries?.length === 1) {
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [locale]="data.locale"
+                [value]="assetProfile?.countries[0].name"
+                >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,15 +216,17 @@
         <input formControlName="name" matInput type="text" />
       </mat-form-field>
     </div>
-    <div *ngIf="assetProfile?.dataSource === 'MANUAL'" 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>
+    @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>
@@ -282,57 +285,66 @@
         ></textarea>
       </mat-form-field>
     </div>
-    <div *ngIf="assetProfile?.dataSource === 'MANUAL'">
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>Scraper Configuration</mat-label>
-        <div class="align-items-end d-flex">
+    @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">
+            <textarea
+              cdkTextareaAutosize
+              formControlName="scraperConfiguration"
+              matInput
+              type="text"
+              (keyup.enter)="$event.stopPropagation()"
+            ></textarea>
+            <button
+              color="accent"
+              mat-flat-button
+              type="button"
+              [disabled]="
+                assetProfileForm.controls['scraperConfiguration'].value === '{}'
+              "
+              (click)="onTestMarketData()"
+            >
+              <ng-container i18n>Test</ng-container>
+            </button>
+          </div>
+        </mat-form-field>
+      </div>
+      <div>
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Sectors</mat-label>
           <textarea
             cdkTextareaAutosize
-            formControlName="scraperConfiguration"
+            formControlName="sectors"
             matInput
             type="text"
-            (keyup.enter)="$event.stopPropagation()"
           ></textarea>
-          <button
-            color="accent"
-            mat-flat-button
-            type="button"
-            [disabled]="
-              assetProfileForm.controls['scraperConfiguration'].value === '{}'
-            "
-            (click)="onTestMarketData()"
-          >
-            <ng-container i18n>Test</ng-container>
-          </button>
-        </div>
-      </mat-form-field>
-    </div>
-    <div *ngIf="assetProfile?.dataSource === 'MANUAL'">
-      <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 *ngIf="assetProfile?.dataSource === 'MANUAL'">
-      <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>
+        </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.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;