Prettify generic scraper symbols (#34)

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a prettifier (pipe) for generic scraper symbols
+
 ### Fixed
 
 - Fixed the text truncation in buttons of the admin control panel

apps/client/src/app/components/position/position.component.html

@@ -34,7 +34,7 @@
       <div *ngIf="!isLoading" class="flex-grow-1 text-truncate">
         <div class="h6 m-0 text-truncate">{{ position?.name }}</div>
         <div class="d-flex">
-          <span>{{ position?.symbol }}</span>
+          <span>{{ position?.symbol | gfSymbol }}</span>
           <gf-symbol-icon
             *ngIf="position?.url"
             class="ml-1"

apps/client/src/app/components/position/position.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { RouterModule } from '@angular/router';
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
@@ -17,6 +18,7 @@ import { PositionComponent } from './position.component';
     CommonModule,
     GfPositionDetailDialogModule,
     GfSymbolIconModule,
+    GfSymbolModule,
     GfTrendIndicatorModule,
     GfValueModule,
     MatDialogModule,

apps/client/src/app/components/positions-table/positions-table.component.html

@@ -13,7 +13,7 @@
 >
   <ng-container matColumnDef="symbol">
     <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Symbol</th>
-    <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+    <td mat-cell *matCellDef="let element">{{ element.symbol | gfSymbol }}</td>
   </ng-container>
 
   <ng-container matColumnDef="performance">

apps/client/src/app/components/positions-table/positions-table.module.ts

@@ -7,6 +7,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfNoTransactionsInfoModule } from '../no-transactions-info/no-transactions-info.module';
@@ -23,6 +24,7 @@ import { PositionsTableComponent } from './positions-table.component';
     GfNoTransactionsInfoModule,
     GfPositionDetailDialogModule,
     GfSymbolIconModule,
+    GfSymbolModule,
     GfValueModule,
     MatButtonModule,
     MatDialogModule,

apps/client/src/app/components/transactions-table/transactions-table.component.html

@@ -83,7 +83,7 @@
 
   <ng-container matColumnDef="symbol">
     <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Symbol</th>
-    <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+    <td mat-cell *matCellDef="let element">{{ element.symbol | gfSymbol }}</td>
   </ng-container>
 
   <ng-container matColumnDef="currency">
@@ -192,7 +192,7 @@
   <tr
     *matRowDef="let row; columns: displayedColumns"
     mat-row
-    (click)="onOpenPositionDialog({ symbol: row.symbol, title: row.symbol })"
+    (click)="onOpenPositionDialog({ symbol: row.symbol, title: '' })"
   ></tr>
 </table>
 

apps/client/src/app/components/transactions-table/transactions-table.component.ts

@@ -55,11 +55,7 @@ export class TransactionsTableComponent
     this.routeQueryParams = route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (
-          params['positionDetailDialog'] &&
-          params['symbol'] &&
-          params['title']
-        ) {
+        if (params['positionDetailDialog'] && params['symbol']) {
           this.openPositionDialog({
             symbol: params['symbol'],
             title: params['title']

apps/client/src/app/components/transactions-table/transactions-table.module.ts

@@ -6,6 +6,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfPositionDetailDialogModule } from '../position/position-detail-dialog/position-detail-dialog.module';
@@ -20,6 +21,7 @@ import { TransactionsTableComponent } from './transactions-table.component';
     CommonModule,
     GfPositionDetailDialogModule,
     GfSymbolIconModule,
+    GfSymbolModule,
     GfValueModule,
     MatButtonModule,
     MatInputModule,

apps/client/src/app/pipes/symbol/symbol.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+import { SymbolPipe } from './symbol.pipe';
+
+@NgModule({
+  imports: [],
+  declarations: [SymbolPipe],
+  exports: [SymbolPipe],
+  providers: []
+})
+export class GfSymbolModule {}

apps/client/src/app/pipes/symbol/symbol.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ghostfolioScraperApiSymbolPrefix } from '@ghostfolio/helper';
+
+@Pipe({ name: 'gfSymbol' })
+export class SymbolPipe implements PipeTransform {
+  public constructor() {}
+
+  public transform(aSymbol: string): string {
+    return aSymbol?.replace(ghostfolioScraperApiSymbolPrefix, '');
+  }
+}

libs/helper/src/lib/config.ts

@@ -10,6 +10,8 @@ export const currencyPairs = [
   `${Currency.USD}${Currency.CHF}`
 ];
 
+export const ghostfolioScraperApiSymbolPrefix = '_GF_';
+
 export const locale = 'de-CH';
 
 export const primaryColorHex = '#36cfcc';

libs/helper/src/lib/helper.ts

@@ -1,6 +1,8 @@
 import { Currency } from '@prisma/client';
 import { getDate, getMonth, getYear, subDays } from 'date-fns';
 
+import { ghostfolioScraperApiSymbolPrefix } from './config';
+
 const cryptocurrencies = require('cryptocurrencies');
 
 export const DEMO_USER_ID = '9b112b4d-3b7d-4bad-9bdd-3b0f7b4dac2f';
@@ -67,7 +69,7 @@ export function isCurrency(aSymbol = '') {
 }
 
 export function isGhostfolioScraperApiSymbol(aSymbol = '') {
-  return aSymbol.startsWith('[GF]');
+  return aSymbol.startsWith(ghostfolioScraperApiSymbolPrefix);
 }
 
 export function isRakutenRapidApiSymbol(aSymbol = '') {