From f37ce410ebee1672c0053fb9cfb76ffaeec9ecc5 Mon Sep 17 00:00:00 2001
From: "Maxence G. de Montauzan" <maxence@gdemontauzan.fr>
Date: Fri, 20 Aug 2021 16:38:43 +0200
Subject: [PATCH] (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)
---
 .../src/app/dashboard/dashboard.component.css | 41 ++++++++++++++++++-
 .../app/dashboard/dashboard.component.html    |  9 ++++
 dashboard/src/app/model/suggested.ts          |  4 --
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/dashboard/src/app/dashboard/dashboard.component.css b/dashboard/src/app/dashboard/dashboard.component.css
index 2ecca97..1171f2d 100644
--- a/dashboard/src/app/dashboard/dashboard.component.css
+++ b/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
 }
diff --git a/dashboard/src/app/dashboard/dashboard.component.html b/dashboard/src/app/dashboard/dashboard.component.html
index 4525a5f..1d07c6b 100644
--- a/dashboard/src/app/dashboard/dashboard.component.html
+++ b/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;">
@@ -87,6 +95,7 @@
                 id="searchSuggest"
                 [(ngModel)]="searchTerm"
                 [ngbTypeahead]="search"
+                [resultTemplate]="rt"
                 (selectItem)="onSelectSearch($event)">
         </div>
     </div>
diff --git a/dashboard/src/app/model/suggested.ts b/dashboard/src/app/model/suggested.ts
index 1acfa78..b52c6d6 100644
--- a/dashboard/src/app/model/suggested.ts
+++ b/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})`;
-    }
 }