From b4de06fcf0780a24e3e51655642f917538aa2e94 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 11 Nov 2023 17:27:29 +0100
Subject: [PATCH] Feature/add platform icons to account selectors (#2633)

* Add platform icons to account selectors

* Update changelog
---
 CHANGELOG.md                                  |  5 ++++
 apps/api/src/app/user/user.service.ts         |  8 ++++--
 .../symbol-icon/symbol-icon.component.scss    |  3 +-
 .../transfer-balance-dialog.html              | 28 +++++++++++++++----
 .../transfer-balance-dialog.module.ts         |  2 ++
 .../create-or-update-activity-dialog.html     | 15 ++++++++--
 ...create-or-update-activity-dialog.module.ts |  2 ++
 7 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8cbe1d4b3..2ac4272fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the platform icon to the account selectors in the cash balance transfer from one to another account
+- Added the platform icon to the account selector of the create or edit activity dialog
+
 ### Changed
 
 - Harmonized the name column in the historical market data table of the admin control panel
diff --git a/apps/api/src/app/user/user.service.ts b/apps/api/src/app/user/user.service.ts
index f9f39b185..093587996 100644
--- a/apps/api/src/app/user/user.service.ts
+++ b/apps/api/src/app/user/user.service.ts
@@ -127,7 +127,9 @@ export class UserService {
       updatedAt
     } = await this.prismaService.user.findUnique({
       include: {
-        Account: true,
+        Account: {
+          include: { Platform: true }
+        },
         Analytics: true,
         Settings: true,
         Subscription: true
@@ -250,8 +252,8 @@ export class UserService {
       currentPermissions.push(permissions.impersonateAllUsers);
     }
 
-    user.Account = sortBy(user.Account, (account) => {
-      return account.name;
+    user.Account = sortBy(user.Account, ({ name }) => {
+      return name.toLowerCase();
     });
     user.permissions = currentPermissions.sort();
 
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 3f3067d74..23bc7a487 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
@@ -1,5 +1,6 @@
 :host {
-  display: block;
+  align-items: center;
+  display: flex;
 
   img {
     border-radius: 0.2rem;
diff --git 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
index 9cce7b87a..b18ba9984 100644
--- 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
@@ -10,9 +10,17 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>From</mat-label>
         <mat-select formControlName="fromAccount">
-          <mat-option *ngFor="let account of accounts" [value]="account.id"
-            >{{ account.name }}</mat-option
-          >
+          <mat-option *ngFor="let account of accounts" [value]="account.id">
+            <div class="d-flex">
+              <gf-symbol-icon
+                *ngIf="account.Platform?.url"
+                class="mr-1"
+                [tooltip]="account.Platform?.name"
+                [url]="account.Platform?.url"
+              ></gf-symbol-icon
+              ><span>{{ account.name }}</span>
+            </div>
+          </mat-option>
         </mat-select>
       </mat-form-field>
     </div>
@@ -20,9 +28,17 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>To</mat-label>
         <mat-select formControlName="toAccount">
-          <mat-option *ngFor="let account of accounts" [value]="account.id"
-            >{{ account.name }}</mat-option
-          >
+          <mat-option *ngFor="let account of accounts" [value]="account.id">
+            <div class="d-flex">
+              <gf-symbol-icon
+                *ngIf="account.Platform?.url"
+                class="mr-1"
+                [tooltip]="account.Platform?.name"
+                [url]="account.Platform?.url"
+              ></gf-symbol-icon
+              ><span>{{ account.name }}</span>
+            </div>
+          </mat-option>
         </mat-select>
       </mat-form-field>
     </div>
diff --git 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
index 5a56b5810..ad559e28c 100644
--- 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
@@ -6,6 +6,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 
 import { TransferBalanceDialog } from './transfer-balance-dialog.component';
 
@@ -13,6 +14,7 @@ import { TransferBalanceDialog } from './transfer-balance-dialog.component';
   declarations: [TransferBalanceDialog],
   imports: [
     CommonModule,
+    GfSymbolIconModule,
     MatButtonModule,
     MatDialogModule,
     MatFormFieldModule,
diff --git 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
index c28f87d93..5d5133881 100644
--- 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
@@ -72,9 +72,20 @@
             *ngIf="!activityForm.controls['accountId'].hasValidator(Validators.required)"
             [value]="null"
           ></mat-option>
-          <mat-option *ngFor="let account of data.accounts" [value]="account.id"
-            >{{ account.name }}</mat-option
+          <mat-option
+            *ngFor="let account of data.accounts"
+            [value]="account.id"
           >
+            <div class="d-flex">
+              <gf-symbol-icon
+                *ngIf="account.Platform?.url"
+                class="mr-1"
+                [tooltip]="account.Platform?.name"
+                [url]="account.Platform?.url"
+              ></gf-symbol-icon
+              ><span>{{ account.name }}</span>
+            </div>
+          </mat-option>
         </mat-select>
       </mat-form-field>
     </div>
diff --git 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
index 6ab603504..316011d42 100644
--- 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
@@ -10,6 +10,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { GfSymbolAutocompleteModule } from '@ghostfolio/ui/symbol-autocomplete/symbol-autocomplete.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -21,6 +22,7 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
     CommonModule,
     FormsModule,
     GfSymbolAutocompleteModule,
+    GfSymbolIconModule,
     GfValueModule,
     MatAutocompleteModule,
     MatButtonModule,