Integrate filters in holding detail dialog

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -89,7 +89,6 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
 
   public activityForm: FormGroup;
   public accounts: Account[];
-  public activities: Activity[];
   public assetClass: string;
   public assetSubClass: string;
   public averagePrice: number;
@@ -174,6 +173,22 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
           .subscribe();
       });
 
+    this.dataService
+      .fetchActivities({
+        filters: [
+          { id: this.data.dataSource, type: 'DATA_SOURCE' },
+          { id: this.data.symbol, type: 'SYMBOL' }
+        ],
+        sortColumn: this.sortColumn,
+        sortDirection: this.sortDirection
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ activities }) => {
+        this.dataSource = new MatTableDataSource(activities);
+
+        this.changeDetectorRef.markForCheck();
+      });
+
     this.dataService
       .fetchHoldingDetail({
         dataSource: this.data.dataSource,
@@ -198,7 +213,6 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
           netPerformancePercent,
           netPerformancePercentWithCurrencyEffect,
           netPerformanceWithCurrencyEffect,
-          orders,
           quantity,
           SymbolProfile,
           tags,
@@ -206,12 +220,10 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
           value
         }) => {
           this.accounts = accounts;
-          this.activities = orders;
           this.averagePrice = averagePrice;
           this.benchmarkDataItems = [];
           this.countries = {};
           this.dataProviderInfo = dataProviderInfo;
-          this.dataSource = new MatTableDataSource(orders.reverse());
           this.dividendInBaseCurrency = dividendInBaseCurrency;
 
           if (

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

@@ -311,7 +311,7 @@
       animationDuration="0"
       class="mb-5"
       [mat-stretch-tabs]="false"
-      [ngClass]="{ 'd-none': !activities?.length }"
+      [ngClass]="{ 'd-none': !dataSource?.data.length }"
     >
       <mat-tab>
         <ng-template mat-tab-label>
@@ -422,7 +422,8 @@
     }
 
     @if (
-      activities?.length > 0 && data.hasPermissionToReportDataGlitch === true
+      dataSource?.data.length > 0 &&
+      data.hasPermissionToReportDataGlitch === true
     ) {
       <div class="row">
         <div class="col">

apps/client/src/app/services/data.service.ts

@@ -72,14 +72,24 @@ export class DataService {
         ACCOUNT: filtersByAccount,
         ASSET_CLASS: filtersByAssetClass,
         ASSET_SUB_CLASS: filtersByAssetSubClass,
+        DATA_SOURCE: [filterByDataSource],
         HOLDING_TYPE: filtersByHoldingType,
         PRESET_ID: filtersByPresetId,
         SEARCH_QUERY: filtersBySearchQuery,
+        SYMBOL: [filterBySymbol],
         TAG: filtersByTag
       } = groupBy(filters, (filter) => {
         return filter.type;
       });
 
+      if (filterByDataSource) {
+        params = params.append('dataSource', filterByDataSource.id);
+      }
+
+      if (filterBySymbol) {
+        params = params.append('symbol', filterBySymbol.id);
+      }
+
       if (filtersByAccount) {
         params = params.append(
           'accounts',