mirror of https://github.com/ghostfolio/ghostfolio
Thomas Kaul
15 hours ago
11 changed files with 327 additions and 151 deletions
@ -0,0 +1,44 @@ |
|||
<mat-form-field |
|||
appearance="outline" |
|||
class="w-100" |
|||
[class.without-hint]="!hasHint()" |
|||
> |
|||
<mat-label>{{ label() }}</mat-label> |
|||
<mat-select |
|||
[errorStateMatcher]="errorStateMatcher" |
|||
[formControl]="control" |
|||
(closed)="onPanelClosed()" |
|||
> |
|||
<mat-select-trigger> |
|||
<div class="d-flex"> |
|||
@if (selectedAccount()) { |
|||
<gf-entity-logo |
|||
class="mr-1" |
|||
[hasPlaceholder]="true" |
|||
[tooltip]="selectedAccount()?.platform?.name ?? ''" |
|||
[url]="selectedAccount()?.platform?.url ?? ''" |
|||
/> |
|||
} |
|||
<span>{{ selectedAccount()?.name }}</span> |
|||
</div> |
|||
</mat-select-trigger> |
|||
|
|||
@if (hasNullOption()) { |
|||
<mat-option [value]="null" /> |
|||
} |
|||
|
|||
@for (account of accounts(); track account.id) { |
|||
<mat-option [value]="account.id"> |
|||
<div class="d-flex"> |
|||
<gf-entity-logo |
|||
class="mr-1" |
|||
[hasPlaceholder]="true" |
|||
[tooltip]="account.platform?.name ?? ''" |
|||
[url]="account.platform?.url ?? ''" |
|||
/> |
|||
<span>{{ account.name }}</span> |
|||
</div> |
|||
</mat-option> |
|||
} |
|||
</mat-select> |
|||
</mat-form-field> |
|||
@ -0,0 +1,131 @@ |
|||
import { AccountWithPlatform } from '@ghostfolio/common/types'; |
|||
|
|||
import { CommonModule } from '@angular/common'; |
|||
import { ANIMATION_MODULE_TYPE, importProvidersFrom } from '@angular/core'; |
|||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; |
|||
import '@angular/localize/init'; |
|||
import { |
|||
applicationConfig, |
|||
Meta, |
|||
moduleMetadata, |
|||
StoryObj |
|||
} from '@storybook/angular'; |
|||
|
|||
import { EntityLogoImageSourceService } from '../entity-logo/entity-logo-image-source.service'; |
|||
import { EntityLogoImageSourceServiceMock } from '../mocks/entity-logo-image-source.service.mock'; |
|||
import { GfAccountSelectorComponent } from './account-selector.component'; |
|||
|
|||
const ACCOUNTS: AccountWithPlatform[] = [ |
|||
{ |
|||
comment: null, |
|||
createdAt: new Date('2024-01-01'), |
|||
currency: 'USD', |
|||
id: '3ef7e6d9-4598-4eb2-b0e8-00e61cfc0ea6', |
|||
name: 'Coinbase Account', |
|||
platform: { |
|||
id: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
|||
name: 'Coinbase', |
|||
url: 'https://coinbase.com' |
|||
}, |
|||
platformId: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
|||
updatedAt: new Date('2024-01-01'), |
|||
userId: '081aa387-487d-4438-83a4-3060eb2a016e' |
|||
}, |
|||
{ |
|||
comment: null, |
|||
createdAt: new Date('2024-01-01'), |
|||
currency: 'CHF', |
|||
id: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
|||
name: 'Ghostfolio Account', |
|||
platform: { |
|||
id: 'f3e9d0e5-1e0f-4a3c-8b12-1f2a3b4c5d6e', |
|||
name: 'Ghostfolio', |
|||
url: 'https://ghostfol.io' |
|||
}, |
|||
platformId: 'f3e9d0e5-1e0f-4a3c-8b12-1f2a3b4c5d6e', |
|||
updatedAt: new Date('2024-01-01'), |
|||
userId: '081aa387-487d-4438-83a4-3060eb2a016e' |
|||
}, |
|||
{ |
|||
comment: null, |
|||
createdAt: new Date('2024-01-01'), |
|||
currency: 'EUR', |
|||
id: 'd191b2d5-9d5a-4c5f-9d55-6f0e5f6a7b8c', |
|||
name: 'Savings Account', |
|||
platformId: null, |
|||
updatedAt: new Date('2024-01-01'), |
|||
userId: '081aa387-487d-4438-83a4-3060eb2a016e' |
|||
} |
|||
]; |
|||
|
|||
type AccountSelectorStory = GfAccountSelectorComponent & { |
|||
value: string | null; |
|||
}; |
|||
|
|||
const meta: Meta<AccountSelectorStory> = { |
|||
title: 'Account Selector', |
|||
component: GfAccountSelectorComponent, |
|||
decorators: [ |
|||
applicationConfig({ |
|||
providers: [ |
|||
importProvidersFrom(CommonModule), |
|||
{ |
|||
provide: ANIMATION_MODULE_TYPE, |
|||
useValue: 'NoopAnimations' |
|||
}, |
|||
{ |
|||
provide: EntityLogoImageSourceService, |
|||
useValue: new EntityLogoImageSourceServiceMock() |
|||
} |
|||
] |
|||
}), |
|||
moduleMetadata({ |
|||
imports: [GfAccountSelectorComponent, ReactiveFormsModule] |
|||
}) |
|||
], |
|||
render: ({ accounts, hasHint, hasNullOption, label, value }) => { |
|||
return { |
|||
props: { |
|||
accounts, |
|||
hasHint, |
|||
hasNullOption, |
|||
label, |
|||
formGroup: new FormGroup({ |
|||
account: new FormControl(value) |
|||
}) |
|||
}, |
|||
template: ` |
|||
<form [formGroup]="formGroup"> |
|||
<gf-account-selector |
|||
formControlName="account" |
|||
[accounts]="accounts" |
|||
[hasHint]="hasHint" |
|||
[hasNullOption]="hasNullOption" |
|||
[label]="label" |
|||
/> |
|||
</form> |
|||
` |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
export default meta; |
|||
|
|||
type Story = StoryObj<AccountSelectorStory>; |
|||
|
|||
export const Default: Story = { |
|||
args: { |
|||
accounts: ACCOUNTS, |
|||
label: 'Account', |
|||
value: '9da3a8a7-4795-43e3-a6db-ccb914189737' |
|||
} |
|||
}; |
|||
|
|||
export const WithNullOption: Story = { |
|||
args: { |
|||
accounts: ACCOUNTS, |
|||
hasNullOption: true, |
|||
label: 'Account', |
|||
value: null |
|||
} |
|||
}; |
|||
@ -0,0 +1,109 @@ |
|||
import { AccountWithPlatform } from '@ghostfolio/common/types'; |
|||
import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo'; |
|||
|
|||
import { |
|||
ChangeDetectionStrategy, |
|||
Component, |
|||
computed, |
|||
inject, |
|||
input, |
|||
signal |
|||
} from '@angular/core'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormControl, |
|||
NgControl, |
|||
ReactiveFormsModule |
|||
} from '@angular/forms'; |
|||
import { ErrorStateMatcher } from '@angular/material/core'; |
|||
import { MatFormFieldModule } from '@angular/material/form-field'; |
|||
import { MatSelectModule } from '@angular/material/select'; |
|||
|
|||
@Component({ |
|||
changeDetection: ChangeDetectionStrategy.OnPush, |
|||
host: { class: 'd-block' }, |
|||
imports: [ |
|||
GfEntityLogoComponent, |
|||
MatFormFieldModule, |
|||
MatSelectModule, |
|||
ReactiveFormsModule |
|||
], |
|||
selector: 'gf-account-selector', |
|||
templateUrl: './account-selector.component.html' |
|||
}) |
|||
export class GfAccountSelectorComponent implements ControlValueAccessor { |
|||
public readonly accounts = input.required<AccountWithPlatform[]>(); |
|||
public readonly control = new FormControl<string | null>(null); |
|||
public readonly errorStateMatcher: ErrorStateMatcher = { |
|||
isErrorState: () => { |
|||
const control = this.ngControl?.control; |
|||
|
|||
return !!(control?.invalid && (control.dirty || control.touched)); |
|||
} |
|||
}; |
|||
public readonly hasHint = input(true); |
|||
public readonly hasNullOption = input(false); |
|||
public readonly label = input.required<string>(); |
|||
public readonly selectedAccount = computed(() => { |
|||
const selectedAccountId = this.selectedAccountId(); |
|||
|
|||
return this.accounts().find(({ id }) => { |
|||
return id === selectedAccountId; |
|||
}); |
|||
}); |
|||
|
|||
private readonly ngControl = inject(NgControl, { |
|||
optional: true, |
|||
self: true |
|||
}); |
|||
private readonly selectedAccountId = signal<string | null>(null); |
|||
|
|||
public constructor() { |
|||
// Register as the value accessor manually, because injecting NgControl
|
|||
// and providing NG_VALUE_ACCESSOR at the same time creates a cycle
|
|||
if (this.ngControl) { |
|||
this.ngControl.valueAccessor = this; |
|||
} |
|||
|
|||
this.control.valueChanges |
|||
.pipe(takeUntilDestroyed()) |
|||
.subscribe((accountId) => { |
|||
this.selectedAccountId.set(accountId); |
|||
this.onChange(accountId); |
|||
}); |
|||
} |
|||
|
|||
public onPanelClosed() { |
|||
this.onTouched(); |
|||
} |
|||
|
|||
public registerOnChange(fn: (accountId: string | null) => void) { |
|||
this.onChange = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: () => void) { |
|||
this.onTouched = fn; |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean) { |
|||
if (isDisabled) { |
|||
this.control.disable({ emitEvent: false }); |
|||
} else { |
|||
this.control.enable({ emitEvent: false }); |
|||
} |
|||
} |
|||
|
|||
public writeValue(accountId: string | null) { |
|||
this.control.setValue(accountId ?? null, { emitEvent: false }); |
|||
this.selectedAccountId.set(accountId ?? null); |
|||
} |
|||
|
|||
private onChange: (accountId: string | null) => void = () => { |
|||
// ControlValueAccessor onChange callback
|
|||
}; |
|||
|
|||
private onTouched = (): void => { |
|||
// ControlValueAccessor onTouched callback
|
|||
}; |
|||
} |
|||
@ -0,0 +1 @@ |
|||
export * from './account-selector.component'; |
|||
Loading…
Reference in new issue