Merge branch 'ghostfolio:main' into refactor/export-to-export-response

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Extracted the portfolio filter form of the assistant to a reusable component
 - Formatted the holdings table in the _Copy AI prompt to clipboard for analysis_ action on the analysis page (experimental)
 - Formatted the holdings table in the _Copy portfolio data to clipboard for AI prompt_ action on the analysis page (experimental)
 - Improved the language localization for German (`de`)

apps/api/src/models/interfaces/rule-settings.interface.ts

@@ -1,3 +1,4 @@
 export interface RuleSettings {
   isActive: boolean;
+  locale: string;
 }

apps/api/src/models/rules/account-cluster-risk/current-investment.ts

@@ -121,9 +121,14 @@ export class AccountClusterRiskCurrentInvestment extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.5
     };

apps/api/src/models/rules/account-cluster-risk/single-account.ts

@@ -72,8 +72,9 @@ export class AccountClusterRiskSingleAccount extends Rule<RuleSettings> {
     });
   }
 
-  public getSettings({ xRayRules }: UserSettings): RuleSettings {
+  public getSettings({ locale, xRayRules }: UserSettings): RuleSettings {
     return {
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true
     };
   }

apps/api/src/models/rules/asset-class-cluster-risk/equity.ts

@@ -109,9 +109,14 @@ export class AssetClassClusterRiskEquity extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.82,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0.78

apps/api/src/models/rules/asset-class-cluster-risk/fixed-income.ts

@@ -109,9 +109,14 @@ export class AssetClassClusterRiskFixedIncome extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.22,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0.18

apps/api/src/models/rules/currency-cluster-risk/base-currency-current-investment.ts

@@ -97,9 +97,14 @@ export class CurrencyClusterRiskBaseCurrencyCurrentInvestment extends Rule<Setti
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true
     };
   }

apps/api/src/models/rules/currency-cluster-risk/current-investment.ts

@@ -98,9 +98,14 @@ export class CurrencyClusterRiskCurrentInvestment extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.5
     };

apps/api/src/models/rules/economic-market-cluster-risk/developed-markets.ts

@@ -104,9 +104,14 @@ export class EconomicMarketClusterRiskDevelopedMarkets extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.72,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0.68

apps/api/src/models/rules/economic-market-cluster-risk/emerging-markets.ts

@@ -104,9 +104,14 @@ export class EconomicMarketClusterRiskEmergingMarkets extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.32,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0.28

apps/api/src/models/rules/emergency-fund/emergency-fund-setup.ts

@@ -59,9 +59,14 @@ export class EmergencyFundSetup extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true
     };
   }

apps/api/src/models/rules/fees/fee-ratio-initial-investment.ts

@@ -82,9 +82,14 @@ export class FeeRatioInitialInvestment extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.01
     };

apps/api/src/models/rules/liquidity/buying-power.ts

@@ -86,9 +86,14 @@ export class BuyingPower extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0
     };

apps/api/src/models/rules/regional-market-cluster-risk/asia-pacific.ts

@@ -94,9 +94,14 @@ export class RegionalMarketClusterRiskAsiaPacific extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.03,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0.02

apps/api/src/models/rules/regional-market-cluster-risk/emerging-markets.ts

@@ -96,9 +96,14 @@ export class RegionalMarketClusterRiskEmergingMarkets extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.12,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0.08

apps/api/src/models/rules/regional-market-cluster-risk/europe.ts

@@ -94,9 +94,14 @@ export class RegionalMarketClusterRiskEurope extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.15,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0.11

apps/api/src/models/rules/regional-market-cluster-risk/japan.ts

@@ -94,9 +94,14 @@ export class RegionalMarketClusterRiskJapan extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.06,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0.04

apps/api/src/models/rules/regional-market-cluster-risk/north-america.ts

@@ -94,9 +94,14 @@ export class RegionalMarketClusterRiskNorthAmerica extends Rule<Settings> {
     });
   }
 
-  public getSettings({ baseCurrency, xRayRules }: UserSettings): Settings {
+  public getSettings({
+    baseCurrency,
+    locale,
+    xRayRules
+  }: UserSettings): Settings {
     return {
       baseCurrency,
+      locale,
       isActive: xRayRules?.[this.getKey()]?.isActive ?? true,
       thresholdMax: xRayRules?.[this.getKey()]?.thresholdMax ?? 0.69,
       thresholdMin: xRayRules?.[this.getKey()]?.thresholdMin ?? 0.65

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

@@ -1,6 +1,9 @@
-import { SubscriptionType } from '@ghostfolio/common/types/subscription-type.type';
+import {
+  AccountWithPlatform,
+  SubscriptionType
+} from '@ghostfolio/common/types';
 
-import { Access, Account, Tag } from '@prisma/client';
+import { Access, Tag } from '@prisma/client';
 
 import { SubscriptionOffer } from './subscription-offer.interface';
 import { SystemMessage } from './system-message.interface';
@@ -9,7 +12,7 @@ import { UserSettings } from './user-settings.interface';
 // TODO: Compare with UserWithSettings
 export interface User {
   access: Pick<Access, 'alias' | 'id' | 'permissions'>[];
-  accounts: Account[];
+  accounts: AccountWithPlatform[];
   activitiesCount: number;
   dateOfFirstActivity: Date;
   id: string;

libs/ui/src/lib/assistant/assistant.component.ts

@@ -1,11 +1,10 @@
-import { GfSymbolPipe } from '@ghostfolio/client/pipes/symbol/symbol.pipe';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { getAssetProfileIdentifier } from '@ghostfolio/common/helper';
 import { Filter, PortfolioPosition, User } from '@ghostfolio/common/interfaces';
 import { InternalRoute } from '@ghostfolio/common/routes/interfaces/internal-route.interface';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
-import { DateRange } from '@ghostfolio/common/types';
+import { AccountWithPlatform, DateRange } from '@ghostfolio/common/types';
 
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import {
@@ -25,19 +24,14 @@ import {
   ViewChild,
   ViewChildren
 } from '@angular/core';
-import {
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-  FormBuilder,
-  FormControl,
-  FormsModule,
-  ReactiveFormsModule
-} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
-import { Account, AssetClass, DataSource } from '@prisma/client';
+import { AssetClass, DataSource } from '@prisma/client';
 import { differenceInYears } from 'date-fns';
 import Fuse from 'fuse.js';
 import { addIcons } from 'ionicons';
@@ -60,8 +54,11 @@ import {
   tap
 } from 'rxjs/operators';
 
-import { GfEntityLogoComponent } from '../entity-logo/entity-logo.component';
 import { translate } from '../i18n';
+import {
+  GfPortfolioFilterFormComponent,
+  PortfolioFilterFormValue
+} from '../portfolio-filter-form';
 import { GfAssistantListItemComponent } from './assistant-list-item/assistant-list-item.component';
 import { SearchMode } from './enums/search-mode';
 import {
@@ -75,8 +72,7 @@ import {
   imports: [
     FormsModule,
     GfAssistantListItemComponent,
-    GfEntityLogoComponent,
+    GfPortfolioFilterFormComponent,
-    GfSymbolPipe,
     IonIcon,
     MatButtonModule,
     MatFormFieldModule,
@@ -141,16 +137,10 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
 
   public static readonly SEARCH_RESULTS_DEFAULT_LIMIT = 5;
 
-  public accounts: Account[] = [];
+  public accounts: AccountWithPlatform[] = [];
   public assetClasses: Filter[] = [];
   public dateRangeFormControl = new FormControl<string>(undefined);
   public dateRangeOptions: DateRangeOption[] = [];
-  public filterForm = this.formBuilder.group({
-    account: new FormControl<string>(undefined),
-    assetClass: new FormControl<string>(undefined),
-    holding: new FormControl<PortfolioPosition>(undefined),
-    tag: new FormControl<string>(undefined)
-  });
   public holdings: PortfolioPosition[] = [];
   public isLoading = {
     accounts: false,
@@ -160,6 +150,14 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
   };
   public isOpen = false;
   public placeholder = $localize`Find account, holding or page...`;
+  public portfolioFilterFormControl = new FormControl<PortfolioFilterFormValue>(
+    {
+      account: null,
+      assetClass: null,
+      holding: null,
+      tag: null
+    }
+  );
   public searchFormControl = new FormControl('');
   public searchResults: SearchResults = {
     accounts: [],
@@ -186,8 +184,7 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService,
+    private dataService: DataService
-    private formBuilder: FormBuilder
   ) {
     addIcons({ closeCircleOutline, closeOutline, searchOutline });
   }
@@ -244,7 +241,6 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
             );
           }
 
-          // Accounts
           const accounts$: Observable<Partial<SearchResults>> =
             this.searchAccounts(searchTerm).pipe(
               map((accounts) => ({
@@ -263,7 +259,6 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
               })
             );
 
-          // Asset profiles
           const assetProfiles$: Observable<Partial<SearchResults>> = this
             .hasPermissionToAccessAdminControl
             ? this.searchAssetProfiles(searchTerm).pipe(
@@ -292,7 +287,6 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
                 })
               );
 
-          // Holdings
           const holdings$: Observable<Partial<SearchResults>> =
             this.searchHoldings(searchTerm).pipe(
               map((holdings) => ({
@@ -311,7 +305,6 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
               })
             );
 
-          // Quick links
           const quickLinks$: Observable<Partial<SearchResults>> = of(
             this.searchQuickLinks(searchTerm)
           ).pipe(
@@ -327,7 +320,6 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
             })
           );
 
-          // Merge all results
           return merge(accounts$, assetProfiles$, holdings$, quickLinks$).pipe(
             scan(
               (acc: SearchResults, curr: Partial<SearchResults>) => ({
@@ -362,22 +354,11 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
             quickLinks: []
           };
           this.changeDetectorRef.markForCheck();
-        },
-        complete: () => {
-          this.isLoading = {
-            accounts: false,
-            assetProfiles: false,
-            holdings: false,
-            quickLinks: false
-          };
-          this.changeDetectorRef.markForCheck();
         }
       });
   }
 
   public ngOnChanges() {
-    this.accounts = this.user?.accounts ?? [];
-
     this.dateRangeOptions = [
       {
         label: $localize`Today`,
@@ -445,7 +426,11 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
 
     this.dateRangeFormControl.setValue(this.user?.settings?.dateRange ?? null);
 
-    this.filterForm.disable({ emitEvent: false });
+    if (this.hasPermissionToChangeFilters) {
+      this.portfolioFilterFormControl.enable({ emitEvent: false });
+    } else {
+      this.portfolioFilterFormControl.disable({ emitEvent: false });
+    }
 
     this.tags =
       this.user?.tags
@@ -459,29 +444,6 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
             type: 'TAG'
           };
         }) ?? [];
-
-    if (this.tags.length === 0) {
-      this.filterForm.get('tag').disable({ emitEvent: false });
-    }
-  }
-
-  public hasFilter(aFormValue: { [key: string]: string }) {
-    return Object.values(aFormValue).some((value) => {
-      return !!value;
-    });
-  }
-
-  public holdingComparisonFunction(
-    option: PortfolioPosition,
-    value: PortfolioPosition
-  ): boolean {
-    if (value === null) {
-      return false;
-    }
-
-    return (
-      getAssetProfileIdentifier(option) === getAssetProfileIdentifier(value)
-    );
   }
 
   public initialize() {
@@ -527,36 +489,35 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
           .sort((a, b) => {
             return a.name?.localeCompare(b.name);
           });
-        this.setFilterFormValues();
 
-        if (this.hasPermissionToChangeFilters) {
+        this.setPortfolioFilterFormValues();
-          this.filterForm.enable({ emitEvent: false });
-        }
 
         this.changeDetectorRef.markForCheck();
       });
   }
 
   public onApplyFilters() {
+    const filterValue = this.portfolioFilterFormControl.value;
+
     this.filtersChanged.emit([
       {
-        id: this.filterForm.get('account').value,
+        id: filterValue?.account,
         type: 'ACCOUNT'
       },
       {
-        id: this.filterForm.get('assetClass').value,
+        id: filterValue?.assetClass,
         type: 'ASSET_CLASS'
       },
       {
-        id: this.filterForm.get('holding').value?.dataSource,
+        id: filterValue?.holding?.dataSource,
         type: 'DATA_SOURCE'
       },
       {
-        id: this.filterForm.get('holding').value?.symbol,
+        id: filterValue?.holding?.symbol,
         type: 'SYMBOL'
       },
       {
-        id: this.filterForm.get('tag').value,
+        id: filterValue?.tag,
         type: 'TAG'
       }
     ]);
@@ -569,12 +530,15 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   public onCloseAssistant() {
+    this.portfolioFilterFormControl.reset();
     this.setIsOpen(false);
 
     this.closed.emit();
   }
 
   public onResetFilters() {
+    this.portfolioFilterFormControl.reset();
+
     this.filtersChanged.emit(
       this.filterTypes.map((type) => {
         return {
@@ -786,7 +750,7 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
     });
   }
 
-  private setFilterFormValues() {
+  private setPortfolioFilterFormValues() {
     const dataSource = this.user?.settings?.[
       'filters.dataSource'
     ] as DataSource;
@@ -800,16 +764,11 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
       );
     });
 
-    this.filterForm.setValue(
+    this.portfolioFilterFormControl.setValue({
-      {
+      account: this.user?.settings?.['filters.accounts']?.[0] ?? null,
-        account: this.user?.settings?.['filters.accounts']?.[0] ?? null,
+      assetClass: this.user?.settings?.['filters.assetClasses']?.[0] ?? null,
-        assetClass: this.user?.settings?.['filters.assetClasses']?.[0] ?? null,
+      holding: selectedHolding ?? null,
-        holding: selectedHolding ?? null,
+      tag: this.user?.settings?.['filters.tags']?.[0] ?? null
-        tag: this.user?.settings?.['filters.tags']?.[0] ?? null
+    });
-      },
-      {
-        emitEvent: false
-      }
-    );
   }
 }

libs/ui/src/lib/assistant/assistant.html

@@ -164,119 +164,61 @@
       </div>
     }
   </div>
-  <form [formGroup]="filterForm">
+  @if (!searchFormControl.value) {
-    @if (!searchFormControl.value) {
+    <div class="date-range-selector-container p-3">
-      <div class="date-range-selector-container p-3">
+      <mat-form-field appearance="outline" class="w-100 without-hint">
-        <mat-form-field appearance="outline" class="w-100 without-hint">
+        <mat-label i18n>Date Range</mat-label>
-          <mat-label i18n>Date Range</mat-label>
+        <mat-select
-          <mat-select
+          [formControl]="dateRangeFormControl"
-            [formControl]="dateRangeFormControl"
+          (selectionChange)="onChangeDateRange($event.value)"
-            (selectionChange)="onChangeDateRange($event.value)"
+        >
-          >
+          @for (
-            @for (range of dateRangeOptions; track range) {
+            dateRangeOption of dateRangeOptions;
-              <mat-option [value]="range.value">{{ range.label }}</mat-option>
+            track dateRangeOption.value
-            }
+          ) {
-          </mat-select>
+            <mat-option [value]="dateRangeOption.value">{{
-        </mat-form-field>
+              dateRangeOption.label
-      </div>
+            }}</mat-option>
-      <div class="p-3">
+          }
-        <div class="mb-3">
+        </mat-select>
-          <mat-form-field appearance="outline" class="w-100 without-hint">
+      </mat-form-field>
-            <mat-label i18n>Account</mat-label>
+    </div>
-            <mat-select formControlName="account">
+    <div class="p-3">
-              <mat-option [value]="null" />
+      <gf-portfolio-filter-form
-              @for (account of accounts; track account.id) {
+        #portfolioFilterForm
-                <mat-option [value]="account.id">
+        [accounts]="user?.accounts"
-                  <div class="d-flex">
+        [assetClasses]="assetClasses"
-                    @if (account.platform?.url) {
+        [formControl]="portfolioFilterFormControl"
-                      <gf-entity-logo
+        [holdings]="holdings"
-                        class="mr-1"
+        [tags]="tags"
-                        [tooltip]="account.platform?.name"
+      />
-                        [url]="account.platform?.url"
+      <div class="d-flex w-100">
-                      />
+        <button
-                    }
+          i18n
-                    <span>{{ account.name }}</span>
+          mat-button
-                  </div>
+          type="button"
-                </mat-option>
+          [disabled]="
-              }
+            !portfolioFilterForm.hasFilters() || portfolioFilterForm.disabled
-            </mat-select>
+          "
-          </mat-form-field>
+          (click)="onResetFilters()"
-        </div>
+        >
-        <div class="mb-3">
+          Reset Filters
-          <mat-form-field appearance="outline" class="w-100 without-hint">
+        </button>
-            <mat-label i18n>Holding</mat-label>
+        <span class="gf-spacer"></span>
-            <mat-select
+        <button
-              formControlName="holding"
+          color="primary"
-              [compareWith]="holdingComparisonFunction"
+          i18n
-            >
+          mat-flat-button
-              <mat-select-trigger>{{
+          type="button"
-                filterForm.get('holding')?.value?.name
+          [disabled]="
-              }}</mat-select-trigger>
+            !portfolioFilterForm.filterForm.dirty ||
-              <mat-option [value]="null" />
+            portfolioFilterForm.disabled
-              @for (holding of holdings; track holding.name) {
+          "
-                <mat-option [value]="holding">
+          (click)="onApplyFilters()"
-                  <div class="line-height-1 text-truncate">
+        >
-                    <span
+          Apply Filters
-                      ><b>{{ holding.name }}</b></span
+        </button>
-                    >
-                    <br />
-                    <small class="text-muted"
-                      >{{ holding.symbol | gfSymbol }} ·
-                      {{ holding.currency }}</small
-                    >
-                  </div>
-                </mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="mb-3">
-          <mat-form-field appearance="outline" class="w-100 without-hint">
-            <mat-label i18n>Tag</mat-label>
-            <mat-select formControlName="tag">
-              <mat-option [value]="null" />
-              @for (tag of tags; track tag.id) {
-                <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="mb-3">
-          <mat-form-field appearance="outline" class="w-100 without-hint">
-            <mat-label i18n>Asset Class</mat-label>
-            <mat-select formControlName="assetClass">
-              <mat-option [value]="null" />
-              @for (assetClass of assetClasses; track assetClass.id) {
-                <mat-option [value]="assetClass.id">{{
-                  assetClass.label
-                }}</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="d-flex w-100">
-          <button
-            i18n
-            mat-button
-            [disabled]="
-              !hasFilter(filterForm.value) || !hasPermissionToChangeFilters
-            "
-            (click)="onResetFilters()"
-          >
-            Reset Filters
-          </button>
-          <span class="gf-spacer"></span>
-          <button
-            color="primary"
-            i18n
-            mat-flat-button
-            [disabled]="!filterForm.dirty || !hasPermissionToChangeFilters"
-            (click)="onApplyFilters()"
-          >
-            Apply Filters
-          </button>
-        </div>
       </div>
-    }
+    </div>
-  </form>
+  }
 </div>

libs/ui/src/lib/portfolio-filter-form/index.ts

@@ -0,0 +1,2 @@
+export * from './interfaces';
+export * from './portfolio-filter-form.component';

libs/ui/src/lib/portfolio-filter-form/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './portfolio-filter-form-value.interface';

libs/ui/src/lib/portfolio-filter-form/interfaces/portfolio-filter-form-value.interface.ts

@@ -0,0 +1,8 @@
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
+
+export interface PortfolioFilterFormValue {
+  account: string;
+  assetClass: string;
+  holding: PortfolioPosition;
+  tag: string;
+}

libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html

@@ -0,0 +1,75 @@
+<form [formGroup]="filterForm">
+  <div class="mb-3">
+    <mat-form-field appearance="outline" class="w-100 without-hint">
+      <mat-label i18n>Account</mat-label>
+      <mat-select formControlName="account">
+        <mat-option [value]="null" />
+        @for (account of accounts; track account.id) {
+          <mat-option [value]="account.id">
+            <div class="d-flex">
+              @if (account.platform?.url) {
+                <gf-entity-logo
+                  class="mr-1"
+                  [tooltip]="account.platform?.name"
+                  [url]="account.platform?.url"
+                />
+              }
+              <span>{{ account.name }}</span>
+            </div>
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="mb-3">
+    <mat-form-field appearance="outline" class="w-100 without-hint">
+      <mat-label i18n>Holding</mat-label>
+      <mat-select
+        formControlName="holding"
+        [compareWith]="holdingComparisonFunction"
+      >
+        <mat-select-trigger>{{
+          filterForm.get('holding')?.value?.name
+        }}</mat-select-trigger>
+        <mat-option [value]="null" />
+        @for (holding of holdings; track holding.name) {
+          <mat-option [value]="holding">
+            <div class="line-height-1 text-truncate">
+              <span
+                ><b>{{ holding.name }}</b></span
+              >
+              <br />
+              <small class="text-muted"
+                >{{ holding.symbol | gfSymbol }} · {{ holding.currency }}</small
+              >
+            </div>
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="mb-3">
+    <mat-form-field appearance="outline" class="w-100 without-hint">
+      <mat-label i18n>Tag</mat-label>
+      <mat-select formControlName="tag">
+        <mat-option [value]="null" />
+        @for (tag of tags; track tag.id) {
+          <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="mb-3">
+    <mat-form-field appearance="outline" class="w-100 without-hint">
+      <mat-label i18n>Asset Class</mat-label>
+      <mat-select formControlName="assetClass">
+        <mat-option [value]="null" />
+        @for (assetClass of assetClasses; track assetClass.id) {
+          <mat-option [value]="assetClass.id">{{
+            assetClass.label
+          }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</form>

libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.stories.ts

@@ -0,0 +1,79 @@
+import '@angular/localize/init';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { GfPortfolioFilterFormComponent } from './portfolio-filter-form.component';
+
+const meta: Meta<GfPortfolioFilterFormComponent> = {
+  title: 'Portfolio Filter Form',
+  component: GfPortfolioFilterFormComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [GfPortfolioFilterFormComponent]
+    })
+  ]
+};
+
+export default meta;
+type Story = StoryObj<GfPortfolioFilterFormComponent>;
+
+export const Default: Story = {
+  args: {
+    accounts: [
+      {
+        id: '733110b6-7c55-44eb-8cc5-c4c3e9d48a79',
+        name: 'Trading Account',
+        platform: {
+          name: 'Interactive Brokers',
+          url: 'https://interactivebrokers.com'
+        }
+      },
+      {
+        id: '24ba27d6-e04b-4fb4-b856-b24c2ef0422a',
+        name: 'Investment Account',
+        platform: {
+          name: 'Fidelity',
+          url: 'https://fidelity.com'
+        }
+      }
+    ] as any,
+    assetClasses: [
+      { id: 'COMMODITY', label: 'Commodity', type: 'ASSET_CLASS' },
+      { id: 'EQUITY', label: 'Equity', type: 'ASSET_CLASS' },
+      { id: 'FIXED_INCOME', label: 'Fixed Income', type: 'ASSET_CLASS' }
+    ] as any,
+    holdings: [
+      {
+        currency: 'USD',
+        dataSource: 'YAHOO',
+        name: 'Apple Inc.',
+        symbol: 'AAPL'
+      },
+      {
+        currency: 'USD',
+        dataSource: 'YAHOO',
+        name: 'Microsoft Corporation',
+        symbol: 'MSFT'
+      }
+    ] as any,
+    tags: [
+      {
+        id: 'EMERGENCY_FUND',
+        label: 'Emergency Fund',
+        type: 'TAG'
+      },
+      {
+        id: 'RETIREMENT_FUND',
+        label: 'Retirement Fund',
+        type: 'TAG'
+      }
+    ] as any,
+    disabled: false
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true
+  }
+};

libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.ts

@@ -0,0 +1,177 @@
+import { GfSymbolPipe } from '@ghostfolio/client/pipes/symbol/symbol.pipe';
+import { getAssetProfileIdentifier } from '@ghostfolio/common/helper';
+import { Filter, PortfolioPosition } from '@ghostfolio/common/interfaces';
+import { AccountWithPlatform } from '@ghostfolio/common/types';
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  forwardRef
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { Subject, takeUntil } from 'rxjs';
+
+import { GfEntityLogoComponent } from '../entity-logo/entity-logo.component';
+import { PortfolioFilterFormValue } from './interfaces';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    FormsModule,
+    GfEntityLogoComponent,
+    GfSymbolPipe,
+    MatFormFieldModule,
+    MatSelectModule,
+    ReactiveFormsModule
+  ],
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => GfPortfolioFilterFormComponent)
+    }
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-portfolio-filter-form',
+  styleUrls: ['./portfolio-filter-form.component.scss'],
+  templateUrl: './portfolio-filter-form.component.html'
+})
+export class GfPortfolioFilterFormComponent
+  implements ControlValueAccessor, OnInit, OnChanges, OnDestroy
+{
+  @Input() accounts: AccountWithPlatform[] = [];
+  @Input() assetClasses: Filter[] = [];
+  @Input() holdings: PortfolioPosition[] = [];
+  @Input() tags: Filter[] = [];
+  @Input() disabled = false;
+
+  public filterForm: FormGroup;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private formBuilder: FormBuilder
+  ) {
+    this.filterForm = this.formBuilder.group({
+      account: new FormControl<string>(null),
+      assetClass: new FormControl<string>(null),
+      holding: new FormControl<PortfolioPosition>(null),
+      tag: new FormControl<string>(null)
+    });
+  }
+
+  public ngOnInit() {
+    this.filterForm.valueChanges
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((value) => {
+        this.onChange(value as PortfolioFilterFormValue);
+        this.onTouched();
+      });
+  }
+
+  public hasFilters() {
+    const formValue = this.filterForm.value;
+
+    return Object.values(formValue).some((value) => {
+      return !!value;
+    });
+  }
+
+  public holdingComparisonFunction(
+    option: PortfolioPosition,
+    value: PortfolioPosition
+  ) {
+    if (value === null) {
+      return false;
+    }
+
+    return (
+      getAssetProfileIdentifier(option) === getAssetProfileIdentifier(value)
+    );
+  }
+
+  public ngOnChanges() {
+    if (this.disabled) {
+      this.filterForm.disable({ emitEvent: false });
+    } else {
+      this.filterForm.enable({ emitEvent: false });
+    }
+
+    const tagControl = this.filterForm.get('tag');
+
+    if (this.tags.length === 0) {
+      tagControl?.disable({ emitEvent: false });
+    } else if (!this.disabled) {
+      tagControl?.enable({ emitEvent: false });
+    }
+
+    this.changeDetectorRef.markForCheck();
+  }
+
+  public registerOnChange(fn: (value: PortfolioFilterFormValue) => void) {
+    this.onChange = fn;
+  }
+
+  public registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  public setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+
+    if (this.disabled) {
+      this.filterForm.disable({ emitEvent: false });
+    } else {
+      this.filterForm.enable({ emitEvent: false });
+    }
+
+    this.changeDetectorRef.markForCheck();
+  }
+
+  public writeValue(value: PortfolioFilterFormValue | null) {
+    if (value) {
+      this.filterForm.setValue(
+        {
+          account: value.account ?? null,
+          assetClass: value.assetClass ?? null,
+          holding: value.holding ?? null,
+          tag: value.tag ?? null
+        },
+        { emitEvent: false }
+      );
+    } else {
+      this.filterForm.reset({}, { emitEvent: false });
+    }
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  private onChange = (_value: PortfolioFilterFormValue): void => {
+    // ControlValueAccessor onChange callback
+  };
+
+  private onTouched = (): void => {
+    // ControlValueAccessor onTouched callback
+  };
+}