From 8fa335acedc36730d32a65b20bcfb7df686d2151 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 7 Feb 2019 21:30:46 +0000 Subject: [PATCH] [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 --- ...tent-node-selector-panel.component.spec.ts | 12 +++-- .../content-node-selector-panel.component.ts | 47 +++++++++++-------- .../document-list.component.spec.ts | 20 ++++++++ .../components/document-list.component.ts | 42 ++++++++--------- .../infinite-pagination.component.ts | 1 + lib/core/pagination/pagination.component.ts | 17 +++---- 6 files changed, 83 insertions(+), 56 deletions(-) diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts b/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts index 48491a1396..0c04f4c2b2 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts @@ -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(); }); diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts index 8540dba586..44315fecf7 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts @@ -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; - 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 = { - maxItems: this.pageSize, - skipCount: 0, - totalItems: 0, - hasMoreItems: false - }; - this.pagination = new BehaviorSubject(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(); diff --git a/lib/content-services/document-list/components/document-list.component.spec.ts b/lib/content-services/document-list/components/document-list.component.spec.ts index 27c2a2ead4..723e8facf9 100644 --- a/lib/content-services/document-list/components/document-list.component.spec.ts +++ b/lib/content-services/document-list/components/document-list.component.spec.ts @@ -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); + }); }); diff --git a/lib/content-services/document-list/components/document-list.component.ts b/lib/content-services/document-list/components/document-list.component.ts index 391a7a087f..73e15926f1 100644 --- a/lib/content-services/document-list/components/document-list.component.ts +++ b/lib/content-services/document-list/components/document-list.component.ts @@ -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; + private _pagination: PaginationModel = DocumentListComponent.DEFAULT_PAGINATION; + pagination: BehaviorSubject = new BehaviorSubject(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 = { - 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 { - if (!this.$pagination) { - this.$pagination = new BehaviorSubject(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() { diff --git a/lib/core/pagination/infinite-pagination.component.ts b/lib/core/pagination/infinite-pagination.component.ts index fc1efa4472..b88873818d 100644 --- a/lib/core/pagination/infinite-pagination.component.ts +++ b/lib/core/pagination/infinite-pagination.component.ts @@ -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); } diff --git a/lib/core/pagination/pagination.component.ts b/lib/core/pagination/pagination.component.ts index ef1662412a..02346905e5 100644 --- a/lib/core/pagination/pagination.component.ts +++ b/lib/core/pagination/pagination.component.ts @@ -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