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}`;
}
}
}