Implemented hipster, keyboard-oriented search component #5

src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.html

@@ -1,5 +1,6 @@
 <div class="mb-4">
-    <jhi-microservice-search></jhi-microservice-search>
+    <jhi-microservice-search (itemSelected)="onItemSelected($event)">
+    </jhi-microservice-search>
 </div>
 <div class="card-columns">
     <jhi-microservice-card *ngFor="let microservice of microservices"

src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.ts

@@ -13,7 +13,6 @@ import { JhiEventManager } from 'ng-jhipster';
 export class MicroserviceDashboardComponent implements OnInit, OnDestroy {
   microservices?: IMicroservice[];
   eventSubscriber?: Subscription;
-  search: any;
 
   constructor(protected microserviceService: MicroserviceService, protected eventManager: JhiEventManager) {}
 
@@ -35,4 +34,12 @@ export class MicroserviceDashboardComponent implements OnInit, OnDestroy {
   registerChangeInMicroservices(): void {
     this.eventSubscriber = this.eventManager.subscribe('microserviceListModification', () => this.loadAll());
   }
+
+  onItemSelected(value?: IMicroservice): any {
+    if (value) {
+      this.microservices = this.microservices?.filter(i => i.id === value.id);
+    } else {
+      this.loadAll();
+    }
+  }
 }

src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html

@@ -1,5 +1,8 @@
 <input class="form-control" type="text" placeholder="Search" aria-label="Search"
+       [(ngModel)]="model"
        [ngbTypeahead]="search"
-       [resultFormatter]="microserviceFormatter"
-       [inputFormatter]="microserviceInputFormatter"
+       [resultFormatter]="formatter"
+       [inputFormatter]="inputFormatter"
+       (selectItem)="onItemSelected($event.item)"
+       (keyup.escape)="clear()"
 />

src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts

@@ -1,8 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { MicroserviceService } from 'app/entities/microservice/microservice.service';
-import { HttpResponse } from '@angular/common/http';
 import { IMicroservice } from 'app/shared/model/microservice.model';
 
 @Component({
@@ -11,18 +10,38 @@ import { IMicroservice } from 'app/shared/model/microservice.model';
   styleUrls: ['./microservice-search.component.scss'],
 })
 export class MicroserviceSearchComponent implements OnInit {
+  model: any;
+
+  @Output() itemSelected = new EventEmitter<IMicroservice>();
+
   constructor(protected microserviceService: MicroserviceService) {}
 
+  ngOnInit(): void {}
+
   search = (text$: Observable<string>) =>
     text$.pipe(
-      debounceTime(200),
+      debounceTime(500),
       distinctUntilChanged(),
 
-      switchMap(searchText => (searchText.length < 2 ? [] : this.microserviceService.query()))
+      switchMap(searchText => (searchText.length < 2 ? [] : this.loadData(searchText)))
     );
 
-  microserviceFormatter = (result: HttpResponse<IMicroservice>) => result?.body?.name;
-  microserviceInputFormatter = (result: HttpResponse<IMicroservice>) => result?.body?.name;
+  loadData(searchText: string): Observable<IMicroservice[]> {
+    return this.microserviceService
+      .query()
+      .pipe(map(response => response.body!.filter(m => m.name!.toLowerCase().includes(searchText.toLowerCase())) || [{}]));
+  }
 
-  ngOnInit(): void {}
+  formatter = (result: IMicroservice) => result.name || '';
+
+  inputFormatter = (result: IMicroservice) => result.name || '';
+
+  onItemSelected(item: IMicroservice): any {
+    this.itemSelected.emit(item);
+  }
+
+  clear(): any {
+    this.model = '';
+    this.itemSelected.emit();
+  }
 }