Asset search

frontend/src/app/components/assets/assets-nav/assets-nav.component.html

@@ -15,7 +15,7 @@
 
   <form [formGroup]="searchForm" class="form-inline">
     <div class="input-group mb-2">
-      <input style="width: 350px;" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
+      <input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
       <div class="input-group-append">
         <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
       </div>

frontend/src/app/components/assets/assets-nav/assets-nav.component.ts

@@ -1,5 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { merge, Observable, of, Subject } from 'rxjs';
+import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
+import { AssetExtended } from 'src/app/interfaces/electrs.interface';
+import { AssetsService } from 'src/app/services/assets.service';
+import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
+import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-assets-nav',
@@ -7,16 +17,78 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
   styleUrls: ['./assets-nav.component.scss']
 })
 export class AssetsNavComponent implements OnInit {
-  activeTab = 0;
+  @ViewChild('instance', {static: true}) instance: NgbTypeahead;
+  nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
   searchForm: FormGroup;
+  assetsCache: AssetExtended[];
+
+  typeaheadSearchFn: ((text: Observable<string>) => Observable<readonly any[]>);
+  formatterFn = (asset: AssetExtended) => asset.name + ' (' + asset.ticker  + ')';
+  focus$ = new Subject<string>();
+  click$ = new Subject<string>();
+
+  itemsPerPage = 15;
 
   constructor(
     private formBuilder: FormBuilder,
+    private seoService: SeoService,
+    private router: Router,
+    private assetsService: AssetsService,
+    private stateService: StateService,
+    private relativeUrlPipe: RelativeUrlPipe,
   ) { }
 
   ngOnInit(): void {
+    this.typeaheadSearchFn = this.typeaheadSearch;
+
     this.searchForm = this.formBuilder.group({
-      searchText: [{ value: '', disabled: true }, Validators.required]
+      searchText: [{ value: '', disabled: false }, Validators.required]
+    });
+  }
+
+  typeaheadSearch = (text$: Observable<string>) => {
+    const debouncedText$ = text$.pipe(
+      distinctUntilChanged()
+    );
+    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
+    const inputFocus$ = this.focus$;
+
+    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$)
+      .pipe(
+        switchMap((searchText) => {
+          if (!searchText.length) {
+            return of([]);
+          }
+          return this.assetsService.getAssetsJson$.pipe(
+            map((assets) => {
+              if (searchText.length ) {
+                const filteredAssets = assets.filter((asset) => asset.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1
+                  || (asset.ticker || '').toLowerCase().indexOf(searchText.toLowerCase()) > -1
+                  || (asset.entity && asset.entity.domain || '').toLowerCase().indexOf(searchText.toLowerCase()) > -1);
+                assets = filteredAssets;
+                return filteredAssets.slice(0, this.itemsPerPage);
+              } else {
+                return assets.slice(0, this.itemsPerPage);
+              }
+            })
+          )
+        }),
+      );
+  }
+
+  itemSelected() {
+    setTimeout(() => this.search());
+  }
+
+  search() {
+    const searchText = this.searchForm.value.searchText;
+    this.navigate('/assets/asset/', searchText.asset_id);
+  }
+
+  navigate(url: string, searchText: string, extras?: any) {
+    this.router.navigate([this.relativeUrlPipe.transform(url), searchText], extras);
+    this.searchForm.setValue({
+      searchText: '',
     });
   }