(front) Improve search result stype

Template to show results with glyphicon

(cherry picked from commit 550d8e7b343dc262be87182ae13f231ccc995b55)

Improve style
Stealing CSS from the demo site

(cherry picked from commit 75bebac0ac6080a0210d2b156a14f8a0f70067db)

dashboard/package.json

@@ -19,15 +19,17 @@
     "@angular/platform-browser": "~11.0.4",
     "@angular/platform-browser-dynamic": "~11.0.4",
     "@angular/router": "~11.0.4",
-    "rxjs": "~6.6.0",
-    "zone.js": "~0.10.2",
+    "@ng-bootstrap/ng-bootstrap": "^9.1.3",
     "bootstrap": "^3.3.7",
-    "tslib": "^2.0.0"
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1100.4",
     "@angular/cli": "~11.0.4",
     "@angular/compiler-cli": "~11.0.4",
+    "@angular/localize": "^11.0.4",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",

dashboard/src/app/app.module.ts

@@ -23,12 +23,15 @@ import { ConvertSizeToStringPipe } from './pipes/convert-size-to-string.pipe';
 import { RoundPipe } from './pipes/round.pipe';
 import { AlbumsComponent } from './albums/albums.component';
 
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+
 @NgModule({
   imports: [
     BrowserModule,
     HttpClientModule,
     FormsModule,
-    AppRoutingModule
+    AppRoutingModule,
+    NgbModule
   ],
   declarations: [
     AppComponent,

dashboard/src/app/dashboard/dashboard.component.css

@@ -34,5 +34,44 @@
   border-radius: 50%;
   background-color: #9b59b6;
   margin: 0 auto;
-
+}
+
+/* Style for autocompletion */
+/* Stolen from https://ng-bootstrap.github.io/#/components/typeahead/examples */
+::ng-deep .dropdown-item {
+    display: block;
+    width: 100%;
+    padding: .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    color: #212529;
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0
+}
+
+::ng-deep .dropdown-item:focus,
+::ng-deep .dropdown-item:hover {
+    color: #16181b;
+    text-decoration: none;
+    background-color: #f8f9fa
+}
+
+::ng-deep .dropdown-item.active,
+::ng-deep .dropdown-item:active {
+    color: #fff;
+    text-decoration: none;
+    background-color: #007bff
+}
+
+::ng-deep .dropdown-item.disabled,
+::ng-deep .dropdown-item:disabled {
+    color: #6c757d;
+    pointer-events: none;
+    background-color: transparent
+}
+
+::ng-deep .dropdown-menu.show {
+    display: block
 }

dashboard/src/app/dashboard/dashboard.component.html

@@ -77,6 +77,14 @@
     </div>
 </div>
 
+<ng-template #rt let-r="result" let-t="term">
+    <!-- glyphicon glyphicon-cd -->
+    <span *ngIf="r.type == 'artist'" class="glyphicon glyphicon-user"></span>
+    <span *ngIf="r.type == 'album'" class="glyphicon glyphicon-cd"></span>
+    &nbsp; <ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
+  </ng-template>
+
+
 <form class="navbar-form">
     <div class="form-group" style="display:inline;">
         <div class="input-group" style="display:table;">
@@ -85,13 +93,10 @@
             </span>
             <input class="form-control" type="text" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus"
                 id="searchSuggest"
-                list="dynmicUserIds"
                 [(ngModel)]="searchTerm"
-                (keyup)="onSearchChange()"
-                (change)="onSearchSelected($event)">
-                <datalist id="dynmicUserIds">
-                   <option *ngFor="let item of suggested" [value]="item.name" [label]="item.type" [id]="item">{{item}}</option>
-                </datalist>
+                [ngbTypeahead]="search"
+                [resultTemplate]="rt"
+                (selectItem)="onSelectSearch($event)">
         </div>
     </div>
 </form>

dashboard/src/app/dashboard/dashboard.component.ts

@@ -4,16 +4,16 @@ import { Router } from '@angular/router';
 import { ElsService } from './../els.service';
 import { Song } from './../model/song';
 import { Bucket } from './../model/bucket';
-import { Album } from './../model/album';
-import { Artist } from './../model/artist';
 import { Suggested } from '../model/suggested';
 
+import {Observable, of, OperatorFunction} from 'rxjs';
+import {catchError, debounceTime, distinctUntilChanged, map, tap, switchMap} from 'rxjs/operators';
+
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: [ './dashboard.component.css' ]
 })
-
 export class DashboardComponent implements OnInit {
   totalTime = 0;
   totalSize = 0;
@@ -119,18 +119,26 @@ export class DashboardComponent implements OnInit {
     });
   }
 
-  onSearchChange() {
-    this.elsService.getSuggest(this.searchTerm).subscribe(result => this.suggested = result);
+  onSelectSearch($event) {
+    this.route.navigate(['/' + $event.item.type + '/' + $event.item.name])
   }
 
-  onSearchSelected($event) {
-    let selected = $event.target.value
-    // FIXME Not possible to get good element (just value)
-    // Need to use a plugin to do this correctly
-    this.suggested.forEach(element => {
-      if (element.name == selected) {
-        this.route.navigate(['/' + element.type + '/' + element.name])
-      }
-    });
-  }
+  searching = false;
+  searchFailed = false;
+
+  search: OperatorFunction<string, readonly string[]> = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(300),
+      distinctUntilChanged(),
+      tap(() => this.searching = true),
+      switchMap(term =>
+        this.elsService.getSuggest(term).pipe(
+          tap(() => this.searchFailed = false),
+          catchError(() => {
+            this.searchFailed = true;
+            return of([]);
+          }))
+      ),
+      tap(() => this.searching = false)
+    )
 }

dashboard/src/app/model/suggested.ts

@@ -1,8 +1,4 @@
 export class Suggested {
     name: string;
     type: string;
-
-    public toString() : string {
-        return `${this.name} (${this.type})`;
-    }
 }

dashboard/src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.