diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html index 235412828a..bcafcd6e5d 100644 --- a/src/app/collection-page/collection-page.component.html +++ b/src/app/collection-page/collection-page.component.html @@ -32,13 +32,10 @@
-
+

{{'collection.page.browse.recent.head' | translate}}

- + (paginationChange)="updatePage($event)">
diff --git a/src/app/collection-page/collection-page.component.ts b/src/app/collection-page/collection-page.component.ts index 6eca621f27..ca349ce5bc 100644 --- a/src/app/collection-page/collection-page.component.ts +++ b/src/app/collection-page/collection-page.component.ts @@ -14,75 +14,81 @@ import { ItemDataService } from '../core/data/item-data.service'; import { Item } from '../core/shared/item.model'; import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model'; import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model'; -import { hasValue, isUndefined } from '../shared/empty.util'; +import { hasValue, isNotEmpty, isUndefined } from '../shared/empty.util'; import { PageInfo } from '../core/shared/page-info.model'; +import { Observable } from 'rxjs/Observable'; @Component({ selector: 'ds-collection-page', styleUrls: ['./collection-page.component.scss'], templateUrl: './collection-page.component.html', - changeDetection: ChangeDetectionStrategy.OnPush }) export class CollectionPageComponent implements OnInit, OnDestroy { collectionData: RemoteData; itemData: RemoteData; logoData: RemoteData; - config: PaginationComponentOptions; + paginationConfig: PaginationComponentOptions; sortConfig: SortOptions; private subs: Subscription[] = []; private collectionId: string; - private pageInfoState: PageInfo; - - constructor( - private collectionDataService: CollectionDataService, - private itemDataService: ItemDataService, - private ref: ChangeDetectorRef, - private route: ActivatedRoute - ) { + constructor(private collectionDataService: CollectionDataService, + private itemDataService: ItemDataService, + private route: ActivatedRoute) { + this.paginationConfig = new PaginationComponentOptions(); + this.paginationConfig.id = 'collection-page-pagination'; + this.paginationConfig.pageSizeOptions = [4]; + this.paginationConfig.pageSize = 4; + this.paginationConfig.currentPage = 1; + this.sortConfig = new SortOptions(); } ngOnInit(): void { - this.subs.push(this.route.params.map((params: Params) => params.id) - .subscribe((id: string) => { - this.collectionId = id; - this.collectionData = this.collectionDataService.findById(this.collectionId); - this.subs.push(this.collectionData.payload.subscribe((collection) => this.logoData = collection.logo)); + this.subs.push( + Observable.combineLatest( + this.route.params, + this.route.queryParams, + (params, queryParams,) => { + return Object.assign({}, params, queryParams); + }) + .subscribe((params) => { + this.collectionId = params.id; + this.collectionData = this.collectionDataService.findById(this.collectionId); + this.subs.push(this.collectionData.payload.subscribe((collection) => this.logoData = collection.logo)); - this.config = new PaginationComponentOptions(); - this.config.id = 'collection-browse'; - this.config.pageSizeOptions = [4]; - this.config.pageSize = 4; - this.sortConfig = new SortOptions(); + const page = +params.page || this.paginationConfig.currentPage; + const pageSize = +params.pageSize || this.paginationConfig.pageSize; + const sortDirection = +params.page || this.sortConfig.direction; + const pagination = Object.assign({}, + this.paginationConfig, + { currentPage: page, pageSize: pageSize } + ); + const sort = Object.assign({}, + this.sortConfig, + { direction: sortDirection, field: params.sortField } + ); + this.updatePage({ + pagination: pagination, + sort: sort + }); + })); - this.updateResults(); - })); + } + updatePage(searchOptions) { + this.itemData = this.itemDataService.findAll({ + scopeID: this.collectionId, + currentPage: searchOptions.pagination.currentPage, + elementsPerPage: searchOptions.pagination.pageSize, + sort: searchOptions.sort + }); } ngOnDestroy(): void { this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe()); } - onPaginationChange(field: string): void { - this.sortConfig = new SortOptions(field, this.sortConfig.direction); - this.updateResults(); - } - - updateResults() { - this.itemData = null; - this.ref.markForCheck(); - this.itemData = this.itemDataService.findAll({ - scopeID: this.collectionId, - currentPage: this.config.currentPage, - elementsPerPage: this.config.pageSize, - sort: this.sortConfig - }); - this.subs.push(this.itemData.pageInfo.subscribe((pageInfo) => { - if (isUndefined(this.pageInfoState) || this.pageInfoState !== pageInfo) { - this.pageInfoState = pageInfo; - this.ref.detectChanges(); - } - })); + isNotEmpty(object: any) { + return isNotEmpty(object); } } diff --git a/src/app/home/top-level-community-list/top-level-community-list.component.ts b/src/app/home/top-level-community-list/top-level-community-list.component.ts index 43ad4859df..a3882d7036 100644 --- a/src/app/home/top-level-community-list/top-level-community-list.component.ts +++ b/src/app/home/top-level-community-list/top-level-community-list.component.ts @@ -11,8 +11,8 @@ import { ActivatedRoute } from '@angular/router'; selector: 'ds-top-level-community-list', styleUrls: ['./top-level-community-list.component.scss'], templateUrl: './top-level-community-list.component.html', - changeDetection: ChangeDetectionStrategy.OnPush }) + export class TopLevelCommunityListComponent { topLevelCommunities: RemoteData; config: PaginationComponentOptions; @@ -23,10 +23,11 @@ export class TopLevelCommunityListComponent { this.config.id = 'top-level-pagination'; this.config.pageSizeOptions = [4]; this.config.pageSize = 4; + this.config.currentPage = 1; this.sortConfig = new SortOptions(); this.updatePage({ - page: 1, + page: this.config.currentPage, pageSize: this.config.pageSize, sortField: this.sortConfig.field, direction: this.sortConfig.direction diff --git a/src/app/shared/search-form/search-form.component.ts b/src/app/shared/search-form/search-form.component.ts index 5402dd3390..fa019e61d1 100644 --- a/src/app/shared/search-form/search-form.component.ts +++ b/src/app/shared/search-form/search-form.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; import { Router } from '@angular/router'; import { isNotEmpty, hasValue, isEmpty } from '../empty.util'; @@ -15,13 +15,14 @@ import { Observable } from 'rxjs/Observable'; styleUrls: ['./search-form.component.scss'], templateUrl: './search-form.component.html', }) -export class SearchFormComponent implements OnInit { +export class SearchFormComponent implements OnInit, OnDestroy { @Input() query: string; selectedId = ''; // Optional existing search parameters @Input() currentParams: {}; @Input() scopes: Observable; scopeOptions: string[] = []; + sub; @Input() set scope(dso: DSpaceObject) { @@ -32,6 +33,7 @@ export class SearchFormComponent implements OnInit { ngOnInit(): void { if (this.scopes) { + this.sub = this.scopes .filter((scopes: DSpaceObject[]) => isEmpty(scopes)) .subscribe((scopes: DSpaceObject[]) => { @@ -50,7 +52,6 @@ export class SearchFormComponent implements OnInit { } updateSearch(data: any) { - this.router.navigate(['/search'], { queryParams: Object.assign({}, this.currentParams, { @@ -73,4 +74,10 @@ export class SearchFormComponent implements OnInit { } return id1 === id2; } + + ngOnDestroy(): void { + if (this.sub) { + this.sub.unsubscribe(); + } + } }