From fdecd0b7fb1d94aa32a9c3a46d835ab55e12356a Mon Sep 17 00:00:00 2001
From: tillias <ternovich@gmail.com>
Date: Sun, 4 Oct 2020 13:02:48 +0200
Subject: [PATCH 1/4] Introduced CardSettings for more flexible configuration
 #13

---
 .../microservice-card/card-settings.model.ts         | 11 +++++++++++
 .../microservice-card.component.html                 |  4 ++--
 .../microservice-card/microservice-card.component.ts | 12 +++++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/card-settings.model.ts

diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/card-settings.model.ts b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/card-settings.model.ts
new file mode 100644
index 0000000..b18bf55
--- /dev/null
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/card-settings.model.ts
@@ -0,0 +1,11 @@
+export interface ICardSettings {
+  previewWidth: number;
+  previewHeight: number;
+  fallbackImage: string;
+}
+
+export class CardSettings implements ICardSettings {
+  static DEFAULT: CardSettings = new CardSettings(96, 96, '/content/images/jhipster_family_member_1.svg');
+
+  constructor(public previewWidth: number, public previewHeight: number, public fallbackImage: string) {}
+}
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.html b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.html
index 48dee02..88a76fd 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.html
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.html
@@ -6,8 +6,8 @@ <h3 class="h3 d-inline-block">{{microservice.name}}</h3>
     <div class="card-body">
         <div class="d-flex flex-row mb-3">
 
-            <img [src]="microservice.imageUrl"
-                 (error)="microservice.imageUrl = '../../../../content/images/jhipster_family_member_1.svg'"
+            <img [src]="microservice.imageUrl" [width]="settings.previewWidth" [height]="settings.previewHeight"
+                 (error)="microservice.imageUrl = settings.fallbackImage"
                  alt="IMAGE"/>
             <div class="d-flex flex-column ml-2">
                 <span class="font-weight-bold">Team: {{microservice.team?.name}}</span>
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.ts b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.ts
index ab0723b..ce88d51 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.ts
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { IMicroservice } from 'app/shared/model/microservice.model';
+import { CardSettings, ICardSettings } from 'app/entities/microservice/microservice-dashboard/microservice-card/card-settings.model';
 
 @Component({
   selector: 'jhi-microservice-card',
@@ -8,8 +9,17 @@ import { IMicroservice } from 'app/shared/model/microservice.model';
 })
 export class MicroserviceCardComponent implements OnInit {
   @Input() microservice!: IMicroservice;
+  @Input() settings: ICardSettings = CardSettings.DEFAULT;
 
   constructor() {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.assertInputsProvided();
+  }
+
+  private assertInputsProvided(): void {
+    if (!this.microservice || !this.settings) {
+      throw new Error('The required inputs [microservice] or [cardSettings] are not provided');
+    }
+  }
 }

From 4a5f39b2fdd5afbb098ead980e7ed7c61f63287f Mon Sep 17 00:00:00 2001
From: tillias <ternovich@gmail.com>
Date: Sun, 4 Oct 2020 14:32:44 +0200
Subject: [PATCH 2/4] Started implementation of search field for #5

---
 .../microservice-dashboard.component.html     |  7 ++++-
 .../microservice-dashboard.component.ts       |  2 ++
 .../microservice-dashboard.module.ts          |  3 +-
 .../microservice-search.component.html        |  5 ++++
 .../microservice-search.component.scss        |  0
 .../microservice-search.component.ts          | 28 +++++++++++++++++++
 6 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html
 create mode 100644 src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.scss
 create mode 100644 src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts

diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.html b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.html
index 9027adb..38b26c0 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.html
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.html
@@ -1,3 +1,8 @@
+<div class="mb-4">
+    <jhi-microservice-search></jhi-microservice-search>
+</div>
 <div class="card-columns">
-    <jhi-microservice-card *ngFor="let microservice of microservices" [microservice]="microservice"></jhi-microservice-card>
+    <jhi-microservice-card *ngFor="let microservice of microservices"
+                           [microservice]="microservice">
+    </jhi-microservice-card>
 </div>
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.ts b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.ts
index 3f4cf1a..a5706eb 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.ts
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.ts
@@ -13,6 +13,7 @@ import { JhiEventManager } from 'ng-jhipster';
 export class MicroserviceDashboardComponent implements OnInit, OnDestroy {
   microservices?: IMicroservice[];
   eventSubscriber?: Subscription;
+  search: any;
 
   constructor(protected microserviceService: MicroserviceService, protected eventManager: JhiEventManager) {}
 
@@ -20,6 +21,7 @@ export class MicroserviceDashboardComponent implements OnInit, OnDestroy {
     this.loadAll();
     this.registerChangeInMicroservices();
   }
+
   ngOnDestroy(): void {
     if (this.eventSubscriber) {
       this.eventManager.destroy(this.eventSubscriber);
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.module.ts b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.module.ts
index b494171..1f09620 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.module.ts
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.module.ts
@@ -3,9 +3,10 @@ import { MicroserviceDashboardComponent } from './microservice-dashboard.compone
 import { MicrocatalogSharedModule } from '../../../shared/shared.module';
 import { RouterModule } from '@angular/router';
 import { MicroserviceCardComponent } from './microservice-card/microservice-card.component';
+import { MicroserviceSearchComponent } from './microservice-search/microservice-search.component';
 
 @NgModule({
-  declarations: [MicroserviceDashboardComponent, MicroserviceCardComponent],
+  declarations: [MicroserviceDashboardComponent, MicroserviceCardComponent, MicroserviceSearchComponent],
   imports: [MicrocatalogSharedModule, RouterModule],
   exports: [MicroserviceDashboardComponent],
 })
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html
new file mode 100644
index 0000000..0628a71
--- /dev/null
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html
@@ -0,0 +1,5 @@
+<input class="form-control" type="text" placeholder="Search" aria-label="Search"
+       [ngbTypeahead]="search"
+       [resultFormatter]="microserviceFormatter"
+       [inputFormatter]="microserviceInputFormatter"
+/>
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.scss b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts
new file mode 100644
index 0000000..b9f78a7
--- /dev/null
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged, 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({
+  selector: 'jhi-microservice-search',
+  templateUrl: './microservice-search.component.html',
+  styleUrls: ['./microservice-search.component.scss'],
+})
+export class MicroserviceSearchComponent implements OnInit {
+  constructor(protected microserviceService: MicroserviceService) {}
+
+  search = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(200),
+      distinctUntilChanged(),
+
+      switchMap(searchText => (searchText.length < 2 ? [] : this.microserviceService.query()))
+    );
+
+  microserviceFormatter = (result: HttpResponse<IMicroservice>) => result?.body?.name;
+  microserviceInputFormatter = (result: HttpResponse<IMicroservice>) => result?.body?.name;
+
+  ngOnInit(): void {}
+}

From ee0d96da2d6b4feece5c19ea0bf65f88cc9832c9 Mon Sep 17 00:00:00 2001
From: tillias <ternovich@gmail.com>
Date: Sun, 4 Oct 2020 21:20:31 +0200
Subject: [PATCH 3/4] Implemented hipster, keyboard-oriented search component
 #5

---
 .../microservice-dashboard.component.html     |  3 +-
 .../microservice-dashboard.component.ts       |  9 ++++-
 .../microservice-search.component.html        |  7 ++--
 .../microservice-search.component.ts          | 35 ++++++++++++++-----
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.html b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.html
index 38b26c0..5757850 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.html
+++ b/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"
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.ts b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.ts
index a5706eb..648ba40 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-dashboard.component.ts
+++ b/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();
+    }
+  }
 }
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html
index 0628a71..99a2088 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html
+++ b/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()"
 />
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts
index b9f78a7..0b72d0a 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts
+++ b/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();
+  }
 }

From 768bdee6ced4ea2f93ed9ffd830d2853e5625dab Mon Sep 17 00:00:00 2001
From: tillias <ternovich@gmail.com>
Date: Sun, 4 Oct 2020 21:29:11 +0200
Subject: [PATCH 4/4] Emit itemSelected with empty value if text searchText is
 empty #5

---
 .../microservice-search/microservice-search.component.html  | 1 +
 .../microservice-search/microservice-search.component.ts    | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html
index 99a2088..ebfeb72 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html
@@ -1,5 +1,6 @@
 <input class="form-control" type="text" placeholder="Search" aria-label="Search"
        [(ngModel)]="model"
+       (ngModelChange)="onModelChanged()"
        [ngbTypeahead]="search"
        [resultFormatter]="formatter"
        [inputFormatter]="inputFormatter"
diff --git a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts
index 0b72d0a..fa38c98 100644
--- a/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts
+++ b/src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.ts
@@ -44,4 +44,10 @@ export class MicroserviceSearchComponent implements OnInit {
     this.model = '';
     this.itemSelected.emit();
   }
+
+  onModelChanged(): any {
+    if (!this.model) {
+      this.itemSelected.emit();
+    }
+  }
 }