[ADF-4042] fix reset pagination issue when enter in a folder (#4281)

* fix reset pagination issue when enter in a folder

* fix pagination new folder issue and infintie pagiantion
This commit is contained in:
Eugenio Romano
2019-02-07 21:30:46 +00:00
committed by GitHub
parent 9915935714
commit 8fa335aced
6 changed files with 83 additions and 56 deletions

View File

@@ -742,17 +742,21 @@ describe('ContentNodeSelectorComponent', () => {
});
it('button callback should load the next batch of folder results when there is no searchTerm', () => {
const skipCount = 5;
component.searchTerm = '';
fixture.detectChanges();
component.getNextPageOfSearch({ skipCount });
component.getNextPageOfSearch({
hasMoreItems: false,
skipCount: 10,
maxItems: 45,
totalItems: 0
});
fixture.detectChanges();
expect(component.searchTerm).toBe('');
expect(component.infiniteScroll).toBeTruthy();
expect(component.skipCount).toBe(skipCount);
expect(component.pagination.maxItems).toBe(45);
expect(searchSpy).not.toHaveBeenCalled();
});

View File

@@ -16,7 +16,7 @@
*/
import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { HighlightDirective, UserPreferencesService, PaginationModel } from '@alfresco/adf-core';
import { HighlightDirective, UserPreferencesService, PaginationModel, UserPreferenceValues, InfinitePaginationComponent } from '@alfresco/adf-core';
import { FormControl } from '@angular/forms';
import { Node, NodePaging, Pagination, SiteEntry, SitePaging } from '@alfresco/js-api';
import { DocumentListComponent } from '../document-list/components/document-list.component';
@@ -24,7 +24,6 @@ import { RowFilter } from '../document-list/data/row-filter.model';
import { ImageResolver } from '../document-list/data/image-resolver.model';
import { ContentNodeSelectorService } from './content-node-selector.service';
import { debounceTime } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs';
import { CustomResourcesService } from '../document-list/services/custom-resources.service';
import { ShareDataRow } from '../document-list';
@@ -41,6 +40,13 @@ const defaultValidation = () => true;
})
export class ContentNodeSelectorPanelComponent implements OnInit {
static DEFAULT_PAGINATION: Pagination = new Pagination({
maxItems: 25,
skipCount: 0,
totalItems: 0,
hasMoreItems: false
});
/** Node ID of the folder currently listed. */
@Input()
currentFolderId: string = null;
@@ -105,7 +111,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
/** Number of items shown per page in the list. */
@Input()
pageSize: number;
pageSize: number = ContentNodeSelectorPanelComponent.DEFAULT_PAGINATION.maxItems;
/** Function used to decide if the selected node has permission to be selected.
* Default value is a function that always returns true.
@@ -139,16 +145,19 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
inDialog: boolean = false;
_chosenNode: Node = null;
folderIdToShow: string | null = null;
pagination: BehaviorSubject<PaginationModel>;
skipCount: number = 0;
pagination: PaginationModel = ContentNodeSelectorPanelComponent.DEFAULT_PAGINATION;
@ViewChild(InfinitePaginationComponent)
infinitePaginationComponent: InfinitePaginationComponent;
infiniteScroll: boolean = false;
debounceSearch: number = 200;
searchInput: FormControl = new FormControl();
constructor(private contentNodeSelectorService: ContentNodeSelectorService,
private customResourcesService: CustomResourcesService,
private preferences: UserPreferencesService) {
private userPreferencesService: UserPreferencesService) {
this.searchInput.valueChanges
.pipe(
debounceTime(this.debounceSearch)
@@ -156,15 +165,11 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
.subscribe((searchValue) => {
this.search(searchValue);
});
this.pageSize = this.preferences.paginationSize;
let defaultPagination = <PaginationModel> {
maxItems: this.pageSize,
skipCount: 0,
totalItems: 0,
hasMoreItems: false
};
this.pagination = new BehaviorSubject<PaginationModel>(defaultPagination);
this.userPreferencesService.select(UserPreferenceValues.PaginationSize).subscribe((pagSize) => {
this.pageSize = pagSize;
});
}
set chosenNode(value: Node) {
@@ -260,7 +265,8 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
clearSearch() {
this.searchTerm = '';
this.nodePaging = null;
this.skipCount = 0;
this.pagination.maxItems = this.pageSize;
this.infinitePaginationComponent.reset();
this.chosenNode = null;
this.showingSearchResults = false;
}
@@ -281,7 +287,8 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
*/
private startNewSearch(): void {
this.nodePaging = null;
this.skipCount = 0;
this.pagination.maxItems = this.pageSize;
this.infinitePaginationComponent.reset();
this.chosenNode = null;
this.folderIdToShow = null;
this.querySearch();
@@ -296,14 +303,14 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
if (this.customResourcesService.hasCorrespondingNodeIds(this.siteId)) {
this.customResourcesService.getCorrespondingNodeIds(this.siteId)
.subscribe((nodeIds) => {
this.contentNodeSelectorService.search(this.searchTerm, this.siteId, this.skipCount, this.pageSize, nodeIds)
this.contentNodeSelectorService.search(this.searchTerm, this.siteId, this.pagination.skipCount, this.pagination.maxItems, nodeIds)
.subscribe(this.showSearchResults.bind(this));
},
() => {
this.showSearchResults({ list: { entries: [] } });
});
} else {
this.contentNodeSelectorService.search(this.searchTerm, this.siteId, this.skipCount, this.pageSize)
this.contentNodeSelectorService.search(this.searchTerm, this.siteId, this.pagination.skipCount, this.pagination.maxItems)
.subscribe(this.showSearchResults.bind(this));
}
}
@@ -350,9 +357,9 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
*
* @param event Pagination object
*/
getNextPageOfSearch(event: Pagination): void {
getNextPageOfSearch(pagination: Pagination): void {
this.infiniteScroll = true;
this.skipCount = event.skipCount;
this.pagination = pagination;
if (this.searchTerm.length > 0) {
this.querySearch();

View File

@@ -1295,4 +1295,24 @@ describe('DocumentList', () => {
rootFolderId: 'fake-id'
}, ['test-include']);
});
it('should reset the pagination when enter in a new folder', () => {
let folder = new FolderNode();
documentList.navigationMode = DocumentListComponent.SINGLE_CLICK_NAVIGATION;
documentList.updatePagination({
maxItems: 10,
skipCount: 10
});
spyOn(documentListService, 'getFolder').and.callThrough();
documentList.onNodeClick(folder);
expect(documentListService.getFolder).toHaveBeenCalledWith(null, {
maxItems: 25,
skipCount: 0,
rootFolderId: 'folder-id',
where: undefined
}, undefined);
});
});

View File

@@ -41,10 +41,11 @@ import {
CustomNoPermissionTemplateDirective,
CustomEmptyContentTemplateDirective,
RequestPaginationModel,
AlfrescoApiService
AlfrescoApiService,
UserPreferenceValues
} from '@alfresco/adf-core';
import { Node, NodeEntry, NodePaging } from '@alfresco/js-api';
import { Node, NodeEntry, NodePaging, Pagination } from '@alfresco/js-api';
import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
import { ShareDataRow } from './../data/share-data-row.model';
import { ShareDataTableAdapter } from './../data/share-datatable-adapter';
@@ -68,7 +69,13 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
static SINGLE_CLICK_NAVIGATION: string = 'click';
static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
static DEFAULT_PAGE_SIZE: number = 20;
static DEFAULT_PAGINATION: Pagination = new Pagination({
hasMoreItems: false,
skipCount: 0,
maxItems: 25,
totalItems: 0
});
@ContentChild(DataColumnListComponent)
columnList: DataColumnListComponent;
@@ -222,10 +229,10 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
this._currentFolderId = currentFolderId;
if (this.data) {
this.data.loadPage(null, false);
this.resetNewFolderPagination();
}
if (this._currentFolderId) {
this.resetNewFolderPagination();
this.loadFolder();
}
}
@@ -241,7 +248,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
/** Default value is stored into user preference settings use it only if you are not using the pagination */
@Input()
maxItems: number;
maxItems: number = DocumentListComponent.DEFAULT_PAGINATION.maxItems;
/** Emitted when the user clicks a list node */
@Output()
@@ -283,8 +290,8 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
// @deprecated 3.0.0
folderNode: Node;
private _pagination: PaginationModel;
private $pagination: BehaviorSubject<PaginationModel>;
private _pagination: PaginationModel = DocumentListComponent.DEFAULT_PAGINATION;
pagination: BehaviorSubject<PaginationModel> = new BehaviorSubject<PaginationModel>(DocumentListComponent.DEFAULT_PAGINATION);
private layoutPresets = {};
private subscriptions: Subscription[] = [];
@@ -295,18 +302,15 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
private ngZone: NgZone,
private elementRef: ElementRef,
private appConfig: AppConfigService,
private preferences: UserPreferencesService,
private userPreferencesService: UserPreferencesService,
private customResourcesService: CustomResourcesService,
private contentService: ContentService,
private thumbnailService: ThumbnailService,
private alfrescoApiService: AlfrescoApiService) {
this._pagination = <PaginationModel> {
maxItems: this.maxItems || this.preferences.paginationSize,
skipCount: 0,
totalItems: 0,
hasMoreItems: false
};
this.userPreferencesService.select(UserPreferenceValues.PaginationSize).subscribe((pagSize) => {
this.maxItems = this._pagination.maxItems = pagSize;
});
}
getContextActions(node: NodeEntry) {
@@ -342,13 +346,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
return (this.layoutPresets[name] || this.layoutPresets['default']).map((col) => new ObjectDataColumn(col));
}
get pagination(): BehaviorSubject<PaginationModel> {
if (!this.$pagination) {
this.$pagination = new BehaviorSubject<PaginationModel>(this._pagination);
}
return this.$pagination;
}
isMobile(): boolean {
return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
@@ -834,7 +831,8 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
}
private resetNewFolderPagination() {
this.pagination.value.skipCount = 0;
this._pagination.skipCount = 0;
this._pagination.maxItems = this.maxItems;
}
ngOnDestroy() {

View File

@@ -104,6 +104,7 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
reset() {
this.pagination.skipCount = 0;
this.pagination.maxItems = this.pageSize;
this.target.updatePagination(this.pagination);
}

View File

@@ -25,7 +25,7 @@ import { PaginatedComponent } from './paginated-component.interface';
import { PaginationComponentInterface } from './pagination-component.interface';
import { Subscription } from 'rxjs';
import { PaginationModel } from '../models/pagination.model';
import { UserPreferencesService } from '../services/user-preferences.service';
import { UserPreferencesService, UserPreferenceValues } from '../services/user-preferences.service';
@Component({
selector: 'adf-pagination',
@@ -60,7 +60,7 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
/** Pagination object. */
@Input()
pagination: PaginationModel;
pagination: PaginationModel = PaginationComponent.DEFAULT_PAGINATION;
/** Emitted when pagination changes in any way. */
@Output()
@@ -85,17 +85,14 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
private paginationSubscription: Subscription;
constructor(private cdr: ChangeDetectorRef, private userPreferencesService: UserPreferencesService) {
this.userPreferencesService.select(UserPreferenceValues.PaginationSize).subscribe((pagSize) => {
this.pagination.maxItems = pagSize;
});
}
ngOnInit() {
if (!this.pagination) {
let defaultPagination = PaginationComponent.DEFAULT_PAGINATION;
defaultPagination.maxItems = this.userPreferencesService.paginationSize;
this.pagination = defaultPagination;
}
if (!this.supportedPageSizes) {
this.supportedPageSizes = this.userPreferencesService.supportedPageSizes;
this.supportedPageSizes = this.userPreferencesService.supportedPageSizes;
}
if (this.target) {
@@ -213,7 +210,7 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
onChangePageSize(maxItems: number) {
this.pagination.skipCount = 0;
this.pagination.maxItems = maxItems;
this.userPreferencesService.paginationSize = maxItems;
this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_SIZE, {
skipCount: 0,
maxItems