From 1a3742d23ac6e63cc0552090fbba3d1d227cf6b4 Mon Sep 17 00:00:00 2001 From: Lotte Hofstede Date: Thu, 24 Aug 2017 16:39:40 +0200 Subject: [PATCH] 44024: search page almost finished --- .../builders/remote-data-build.service.ts | 34 ++++---- .../search-page/search-page.component.html | 2 +- src/app/search-page/search-page.component.ts | 78 +++++++++++++------ .../search-results.component.html | 3 +- .../search-results.compontent.ts | 14 +++- src/app/search/search-options.model.ts | 7 ++ src/app/search/search.models.ts | 7 -- src/app/search/search.service.ts | 13 ++-- .../pagination/pagination.component.html | 4 +- .../pagination/pagination.component.scss | 5 ++ .../shared/pagination/pagination.component.ts | 19 +---- .../search-form/search-form.component.html | 12 ++- .../search-form/search-form.component.ts | 28 +++---- 13 files changed, 124 insertions(+), 102 deletions(-) create mode 100644 src/app/search/search-options.model.ts delete mode 100644 src/app/search/search.models.ts create mode 100644 src/app/shared/pagination/pagination.component.scss diff --git a/src/app/core/cache/builders/remote-data-build.service.ts b/src/app/core/cache/builders/remote-data-build.service.ts index a413de9b50..eec7f6fefc 100644 --- a/src/app/core/cache/builders/remote-data-build.service.ts +++ b/src/app/core/cache/builders/remote-data-build.service.ts @@ -16,21 +16,18 @@ import { GenericConstructor } from '../../shared/generic-constructor'; import { getMapsTo, getRelationMetadata, getRelationships } from './build-decorators'; import { NormalizedObjectFactory } from '../models/normalized-object-factory'; import { Request } from '../../data/request.models'; +import { PageInfo } from '../../shared/page-info.model'; @Injectable() export class RemoteDataBuildService { - constructor( - protected objectCache: ObjectCacheService, - protected responseCache: ResponseCacheService, - protected requestService: RequestService, - protected store: Store, - ) { + constructor(protected objectCache: ObjectCacheService, + protected responseCache: ResponseCacheService, + protected requestService: RequestService, + protected store: Store,) { } - buildSingle( - href: string, - normalizedType: GenericConstructor - ): RemoteData { + buildSingle(href: string, + normalizedType: GenericConstructor): RemoteData { const requestHrefObs = this.objectCache.getRequestHrefBySelfLink(href); const requestObs = Observable.race( @@ -64,6 +61,13 @@ export class RemoteDataBuildService { const pageInfo = responseCacheObs .filter((entry: ResponseCacheEntry) => hasValue(entry.response) && hasValue(entry.response['pageInfo'])) .map((entry: ResponseCacheEntry) => (entry.response as SuccessResponse).pageInfo) + .map((pInfo: PageInfo) => { + if (isNotEmpty(pageInfo) && pInfo.currentPage >= 0) { + return Object.assign({}, pInfo, {currentPage: pInfo.currentPage + 1}); + } else { + return pInfo; + } + }) .distinctUntilChanged(); /* tslint:enable:no-string-literal */ @@ -107,10 +111,8 @@ export class RemoteDataBuildService { ); } - buildList( - href: string, - normalizedType: GenericConstructor - ): RemoteData { + buildList(href: string, + normalizedType: GenericConstructor): RemoteData { const requestObs = this.store.select('core', 'data', 'request', href) .filter((entry) => hasValue(entry)); const responseCacheObs = this.responseCache.get(href).filter((entry) => hasValue(entry)); @@ -240,7 +242,7 @@ export class RemoteDataBuildService { }) .filter((e) => hasValue(e)) .join(', ') - ); + ); const statusCode = Observable.combineLatest( ...input.map((rd) => rd.statusCode), @@ -252,7 +254,7 @@ export class RemoteDataBuildService { }) .filter((c) => hasValue(c)) .join(', ') - ); + ); const pageInfo = Observable.of(undefined); diff --git a/src/app/search-page/search-page.component.html b/src/app/search-page/search-page.component.html index 6c56d339b2..97eb9360dd 100644 --- a/src/app/search-page/search-page.component.html +++ b/src/app/search-page/search-page.component.html @@ -1,4 +1,4 @@
- +
diff --git a/src/app/search-page/search-page.component.ts b/src/app/search-page/search-page.component.ts index f37f119a4b..e601ab4d8c 100644 --- a/src/app/search-page/search-page.component.ts +++ b/src/app/search-page/search-page.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { SearchService } from '../search/search.service'; -import { ActivatedRoute } from '@angular/router'; -import { SortOptions } from '../core/cache/models/sort-options.model'; +import { ActivatedRoute, Router } from '@angular/router'; import { RemoteData } from '../core/data/remote-data'; import { SearchResult } from '../search/search-result.model'; import { DSpaceObject } from '../core/shared/dspace-object.model'; +import { SortOptions } from '../core/cache/models/sort-options.model'; +import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model'; /** * This component renders a simple item page. @@ -13,30 +14,57 @@ import { DSpaceObject } from '../core/shared/dspace-object.model'; */ @Component({ - selector: 'ds-search-page', - styleUrls: ['./search-page.component.scss'], - templateUrl: './search-page.component.html', + selector: 'ds-search-page', + styleUrls: ['./search-page.component.scss'], + templateUrl: './search-page.component.html', }) -export class SearchPageComponent implements OnInit { - private sub; - results: RemoteData>>; +export class SearchPageComponent implements OnInit, OnDestroy { + private sub; + private query: string; + private scope: string; + private page: number; + private results: RemoteData>>; + private currentParams = {}; - constructor( - private service: SearchService, - private route: ActivatedRoute, - ) { } + constructor(private service: SearchService, + private route: ActivatedRoute, + private router: Router,) { + } - ngOnInit(): void { - this.sub = this.route - .queryParams - .subscribe((params) => { - const query: string = params.query || ''; - const scope: string = params.scope; - const page: number = +params.page || 0; - this.results = this.service.search(query, scope, {elementsPerPage: 10, currentPage: page, sort: new SortOptions()}); + ngOnInit(): void { + this.sub = this.route + .queryParams + .subscribe((params) => { + this.currentParams = params; + this.query = params.query || ''; + this.scope = params.scope; + this.page = +params.page || 1; + const pagination: PaginationComponentOptions = new PaginationComponentOptions(); + pagination.id = 'results-pagination'; + pagination.currentPage = this.page; + pagination.pageSize = +params.pageSize; + this.results = this.service.search(this.query, this.scope, { + pagination: pagination, + sort: new SortOptions(params.sortField, params.sortDirection) }); - } - ngOnDestroy() { - this.sub.unsubscribe(); - } + } + ); + } + + ngOnDestroy() { + this.sub.unsubscribe(); + } + + updateSearch(data: any) { + this.router.navigate([], { + queryParams: Object.assign({}, this.currentParams, + { + query: data.query, + scope: data.scope, + page: data.page || 1 + } + ) + }) + ; + } } diff --git a/src/app/search-page/search-results/search-results.component.html b/src/app/search-page/search-results/search-results.component.html index 9c75ea43e4..2f17c9a730 100644 --- a/src/app/search-page/search-results/search-results.component.html +++ b/src/app/search-page/search-results/search-results.component.html @@ -1 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/search-page/search-results/search-results.compontent.ts b/src/app/search-page/search-results/search-results.compontent.ts index abb3830d74..e39c0323c9 100644 --- a/src/app/search-page/search-results/search-results.compontent.ts +++ b/src/app/search-page/search-results/search-results.compontent.ts @@ -1,7 +1,10 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { RemoteData } from '../../core/data/remote-data'; import { SearchResult } from '../../search/search-result.model'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; +import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model'; +import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; +import { SearchOptions } from '../../search/search-options.model'; /** * This component renders a simple item page. @@ -17,8 +20,13 @@ import { DSpaceObject } from '../../core/shared/dspace-object.model'; export class SearchResultsComponent implements OnInit { @Input() searchResults: RemoteData>>; - ngOnInit(): void { - // onInit + @Input() searchConfig: SearchOptions; + ngOnInit(): void { + this.searchConfig = new SearchOptions(); + this.searchConfig.pagination = new PaginationComponentOptions(); + this.searchConfig.pagination.id = 'search-results-pagination'; + this.searchConfig.sort = new SortOptions(); } + } diff --git a/src/app/search/search-options.model.ts b/src/app/search/search-options.model.ts new file mode 100644 index 0000000000..fd4a5accf6 --- /dev/null +++ b/src/app/search/search-options.model.ts @@ -0,0 +1,7 @@ +import { SortOptions } from '../core/cache/models/sort-options.model'; +import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model'; + +export class SearchOptions { + pagination?: PaginationComponentOptions; + sort?: SortOptions; +} diff --git a/src/app/search/search.models.ts b/src/app/search/search.models.ts deleted file mode 100644 index 4ce3b2e39d..0000000000 --- a/src/app/search/search.models.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { SortOptions } from '../core/cache/models/sort-options.model'; - -export class SearchOptions { - elementsPerPage?: number; - currentPage?: number; - sort?: SortOptions; -} diff --git a/src/app/search/search.service.ts b/src/app/search/search.service.ts index 20b6449297..337668ef8a 100644 --- a/src/app/search/search.service.ts +++ b/src/app/search/search.service.ts @@ -5,7 +5,7 @@ import { SearchResult } from './search-result.model'; import { ItemDataService } from '../core/data/item-data.service'; import { PageInfo } from '../core/shared/page-info.model'; import { DSpaceObject } from '../core/shared/dspace-object.model'; -import { SearchOptions } from './search.models'; +import { SearchOptions } from './search-options.model'; import { hasValue, isNotEmpty } from '../shared/empty.util'; import { Metadatum } from '../core/shared/metadatum.model'; import { Item } from '../core/shared/item.model'; @@ -36,19 +36,18 @@ export class SearchService { if (hasValue(scopeId)) { self += `&scope=${scopeId}`; } - if (isNotEmpty(searchOptions) && hasValue(searchOptions.currentPage)) { - self += `&page=${searchOptions.currentPage}`; + if (isNotEmpty(searchOptions) && hasValue(searchOptions.pagination.currentPage)) { + self += `&page=${searchOptions.pagination.currentPage}`; } const requestPending = Observable.of(false); const responsePending = Observable.of(false); - const isSuccessFul = Observable.of(true); const errorMessage = Observable.of(undefined); const statusCode = Observable.of('200'); const returningPageInfo = new PageInfo(); if (isNotEmpty(searchOptions)) { - returningPageInfo.elementsPerPage = searchOptions.elementsPerPage; - returningPageInfo.currentPage = searchOptions.currentPage; + returningPageInfo.elementsPerPage = searchOptions.pagination.pageSize; + returningPageInfo.currentPage = searchOptions.pagination.currentPage; } else { returningPageInfo.elementsPerPage = 10; returningPageInfo.currentPage = 1; @@ -82,7 +81,7 @@ export class SearchService { self, requestPending, responsePending, - isSuccessFul, + itemsRD.hasSucceeded, errorMessage, statusCode, pageInfo, diff --git a/src/app/shared/pagination/pagination.component.html b/src/app/shared/pagination/pagination.component.html index b61920567d..9ea31a4832 100644 --- a/src/app/shared/pagination/pagination.component.html +++ b/src/app/shared/pagination/pagination.component.html @@ -7,8 +7,8 @@
- -