Add quantity column

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -48,6 +48,7 @@
         <gf-holdings-table
           [baseCurrency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
+          [hasPermissionToShowQuantities]="false"
           [holdings]="holdings"
           [locale]="user?.settings?.locale"
           (holdingClicked)="onHoldingClicked($event)"

apps/client/src/app/pages/public/public-page.html

@@ -201,6 +201,7 @@
         [data]="holdings"
         [deviceType]="deviceType"
         [hasPermissionToOpenDetails]="false"
+        [hasPermissionToShowQuantities]="false"
         [hasPermissionToShowValues]="false"
         [pageSize]="7"
       />

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -64,6 +64,30 @@
       </td>
     </ng-container>
 
+    <ng-container matColumnDef="quantity">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell justify-content-end px-1"
+        mat-header-cell
+        mat-sort-header
+      >
+        <ng-container i18n>Quantity</ng-container>
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1"
+        mat-cell
+      >
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : element.quantity"
+          />
+        </div>
+      </td>
+    </ng-container>
+
     <ng-container matColumnDef="valueInBaseCurrency">
       <th
         *matHeaderCellDef

libs/ui/src/lib/holdings-table/holdings-table.component.ts

@@ -52,6 +52,7 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() hasPermissionToOpenDetails = true;
+  @Input() hasPermissionToShowQuantities = true;
   @Input() hasPermissionToShowValues = true;
   @Input() holdings: PortfolioPosition[];
   @Input() locale = getLocale();
@@ -73,6 +74,10 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
   public ngOnChanges() {
     this.displayedColumns = ['icon', 'nameWithSymbol', 'dateOfFirstActivity'];
 
+    if (this.hasPermissionToShowQuantities) {
+      this.displayedColumns.push('quantity');
+    }
+
     if (this.hasPermissionToShowValues) {
       this.displayedColumns.push('valueInBaseCurrency');
     }