[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', () => { it('button callback should load the next batch of folder results when there is no searchTerm', () => {
const skipCount = 5;
component.searchTerm = ''; component.searchTerm = '';
fixture.detectChanges(); fixture.detectChanges();
component.getNextPageOfSearch({ skipCount }); component.getNextPageOfSearch({
hasMoreItems: false,
skipCount: 10,
maxItems: 45,
totalItems: 0
});
fixture.detectChanges(); fixture.detectChanges();
expect(component.searchTerm).toBe(''); expect(component.searchTerm).toBe('');
expect(component.infiniteScroll).toBeTruthy(); expect(component.infiniteScroll).toBeTruthy();
expect(component.skipCount).toBe(skipCount); expect(component.pagination.maxItems).toBe(45);
expect(searchSpy).not.toHaveBeenCalled(); expect(searchSpy).not.toHaveBeenCalled();
}); });

View File

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

View File

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

View File

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

View File

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