Feature/add type filter to activities table component (#6622)

* Add type filter

* Update changelog

---------

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

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Added support for filtering by activity type on the activities page (experimental)
+
 ## 2.252.0 - 2026-03-02
 
 ### Added

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

@@ -37,7 +37,7 @@ import {
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
-import { Order, Prisma } from '@prisma/client';
+import { Order, Prisma, Type as ActivityType } from '@prisma/client';
 import { parseISO } from 'date-fns';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
@@ -112,6 +112,7 @@ export class ActivitiesController {
   public async getAllActivities(
     @Headers(HEADER_KEY_IMPERSONATION.toLowerCase()) impersonationId: string,
     @Query('accounts') filterByAccounts?: string,
+    @Query('activityTypes') filterByTypes?: string,
     @Query('assetClasses') filterByAssetClasses?: string,
     @Query('dataSource') filterByDataSource?: string,
     @Query('range') dateRange?: DateRange,
@@ -139,6 +140,9 @@ export class ActivitiesController {
 
     const impersonationUserId =
       await this.impersonationService.validateImpersonationId(impersonationId);
+
+    const types = (filterByTypes?.split(',') as ActivityType[]) ?? [];
+
     const userCurrency = this.request.user.settings.settings.baseCurrency;
 
     const { activities, count } = await this.activitiesService.getActivities({
@@ -147,6 +151,7 @@ export class ActivitiesController {
       sortColumn,
       sortDirection,
       startDate,
+      types,
       userCurrency,
       includeDrafts: true,
       skip: isNaN(skip) ? undefined : skip,

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

@@ -629,7 +629,7 @@ export class ActivitiesService {
       orderBy = [{ [sortColumn]: sortDirection }];
     }
 
-    if (types) {
+    if (types?.length > 0) {
       where.type = { in: types };
     }
 

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

@@ -15,6 +15,7 @@ import {
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
+import { Type as ActivityType } from '@prisma/client';
 
 import { ExportService } from './export.service';
 
@@ -33,12 +34,15 @@ export class ExportController {
   public async export(
     @Query('accounts') filterByAccounts?: string,
     @Query('activityIds') filterByActivityIds?: string,
+    @Query('activityTypes') filterByTypes?: string,
     @Query('assetClasses') filterByAssetClasses?: string,
     @Query('dataSource') filterByDataSource?: string,
     @Query('symbol') filterBySymbol?: string,
     @Query('tags') filterByTags?: string
   ): Promise<ExportResponse> {
     const activityIds = filterByActivityIds?.split(',') ?? [];
+    const activityTypes = (filterByTypes?.split(',') as ActivityType[]) ?? [];
+
     const filters = this.apiService.buildFiltersFromQueryParams({
       filterByAccounts,
       filterByAssetClasses,
@@ -49,6 +53,7 @@ export class ExportController {
 
     return this.exportService.export({
       activityIds,
+      activityTypes,
       filters,
       userId: this.request.user.id,
       userSettings: this.request.user.settings.settings

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

@@ -10,7 +10,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 
 import { Injectable } from '@nestjs/common';
-import { Platform, Prisma } from '@prisma/client';
+import { Platform, Prisma, Type as ActivityType } from '@prisma/client';
 import { groupBy, uniqBy } from 'lodash';
 
 @Injectable()
@@ -24,11 +24,13 @@ export class ExportService {
 
   public async export({
     activityIds,
+    activityTypes,
     filters,
     userId,
     userSettings
   }: {
     activityIds?: string[];
+    activityTypes?: ActivityType[];
     filters?: Filter[];
     userId: string;
     userSettings: UserSettings;
@@ -44,6 +46,7 @@ export class ExportService {
       includeDrafts: true,
       sortColumn: 'date',
       sortDirection: 'asc',
+      types: activityTypes,
       userCurrency: userSettings?.baseCurrency,
       withExcludedAccountsAndActivities: true
     });

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -54,6 +54,7 @@ import { ImportActivitiesDialogParams } from './import-activities-dialog/interfa
   templateUrl: './activities-page.html'
 })
 export class GfActivitiesPageComponent implements OnInit {
+  public activityTypesFilter: string[] = [];
   public dataSource: MatTableDataSource<Activity>;
   public deviceType: string;
   public hasImpersonationId: boolean;
@@ -141,6 +142,9 @@ export class GfActivitiesPageComponent implements OnInit {
     this.dataService
       .fetchActivities({
         range,
+        activityTypes: this.activityTypesFilter.length
+          ? this.activityTypesFilter
+          : undefined,
         filters: this.userService.getFilters(),
         skip: this.pageIndex * this.pageSize,
         sortColumn: this.sortColumn,
@@ -217,7 +221,12 @@ export class GfActivitiesPageComponent implements OnInit {
     let fetchExportParams: any = { activityIds };
 
     if (!activityIds) {
-      fetchExportParams = { filters: this.userService.getFilters() };
+      fetchExportParams = {
+        activityTypes: this.activityTypesFilter.length
+          ? this.activityTypesFilter
+          : undefined,
+        filters: this.userService.getFilters()
+      };
     }
 
     this.dataService
@@ -318,6 +327,13 @@ export class GfActivitiesPageComponent implements OnInit {
     this.fetchActivities();
   }
 
+  public onTypesFilterChanged(aTypes: string[]) {
+    this.activityTypesFilter = aTypes;
+    this.pageIndex = 0;
+
+    this.fetchActivities();
+  }
+
   public onUpdateActivity(aActivity: Activity) {
     this.router.navigate([], {
       queryParams: { activityId: aActivity.id, editDialog: true }

apps/client/src/app/pages/portfolio/activities/activities-page.html

@@ -10,6 +10,7 @@
         [hasPermissionToCreateActivity]="hasPermissionToCreateActivity"
         [hasPermissionToDeleteActivity]="hasPermissionToDeleteActivity"
         [hasPermissionToExportActivities]="!hasImpersonationId"
+        [hasPermissionToFilterByType]="user?.settings?.isExperimentalFeatures"
         [locale]="user?.settings?.locale"
         [pageIndex]="pageIndex"
         [pageSize]="pageSize"
@@ -32,6 +33,7 @@
         (importDividends)="onImportDividends()"
         (pageChanged)="onChangePage($event)"
         (sortChanged)="onSortChanged($event)"
+        (typesFilterChanged)="onTypesFilterChanged($event)"
       />
     </div>
   </div>

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

@@ -1,77 +1,101 @@
-@if (hasPermissionToCreateActivity) {
+<div class="d-flex justify-content-end justify-content-lg-between">
-  <div class="d-flex justify-content-end">
+  <div class="d-none d-lg-flex">
-    <button
+    @if (hasPermissionToFilterByType) {
-      class="align-items-center d-flex"
+      <mat-form-field appearance="outline" class="without-hint">
-      mat-stroked-button
+        <mat-label i18n>Type</mat-label>
-      (click)="onImport()"
+        <mat-select multiple [formControl]="typesFilter">
-    >
+          @for (
-      <ion-icon class="mr-2" name="cloud-upload-outline" />
+            activityType of activityTypesTranslationMap | keyvalue;
-      <span><ng-container i18n>Import Activities</ng-container>...</span>
+            track activityType.key
-    </button>
+          ) {
-    @if (hasPermissionToExportActivities) {
+            <mat-option [value]="activityType.key">
-      <button
+              {{ activityType.value }}
-        class="mx-1 no-min-width px-2"
+            </mat-option>
-        mat-stroked-button
+          }
-        [matMenuTriggerFor]="activitiesMenu"
+        </mat-select>
-        (click)="$event.stopPropagation()"
+      </mat-form-field>
-      >
-        <ion-icon name="ellipsis-vertical" />
-      </button>
     }
-    <mat-menu #activitiesMenu="matMenu" class="no-max-width" xPosition="before">
+  </div>
+
+  @if (hasPermissionToCreateActivity) {
+    <div class="d-flex">
       <button
-        mat-menu-item
+        class="align-items-center d-flex"
-        [disabled]="dataSource()?.data.length === 0"
+        mat-stroked-button
-        (click)="onImportDividends()"
+        (click)="onImport()"
       >
-        <span class="align-items-center d-flex">
+        <ion-icon class="mr-2" name="cloud-upload-outline" />
-          <ion-icon class="mr-2" name="color-wand-outline" />
+        <span><ng-container i18n>Import Activities</ng-container>...</span>
-          <span><ng-container i18n>Import Dividends</ng-container>...</span>
-        </span>
       </button>
       @if (hasPermissionToExportActivities) {
         <button
-          class="align-items-center d-flex"
+          class="mx-1 no-min-width px-2"
+          mat-stroked-button
+          [matMenuTriggerFor]="activitiesMenu"
+          (click)="$event.stopPropagation()"
+        >
+          <ion-icon name="ellipsis-vertical" />
+        </button>
+      }
+      <mat-menu
+        #activitiesMenu="matMenu"
+        class="no-max-width"
+        xPosition="before"
+      >
+        <button
           mat-menu-item
           [disabled]="dataSource()?.data.length === 0"
-          (click)="onExport()"
+          (click)="onImportDividends()"
         >
           <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="cloud-download-outline" />
+            <ion-icon class="mr-2" name="color-wand-outline" />
-            <span i18n>Export Activities</span>
+            <span><ng-container i18n>Import Dividends</ng-container>...</span>
           </span>
         </button>
-      }
+        @if (hasPermissionToExportActivities) {
-      @if (hasPermissionToExportActivities) {
+          <button
+            class="align-items-center d-flex"
+            mat-menu-item
+            [disabled]="dataSource()?.data.length === 0"
+            (click)="onExport()"
+          >
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="cloud-download-outline" />
+              <span i18n>Export Activities</span>
+            </span>
+          </button>
+        }
+        @if (hasPermissionToExportActivities) {
+          <button
+            class="align-items-center d-flex"
+            mat-menu-item
+            [disabled]="!hasDrafts"
+            (click)="onExportDrafts()"
+          >
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="calendar-clear-outline" />
+              <span i18n>Export Drafts as ICS</span>
+            </span>
+          </button>
+        }
+        <hr class="m-0" />
         <button
           class="align-items-center d-flex"
           mat-menu-item
-          [disabled]="!hasDrafts"
+          [disabled]="
-          (click)="onExportDrafts()"
+            dataSource()?.data.length === 0 || !hasPermissionToDeleteActivity
+          "
+          (click)="onDeleteActivities()"
         >
           <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="calendar-clear-outline" />
+            <ion-icon class="mr-2" name="trash-outline" />
-            <span i18n>Export Drafts as ICS</span>
+            <span i18n>Delete Activities</span>
           </span>
         </button>
-      }
+      </mat-menu>
-      <hr class="m-0" />
+    </div>
-      <button
+  }
-        class="align-items-center d-flex"
+</div>
-        mat-menu-item
-        [disabled]="
-          dataSource()?.data.length === 0 || !hasPermissionToDeleteActivity
-        "
-        (click)="onDeleteActivities()"
-      >
-        <span class="align-items-center d-flex">
-          <ion-icon class="mr-2" name="trash-outline" />
-          <span i18n>Delete Activities</span>
-        </span>
-      </button>
-    </mat-menu>
-  </div>
-}
 
 <div class="overflow-x-auto">
   <table

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

@@ -10,6 +10,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { GfSymbolPipe } from '@ghostfolio/common/pipes';
 import { OrderWithAccount } from '@ghostfolio/common/types';
+import { translate } from '@ghostfolio/ui/i18n';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 
 import { SelectionModel } from '@angular/cdk/collections';
@@ -29,14 +30,17 @@ import {
   inject,
   input
 } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatMenuModule } from '@angular/material/menu';
 import {
   MatPaginator,
   MatPaginatorModule,
   PageEvent
 } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
 import {
   MatSort,
   MatSortModule,
@@ -46,6 +50,7 @@ import {
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { IonIcon } from '@ionic/angular/standalone';
+import { Type as ActivityType } from '@prisma/client';
 import { isUUID } from 'class-validator';
 import { addIcons } from 'ionicons';
 import {
@@ -82,12 +87,15 @@ import { GfValueComponent } from '../value/value.component';
     IonIcon,
     MatButtonModule,
     MatCheckboxModule,
+    MatFormFieldModule,
     MatMenuModule,
     MatPaginatorModule,
+    MatSelectModule,
     MatSortModule,
     MatTableModule,
     MatTooltipModule,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    ReactiveFormsModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-activities-table',
@@ -103,6 +111,7 @@ export class GfActivitiesTableComponent
   @Input() hasPermissionToCreateActivity: boolean;
   @Input() hasPermissionToDeleteActivity: boolean;
   @Input() hasPermissionToExportActivities: boolean;
+  @Input() hasPermissionToFilterByType: boolean;
   @Input() hasPermissionToOpenDetails = true;
   @Input() locale = getLocale();
   @Input() pageIndex: number;
@@ -125,14 +134,17 @@ export class GfActivitiesTableComponent
   @Output() pageChanged = new EventEmitter<PageEvent>();
   @Output() selectedActivities = new EventEmitter<Activity[]>();
   @Output() sortChanged = new EventEmitter<Sort>();
+  @Output() typesFilterChanged = new EventEmitter<string[]>();
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
+  public activityTypesTranslationMap = new Map<ActivityType, string>();
   public hasDrafts = false;
   public hasErrors = false;
   public isUUID = isUUID;
   public selectedRows = new SelectionModel<Activity>(true, []);
+  public typesFilter = new FormControl<string[]>([]);
 
   public readonly dataSource = input.required<
     MatTableDataSource<Activity> | undefined
@@ -189,6 +201,13 @@ export class GfActivitiesTableComponent
   private readonly unsubscribeSubject = new Subject<void>();
 
   public constructor() {
+    for (const type of Object.keys(ActivityType) as ActivityType[]) {
+      this.activityTypesTranslationMap.set(
+        ActivityType[type],
+        translate(ActivityType[type])
+      );
+    }
+
     addIcons({
       alertCircleOutline,
       calendarClearOutline,
@@ -214,6 +233,12 @@ export class GfActivitiesTableComponent
           this.selectedActivities.emit(selectedRows.source.selected);
         });
     }
+
+    this.typesFilter.valueChanges
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((types) => {
+        this.typesFilterChanged.emit(types ?? []);
+      });
   }
 
   public ngAfterViewInit() {

libs/ui/src/lib/services/data.service.ts

@@ -209,6 +209,7 @@ export class DataService {
   }
 
   public fetchActivities({
+    activityTypes,
     filters,
     range,
     skip,
@@ -216,6 +217,7 @@ export class DataService {
     sortDirection,
     take
   }: {
+    activityTypes?: string[];
     filters?: Filter[];
     range?: DateRange;
     skip?: number;
@@ -225,6 +227,10 @@ export class DataService {
   }): Observable<ActivitiesResponse> {
     let params = this.buildFiltersAsQueryParams({ filters });
 
+    if (activityTypes?.length) {
+      params = params.append('activityTypes', activityTypes.join(','));
+    }
+
     if (range) {
       params = params.append('range', range);
     }
@@ -411,9 +417,11 @@ export class DataService {
 
   public fetchExport({
     activityIds,
+    activityTypes,
     filters
   }: {
     activityIds?: string[];
+    activityTypes?: string[];
     filters?: Filter[];
   } = {}) {
     let params = this.buildFiltersAsQueryParams({ filters });
@@ -422,6 +430,10 @@ export class DataService {
       params = params.append('activityIds', activityIds.join(','));
     }
 
+    if (activityTypes?.length) {
+      params = params.append('activityTypes', activityTypes.join(','));
+    }
+
     return this.http.get<ExportResponse>('/api/v1/export', {
       params
     });

prisma/migrations/20260321200654_added_index_for_type_to_order/migration.sql

@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "Order_type_idx" ON "Order"("type");

prisma/schema.prisma

@@ -158,6 +158,7 @@ model Order {
   @@index([accountId])
   @@index([date])
   @@index([isDraft])
+  @@index([type])
   @@index([userId])
 }