mirror of https://github.com/ghostfolio/ghostfolio
Browse Source
- Create GfPortfolioFilterFormComponent with ControlValueAccessor - Implement portfolio filter form with account, assetClass, holding, tag filters - Add proper TypeScript typing using AccountWithValue - Update assistant component to use new reusable filter component - Add comprehensive unit tests Fixes #5605pull/5618/head
Germán Martín
3 months ago
11 changed files with 650 additions and 176 deletions
@ -0,0 +1,130 @@ |
|||||
|
# Portfolio Filter Form Component |
||||
|
|
||||
|
## Overview |
||||
|
|
||||
|
The `GfPortfolioFilterFormComponent` is a reusable Angular component that provides a form interface for filtering portfolio data. It implements `ControlValueAccessor` to work seamlessly with Angular reactive forms. |
||||
|
|
||||
|
## Features |
||||
|
|
||||
|
- **Account filtering**: Select specific accounts to filter by |
||||
|
- **Asset class filtering**: Filter by asset classes (Equity, Fixed Income, etc.) |
||||
|
- **Holding filtering**: Filter by specific holdings/securities |
||||
|
- **Tag filtering**: Filter by user-defined tags |
||||
|
- **Form validation**: Built-in validation and state management |
||||
|
- **Accessibility**: Full support for Angular forms and accessibility features |
||||
|
|
||||
|
## Usage |
||||
|
|
||||
|
### Basic Implementation |
||||
|
|
||||
|
```typescript |
||||
|
import { GfPortfolioFilterFormComponent } from '@ghostfolio/ui/portfolio-filter-form'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'my-component', |
||||
|
template: ` |
||||
|
<gf-portfolio-filter-form |
||||
|
[accounts]="accounts" |
||||
|
[assetClasses]="assetClasses" |
||||
|
[holdings]="holdings" |
||||
|
[tags]="tags" |
||||
|
[disabled]="isDisabled" |
||||
|
(applyFilters)="onApplyFilters()" |
||||
|
(resetFilters)="onResetFilters()" |
||||
|
[formControl]="portfolioFiltersControl"> |
||||
|
</gf-portfolio-filter-form> |
||||
|
` |
||||
|
}) |
||||
|
export class MyComponent { |
||||
|
portfolioFiltersControl = new FormControl<PortfolioFilterFormValue>({ |
||||
|
account: null, |
||||
|
assetClass: null, |
||||
|
holding: null, |
||||
|
tag: null |
||||
|
}); |
||||
|
|
||||
|
// ... other properties |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### With Reactive Forms |
||||
|
|
||||
|
```typescript |
||||
|
import { PortfolioFilterFormValue } from '@ghostfolio/ui/portfolio-filter-form'; |
||||
|
|
||||
|
import { FormControl } from '@angular/forms'; |
||||
|
|
||||
|
const filterControl = new FormControl<PortfolioFilterFormValue>({ |
||||
|
account: null, |
||||
|
assetClass: null, |
||||
|
holding: null, |
||||
|
tag: null |
||||
|
}); |
||||
|
|
||||
|
// Subscribe to changes |
||||
|
filterControl.valueChanges.subscribe((filters) => { |
||||
|
console.log('Filter changes:', filters); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
## Inputs |
||||
|
|
||||
|
| Input | Type | Description | |
||||
|
| -------------- | --------------------- | ----------------------------------- | |
||||
|
| `accounts` | `Account[]` | Array of available accounts | |
||||
|
| `assetClasses` | `Filter[]` | Array of available asset classes | |
||||
|
| `holdings` | `PortfolioPosition[]` | Array of available holdings | |
||||
|
| `tags` | `Filter[]` | Array of available tags | |
||||
|
| `disabled` | `boolean` | Whether the form should be disabled | |
||||
|
|
||||
|
## Outputs |
||||
|
|
||||
|
| Output | Type | Description | |
||||
|
| -------------- | -------------------- | -------------------------------------------- | |
||||
|
| `applyFilters` | `EventEmitter<void>` | Emitted when Apply Filters button is clicked | |
||||
|
| `resetFilters` | `EventEmitter<void>` | Emitted when Reset Filters button is clicked | |
||||
|
|
||||
|
## Interface |
||||
|
|
||||
|
### PortfolioFilterFormValue |
||||
|
|
||||
|
```typescript |
||||
|
interface PortfolioFilterFormValue { |
||||
|
account: string | null; |
||||
|
assetClass: string | null; |
||||
|
holding: PortfolioPosition | null; |
||||
|
tag: string | null; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## Implementation Details |
||||
|
|
||||
|
- Implements `ControlValueAccessor` for seamless integration with Angular forms |
||||
|
- Uses Angular Material components for consistent UI |
||||
|
- Handles form state management internally |
||||
|
- Provides validation and dirty state tracking |
||||
|
- Supports disabled state management |
||||
|
|
||||
|
## Testing |
||||
|
|
||||
|
The component includes comprehensive unit tests covering: |
||||
|
|
||||
|
- Component creation and initialization |
||||
|
- Form value management |
||||
|
- Event emission |
||||
|
- Filter detection logic |
||||
|
- ControlValueAccessor implementation |
||||
|
|
||||
|
Run tests with: |
||||
|
|
||||
|
```bash |
||||
|
nx test ui |
||||
|
``` |
||||
|
|
||||
|
## Storybook |
||||
|
|
||||
|
Interactive component documentation and examples are available in Storybook: |
||||
|
|
||||
|
```bash |
||||
|
nx run ui:storybook |
||||
|
``` |
||||
@ -0,0 +1,2 @@ |
|||||
|
export * from './interfaces'; |
||||
|
export * from './portfolio-filter-form.component'; |
||||
@ -0,0 +1 @@ |
|||||
|
export * from './portfolio-filter-form-value.interface'; |
||||
@ -0,0 +1,8 @@ |
|||||
|
import { PortfolioPosition } from '@ghostfolio/common/interfaces'; |
||||
|
|
||||
|
export interface PortfolioFilterFormValue { |
||||
|
account: string | null; |
||||
|
assetClass: string | null; |
||||
|
holding: PortfolioPosition | null; |
||||
|
tag: string | null; |
||||
|
} |
||||
@ -0,0 +1,95 @@ |
|||||
|
<form class="gf-portfolio-filter-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> |
||||
|
<div class="d-flex w-100"> |
||||
|
<button |
||||
|
i18n |
||||
|
mat-button |
||||
|
[disabled]="!hasFilters() || disabled" |
||||
|
(click)="onResetFilters()" |
||||
|
> |
||||
|
Reset Filters |
||||
|
</button> |
||||
|
<span class="gf-spacer"></span> |
||||
|
<button |
||||
|
color="primary" |
||||
|
i18n |
||||
|
mat-flat-button |
||||
|
[disabled]="!filterForm.dirty || disabled" |
||||
|
(click)="onApplyFilters()" |
||||
|
> |
||||
|
Apply Filters |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
@ -0,0 +1,5 @@ |
|||||
|
.gf-portfolio-filter-form { |
||||
|
.gf-spacer { |
||||
|
flex: 1 1 auto; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,69 @@ |
|||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
import { ReactiveFormsModule } from '@angular/forms'; |
||||
|
import { MatButtonModule } from '@angular/material/button'; |
||||
|
import { MatFormFieldModule } from '@angular/material/form-field'; |
||||
|
import { MatSelectModule } from '@angular/material/select'; |
||||
|
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; |
||||
|
|
||||
|
import { GfPortfolioFilterFormComponent } from './portfolio-filter-form.component'; |
||||
|
|
||||
|
// Mock $localize for testing
|
||||
|
(global as any).$localize = (template: any) => { |
||||
|
return template.raw ? template.raw.join('') : template; |
||||
|
}; |
||||
|
|
||||
|
describe('GfPortfolioFilterFormComponent', () => { |
||||
|
let component: GfPortfolioFilterFormComponent; |
||||
|
let fixture: ComponentFixture<GfPortfolioFilterFormComponent>; |
||||
|
|
||||
|
beforeEach(async () => { |
||||
|
await TestBed.configureTestingModule({ |
||||
|
imports: [ |
||||
|
GfPortfolioFilterFormComponent, |
||||
|
MatButtonModule, |
||||
|
MatFormFieldModule, |
||||
|
MatSelectModule, |
||||
|
NoopAnimationsModule, |
||||
|
ReactiveFormsModule |
||||
|
] |
||||
|
}).compileComponents(); |
||||
|
|
||||
|
fixture = TestBed.createComponent(GfPortfolioFilterFormComponent); |
||||
|
component = fixture.componentInstance; |
||||
|
fixture.detectChanges(); |
||||
|
}); |
||||
|
|
||||
|
it('should create', () => { |
||||
|
expect(component).toBeTruthy(); |
||||
|
}); |
||||
|
|
||||
|
it('should initialize with empty form values', () => { |
||||
|
expect(component.filterForm.value).toEqual({ |
||||
|
account: null, |
||||
|
assetClass: null, |
||||
|
holding: null, |
||||
|
tag: null |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it('should detect when filters are applied', () => { |
||||
|
component.filterForm.patchValue({ account: 'test-account-id' }); |
||||
|
expect(component.hasFilters()).toBeTruthy(); |
||||
|
}); |
||||
|
|
||||
|
it('should detect when no filters are applied', () => { |
||||
|
expect(component.hasFilters()).toBeFalsy(); |
||||
|
}); |
||||
|
|
||||
|
it('should emit resetFilters event when onResetFilters is called', () => { |
||||
|
jest.spyOn(component.resetFilters, 'emit'); |
||||
|
component.onResetFilters(); |
||||
|
expect(component.resetFilters.emit).toHaveBeenCalled(); |
||||
|
}); |
||||
|
|
||||
|
it('should emit applyFilters event when onApplyFilters is called', () => { |
||||
|
jest.spyOn(component.applyFilters, 'emit'); |
||||
|
component.onApplyFilters(); |
||||
|
expect(component.applyFilters.emit).toHaveBeenCalled(); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,70 @@ |
|||||
|
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: '1', |
||||
|
name: 'Trading Account', |
||||
|
platform: { |
||||
|
name: 'Interactive Brokers', |
||||
|
url: 'https://interactivebrokers.com' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
id: '2', |
||||
|
name: 'Investment Account', |
||||
|
platform: { |
||||
|
name: 'Fidelity', |
||||
|
url: 'https://fidelity.com' |
||||
|
} |
||||
|
} |
||||
|
] as any, |
||||
|
assetClasses: [ |
||||
|
{ id: 'EQUITY', label: 'Equity', type: 'ASSET_CLASS' }, |
||||
|
{ id: 'FIXED_INCOME', label: 'Fixed Income', type: 'ASSET_CLASS' }, |
||||
|
{ id: 'COMMODITY', label: 'Commodity', type: 'ASSET_CLASS' } |
||||
|
] as any, |
||||
|
holdings: [ |
||||
|
{ |
||||
|
name: 'Apple Inc.', |
||||
|
symbol: 'AAPL', |
||||
|
currency: 'USD', |
||||
|
dataSource: 'YAHOO' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Microsoft Corporation', |
||||
|
symbol: 'MSFT', |
||||
|
currency: 'USD', |
||||
|
dataSource: 'YAHOO' |
||||
|
} |
||||
|
] as any, |
||||
|
tags: [ |
||||
|
{ id: 'tech', label: 'Technology', type: 'TAG' }, |
||||
|
{ id: 'dividend', label: 'Dividend', type: 'TAG' } |
||||
|
] as any, |
||||
|
disabled: false |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export const Disabled: Story = { |
||||
|
args: { |
||||
|
...Default.args, |
||||
|
disabled: true |
||||
|
} |
||||
|
}; |
||||
@ -0,0 +1,180 @@ |
|||||
|
import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module'; |
||||
|
import { getAssetProfileIdentifier } from '@ghostfolio/common/helper'; |
||||
|
import { Filter, PortfolioPosition } from '@ghostfolio/common/interfaces'; |
||||
|
import { AccountWithValue } from '@ghostfolio/common/types'; |
||||
|
|
||||
|
import { |
||||
|
CUSTOM_ELEMENTS_SCHEMA, |
||||
|
ChangeDetectionStrategy, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
EventEmitter, |
||||
|
Input, |
||||
|
OnChanges, |
||||
|
OnDestroy, |
||||
|
OnInit, |
||||
|
Output, |
||||
|
forwardRef |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
FormBuilder, |
||||
|
FormControl, |
||||
|
FormsModule, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
ReactiveFormsModule |
||||
|
} from '@angular/forms'; |
||||
|
import { MatButtonModule } from '@angular/material/button'; |
||||
|
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, |
||||
|
GfSymbolModule, |
||||
|
MatButtonModule, |
||||
|
MatFormFieldModule, |
||||
|
MatSelectModule, |
||||
|
ReactiveFormsModule |
||||
|
], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => GfPortfolioFilterFormComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
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: AccountWithValue[] = []; |
||||
|
@Input() assetClasses: Filter[] = []; |
||||
|
@Input() holdings: PortfolioPosition[] = []; |
||||
|
@Input() tags: Filter[] = []; |
||||
|
@Input() disabled = false; |
||||
|
|
||||
|
@Output() applyFilters = new EventEmitter<void>(); |
||||
|
@Output() resetFilters = new EventEmitter<void>(); |
||||
|
|
||||
|
public filterForm = this.formBuilder.group({ |
||||
|
account: new FormControl<string>(null), |
||||
|
assetClass: new FormControl<string>(null), |
||||
|
holding: new FormControl<PortfolioPosition>(null), |
||||
|
tag: new FormControl<string>(null) |
||||
|
}); |
||||
|
|
||||
|
private onChange: (value: PortfolioFilterFormValue) => void = () => { |
||||
|
// ControlValueAccessor callback - implemented by parent
|
||||
|
}; |
||||
|
private onTouched: () => void = () => { |
||||
|
// ControlValueAccessor callback - implemented by parent
|
||||
|
}; |
||||
|
private unsubscribeSubject = new Subject<void>(); |
||||
|
|
||||
|
public constructor( |
||||
|
private changeDetectorRef: ChangeDetectorRef, |
||||
|
private formBuilder: FormBuilder |
||||
|
) {} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
// Subscribe to form changes to notify parent component
|
||||
|
this.filterForm.valueChanges |
||||
|
.pipe(takeUntil(this.unsubscribeSubject)) |
||||
|
.subscribe((value) => { |
||||
|
this.onChange(value as PortfolioFilterFormValue); |
||||
|
this.onTouched(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public ngOnChanges() { |
||||
|
// Update form disabled state
|
||||
|
if (this.disabled) { |
||||
|
this.filterForm.disable({ emitEvent: false }); |
||||
|
} else { |
||||
|
this.filterForm.enable({ emitEvent: false }); |
||||
|
} |
||||
|
|
||||
|
// Disable tag field if no tags available
|
||||
|
if (this.tags.length === 0) { |
||||
|
this.filterForm.get('tag')?.disable({ emitEvent: false }); |
||||
|
} |
||||
|
|
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.unsubscribeSubject.next(); |
||||
|
this.unsubscribeSubject.complete(); |
||||
|
} |
||||
|
|
||||
|
// ControlValueAccessor implementation
|
||||
|
public writeValue(value: PortfolioFilterFormValue | null): void { |
||||
|
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 registerOnChange(fn: (value: PortfolioFilterFormValue) => void): void { |
||||
|
this.onChange = fn; |
||||
|
} |
||||
|
|
||||
|
public registerOnTouched(fn: () => void): void { |
||||
|
this.onTouched = fn; |
||||
|
} |
||||
|
|
||||
|
public setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
this.ngOnChanges(); |
||||
|
} |
||||
|
|
||||
|
// Helper methods
|
||||
|
public hasFilters(): boolean { |
||||
|
const formValue = this.filterForm.value; |
||||
|
return Object.values(formValue).some((value) => !!value); |
||||
|
} |
||||
|
|
||||
|
public holdingComparisonFunction( |
||||
|
option: PortfolioPosition, |
||||
|
value: PortfolioPosition |
||||
|
): boolean { |
||||
|
if (value === null) { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
getAssetProfileIdentifier(option) === getAssetProfileIdentifier(value) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
public onApplyFilters(): void { |
||||
|
this.filterForm.markAsPristine(); |
||||
|
this.onChange(this.filterForm.value as PortfolioFilterFormValue); |
||||
|
this.applyFilters.emit(); |
||||
|
} |
||||
|
|
||||
|
public onResetFilters(): void { |
||||
|
this.filterForm.reset({}, { emitEvent: true }); |
||||
|
this.resetFilters.emit(); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue