From cf582b2e98396540507c62b860b543dde64cdf29 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 22 Apr 2021 21:21:52 +0200
Subject: [PATCH] Add symbol icon to position detail dialog (#37)

---
 CHANGELOG.md                                          |  1 +
 .../dialog-header/dialog-header.component.html        |  6 ++++++
 .../dialog-header/dialog-header.component.scss        |  1 +
 .../dialog-header/dialog-header.component.ts          |  1 +
 .../components/dialog-header/dialog-header.module.ts  |  3 ++-
 .../position-detail-dialog/interfaces/interfaces.ts   |  1 +
 .../position-detail-dialog.html                       |  1 +
 .../app/components/position/position.component.html   |  5 -----
 .../src/app/components/position/position.component.ts | 11 ++++++-----
 .../src/app/components/position/position.module.ts    |  2 --
 .../components/symbol-icon/symbol-icon.component.html |  1 +
 .../components/symbol-icon/symbol-icon.component.scss |  5 +++++
 .../components/symbol-icon/symbol-icon.component.ts   |  1 +
 13 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ea298a74..874349dce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Improved the user table of the admin control panel
+- Added the symbol logo to the position detail dialog
 
 ## 0.89.0 - 21.04.2021
 
diff --git a/apps/client/src/app/components/dialog-header/dialog-header.component.html b/apps/client/src/app/components/dialog-header/dialog-header.component.html
index 0b683f9b9..20a55bb4a 100644
--- a/apps/client/src/app/components/dialog-header/dialog-header.component.html
+++ b/apps/client/src/app/components/dialog-header/dialog-header.component.html
@@ -1,3 +1,9 @@
+<gf-symbol-icon
+  *ngIf="symbolUrl"
+  class="mr-1"
+  size="large"
+  [url]="symbolUrl"
+></gf-symbol-icon>
 <span class="flex-grow-1 text-truncate">{{ title }}</span>
 <button
   *ngIf="deviceType !== 'mobile'"
diff --git a/apps/client/src/app/components/dialog-header/dialog-header.component.scss b/apps/client/src/app/components/dialog-header/dialog-header.component.scss
index 79ff2d526..07be4a7c3 100644
--- a/apps/client/src/app/components/dialog-header/dialog-header.component.scss
+++ b/apps/client/src/app/components/dialog-header/dialog-header.component.scss
@@ -1,3 +1,4 @@
 :host {
+  align-items: center;
   display: flex;
 }
diff --git a/apps/client/src/app/components/dialog-header/dialog-header.component.ts b/apps/client/src/app/components/dialog-header/dialog-header.component.ts
index 9b4c67c27..8de8ef67e 100644
--- a/apps/client/src/app/components/dialog-header/dialog-header.component.ts
+++ b/apps/client/src/app/components/dialog-header/dialog-header.component.ts
@@ -16,6 +16,7 @@ import {
 })
 export class DialogHeaderComponent implements OnInit {
   @Input() deviceType: string;
+  @Input() symbolUrl: string;
   @Input() title: string;
 
   @Output() closeButtonClicked = new EventEmitter<void>();
diff --git a/apps/client/src/app/components/dialog-header/dialog-header.module.ts b/apps/client/src/app/components/dialog-header/dialog-header.module.ts
index 16230bcac..bb9e3e819 100644
--- a/apps/client/src/app/components/dialog-header/dialog-header.module.ts
+++ b/apps/client/src/app/components/dialog-header/dialog-header.module.ts
@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 
 import { DialogHeaderComponent } from './dialog-header.component';
 
 @NgModule({
   declarations: [DialogHeaderComponent],
   exports: [DialogHeaderComponent],
-  imports: [CommonModule, MatButtonModule],
+  imports: [CommonModule, GfSymbolIconModule, MatButtonModule],
   providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
diff --git a/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts b/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts
index d5e859728..5747327f4 100644
--- a/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts
+++ b/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts
@@ -3,5 +3,6 @@ export interface PositionDetailDialogParams {
   deviceType: string;
   locale: string;
   symbol: string;
+  symbolUrl: string;
   title: string;
 }
diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
index bae8138b7..80b0602da 100644
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
+++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
@@ -1,6 +1,7 @@
 <gf-dialog-header
   mat-dialog-title
   [deviceType]="data.deviceType"
+  [symbolUrl]="data.symbolUrl"
   [title]="data.title"
   (closeButtonClicked)="onClose()"
 ></gf-dialog-header>
diff --git a/apps/client/src/app/components/position/position.component.html b/apps/client/src/app/components/position/position.component.html
index 75b33610c..a366261f6 100644
--- a/apps/client/src/app/components/position/position.component.html
+++ b/apps/client/src/app/components/position/position.component.html
@@ -35,11 +35,6 @@
         <div class="h6 m-0 text-truncate">{{ position?.name }}</div>
         <div class="d-flex">
           <span>{{ position?.symbol | gfSymbol }}</span>
-          <gf-symbol-icon
-            *ngIf="position?.url"
-            class="ml-1"
-            [url]="position?.url"
-          ></gf-symbol-icon>
           <span *ngIf="position?.exchange" class="ml-2 text-muted"
             >({{ position.exchange }})</span
           >
diff --git a/apps/client/src/app/components/position/position.component.ts b/apps/client/src/app/components/position/position.component.ts
index 4c18c9462..ab9ef93ff 100644
--- a/apps/client/src/app/components/position/position.component.ts
+++ b/apps/client/src/app/components/position/position.component.ts
@@ -51,6 +51,11 @@ export class PositionComponent implements OnDestroy, OnInit {
 
   public ngOnInit() {}
 
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
   private openDialog(): void {
     const dialogRef = this.dialog.open(PositionDetailDialog, {
       autoFocus: false,
@@ -59,6 +64,7 @@ export class PositionComponent implements OnDestroy, OnInit {
         deviceType: this.deviceType,
         locale: this.locale,
         symbol: this.position?.symbol,
+        symbolUrl: this.position?.url,
         title: this.position?.name
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
@@ -69,9 +75,4 @@ export class PositionComponent implements OnDestroy, OnInit {
       this.router.navigate(['.'], { relativeTo: this.route });
     });
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }
diff --git a/apps/client/src/app/components/position/position.module.ts b/apps/client/src/app/components/position/position.module.ts
index 07f9a1743..98255976b 100644
--- a/apps/client/src/app/components/position/position.module.ts
+++ b/apps/client/src/app/components/position/position.module.ts
@@ -5,7 +5,6 @@ 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';
 import { GfTrendIndicatorModule } from '../trend-indicator/trend-indicator.module';
 import { GfValueModule } from '../value/value.module';
 import { GfPositionDetailDialogModule } from './position-detail-dialog/position-detail-dialog.module';
@@ -17,7 +16,6 @@ import { PositionComponent } from './position.component';
   imports: [
     CommonModule,
     GfPositionDetailDialogModule,
-    GfSymbolIconModule,
     GfSymbolModule,
     GfTrendIndicatorModule,
     GfValueModule,
diff --git a/apps/client/src/app/components/symbol-icon/symbol-icon.component.html b/apps/client/src/app/components/symbol-icon/symbol-icon.component.html
index 616364a09..a544ddef6 100644
--- 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,5 +1,6 @@
 <img
   *ngIf="url"
   src="https://www.google.com/s2/favicons?domain={{ url }}&sz=64"
+  [ngClass]="{ large: size === 'large' }"
   [title]="tooltip ? tooltip : ''"
 />
diff --git a/apps/client/src/app/components/symbol-icon/symbol-icon.component.scss b/apps/client/src/app/components/symbol-icon/symbol-icon.component.scss
index 0207cef98..3f3067d74 100644
--- a/apps/client/src/app/components/symbol-icon/symbol-icon.component.scss
+++ b/apps/client/src/app/components/symbol-icon/symbol-icon.component.scss
@@ -5,5 +5,10 @@
     border-radius: 0.2rem;
     height: 0.8rem;
     width: 0.8rem;
+
+    &.large {
+      height: 1.4rem;
+      width: 1.4rem;
+    }
   }
 }
diff --git a/apps/client/src/app/components/symbol-icon/symbol-icon.component.ts b/apps/client/src/app/components/symbol-icon/symbol-icon.component.ts
index e5431d220..4a2817329 100644
--- a/apps/client/src/app/components/symbol-icon/symbol-icon.component.ts
+++ b/apps/client/src/app/components/symbol-icon/symbol-icon.component.ts
@@ -12,6 +12,7 @@ import {
   styleUrls: ['./symbol-icon.component.scss']
 })
 export class SymbolIconComponent implements OnInit {
+  @Input() size: 'large';
   @Input() tooltip: string;
   @Input() url: string;