From 14ef03f7fbd195a7deea38203a252b4b51530c5f Mon Sep 17 00:00:00 2001 From: "Patrik J. Braun" Date: Sun, 9 Dec 2018 22:33:52 +0100 Subject: [PATCH] improving routing and searching experience --- common/QueryParams.ts | 2 + frontend/app/app.component.ts | 2 - frontend/app/app.routing.ts | 47 +++++++++++++------ frontend/app/gallery/gallery.component.html | 2 +- frontend/app/gallery/gallery.component.ts | 7 ++- .../photo/photo.grid.gallery.component.html | 2 +- .../search/search.gallery.component.ts | 20 ++++---- 7 files changed, 51 insertions(+), 31 deletions(-) diff --git a/common/QueryParams.ts b/common/QueryParams.ts index 40327348..3a2ca74f 100644 --- a/common/QueryParams.ts +++ b/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' } diff --git a/frontend/app/app.component.ts b/frontend/app/app.component.ts index cc299b98..64f412f5 100644 --- a/frontend/app/app.component.ts +++ b/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', diff --git a/frontend/app/app.routing.ts b/frontend/app/app.routing.ts index 2c273f45..9f039cb4 100644 --- a/frontend/app/app.routing.ts +++ b/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'}, diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html index 7dff2914..31082bff 100644 --- a/frontend/app/gallery/gallery.component.html +++ b/frontend/app/gallery/gallery.component.html @@ -13,7 +13,7 @@
  • - +
  • diff --git a/frontend/app/gallery/gallery.component.ts b/frontend/app/gallery/gallery.component.ts index cf9cc3e4..8d4145ca 100644 --- a/frontend/app/gallery/gallery.component.ts +++ b/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); diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html index e285d65f..f7862539 100644 --- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html +++ b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html @@ -41,7 +41,7 @@ #{{keyword}} #{{keyword}} - , + , diff --git a/frontend/app/gallery/search/search.gallery.component.ts b/frontend/app/gallery/search/search.gallery.component.ts index 1b0286a8..ea5d6201 100644 --- a/frontend/app/gallery/search/search.gallery.component.ts +++ b/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 = (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 {