improving routing and searching experience

common/QueryParams.ts

@@ -12,6 +12,8 @@ export const QueryParams = {
     photo: 'p',
     sharingKey_short: 'sk',
     sharingKey_long: 'sharingKey',
+    searchText: 'searchText',
+    directory: 'directory',
     knownLastModified: 'knownLastModified',
     knownLastScanned: 'knownLastScanned'
   }

frontend/app/app.component.ts

@@ -4,11 +4,9 @@ import {UserDTO} from '../../common/entities/UserDTO';
 import {Router} from '@angular/router';
 import {Config} from '../../common/config/public/Config';
 import {Title} from '@angular/platform-browser';
-import {NotificationService} from './model/notification.service';
 import {ShareService} from './gallery/share.service';
 import 'hammerjs';
 import {Subscription} from 'rxjs';
-import {QueryService} from './model/query.service';
 
 @Component({
   selector: 'app-pi-gallery2',

frontend/app/app.routing.ts

@@ -1,11 +1,42 @@
 import {ModuleWithProviders} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import {RouterModule, Routes, UrlMatchResult, UrlSegment} from '@angular/router';
 import {LoginComponent} from './login/login.component';
 import {GalleryComponent} from './gallery/gallery.component';
 import {AdminComponent} from './admin/admin.component';
 import {ShareLoginComponent} from './sharelogin/share-login.component';
 import {QueryParams} from '../../common/QueryParams';
 
+export function galleryMatcherFunction(
+  segments: UrlSegment[]): UrlMatchResult | null {
+
+
+  if (segments.length === 0) {
+    return null;
+  }
+  const path = segments[0].path;
+
+  const posParams: { [key: string]: UrlSegment } = {};
+  if (path === 'gallery') {
+    if (segments.length > 1) {
+      posParams[QueryParams.gallery.directory] = segments[1];
+    }
+    return {consumed: segments.slice(0, Math.min(segments.length, 2)), posParams};
+  }
+  if (path === 'search') {
+    if (segments.length > 1) {
+      posParams[QueryParams.gallery.searchText] = segments[1];
+    }
+    return {consumed: segments.slice(0, Math.min(segments.length, 2)), posParams};
+  }
+  if (path === 'share') {
+    if (segments.length > 1) {
+      posParams[QueryParams.gallery.sharingKey_long] = segments[1];
+    }
+    return {consumed: segments.slice(0, Math.min(segments.length, 2)), posParams};
+  }
+  return null;
+}
+
 const ROUTES: Routes = [
   {
     path: 'login',
@@ -20,19 +51,7 @@ const ROUTES: Routes = [
     component: AdminComponent
   },
   {
-    path: 'gallery/:directory',
-    component: GalleryComponent
-  },
-  {
-    path: 'gallery',
-    component: GalleryComponent
-  },
-  {
-    path: 'search/:searchText',
-    component: GalleryComponent
-  },
-  {
-    path: 'share/:' + QueryParams.gallery.sharingKey_long,
+    matcher: galleryMatcherFunction,
     component: GalleryComponent
   },
   {path: '', redirectTo: '/login', pathMatch: 'full'},

frontend/app/gallery/gallery.component.html

@@ -13,7 +13,7 @@
       </span>
     </li>
     <li class="nav-item" *ngIf="showSearchBar">
-      <app-gallery-search #search></app-gallery-search>
+      <app-gallery-search></app-gallery-search>
     </li>
     <li class="nav-item" *ngIf="showShare">
       <app-gallery-share></app-gallery-share>

frontend/app/gallery/gallery.component.ts

@@ -25,7 +25,6 @@ import {QueryParams} from '../../../common/QueryParams';
 })
 export class GalleryComponent implements OnInit, OnDestroy {
 
-  @ViewChild(GallerySearchComponent) search: GallerySearchComponent;
   @ViewChild(GalleryGridComponent) grid: GalleryGridComponent;
 
   public showSearchBar = false;
@@ -73,7 +72,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
   }
 
   private onRoute = async (params: Params) => {
-    const searchText = params['searchText'];
+    const searchText = params[QueryParams.gallery.searchText];
     if (searchText && searchText !== '') {
       const typeString: string = params['type'];
       let type: SearchTypes = null;
@@ -86,7 +85,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
       return;
     }
 
-    if (params['sharingKey'] && params['sharingKey'] !== '') {
+    if (params[QueryParams.gallery.sharingKey_long] && params[QueryParams.gallery.sharingKey_long] !== '') {
       const sharing = await this.shareService.getSharing();
       const qParams: { [key: string]: any } = {};
       qParams[QueryParams.gallery.sharingKey_short] = this.shareService.getSharingKey();
@@ -94,7 +93,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
       return;
     }
 
-    let directoryName = params['directory'];
+    let directoryName = params[QueryParams.gallery.directory];
     directoryName = directoryName || '';
 
     this._galleryService.loadDirectory(directoryName);

frontend/app/gallery/grid/photo/photo.grid.gallery.component.html

@@ -41,7 +41,7 @@
         <a *ngIf="searchEnabled"
            [routerLink]="['/search', keyword, {type: SearchTypes[SearchTypes.keyword]}]">#{{keyword}}</a>
         <span *ngIf="!searchEnabled">#{{keyword}}</span>
-        <ng-template [ngIf]="!last">,</ng-template>
+        <ng-template [ngIf]="!last">, </ng-template>
       </ng-template>
 
     </div>

frontend/app/gallery/search/search.gallery.component.ts

@@ -6,6 +6,7 @@ import {GalleryService} from '../gallery.service';
 import {Subscription} from 'rxjs';
 import {Config} from '../../../../common/config/public/Config';
 import {NavigationService} from '../../model/navigation.service';
+import {QueryParams} from '../../../../common/QueryParams';
 
 @Component({
   selector: 'app-gallery-search',
@@ -34,7 +35,7 @@ export class GallerySearchComponent implements OnDestroy {
     this.SearchTypes = SearchTypes;
 
     this.subscription = this._route.params.subscribe((params: Params) => {
-      const searchText = params['searchText'];
+      const searchText = params[QueryParams.gallery.searchText];
       if (searchText && searchText !== '') {
         this.searchText = searchText;
       }
@@ -50,18 +51,24 @@ export class GallerySearchComponent implements OnDestroy {
 
   onSearchChange(event: KeyboardEvent) {
 
+
     const searchText = (<HTMLInputElement>event.target).value.trim();
 
-    if (Config.Client.Search.autocompleteEnabled && this.cache.lastAutocomplete !== searchText) {
+    if (Config.Client.Search.autocompleteEnabled &&
+      this.cache.lastAutocomplete !== searchText) {
       this.cache.lastAutocomplete = searchText;
       this.autocomplete(searchText).catch(console.error);
     }
 
-    if (Config.Client.Search.instantSearchEnabled && this.cache.lastInstantSearch !== searchText) {
+    if (Config.Client.Search.instantSearchEnabled &&
+      this.cache.lastInstantSearch !== searchText) {
       this.cache.lastInstantSearch = searchText;
+      if (searchText === '') {
+        return this.navigationService.toGallery().catch(console.error);
+      }
       this._galleryService.runInstantSearch(searchText);
       this.navigationService.search(searchText).catch(console.error);
-      // this._galleryService.instantSearch(searchText).catch(console.error);
+
     }
   }
 
@@ -113,11 +120,6 @@ export class GallerySearchComponent implements OnDestroy {
       this.autoCompleteItems.push(renderItem);
     });
   }
-
-  public setSearchText(searchText: string) {
-    this.searchText = searchText;
-  }
-
 }
 
 class AutoCompleteRenderItem {