improving navigator bar for searching

frontend/app/gallery/cache.gallery.service.ts

@@ -1,5 +1,4 @@
 import {Injectable} from '@angular/core';
-import {PhotoDTO} from '../../../common/entities/PhotoDTO';
 import {DirectoryDTO} from '../../../common/entities/DirectoryDTO';
 import {Utils} from '../../../common/Utils';
 import {Config} from '../../../common/config/public/Config';
@@ -33,11 +32,11 @@ export class GalleryCacheService {
   }
 
 
-  public getAutoComplete(text: string): Array<AutoCompleteItem> {
+  public getAutoComplete(text: string): AutoCompleteItem[] {
     const key = GalleryCacheService.AUTO_COMPLETE_PREFIX + text;
     const tmp = localStorage.getItem(key);
     if (tmp != null) {
-      const value: CacheItem<Array<AutoCompleteItem>> = JSON.parse(tmp);
+      const value: CacheItem<AutoCompleteItem[]> = JSON.parse(tmp);
       if (value.timestamp < Date.now() - Config.Client.Search.autocompleteCacheTimeout) {
         localStorage.removeItem(key);
         return null;

frontend/app/gallery/gallery.component.css

@@ -54,7 +54,3 @@ app-gallery-directory {
     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
   }
 }
-
-.search-type{
-  margin-left: 5px;
-}

frontend/app/gallery/gallery.component.html

@@ -40,25 +40,13 @@
     <app-gallery-grid [photos]="_galleryService.content.value.directory.media"
                       [lightbox]="lightbox"></app-gallery-grid>
   </div>
-
+  <!-- Search-->
   <div body class="container-fluid" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.searchResult">
     <div class="alert alert-info" role="alert"
          *ngIf="_galleryService.content.value.searchResult.resultOverflow == true" i18n>
       Too many results to show. Refine your search.
     </div>
-    <ol class="breadcrumb">
+    <app-gallery-navbar [searchResult]="_galleryService.content.value.searchResult"></app-gallery-navbar>
-      <li class="active">
-        <ng-container i18n>Searching for:</ng-container>
-        <span class="search-type" [ngSwitch]="_galleryService.content.value.searchResult.searchType">
-                      <span *ngSwitchCase="SearchTypes.photo" class="oi oi-image"></span>
-                      <span *ngSwitchCase="SearchTypes.video" class="oi oi-video"></span>
-                      <span *ngSwitchCase="SearchTypes.directory" class="oi oi-folder"></span>
-                      <span *ngSwitchCase="SearchTypes.keyword" class="oi oi-tag"></span>
-                      <span *ngSwitchCase="SearchTypes.position" class="oi oi-map-marker"></span>
-                    </span>
-        <strong> {{_galleryService.content.value.searchResult.searchText}}</strong>
-      </li>
-    </ol>
 
     <app-gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
                      [photos]="_galleryService.content.value.searchResult.media"

frontend/app/gallery/navigator/navigator.gallery.component.css

@@ -40,3 +40,8 @@ nav {
 .dropdown-toggle::after {
   display: none;
 }
+
+
+.search-type{
+  margin-left: 5px;
+}

frontend/app/gallery/navigator/navigator.gallery.component.html

@@ -1,5 +1,5 @@
 <nav class="nav-container" aria-label="breadcrumb">
-  <ol id="directory-path" class="breadcrumb">
+  <ol *ngIf="directory" id="directory-path" class="breadcrumb">
     <li *ngFor="let path of routes" class="breadcrumb-item">
       <a *ngIf="path.route" [routerLink]="['/gallery',path.route]"
          [queryParams]="queryService.getParams()">{{path.name}}</a>
@@ -7,11 +7,25 @@
     </li>
   </ol>
 
+  <ol *ngIf="searchResult" class="breadcrumb">
+    <li class="active">
+      <ng-container i18n>Searching for:</ng-container>
+      <span class="search-type" [ngSwitch]="searchResult.searchType">
+                      <span *ngSwitchCase="SearchTypes.photo" class="oi oi-image"></span>
+                      <span *ngSwitchCase="SearchTypes.video" class="oi oi-video"></span>
+                      <span *ngSwitchCase="SearchTypes.directory" class="oi oi-folder"></span>
+                      <span *ngSwitchCase="SearchTypes.keyword" class="oi oi-tag"></span>
+                      <span *ngSwitchCase="SearchTypes.position" class="oi oi-map-marker"></span>
+                    </span>
+      <strong> {{searchResult.searchText}}</strong>
+    </li>
+  </ol>
+
   <div class="right-side">
-    <div class="photos-count" *ngIf="directory.media.length > 0 && config.Client.Other.NavBar.showItemCount">
+    <div class="photos-count" *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">
-      {{directory.media.length}} <span i18n>items</span>
+      {{ItemCount}} <span i18n>items</span>
     </div>
-    <div class="divider" *ngIf="directory.media.length > 0 && config.Client.Other.NavBar.showItemCount">&nbsp;</div>
+    <div class="divider" *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">&nbsp;</div>
     <div class="btn-group" dropdown placement="bottom right">
       <button id="button-alignment" dropdownToggle type="button"
               class="btn btn-default dropdown-toggle" aria-controls="dropdown-alignment"

frontend/app/gallery/navigator/navigator.gallery.component.ts

@@ -9,6 +9,8 @@ import {GalleryService} from '../gallery.service';
 import {Utils} from '../../../../common/Utils';
 import {SortingMethods} from '../../../../common/entities/SortingMethods';
 import {Config} from '../../../../common/config/public/Config';
+import {SearchResultDTO} from '../../../../common/entities/SearchResultDTO';
+import {SearchTypes} from '../../../../common/entities/AutoCompleteItem';
 
 @Component({
   selector: 'app-gallery-navbar',
@@ -18,12 +20,15 @@ import {Config} from '../../../../common/config/public/Config';
 })
 export class GalleryNavigatorComponent implements OnChanges {
   @Input() directory: DirectoryDTO;
+  @Input() searchResult: SearchResultDTO;
 
   routes: Array<NavigatorPath> = [];
   SortingMethods = SortingMethods;
   sortingMethodsType: { key: number; value: string }[] = [];
   config = Config;
 
+  readonly SearchTypes = SearchTypes;
+
   constructor(private _authService: AuthenticationService,
               public queryService: QueryService,
               public galleryService: GalleryService,
@@ -84,6 +89,9 @@ export class GalleryNavigatorComponent implements OnChanges {
     this.galleryService.setSorting(sorting);
   }
 
+  get ItemCount(): number {
+    return (this.directory || this.searchResult).media.length;
+  }
 
 }