hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

41914: implemented pagination sort direction/field

Browse Source
This commit is contained in:
Lotte Hofstede
2017-06-15 13:32:15 +02:00
parent c63bd7c2ef
commit 6db165b7a3
9 changed files with 342 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/i18n/en.json
View File

@@ -36,6 +36,7 @@
},
"pagination": {
"results-per-page": "Results Per Page",
"sort-direction": "Sort Options",
"showing": {
"label": "Now showing items ",
"detail": "{{ range }} of {{ total }}"

6
src/app/core/data/data.service.ts
View File

@@ -46,7 +46,11 @@ export abstract class DataService<TNormalized extends CacheableObject, TDomain>
}
if (hasValue(options.sort)) {
args.push(`sort=${options.sort.field},${options.sort.direction}`);
let direction = 'asc';
if (options.sort.direction === 1) {
direction = 'desc';
}
args.push(`sort=${options.sort.field},${direction}`);
}
if (isNotEmpty(args)) {

6
src/app/home/top-level-community-list/top-level-community-list.component.html
View File

@@ -1,7 +1,9 @@
<div *ngIf="topLevelCommunities.hasSucceeded | async">
<h2>{{'home.top-level-communities.head' | translate}}</h2>
<p class="lead">{{'home.top-level-communities.help' | translate}}</p>
<ds-object-list [config]="config" [objects]="topLevelCommunities"
<ds-object-list [config]="config" [sortConfig]="sortConfig" [objects]="topLevelCommunities"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"></ds-object-list>
(pageSizeChange)="onPageSizeChange($event)"
(sortDirectionChange)="onSortDirectionChange($event)"
(sortFieldChange)="onSortDirectionChange($event)"></ds-object-list>
</div>

15
src/app/home/top-level-community-list/top-level-community-list.component.ts
View File

@@ -13,6 +13,7 @@ import { SortOptions } from "../../core/cache/models/sort-options.model";
export class TopLevelCommunityListComponent implements OnInit {
topLevelCommunities: RemoteData<Item[]>;
config : PaginationComponentOptions;
sortConfig : SortOptions;
constructor(
private cds: ItemDataService
@@ -29,6 +30,8 @@ export class TopLevelCommunityListComponent implements OnInit {
this.config = new PaginationComponentOptions();
this.config.id = "top-level-pagination"
this.config.pageSizeOptions = [ 5, 10, 20, 40, 60, 80, 100 ];
this.sortConfig = new SortOptions();
}
onPageChange(currentPage): void {
@@ -41,7 +44,17 @@ export class TopLevelCommunityListComponent implements OnInit {
this.updateResults();
}
onSortDirectionChange(sortDirection): void {
this.sortConfig.direction = sortDirection;
this.updateResults();
}
onSortFieldChange(field): void {
this.sortConfig.field = field;
this.updateResults();
}
updateResults() {
this.topLevelCommunities = this.cds.findAll({ currentPage: this.config.currentPage, elementsPerPage: this.config.pageSize });
this.topLevelCommunities = this.cds.findAll({ currentPage: this.config.currentPage, elementsPerPage: this.config.pageSize, sort: this.sortConfig });
}
}

5
src/app/object-list/object-list.component.html
View File

@@ -1,7 +1,10 @@
<ds-pagination [paginationOptions]="config"
[collectionSize]="(pageInfo | async)?.totalElements"
[sortOptions]="sortConfig"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)">
(pageSizeChange)="onPageSizeChange($event)"
(sortDirectionChange)="onSortDirectionChange($event)"
(sortFieldChange)="onSortDirectionChange($event)">
<ul *ngIf="objects.hasSucceeded | async">
<li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
<ds-object-list-element [object]="object"></ds-object-list-element>

13
src/app/object-list/object-list.component.ts
View File

@@ -8,6 +8,7 @@ import { PageInfo } from "../core/shared/page-info.model";
import { Observable } from "rxjs";
import { PaginationComponentOptions } from "../shared/pagination/pagination-component-options.model";
import { EventEmitter } from "@angular/common/src/facade/async";
import { SortOptions } from "../core/cache/models/sort-options.model";
@Component({
@@ -21,10 +22,13 @@ export class ObjectListComponent implements OnInit {
@Input() objects: RemoteData<DSpaceObject[]>;
@Input() config : PaginationComponentOptions;
@Input() sortConfig : SortOptions;
pageInfo : Observable<PageInfo>;
@Output() pageChange = new EventEmitter();
@Output() pageSizeChange = new EventEmitter();
@Output() sortDirectionChange = new EventEmitter();
@Output() sortFieldChange = new EventEmitter();
data: any = {};
constructor() {
@@ -45,4 +49,13 @@ export class ObjectListComponent implements OnInit {
onPageSizeChange(event) {
this.pageSizeChange.emit(event);
}
onSortDirectionChange(event) {
this.sortDirectionChange.emit(event);
}
onSortFieldChange(event) {
this.sortFieldChange.emit(event);
}
}

4
src/app/shared/pagination/pagination.component.html
View File

@@ -9,7 +9,9 @@
<button class="btn btn-outline-primary" id="paginationControls" (click)="$event.stopPropagation(); (paginationControls.isOpen())?paginationControls.close():paginationControls.open();"><i class="fa fa-cog" aria-hidden="true"></i></button>
<div class="dropdown-menu dropdown-menu-right" id="paginationControlsDropdownMenu" aria-labelledby="paginationControls">
<h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
<button class="dropdown-item" style="padding-left: 20px" *ngFor="let item of pageSizeOptions " (click)="setPageSize(item)"><i class="fa fa-check {{(item != paginationOptions.pageSize) ? 'invisible' : ''}}" aria-hidden="true"></i> {{item}} </button>
<button class="dropdown-item" style="padding-left: 20px" *ngFor="let item of pageSizeOptions" (click)="setPageSize(item)"><i class="fa fa-check {{(item != paginationOptions.pageSize) ? 'invisible' : ''}}" aria-hidden="true"></i> {{item}} </button>
<h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
<button class="dropdown-item" style="padding-left: 20px" *ngFor="let direction of (sortDirections | dsKeys)" (click)="setSortDirection(direction.key)"><i class="fa fa-check {{(direction.key != sortOptions.direction) ? 'invisible' : ''}}" aria-hidden="true"></i> {{direction.value}} </button>
</div>
</div>
</div>

499
src/app/shared/pagination/pagination.component.ts
View File

@@ -1,12 +1,12 @@
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
ViewEncapsulation
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
ViewEncapsulation
} from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router';
import { isNumeric } from "rxjs/util/isNumeric";
@@ -18,230 +18,321 @@ import { DEFAULT_TEMPLATE, DEFAULT_STYLES } from 'ng2-pagination/dist/template';
import { HostWindowService } from "../host-window.service";
import { HostWindowState } from "../host-window.reducer";
import { PaginationComponentOptions } from './pagination-component-options.model';
import { SortDirection, SortOptions } from "../../core/cache/models/sort-options.model";
/**
* The default pagination controls component.
*/
@Component({
exportAs: 'paginationComponent',
selector: 'ds-pagination',
templateUrl: 'pagination.component.html',
changeDetection: ChangeDetectionStrategy.Default,
encapsulation: ViewEncapsulation.Emulated
exportAs: 'paginationComponent',
selector: 'ds-pagination',
templateUrl: 'pagination.component.html',
changeDetection: ChangeDetectionStrategy.Default,
encapsulation: ViewEncapsulation.Emulated
})
export class PaginationComponent implements OnDestroy, OnInit {
/**
* Number of items in collection.
*/
@Input() collectionSize: number;
/**
* Number of items in collection.
*/
@Input() collectionSize: number;
/**
* Configuration for the NgbPagination component.
*/
@Input() paginationOptions: PaginationComponentOptions;
/**
* Configuration for the NgbPagination component.
*/
@Input() paginationOptions: PaginationComponentOptions;
/**
* An event fired when the page is changed.
* Event's payload equals to the newly selected page.
*/
@Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
/**
* Sort configuration for this component.
*/
@Input() sortOptions: SortOptions;
/**
* An event fired when the page size is changed.
* Event's payload equals to the newly selected page size.
*/
@Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
/**
* An event fired when the page is changed.
* Event's payload equals to the newly selected page.
*/
@Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
/**
* Current page.
*/
public currentPage = 1;
/**
* Current URL query parameters
*/
public currentQueryParams = {};
/**
* An event fired when the page wsize is changed.
* Event's payload equals to the newly selected page size.
*/
@Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
/**
* An observable of HostWindowState type
*/
public hostWindow: Observable<HostWindowState>;
/**
* An event fired when the sort direction is changed.
* Event's payload equals to the newly selected sort direction.
*/
@Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
/**
* ID for the pagination instance. Only useful if you wish to
* have more than once instance at a time in a given component.
*/
private id: string;
/**
* An event fired when the sort field is changed.
* Event's payload equals to the newly selected sort field.
*/
@Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
/**
* A boolean that indicate if is an extra small devices viewport.
*/
public isXs: boolean;
/**
* Current page.
*/
public currentPage = 1;
/**
* Number of items per page.
*/
public pageSize: number = 10;
/**
* Current URL query parameters
*/
public currentQueryParams = {};
/**
* A number array that represents options for a context pagination limit.
*/
private pageSizeOptions: Array<number>;
/**
* An observable of HostWindowState type
*/
public hostWindow: Observable<HostWindowState>;
/**
* Local variable, which can be used in the template to access the paginate controls ngbDropdown methods and properties
*/
public paginationControls;
/**
* ID for the pagination instance. Only useful if you wish to
* have more than once instance at a time in a given component.
*/
private id: string;
/**
* Subscriber to observable.
*/
private routeSubscription: any;
/**
* A boolean that indicate if is an extra small devices viewport.
*/
public isXs: boolean;
/**
* An object that represents pagination details of the current viewed page
*/
public showingDetail: any = {
range: null,
total: null
};
/**
* Number of items per page.
*/
public pageSize: number = 10;
/**
* Subscriber to observable.
*/
private stateSubscription: any;
/**
* Declare SortDirection enumeration to use it in the template
*/
public sortDirections = SortDirection
/**
* Method provided by Angular. Invoked after the constructor.
*/
ngOnInit() {
this.stateSubscription = this.hostWindowService.isXs()
.subscribe((status: boolean) => {
this.isXs = status;
});
this.checkConfig(this.paginationOptions);
this.id = this.paginationOptions.id || null;
this.currentPage = this.paginationOptions.currentPage;
this.pageSize = this.paginationOptions.pageSize;
this.pageSizeOptions = this.paginationOptions.pageSizeOptions;
/**
* A number array that represents options for a context pagination limit.
*/
private pageSizeOptions: Array<number>;
this.routeSubscription = this.route.queryParams
.map(queryParams => queryParams)
.subscribe(queryParams => {
this.currentQueryParams = queryParams;
if(this.id == queryParams['pageId']
&& (this.paginationOptions.currentPage != queryParams['page']
|| this.paginationOptions.pageSize != queryParams['pageSize'])
) {
this.validateParams(queryParams['page'], queryParams['pageSize']);
/**
* Direction in which to sort: ascending or descending
*/
public sortDirection: SortDirection = SortDirection.Ascending;
/**
* Name of the field that's used to sort by
*/
public sortField: string = "id";
/**
* Local variable, which can be used in the template to access the paginate controls ngbDropdown methods and properties
*/
public paginationControls;
/**
*
*/
/**
* Subscriber to observable.
*/
private routeSubscription: any;
/**
* An object that represents pagination details of the current viewed page
*/
public showingDetail: any = {
range: null,
total: null
};
/**
* Subscriber to observable.
*/
private stateSubscription: any;
/**
* Method provided by Angular. Invoked after the constructor.
*/
ngOnInit() {
this.stateSubscription = this.hostWindowService.isXs()
.subscribe((status: boolean) => {
this.isXs = status;
});
this.checkConfig(this.paginationOptions);
this.id = this.paginationOptions.id || null;
this.currentPage = this.paginationOptions.currentPage;
this.pageSize = this.paginationOptions.pageSize;
this.pageSizeOptions = this.paginationOptions.pageSizeOptions;
this.sortDirection = this.sortOptions.direction;
this.sortField = this.sortOptions.field;
this.routeSubscription = this.route.queryParams
.map(queryParams => queryParams)
.subscribe(queryParams => {
this.currentQueryParams = queryParams;
if (this.id == queryParams['pageId']
&& (this.paginationOptions.currentPage != queryParams['page']
|| this.paginationOptions.pageSize != queryParams['pageSize']
|| this.sortOptions.direction != queryParams['sortDirection']
|| this.sortOptions.field != queryParams['sortField'] )
) {
this.validateParams(queryParams['page'], queryParams['pageSize'], queryParams['sortDirection'], queryParams['sortField']);
}
});
this.setShowingDetail();
}
/**
* Method provided by Angular. Invoked when the instance is destroyed.
*/
ngOnDestroy() {
this.stateSubscription.unsubscribe();
this.routeSubscription.unsubscribe();
}
/**
* @param route
* Route is a singleton service provided by Angular.
* @param router
* Router is a singleton service provided by Angular.
*/
constructor(private route: ActivatedRoute,
private router: Router,
public hostWindowService: HostWindowService) {
}
/**
* Method to set set new page and update route parameters
*
* @param page
* The page being navigated to.
*/
public doPageChange(page: number) {
this.currentPage = page;
this.updateRoute();
this.setShowingDetail();
this.pageChange.emit(page);
}
/**
* Method to set set new page size and update route parameters
*
* @param pageSize
* The new page size.
*/
public setPageSize(pageSize: number) {
this.pageSize = pageSize;
this.updateRoute();
this.setShowingDetail();
this.pageSizeChange.emit(pageSize);
}
/**
* Method to set set new sort direction and update route parameters
*
* @param sortDirection
* The new sort direction.
*/
public setSortDirection(sortDirection: SortDirection) {
this.sortDirection = sortDirection;
this.updateRoute();
this.setShowingDetail();
this.sortDirectionChange.emit(sortDirection);
}
/**
* Method to set set new sort field and update route parameters
*
* @param sortField
* The new sort field.
*/
public setSortField(field: string) {
this.sortField = field;
this.updateRoute();
this.setShowingDetail();
this.sortFieldChange.emit(field);
}
/**
* Method to update the route parameters
*/
private updateRoute() {
this.router.navigate([], {
queryParams: Object.assign({}, this.currentQueryParams, {
pageId: this.id,
page: this.currentPage,
pageSize: this.pageSize,
sortDirection: this.sortDirection,
sortField: this.sortField
})
});
}
/**
* Method to set pagination details of the current viewed page.
*/
private setShowingDetail() {
let firstItem;
let lastItem;
let lastPage = Math.round(this.collectionSize / this.pageSize);
firstItem = this.pageSize * (this.currentPage - 1) + 1;
if (this.currentPage != lastPage) {
lastItem = this.pageSize * this.currentPage;
} else {
lastItem = this.collectionSize;
}
this.showingDetail = {
range: firstItem + ' - ' + lastItem,
total: this.collectionSize
}
});
this.setShowingDetail();
}
/**
* Method provided by Angular. Invoked when the instance is destroyed.
*/
ngOnDestroy() {
this.stateSubscription.unsubscribe();
this.routeSubscription.unsubscribe();
}
/**
* @param route
* Route is a singleton service provided by Angular.
* @param router
* Router is a singleton service provided by Angular.
*/
constructor(
private route: ActivatedRoute,
private router: Router,
public hostWindowService: HostWindowService
){
}
/**
* Method to set set new page and update route parameters
*
* @param page
* The page being navigated to.
*/
public doPageChange(page: number) {
this.router.navigate([], { queryParams: Object.assign({}, this.currentQueryParams, { pageId: this.id, page: page, pageSize: this.pageSize }) });
this.currentPage = page;
this.setShowingDetail();
this.pageChange.emit(page);
}
/**
* Method to set set new page size and update route parameters
*
* @param pageSize
* The new page size.
*/
public setPageSize(pageSize: number) {
this.router.navigate([], { queryParams: Object.assign({}, this.currentQueryParams, { pageId: this.id, page: this.currentPage, pageSize: pageSize }) });
this.pageSize = pageSize;
this.setShowingDetail();
this.pageSizeChange.emit(pageSize);
}
/**
* Method to set pagination details of the current viewed page.
*/
private setShowingDetail() {
let firstItem;
let lastItem;
let lastPage = Math.round(this.collectionSize / this.pageSize);
firstItem = this.pageSize * (this.currentPage - 1) + 1;
if (this.currentPage != lastPage) {
lastItem = this.pageSize * this.currentPage;
} else {
lastItem = this.collectionSize;
}
this.showingDetail = {
range: firstItem + ' - ' + lastItem,
total: this.collectionSize
}
}
/**
* Validate query params
*
* @param page
* The page number to validate
* @param pageSize
* The page size to validate
*/
private validateParams(page: any, pageSize: any) {
let filteredPageSize = this.pageSizeOptions.find(x => x == pageSize);
if (!isNumeric(page) || !filteredPageSize) {
let filteredPage = isNumeric(page) ? page : this.currentPage;
filteredPageSize = (filteredPageSize) ? filteredPageSize : this.pageSize;
this.router.navigate([{ pageId: this.id, page: filteredPage, pageSize: filteredPageSize }]);
} else {
// (+) converts string to a number
this.currentPage = +page;
this.pageSize = +pageSize;
this.pageChange.emit(this.currentPage);
this.pageSizeChange.emit(this.pageSize);
/**
* Validate query params
*
* @param page
* The page number to validate
* @param pageSize
* The page size to validate
*/
private validateParams(page: any, pageSize: any, sortDirection: any, sortField: any) {
let filteredPageSize = this.pageSizeOptions.find(x => x == pageSize);
if (!isNumeric(page) || !filteredPageSize) {
let filteredPage = isNumeric(page) ? page : this.currentPage;
filteredPageSize = (filteredPageSize) ? filteredPageSize : this.pageSize;
this.router.navigate([{
pageId: this.id,
page: filteredPage,
pageSize: filteredPageSize,
sortDirection: sortDirection,
sortField: sortField
}]);
} else {
// (+) converts string to a number
this.currentPage = +page;
this.pageSize = +pageSize;
this.sortDirection = +sortDirection;
this.sortField = sortField;
this.pageChange.emit(this.currentPage);
this.pageSizeChange.emit(this.pageSize);
this.sortDirectionChange.emit(this.sortDirection);
this.sortFieldChange.emit(this.sortField);
}
}
}
/**
* Ensure options passed contains the required properties.
*
* @param paginateOptions
* The paginate options object.
*/
private checkConfig(paginateOptions: any) {
let required = ['id', 'currentPage', 'pageSize', 'pageSizeOptions'];
let missing = required.filter(function (prop) { return !(prop in paginateOptions); });
if (0 < missing.length) {
throw new Error("Paginate: Argument is missing the following required properties: " + missing.join(', '));
/**
* Ensure options passed contains the required properties.
*
* @param paginateOptions
* The paginate options object.
*/
private checkConfig(paginateOptions: any) {
let required = ['id', 'currentPage', 'pageSize', 'pageSizeOptions'];
let missing = required.filter(function (prop) {
return !(prop in paginateOptions);
});
if (0 < missing.length) {
throw new Error("Paginate: Argument is missing the following required properties: " + missing.join(', '));
}
}
}
}

4
src/app/shared/shared.module.ts
View File

@@ -15,6 +15,7 @@ import { SafeUrlPipe } from "./utils/safe-url-pipe";
import { HostWindowService } from "./host-window.service";
import { NativeWindowFactory, NativeWindowService } from "./window.service";
import { TRUNCATE_PIPES } from "ng2-truncate";
import { EnumKeysPipe } from "./utils/enum-keys-pipe";
const MODULES = [
// Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -30,7 +31,8 @@ const MODULES = [
const PIPES = [
FileSizePipe,
SafeUrlPipe,
TRUNCATE_PIPES
TRUNCATE_PIPES,
EnumKeysPipe
// put pipes here
];