Feature/add allocations percentage to accounts table component (#4720)

* Add allocations percentage to accounts table component

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the allocation column to the accounts table component of the holding detail dialog
+
 ### Changed
 
 - Restructured the response of the portfolio report endpoint (_X-ray_)

apps/api/src/app/portfolio/portfolio.service.ts

@@ -191,6 +191,7 @@ export class PortfolioService {
         ...account,
         transactionCount,
         valueInBaseCurrency,
+        allocationInPercentage: null, // TODO
         balanceInBaseCurrency: this.exchangeRateDataService.toCurrency(
           account.balance,
           account.currency,

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

@@ -231,6 +231,35 @@
       </td>
     </ng-container>
 
+    <ng-container matColumnDef="allocation">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell justify-content-end px-1"
+        mat-header-cell
+        mat-sort-header
+      >
+        <ng-container i18n>Allocation</ng-container>
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1 text-right"
+        mat-cell
+      >
+        <gf-value
+          class="d-inline-block justify-content-end"
+          [isPercent]="true"
+          [locale]="locale"
+          [precision]="2"
+          [value]="element.allocationInPercentage"
+        />
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-footer-cell
+      ></td>
+    </ng-container>
+
     <ng-container matColumnDef="comment">
       <th
         *matHeaderCellDef
@@ -291,7 +320,11 @@
           </button>
         </mat-menu>
       </td>
-      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-footer-cell
+      ></td>
     </ng-container>
 
     <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>

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

@@ -60,6 +60,7 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @Input() hasPermissionToOpenDetails = true;
   @Input() locale = getLocale();
   @Input() showActions: boolean;
+  @Input() showAllocationInPercentage: boolean;
   @Input() showBalance = true;
   @Input() showFooter = true;
   @Input() showTransactions = true;
@@ -117,6 +118,10 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
       this.displayedColumns.push('valueInBaseCurrency');
     }
 
+    if (this.showAllocationInPercentage) {
+      this.displayedColumns.push('allocation');
+    }
+
     this.displayedColumns.push('comment');
 
     if (this.showActions) {

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -375,6 +375,7 @@
           [deviceType]="data.deviceType"
           [hasPermissionToOpenDetails]="false"
           [locale]="user?.settings?.locale"
+          [showAllocationInPercentage]="user?.settings?.isExperimentalFeatures"
           [showBalance]="false"
           [showFooter]="false"
           [showTransactions]="false"

libs/common/src/lib/types/account-with-value.type.ts

@@ -1,6 +1,7 @@
 import { Account as AccountModel, Platform } from '@prisma/client';
 
 export type AccountWithValue = AccountModel & {
+  allocationInPercentage: number;
   balanceInBaseCurrency: number;
   platform?: Platform;
   transactionCount: number;