Feature/refactor symbol icon module to asset profile icon component (#3245)

* Refactor symbol icon module to asset profile icon component (standalone)
12 months ago · 50dbbf0569
parent ca2e748c56
commit 50dbbf0569
25 changed files with 54 additions and 56 deletions
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.html
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.html
@ -34,7 +34,7 @@
      <ng-container i18n>Name</ng-container>
    </th>
    <td *matCellDef="let element" class="px-1" mat-cell>
-      <gf-symbol-icon
+      <gf-asset-profile-icon
        *ngIf="element.Platform?.url"
        class="d-inline d-sm-none mr-1"
        [tooltip]="element.Platform?.name"
@ -73,7 +73,7 @@
    </th>
    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
      <div class="d-flex">
-        <gf-symbol-icon
+        <gf-asset-profile-icon
          *ngIf="element.Platform?.url"
          class="mr-1"
          [tooltip]="element.Platform?.name"
--- a/apps/client/src/app/components/accounts-table/accounts-table.module.ts
+++ b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfValueModule } from '@ghostfolio/ui/value';

 import { CommonModule } from '@angular/common';
@ -17,7 +17,7 @@ import { AccountsTableComponent } from './accounts-table.component';
  exports: [AccountsTableComponent],
  imports: [
    CommonModule,
-    GfSymbolIconModule,
+    GfAssetProfileIconComponent,
    GfValueModule,
    MatButtonModule,
    MatMenuModule,
--- 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
@ -339,7 +339,7 @@
        <mat-label i18n>Url</mat-label>
        <input formControlName="url" matInput type="text" />
        @if (assetProfileForm.controls['url'].value) {
-          <gf-symbol-icon
+          <gf-asset-profile-icon
            class="mr-3"
            matSuffix
            [url]="assetProfileForm.controls['url'].value"
--- 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
@ -1,6 +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 { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 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';
@ -25,9 +25,9 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
    CommonModule,
    FormsModule,
    GfAdminMarketDataDetailModule,
+    GfAssetProfileIconComponent,
    GfCurrencySelectorModule,
    GfPortfolioProportionChartModule,
-    GfSymbolIconModule,
    GfValueModule,
    MatButtonModule,
    MatCheckboxModule,
--- a/apps/client/src/app/components/admin-platform/admin-platform.component.html
+++ b/apps/client/src/app/components/admin-platform/admin-platform.component.html
@ -30,7 +30,7 @@
            <ng-container i18n>Name</ng-container>
          </th>
          <td *matCellDef="let element" class="px-1" mat-cell>
-            <gf-symbol-icon
+            <gf-asset-profile-icon
              *ngIf="element.url"
              class="d-inline mr-1"
              [tooltip]="element.name"
--- a/apps/client/src/app/components/admin-platform/admin-platform.module.ts
+++ b/apps/client/src/app/components/admin-platform/admin-platform.module.ts
@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';

 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@ -16,8 +16,8 @@ import { GfCreateOrUpdatePlatformDialogModule } from './create-or-update-platfor
  exports: [AdminPlatformComponent],
  imports: [
    CommonModule,
+    GfAssetProfileIconComponent,
    GfCreateOrUpdatePlatformDialogModule,
-    GfSymbolIconModule,
    MatButtonModule,
    MatMenuModule,
    MatSortModule,
--- a/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html
+++ b/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html
@ -13,7 +13,11 @@
        <mat-label i18n>Url</mat-label>
        <input matInput name="url" required [(ngModel)]="data.platform.url" />
        @if (data.platform.url) {
-          <gf-symbol-icon class="mr-3" matSuffix [url]="data.platform.url" />
+          <gf-asset-profile-icon
+            class="mr-3"
+            matSuffix
+            [url]="data.platform.url"
+          />
        }
      </mat-form-field>
    </div>
--- a/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.module.ts
+++ b/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.module.ts
@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@ -14,7 +14,7 @@ import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog
  declarations: [CreateOrUpdatePlatformDialog],
  imports: [
    CommonModule,
-    GfSymbolIconModule,
+    GfAssetProfileIconComponent,
    FormsModule,
    MatButtonModule,
    MatDialogModule,
--- a/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.html
+++ b/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.html
@ -0,0 +1,8 @@
+@if (src) {
+  <img
+    onerror="this.style.display='none'"
+    [ngClass]="{ large: size === 'large' }"
+    [src]="src"
+    [title]="tooltip ? tooltip : ''"
+  />
+}
--- a/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.scss
+++ b/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.scss
--- a/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts
+++ b/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts
@ -1,4 +1,6 @@
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
  ChangeDetectionStrategy,
  Component,
  Input,
@ -7,12 +9,15 @@ import {
 import { DataSource } from '@prisma/client';

@Component({
-  selector: 'gf-symbol-icon',
  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './symbol-icon.component.html',
-  styleUrls: ['./symbol-icon.component.scss']
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-asset-profile-icon',
+  standalone: true,
+  styleUrls: ['./asset-profile-icon.component.scss'],
+  templateUrl: './asset-profile-icon.component.html'
 })
-export class SymbolIconComponent implements OnChanges {
+export class GfAssetProfileIconComponent implements OnChanges {
  @Input() dataSource: DataSource;
  @Input() size: 'large';
  @Input() symbol: string;
--- a/apps/client/src/app/components/symbol-icon/symbol-icon.component.html
+++ b/apps/client/src/app/components/symbol-icon/symbol-icon.component.html
@ -1,7 +0,0 @@
-<img
-  *ngIf="src"
-  onerror="this.style.display='none'"
-  [ngClass]="{ large: size === 'large' }"
-  [src]="src"
-  [title]="tooltip ? tooltip : ''"
-/>
--- a/apps/client/src/app/components/symbol-icon/symbol-icon.module.ts
+++ b/apps/client/src/app/components/symbol-icon/symbol-icon.module.ts
@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-
-import { SymbolIconComponent } from './symbol-icon.component';
-
-@NgModule({
-  declarations: [SymbolIconComponent],
-  exports: [SymbolIconComponent],
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfSymbolIconModule {}
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
+++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
@ -61,7 +61,7 @@
          ) {
            <mat-option [value]="platformEntry">
              <span class="d-flex">
-                <gf-symbol-icon
+                <gf-asset-profile-icon
                  class="mr-1"
                  [tooltip]="platformEntry.name"
                  [url]="platformEntry.url"
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
+++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfCurrencySelectorModule } from '@ghostfolio/ui/currency-selector/currency-selector.module';

 import { CommonModule } from '@angular/common';
@ -18,8 +18,8 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.c
  imports: [
    CommonModule,
    FormsModule,
+    GfAssetProfileIconComponent,
    GfCurrencySelectorModule,
-    GfSymbolIconModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatCheckboxModule,
--- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html
+++ b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html
@ -12,7 +12,7 @@
        <mat-select formControlName="fromAccount">
          <mat-option *ngFor="let account of accounts" [value]="account.id">
            <div class="d-flex">
-              <gf-symbol-icon
+              <gf-asset-profile-icon
                *ngIf="account.Platform?.url"
                class="mr-1"
                [tooltip]="account.Platform?.name"
@ -29,7 +29,7 @@
        <mat-select formControlName="toAccount">
          <mat-option *ngFor="let account of accounts" [value]="account.id">
            <div class="d-flex">
-              <gf-symbol-icon
+              <gf-asset-profile-icon
                *ngIf="account.Platform?.url"
                class="mr-1"
                [tooltip]="account.Platform?.name"
--- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.module.ts
+++ b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.module.ts
@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@ -15,7 +15,7 @@ import { TransferBalanceDialog } from './transfer-balance-dialog.component';
  declarations: [TransferBalanceDialog],
  imports: [
    CommonModule,
-    GfSymbolIconModule,
+    GfAssetProfileIconComponent,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
@ -94,7 +94,7 @@
            [value]="account.id"
          >
            <div class="d-flex">
-              <gf-symbol-icon
+              <gf-asset-profile-icon
                *ngIf="account.Platform?.url"
                class="mr-1"
                [tooltip]="account.Platform?.name"
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts
@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfSymbolAutocompleteModule } from '@ghostfolio/ui/symbol-autocomplete/symbol-autocomplete.module';
 import { GfValueModule } from '@ghostfolio/ui/value';

@ -22,8 +22,8 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
  imports: [
    CommonModule,
    FormsModule,
+    GfAssetProfileIconComponent,
    GfSymbolAutocompleteModule,
-    GfSymbolIconModule,
    GfValueModule,
    MatAutocompleteModule,
    MatButtonModule,
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@ -122,7 +122,7 @@
    <ng-container matColumnDef="icon">
      <th *matHeaderCellDef class="px-1" mat-header-cell></th>
      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-        <gf-symbol-icon
+        <gf-asset-profile-icon
          [dataSource]="element.SymbolProfile?.dataSource"
          [symbol]="element.SymbolProfile?.symbol"
          [tooltip]="element.SymbolProfile?.name"
@ -308,7 +308,7 @@
      <td *matCellDef="let element" class="px-1" mat-cell>
        <div class="d-flex">
          @if (element.Account?.Platform?.url) {
-            <gf-symbol-icon
+            <gf-asset-profile-icon
              class="mr-1"
              [tooltip]="element.Account?.Platform?.name"
              [url]="element.Account?.Platform?.url"
--- a/libs/ui/src/lib/activities-table/activities-table.module.ts
+++ b/libs/ui/src/lib/activities-table/activities-table.module.ts
@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfActivityTypeModule } from '@ghostfolio/ui/activity-type';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
@ -24,8 +24,8 @@ import { ActivitiesTableComponent } from './activities-table.component';
  imports: [
    CommonModule,
    GfActivityTypeModule,
+    GfAssetProfileIconComponent,
    GfNoTransactionsInfoModule,
-    GfSymbolIconModule,
    GfSymbolModule,
    GfValueModule,
    MatButtonModule,
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@ -110,7 +110,7 @@
              @for (account of accounts; track account.id) {
                <mat-option [value]="account.id">
                  <div class="d-flex">
-                    <gf-symbol-icon
+                    <gf-asset-profile-icon
                      *ngIf="account.Platform?.url"
                      class="mr-1"
                      [tooltip]="account.Platform?.name"
--- a/libs/ui/src/lib/assistant/assistant.module.ts
+++ b/libs/ui/src/lib/assistant/assistant.module.ts
@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';

 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@ -18,8 +18,8 @@ import { AssistantComponent } from './assistant.component';
  imports: [
    CommonModule,
    FormsModule,
+    GfAssetProfileIconComponent,
    GfAssistantListItemModule,
-    GfSymbolIconModule,
    MatButtonModule,
    MatFormFieldModule,
    MatSelectModule,
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html
@ -10,7 +10,7 @@
    <ng-container matColumnDef="icon">
      <th *matHeaderCellDef class="px-1" mat-header-cell></th>
      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-        <gf-symbol-icon
+        <gf-asset-profile-icon
          [dataSource]="element.dataSource"
          [symbol]="element.symbol"
          [tooltip]="element.name"
--- a/libs/ui/src/lib/holdings-table/holdings-table.module.ts
+++ b/libs/ui/src/lib/holdings-table/holdings-table.module.ts
@ -1,5 +1,5 @@
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 import { GfValueModule } from '@ghostfolio/ui/value';
@ -21,9 +21,9 @@ import { HoldingsTableComponent } from './holdings-table.component';
  exports: [HoldingsTableComponent],
  imports: [
    CommonModule,
+    GfAssetProfileIconComponent,
    GfNoTransactionsInfoModule,
    GfPositionDetailDialogModule,
-    GfSymbolIconModule,
    GfSymbolModule,
    GfValueModule,
    MatButtonModule,