Feature/extend GfSymbolAutocompleteComponent by default options (#4563)

* Extend GfSymbolAutocompleteComponent by default options

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Extended the symbol search component by default options
 - Improved the language localization for Spanish (`es`)
 - Upgraded `ng-extract-i18n-merge` from version `2.15.0` to `2.15.1`
 - Upgraded `Nx` from version `20.8.1` to `21.1.2`

libs/ui/src/lib/mocks/httpClient.mock.ts

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs';
+
+export class HttpClientMock {
+  public constructor(private mockResponses: Map<string, any>) {}
+
+  public get<TResponse>(url: string, options?: any): Observable<TResponse> {
+    if (this.mockResponses.has(url) && options) {
+      return new Observable<TResponse>((subscriber) => {
+        subscriber.next(this.mockResponses.get(url));
+        subscriber.complete();
+      });
+    }
+
+    return new Observable<TResponse>((subscriber) => {
+      subscriber.error(new Error(`No mock data for URL: ${url}`));
+    });
+  }
+}

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html

@@ -12,7 +12,7 @@
   (optionSelected)="onUpdateSymbol($event)"
 >
   @if (!isLoading) {
-    @for (lookupItem of filteredLookupItems; track lookupItem) {
+    @for (lookupItem of lookupItems; track lookupItem) {
       <mat-option
         class="line-height-1"
         [disabled]="lookupItem.dataProviderInfo.isPremium"

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts

@@ -0,0 +1,115 @@
+import { LookupItem } from '@ghostfolio/common/interfaces';
+
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { importProvidersFrom } from '@angular/core';
+import {
+  FormControl,
+  FormsModule,
+  NgControl,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
+
+import { HttpClientMock } from '../mocks/httpClient.mock';
+import { GfSymbolAutocompleteComponent } from './symbol-autocomplete.component';
+
+const DEFAULT_OPTIONS: LookupItem[] = [
+  {
+    assetClass: 'COMMODITY',
+    assetSubClass: 'ETF',
+    currency: 'USD',
+    dataProviderInfo: {
+      dataSource: 'YAHOO',
+      isPremium: false
+    },
+    dataSource: null,
+    name: 'Default 1',
+    symbol: 'D1'
+  },
+  {
+    assetClass: 'EQUITY',
+    assetSubClass: 'STOCK',
+    currency: 'USD',
+    dataProviderInfo: {
+      dataSource: 'YAHOO',
+      isPremium: false
+    },
+    dataSource: null,
+    name: 'Default 2',
+    symbol: 'D2'
+  }
+];
+
+const FILTERED_OPTIONS: LookupItem[] = [
+  {
+    assetClass: 'COMMODITY',
+    assetSubClass: 'ETF',
+    currency: 'USD',
+    dataProviderInfo: {
+      dataSource: 'YAHOO',
+      isPremium: false
+    },
+    dataSource: null,
+    name: 'Autocomplete 1',
+    symbol: 'A1'
+  },
+  {
+    assetClass: 'EQUITY',
+    assetSubClass: 'STOCK',
+    currency: 'USD',
+    dataProviderInfo: {
+      dataSource: 'YAHOO',
+      isPremium: false
+    },
+    dataSource: null,
+    name: 'Autocomplete 2',
+    symbol: 'A2'
+  }
+];
+
+export default {
+  title: 'Symbol Autocomplete',
+  component: GfSymbolAutocompleteComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        provideNoopAnimations(),
+        importProvidersFrom(CommonModule, FormsModule, ReactiveFormsModule),
+        {
+          provide: NgControl,
+          useValue: {
+            control: new FormControl(),
+            valueAccessor: null
+          }
+        },
+        {
+          provide: HttpClient,
+          useValue: new HttpClientMock(
+            new Map([
+              [
+                '/api/v1/symbol/lookup',
+                {
+                  items: FILTERED_OPTIONS
+                }
+              ]
+            ])
+          )
+        }
+      ]
+    })
+  ]
+} as Meta<GfSymbolAutocompleteComponent>;
+
+type Story = StoryObj<GfSymbolAutocompleteComponent>;
+
+export const Default: Story = {
+  args: {}
+};
+
+export const WithDefaultItems: Story = {
+  args: {
+    defaultLookupItems: DEFAULT_OPTIONS
+  }
+};

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts

@@ -76,16 +76,17 @@ export class GfSymbolAutocompleteComponent
   extends AbstractMatFormField<LookupItem>
   implements OnInit, OnDestroy
 {
-  @Input() private includeIndices = false;
+  @Input() public defaultLookupItems: LookupItem[] = [];
   @Input() public isLoading = false;
 
-  @ViewChild(MatInput) private input: MatInput;
-
   @ViewChild('symbolAutocomplete') public symbolAutocomplete: MatAutocomplete;
 
+  @Input() private includeIndices = false;
+
+  @ViewChild(MatInput) private input: MatInput;
+
   public control = new FormControl();
-  public filteredLookupItems: (LookupItem & { assetSubClassString: string })[] =
-    [];
+  public lookupItems: (LookupItem & { assetSubClassString: string })[] = [];
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -106,6 +107,10 @@ export class GfSymbolAutocompleteComponent
       this.control.disable();
     }
 
+    if (this.defaultLookupItems?.length) {
+      this.showDefaultOptions();
+    }
+
     this.control.valueChanges
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
@@ -117,7 +122,13 @@ export class GfSymbolAutocompleteComponent
     this.control.valueChanges
       .pipe(
         filter((query) => {
-          return isString(query) && query.length > 1;
+          if (query.length === 0) {
+            this.showDefaultOptions();
+
+            return false;
+          }
+
+          return isString(query);
         }),
         tap(() => {
           this.isLoading = true;
@@ -135,7 +146,7 @@ export class GfSymbolAutocompleteComponent
         })
       )
       .subscribe((filteredLookupItems) => {
-        this.filteredLookupItems = filteredLookupItems.map((lookupItem) => {
+        this.lookupItems = filteredLookupItems.map((lookupItem) => {
           return {
             ...lookupItem,
             assetSubClassString: translate(lookupItem.assetSubClass)
@@ -161,7 +172,7 @@ export class GfSymbolAutocompleteComponent
   }
 
   public isValueInOptions(value: string) {
-    return this.filteredLookupItems.some((item) => {
+    return this.lookupItems.some((item) => {
       return item.symbol === value;
     });
   }
@@ -193,6 +204,17 @@ export class GfSymbolAutocompleteComponent
     this.unsubscribeSubject.complete();
   }
 
+  private showDefaultOptions() {
+    this.lookupItems = this.defaultLookupItems.map((lookupItem) => {
+      return {
+        ...lookupItem,
+        assetSubClassString: translate(lookupItem.assetSubClass)
+      };
+    });
+
+    this.changeDetectorRef.markForCheck();
+  }
+
   private validateRequired() {
     const requiredCheck = super.required
       ? !super.value?.dataSource || !super.value?.symbol