From 846bd352f5736b6036bd3ac5893d57f38e393b6c Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 17 Mar 2024 10:02:44 +0100
Subject: [PATCH] Add symbol and ISIN

---
 .../position-detail-dialog.html               | 121 ++++++++++--------
 1 file changed, 70 insertions(+), 51 deletions(-)

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 f87d11e04..3a8694c83 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
@@ -171,11 +171,13 @@
           size="medium"
           [locale]="data.locale"
           [value]="transactionCount"
-          ><ng-container *ngIf="transactionCount === 1">Activity</ng-container
-          ><ng-container *ngIf="transactionCount !== 1"
-            >Activities</ng-container
-          ></gf-value
         >
+          @if (transactionCount === 1) {
+            <ng-container i18n>Activity</ng-container>
+          } @else {
+            <ng-container i18n>Activities</ng-container>
+          }
+        </gf-value>
       </div>
       <div class="col-6 mb-3">
         <gf-value i18n size="medium" [hidden]="!assetClass" [value]="assetClass"
@@ -191,17 +193,15 @@
           >Asset Sub Class</gf-value
         >
       </div>
-      <ng-container
-        *ngIf="
-          SymbolProfile?.countries?.length > 0 ||
-          SymbolProfile?.sectors?.length > 0
-        "
-      >
+      @if (
+        SymbolProfile?.countries?.length > 0 ||
+        SymbolProfile?.sectors?.length > 0
+      ) {
         @if (
           SymbolProfile?.countries?.length === 1 &&
           SymbolProfile?.sectors?.length === 1
         ) {
-          <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
+          <div class="col-6 mb-3">
             <gf-value
               i18n
               size="medium"
@@ -210,18 +210,17 @@
               >Sector</gf-value
             >
           </div>
-          <div
-            *ngIf="SymbolProfile?.countries?.length === 1"
-            class="col-6 mb-3"
-          >
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="SymbolProfile.countries[0].name"
-              >Country</gf-value
-            >
-          </div>
+          @if (SymbolProfile?.countries?.length === 1) {
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [locale]="data.locale"
+                [value]="SymbolProfile.countries[0].name"
+                >Country</gf-value
+              >
+            </div>
+          }
         } @else {
           <div class="col-md-6 mb-3">
             <div class="h5" i18n>Sectors</div>
@@ -248,13 +247,32 @@
             />
           </div>
         }
-      </ng-container>
-      <div *ngIf="dataProviderInfo" class="col-md-12 mb-3 text-center">
-        <hr />
-        <gf-data-provider-credits [dataProviderInfos]="[dataProviderInfo]">
-        </gf-data-provider-credits>
-        <hr />
+      }
+      <div class="col-6 mb-3">
+        <gf-value
+          i18n
+          size="medium"
+          [hidden]="!SymbolProfile?.symbol"
+          [value]="SymbolProfile?.symbol"
+          >Symbol</gf-value
+        >
       </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          size="medium"
+          [hidden]="!SymbolProfile?.isin"
+          [value]="SymbolProfile?.isin"
+          >ISIN</gf-value
+        >
+      </div>
+
+      @if (dataProviderInfo) {
+        <div class="col-md-12 mb-3 text-center">
+          <hr />
+          <gf-data-provider-credits [dataProviderInfos]="[dataProviderInfo]" />
+          <hr />
+        </div>
+      }
     </div>
 
     <mat-tab-group
@@ -308,31 +326,32 @@
       </mat-tab>
     </mat-tab-group>
 
-    <div *ngIf="tags?.length > 0" class="row">
-      <div class="col">
-        <div class="h5" i18n>Tags</div>
-        <mat-chip-listbox>
-          <mat-chip-option *ngFor="let tag of tags" disabled>{{
-            tag.name
-          }}</mat-chip-option>
-        </mat-chip-listbox>
+    @if (tags?.length > 0) {
+      <div class="row">
+        <div class="col">
+          <div class="h5" i18n>Tags</div>
+          <mat-chip-listbox>
+            <mat-chip-option *ngFor="let tag of tags" disabled>{{
+              tag.name
+            }}</mat-chip-option>
+          </mat-chip-listbox>
+        </div>
       </div>
-    </div>
+    }
 
-    <div
-      *ngIf="
-        activities?.length > 0 && data.hasPermissionToReportDataGlitch === true
-      "
-      class="row"
-    >
-      <div class="col">
-        <hr />
-        <a color="warn" mat-stroked-button [href]="reportDataGlitchMail"
-          ><ion-icon class="mr-1" name="flag-outline"></ion-icon
-          ><span i18n>Report Data Glitch</span></a
-        >
+    @if (
+      activities?.length > 0 && data.hasPermissionToReportDataGlitch === true
+    ) {
+      <div class="row">
+        <div class="col">
+          <hr />
+          <a color="warn" mat-stroked-button [href]="reportDataGlitchMail"
+            ><ion-icon class="mr-1" name="flag-outline"></ion-icon
+            ><span i18n>Report Data Glitch</span></a
+          >
+        </div>
       </div>
-    </div>
+    }
   </div>
 </div>