mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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:
@@ -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();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@@ -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();
|
||||||
|
@@ -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);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@@ -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() {
|
||||||
|
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
Reference in New Issue
Block a user