Add asset sub class filter

apps/api/src/app/admin/admin.controller.ts

@@ -8,7 +8,8 @@ import {
 import {
   AdminData,
   AdminMarketData,
-  AdminMarketDataDetails
+  AdminMarketDataDetails,
+  Filter
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
@@ -22,6 +23,7 @@ import {
   Param,
   Post,
   Put,
+  Query,
   UseGuards
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
@@ -226,7 +228,9 @@ export class AdminController {
 
   @Get('market-data')
   @UseGuards(AuthGuard('jwt'))
-  public async getMarketData(): Promise<AdminMarketData> {
+  public async getMarketData(
+    @Query('assetSubClasses') filterByAssetSubClasses?: string
+  ): Promise<AdminMarketData> {
     if (
       !hasPermission(
         this.request.user.permissions,
@@ -239,7 +243,18 @@ export class AdminController {
       );
     }
 
-    return this.adminService.getMarketData();
+    const assetSubClasses = filterByAssetSubClasses?.split(',') ?? [];
+
+    const filters: Filter[] = [
+      ...assetSubClasses.map((assetSubClass) => {
+        return <Filter>{
+          id: assetSubClass,
+          type: 'ASSET_SUB_CLASS'
+        };
+      })
+    ];
+
+    return this.adminService.getMarketData(filters);
   }
 
   @Get('market-data/:dataSource/:symbol')

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

@@ -11,11 +11,13 @@ import {
   AdminMarketData,
   AdminMarketDataDetails,
   AdminMarketDataItem,
+  Filter,
   UniqueAsset
 } from '@ghostfolio/common/interfaces';
 import { Injectable } from '@nestjs/common';
-import { Property } from '@prisma/client';
+import { AssetSubClass, Prisma, Property } from '@prisma/client';
 import { differenceInDays } from 'date-fns';
+import { groupBy } from 'lodash';
 
 @Injectable()
 export class AdminService {
@@ -63,14 +65,27 @@ export class AdminService {
     };
   }
 
-  public async getMarketData(): Promise<AdminMarketData> {
+  public async getMarketData(filters?: Filter[]): Promise<AdminMarketData> {
+    const where: Prisma.SymbolProfileWhereInput = {};
+
+    const { ASSET_SUB_CLASS: filtersByAssetSubClass } = groupBy(
+      filters,
+      (filter) => {
+        return filter.type;
+      }
+    );
+
     const marketData = await this.prismaService.marketData.groupBy({
       _count: true,
       by: ['dataSource', 'symbol']
     });
 
-    const currencyPairsToGather: AdminMarketDataItem[] =
+    let currencyPairsToGather: AdminMarketDataItem[] = [];
-      this.exchangeRateDataService
+
+    if (filtersByAssetSubClass) {
+      where.assetSubClass = AssetSubClass[filtersByAssetSubClass[0].id];
+    } else {
+      currencyPairsToGather = this.exchangeRateDataService
         .getCurrencyPairs()
         .map(({ dataSource, symbol }) => {
           const marketDataItemCount =
@@ -89,9 +104,11 @@ export class AdminService {
             sectorsCount: 0
           };
         });
+    }
 
     const symbolProfilesToGather: AdminMarketDataItem[] = (
       await this.prismaService.symbolProfile.findMany({
+        where,
         orderBy: [{ symbol: 'asc' }],
         select: {
           _count: {
@@ -100,7 +117,6 @@ export class AdminService {
           assetClass: true,
           assetSubClass: true,
           countries: true,
-          sectors: true,
           dataSource: true,
           Order: {
             orderBy: [{ date: 'asc' }],
@@ -108,6 +124,7 @@ export class AdminService {
             take: 1
           },
           scraperConfiguration: true,
+          sectors: true,
           symbol: true
         }
       })

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -14,13 +14,14 @@ import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { DATE_FORMAT, getDateFormatString } from '@ghostfolio/common/helper';
-import { UniqueAsset, User } from '@ghostfolio/common/interfaces';
+import { Filter, UniqueAsset, User } from '@ghostfolio/common/interfaces';
 import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market-data.interface';
-import { DataSource } from '@prisma/client';
+import { AssetSubClass, DataSource } from '@prisma/client';
 import { format, parseISO } from 'date-fns';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
+
 import { AssetProfileDialog } from './asset-profile-dialog/asset-profile-dialog.component';
 import { AssetProfileDialogParams } from './asset-profile-dialog/interfaces/interfaces';
 
@@ -33,9 +34,27 @@ import { AssetProfileDialogParams } from './asset-profile-dialog/interfaces/inte
 export class AdminMarketDataComponent implements OnDestroy, OnInit {
   @ViewChild(MatSort) sort: MatSort;
 
+  public activeFilters: Filter[] = [];
+  public allFilters: Filter[] = [
+    AssetSubClass.BOND,
+    AssetSubClass.COMMODITY,
+    AssetSubClass.CRYPTOCURRENCY,
+    AssetSubClass.ETF,
+    AssetSubClass.MUTUALFUND,
+    AssetSubClass.PRECIOUS_METAL,
+    AssetSubClass.PRIVATE_EQUITY,
+    AssetSubClass.STOCK
+  ].map((id) => {
+    return {
+      id,
+      label: id,
+      type: 'ASSET_SUB_CLASS'
+    };
+  });
   public currentDataSource: DataSource;
   public currentSymbol: string;
-  public dataSource: MatTableDataSource<any> = new MatTableDataSource();
+  public dataSource: MatTableDataSource<AdminMarketDataItem> =
+    new MatTableDataSource();
   public defaultDateFormat: string;
   public deviceType: string;
   public displayedColumns = [
@@ -50,7 +69,9 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
     'sectorsCount',
     'actions'
   ];
-  public marketData: AdminMarketDataItem[] = [];
+  public filters$ = new Subject<Filter[]>();
+  public isLoading = false;
+  public placeholder = '';
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -98,7 +119,29 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 
-    this.fetchAdminMarketData();
+    this.filters$
+      .pipe(
+        distinctUntilChanged(),
+        switchMap((filters) => {
+          this.isLoading = true;
+          this.activeFilters = filters;
+          this.placeholder =
+            this.activeFilters.length <= 0 ? $localize`Filter by...` : '';
+
+          return this.dataService.fetchAdminMarketData({
+            filters: this.activeFilters
+          });
+        }),
+        takeUntil(this.unsubscribeSubject)
+      )
+      .subscribe(({ marketData }) => {
+        this.dataSource = new MatTableDataSource(marketData);
+        this.dataSource.sort = this.sort;
+
+        this.isLoading = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
   }
 
   public onDeleteProfileData({ dataSource, symbol }: UniqueAsset) {
@@ -142,19 +185,6 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private fetchAdminMarketData() {
-    this.dataService
-      .fetchAdminMarketData()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ marketData }) => {
-        this.dataSource = new MatTableDataSource(marketData);
-
-        this.dataSource.sort = this.sort;
-
-        this.changeDetectorRef.markForCheck();
-      });
-  }
-
   private openAssetProfileDialog({
     dataSource,
     dateOfFirstActivity,

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -1,4 +1,14 @@
 <div class="container">
+  <div class="row">
+    <div class="col">
+      <gf-activities-filter
+        [allFilters]="allFilters"
+        [isLoading]="isLoading"
+        [placeholder]="placeholder"
+        (valueChanged)="filters$.next($event)"
+      ></gf-activities-filter>
+    </div>
+  </div>
   <div class="row">
     <div class="col">
       <table

apps/client/src/app/components/admin-market-data/admin-market-data.module.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
+import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 
 import { AdminMarketDataComponent } from './admin-market-data.component';
 import { GfAssetProfileDialogModule } from './asset-profile-dialog/assset-profile-dialog.module';
@@ -12,6 +13,7 @@ import { GfAssetProfileDialogModule } from './asset-profile-dialog/assset-profil
   declarations: [AdminMarketDataComponent],
   imports: [
     CommonModule,
+    GfActivitiesFilterModule,
     GfAssetProfileDialogModule,
     MatButtonModule,
     MatMenuModule,

apps/client/src/app/components/admin-market-data/asset-profile-dialog/assset-profile-dialog.module.ts

@@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
+import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
-import { GfAdminMarketDataDetailModule } from '../../admin-market-data-detail/admin-market-data-detail.module';
 
 import { AssetProfileDialog } from './asset-profile-dialog.component';
 

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

@@ -133,8 +133,32 @@ export class DataService {
     return this.http.get<AdminData>('/api/v1/admin');
   }
 
-  public fetchAdminMarketData() {
+  public fetchAdminMarketData({ filters }: { filters?: Filter[] }) {
-    return this.http.get<AdminMarketData>('/api/v1/admin/market-data');
+    let params = new HttpParams();
+
+    if (filters?.length > 0) {
+      const { ASSET_SUB_CLASS: filtersByAssetSubClass } = groupBy(
+        filters,
+        (filter) => {
+          return filter.type;
+        }
+      );
+
+      if (filtersByAssetSubClass) {
+        params = params.append(
+          'assetSubClasses',
+          filtersByAssetSubClass
+            .map(({ id }) => {
+              return id;
+            })
+            .join(',')
+        );
+      }
+    }
+
+    return this.http.get<AdminMarketData>('/api/v1/admin/market-data', {
+      params
+    });
   }
 
   public deleteAccess(aId: string) {

libs/common/src/lib/interfaces/filter.interface.ts

@@ -1,5 +1,5 @@
 export interface Filter {
   id: string;
   label?: string;
-  type: 'ACCOUNT' | 'ASSET_CLASS' | 'SYMBOL' | 'TAG';
+  type: 'ACCOUNT' | 'ASSET_CLASS' | 'ASSET_SUB_CLASS' | 'SYMBOL' | 'TAG';
 }