[ADF-1805] rebased documentlist pagination removal (#2668)

* [ADF-1805] rebased documentlist pagination removal

* [ADF-1805] fixed some wrong changes]

demo-shell/resources/i18n/en.json

@@ -30,6 +30,7 @@
         "MAX_SIZE" : "Max size filter",
         "ENABLE_VERSIONING" :"Enable versioning",
         "DESCRIPTION_UPLOAD" : "Enable upload",
+        "ENABLE_INFINITE_SCROLL":"Enable Infinite Scrolling",
         "MULTISELECT_DESCRIPTION" : "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items",
         "COLUMNS": {
             "DISPLAY_NAME": "Display name",

demo-shell/src/app/components/files/files.component.html

@@ -115,6 +115,9 @@
             </adf-toolbar>
             <adf-document-list
                 #documentList
+                [maxItems]="currentMaxItems"
+                [skipCount]="currentSkipCount"
+                [enableInfiniteScrolling]="infiniteScrolling"
                 [permissionsStyle]="permissionsStyle"
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
@@ -251,6 +254,24 @@
                     </content-action>
                 </content-actions>
             </adf-document-list>
+            <adf-pagination
+                *ngIf="!infiniteScrolling"
+                class="adf-documentlist-pagination"
+                [pagination]="pagination"
+                [supportedPageSizes]="supportedPages"
+                (changePageSize)="onChangePageSize($event)"
+                (changePageNumber)="onChangePageNumber($event)"
+                (nextPage)="onNextPage($event)"
+                (prevPage)="onPrevPage($event)">
+            </adf-pagination>
+            <adf-infinite-pagination
+                *ngIf="infiniteScrolling"
+                [pagination]="pagination"
+                [loading]="documentList.infiniteLoading"
+                [pageSize]="currentMaxItems"
+                (loadMore)="loadNextBatch($event)">
+                {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
+            </adf-infinite-pagination>
         </adf-upload-drag-area>
         <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
             <div info-drawer-content>
@@ -330,6 +351,12 @@
             </mat-slide-toggle>
         </section>
 
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="infiniteScrolling">
+                {{'DOCUMENT_LIST.ENABLE_INFINITE_SCROLL' | translate}}
+            </mat-slide-toggle>
+        </section>
+
         <h5>Upload</h5>
         <section *ngIf="acceptedFilesTypeShow">
             <mat-form-field>

demo-shell/src/app/components/files/files.component.ts

@@ -21,11 +21,11 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { MinimalNodeEntity, NodePaging } from 'alfresco-js-api';
+import { MinimalNodeEntity, NodePaging, Pagination } from 'alfresco-js-api';
 import {
     AlfrescoApiService, ContentService, TranslationService,
     FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
-    SiteModel, UploadService, DataColumn, DataRow
+    SiteModel, UploadService, DataColumn, DataRow, UserPreferencesService
 } from '@alfresco/adf-core';
 
 import { DocumentListComponent, PermissionStyleModel, DownloadZipDialogComponent } from '@alfresco/adf-content-services';
@@ -92,13 +92,35 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     nodeResult: NodePaging;
 
+    @Input()
+    pagination: Pagination;
+
     @Output()
     documentListReady: EventEmitter<any> = new EventEmitter();
 
+    @Output()
+    changedPageSize: EventEmitter<Pagination> = new EventEmitter();
+
+    @Output()
+    changedPageNumber: EventEmitter<Pagination> = new EventEmitter();
+
+    @Output()
+    turnedNextPage: EventEmitter<Pagination> = new EventEmitter();
+
+    @Output()
+    turnedPreviousPage: EventEmitter<Pagination> = new EventEmitter();
+
+    @Output()
+    loadNext: EventEmitter<Pagination> = new EventEmitter();
+
     @ViewChild(DocumentListComponent)
     documentList: DocumentListComponent;
 
     permissionsStyle: PermissionStyleModel[] = [];
+    supportedPages: number[] = [5, 10, 15, 20];
+    infiniteScrolling: boolean;
+    currentMaxItems: number;
+    currentSkipCount: number = 0;
 
     private onCreateFolder: Subscription;
     private onEditFolder: Subscription;
@@ -112,7 +134,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                 private translateService: TranslationService,
                 private router: Router,
                 @Optional() private route: ActivatedRoute,
-                private logService: LogService) {
+                private logService: LogService,
+                private preference: UserPreferencesService) {
     }
 
     showFile(event) {
@@ -134,6 +157,13 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     ngOnInit() {
+        if (!this.pagination) {
+            this.pagination = <Pagination>{
+                maxItems: this.preference.paginationSize,
+                skipCount: 0
+            };
+            this.currentMaxItems = this.preference.paginationSize;
+        }
         if (this.route) {
             this.route.params.forEach((params: Params) => {
                 if (params['id']) {
@@ -225,6 +255,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     emitReadyEvent(event: any) {
         this.documentListReady.emit(event);
+        this.pagination = event.list.pagination;
     }
 
     onContentActionError(errors) {
@@ -376,4 +407,35 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         }
         return false;
     }
+
+    onChangePageSize(event: Pagination): void {
+        this.preference.paginationSize = event.maxItems;
+        this.currentMaxItems = event.maxItems;
+        this.currentSkipCount = event.skipCount;
+        this.changedPageSize.emit(event);
+    }
+
+    onChangePageNumber(event: Pagination): void {
+        this.currentMaxItems = event.maxItems;
+        this.currentSkipCount = event.skipCount;
+        this.changedPageNumber.emit(event);
+    }
+
+    onNextPage(event: Pagination): void {
+        this.currentMaxItems = event.maxItems;
+        this.currentSkipCount = event.skipCount;
+        this.turnedNextPage.emit(event);
+    }
+
+    loadNextBatch(event: Pagination) {
+        this.currentMaxItems = event.maxItems;
+        this.currentSkipCount = event.skipCount;
+        this.loadNext.emit(event);
+    }
+
+    onPrevPage(event: Pagination): void {
+        this.currentMaxItems = event.maxItems;
+        this.currentSkipCount = event.skipCount;
+        this.turnedPreviousPage.emit(event);
+    }
 }

demo-shell/src/app/components/search/search-result.component.html

@@ -1,4 +1,6 @@
 <adf-search [searchTerm]="searchedWord"
+            [maxResults]="maxItems"
+            [skipResults]="skipCount"
             (resultLoaded)="showSearchResult($event)"
             #search>
 </adf-search>
@@ -6,5 +8,10 @@
 <adf-files-component
         [currentFolderId]="null"
         [nodeResult]="resultNodePageList"
-        (documentListReady)="refreshResults($event)">
+        (documentListReady)="refreshResults($event)"
+        (changedPageSize)="refreshPage($event)"
+        (changedPageNumber)="refreshPage($event)"
+        (turnedNextPage)="refreshPage($event)"
+        (loadNext)="refreshPage($event)"
+        (turnedPreviousPage)="refreshPage($event)">
 </adf-files-component>

demo-shell/src/app/components/search/search-result.component.ts

@@ -17,8 +17,9 @@
 
 import { Component, OnInit, Optional, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute, Params } from '@angular/router';
-import { NodePaging } from 'alfresco-js-api';
+import { NodePaging, Pagination } from 'alfresco-js-api';
 import { SearchComponent } from '@alfresco/adf-content-services';
+import { UserPreferencesService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-search-result-component',
@@ -36,9 +37,14 @@ export class SearchResultComponent implements OnInit {
     fileShowed: boolean = false;
     navigationMode: string = 'dblclick';
     resultNodePageList: NodePaging;
+    maxItems: number;
+    skipCount: number = 0;
+    paging: Pagination;
 
     constructor(public router: Router,
+                private preferences: UserPreferencesService,
                 @Optional() private route: ActivatedRoute) {
+        this.maxItems = this.preferences.paginationSize;
     }
 
     ngOnInit() {
@@ -51,9 +57,15 @@ export class SearchResultComponent implements OnInit {
 
     showSearchResult(event: NodePaging) {
         this.resultNodePageList = event;
+        this.paging = event.list.pagination;
     }
 
     refreshResults(event: any) {
         this.search.reload();
     }
+
+    refreshPage(event: Pagination) {
+        this.maxItems = event.maxItems;
+        this.skipCount = event.skipCount;
+    }
 }