diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.html b/libs/ui/src/lib/entity-logo/entity-logo.component.html index 692fb1d3b..f0abad285 100644 --- a/libs/ui/src/lib/entity-logo/entity-logo.component.html +++ b/libs/ui/src/lib/entity-logo/entity-logo.component.html @@ -1,6 +1,4 @@ -@if (useLogo) { - -} @else if (src) { +@if (src) { ([ [ '../api/v1/logo?url=https://ghostfol.io', - { - logoUrl: '/assets/ghost.svg' - } + { logoUrl: '/assets/ghost.svg' } ] ]) ) } ] }) - ] + ], + parameters: { + backgrounds: { + default: 'light' + } + }, + argTypes: { + size: { + control: 'select', + options: ['large', 'medium'], + description: 'Size of the logo' + }, + tooltip: { + control: 'text', + description: 'Tooltip text for the logo' + }, + url: { + control: 'text', + description: 'URL for the logo' + } + } } as Meta; type Story = StoryObj; export const Default: Story = { - args: { - dataSource: DataSource.MANUAL, - symbol: 'GHOST', - useLogo: true, - size: 'large' - } -}; - -export const WithUrl: Story = { args: { size: 'large', tooltip: 'Ghostfolio', - url: 'https://ghostfol.io', - useLogo: true - } + url: 'https://ghostfol.io' + }, + parameters: { + docs: { + description: { + story: + 'Entity logo component with size ("large"), tooltip ("Ghostfolio") and url ("https://ghostfol.io") inputs.' + } + } + }, + render: (args) => ({ + props: args, + template: ` +
+ +
+ ` + }) }; diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.ts b/libs/ui/src/lib/entity-logo/entity-logo.component.ts index 4d2f56b26..7598fb4d5 100644 --- a/libs/ui/src/lib/entity-logo/entity-logo.component.ts +++ b/libs/ui/src/lib/entity-logo/entity-logo.component.ts @@ -1,21 +1,17 @@ import { CommonModule } from '@angular/common'; -import { HttpClient } from '@angular/common/http'; import { + CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, - ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core'; import { DataSource } from '@prisma/client'; -import { of } from 'rxjs'; -import { catchError } from 'rxjs/operators'; - -import { GfLogoComponent } from '../logo/logo.component'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, - imports: [CommonModule, GfLogoComponent], + imports: [CommonModule], + schemas: [CUSTOM_ELEMENTS_SCHEMA], selector: 'gf-entity-logo', styleUrls: ['./entity-logo.component.scss'], templateUrl: './entity-logo.component.html' @@ -26,34 +22,14 @@ export class GfEntityLogoComponent implements OnChanges { @Input() symbol: string; @Input() tooltip: string; @Input() url: string; - @Input() useLogo = false; public src: string; - public constructor( - private readonly changeDetectorRef: ChangeDetectorRef, - private readonly http: HttpClient - ) {} - public ngOnChanges() { - if (this.useLogo) { - return; - } - if (this.dataSource && this.symbol) { this.src = `../api/v1/logo/${this.dataSource}/${this.symbol}`; } else if (this.url) { - this.http - .get<{ logoUrl: string }>(`../api/v1/logo?url=${this.url}`) - .pipe( - catchError(() => { - return of({ logoUrl: '' }); - }) - ) - .subscribe(({ logoUrl }) => { - this.src = logoUrl; - this.changeDetectorRef.markForCheck(); - }); + this.src = `../api/v1/logo?url=${this.url}`; } } }