[ACA-1993] Favorite libraries - custom pagination (#855)

src/app/components/favorite-libraries/favorite-libraries.component.html

@@ -20,6 +20,7 @@
                 acaContextActions
                 [display]="documentDisplayMode$ | async"
                 [node]="list"
+                [loading]="isLoading"
                 [loading]="dataIsLoading"
                 selectionMode="single"
                 [navigate]="false"
@@ -58,7 +59,12 @@
                 </data-columns>
             </adf-document-list>
 
-            <adf-pagination acaPagination [target]="documentList">
+            <adf-pagination
+            [pagination]="pagination"
+            (changePageSize)="onChangePageSize($event)"
+            (changePageNumber)="onChange($event)"
+            (nextPage)="onChange($event)"
+            (prevPage)="onChange($event)">
             </adf-pagination>
         </div>
 

src/app/components/favorite-libraries/favorite-libraries.component.spec.ts

@@ -23,8 +23,9 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { TestBed, ComponentFixture, async } from '@angular/core/testing';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { UserPreferencesService } from '@alfresco/adf-core';
 import { Router } from '@angular/router';
 import {
   AlfrescoApiService,
@@ -42,12 +43,13 @@ import { ExperimentalDirective } from '../../directives/experimental.directive';
 import { ContentManagementService } from '../../services/content-management.service';
 import { EffectsModule } from '@ngrx/effects';
 import { LibraryEffects, RouterEffects } from '../../store/effects';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 
 describe('FavoriteLibrariesComponent', () => {
   let fixture: ComponentFixture<FavoriteLibrariesComponent>;
   let component: FavoriteLibrariesComponent;
   let alfrescoApi: AlfrescoApiService;
+  let userPreference: UserPreferencesService;
   let contentApiService: ContentApiService;
   let router: Router;
   let page;
@@ -78,7 +80,7 @@ describe('FavoriteLibrariesComponent', () => {
         AppConfigPipe,
         ExperimentalDirective
       ],
-      providers: [ContentManagementService],
+      providers: [ContentManagementService, UserPreferencesService],
       schemas: [NO_ERRORS_SCHEMA]
     });
 
@@ -87,6 +89,7 @@ describe('FavoriteLibrariesComponent', () => {
 
     alfrescoApi = TestBed.get(AlfrescoApiService);
     contentApiService = TestBed.get(ContentApiService);
+    userPreference = TestBed.get(UserPreferencesService);
     contentManagementService = TestBed.get(ContentManagementService);
     alfrescoApi.reset();
     router = TestBed.get(Router);
@@ -96,21 +99,41 @@ describe('FavoriteLibrariesComponent', () => {
     );
   });
 
-  describe('Favorite libraries data', () => {
+  describe('on initialization', () => {
-    it('should initialise with default data', () => {
+    it('should set data', () => {
-      expect(component.node).toBe(undefined);
-      expect(component.dataIsLoading).toBe(true);
-    });
-
-    it('should get data on initialization', async(() => {
       spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(
         of(page)
       );
       fixture.detectChanges();
 
-      expect(component.list).toEqual(page);
+      expect(component.list).toBe(page);
-      expect(component.dataIsLoading).toBe(false);
+      expect(component.pagination).toBe(page.list.pagination);
-    }));
+    });
+
+    it('should get data with user preference pagination size', () => {
+      userPreference.paginationSize = 1;
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(
+        of(page)
+      );
+
+      fixture.detectChanges();
+
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalledWith(
+        '-me-',
+        { maxItems: userPreference.paginationSize }
+      );
+    });
+
+    it('should set data on error', () => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(
+        throwError('error')
+      );
+      fixture.detectChanges();
+
+      expect(component.list).toBe(null);
+      expect(component.pagination).toBe(null);
+      expect(component.isLoading).toBe(false);
+    });
   });
 
   describe('Node navigation', () => {
@@ -151,5 +174,65 @@ describe('FavoriteLibrariesComponent', () => {
       contentManagementService.favoriteLibraryToggle.next();
       expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
     });
+
+    it('should reload on libraryJoined action', () => {
+      contentManagementService.libraryJoined.next();
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
+    });
+
+    it('should reload on libraryLeft action', () => {
+      contentManagementService.libraryLeft.next();
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
+    });
+  });
+
+  describe('Pagination', () => {
+    let pagination;
+
+    beforeEach(() => {
+      pagination = {
+        count: 100,
+        hasMoreItems: true,
+        totalItems: 300,
+        skipCount: 25,
+        maxItems: 25
+      };
+    });
+
+    it('should get list with pagination data onChange event', () => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(
+        of(page)
+      );
+
+      component.onChange(pagination);
+
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalledWith(
+        '-me-',
+        pagination
+      );
+    });
+
+    it('should get list with pagination data onChangePageSize event', () => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(
+        of(page)
+      );
+
+      component.onChangePageSize(pagination);
+
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalledWith(
+        '-me-',
+        pagination
+      );
+    });
+
+    it('should set preference page size onChangePageSize event', () => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(
+        of(page)
+      );
+
+      component.onChangePageSize(pagination);
+
+      expect(userPreference.paginationSize).toBe(pagination.maxItems);
+    });
   });
 });

src/app/components/favorite-libraries/favorite-libraries.component.ts

@@ -26,21 +26,22 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { SiteEntry, FavoritePaging } from 'alfresco-js-api';
+import { SiteEntry, FavoritePaging, Pagination } from 'alfresco-js-api';
 import { AppExtensionService } from '../../extensions/extension.service';
 import { ContentManagementService } from '../../services/content-management.service';
 import { ContentApiService } from '../../services/content-api.service';
 import { NavigateLibraryAction } from '../../store/actions';
 import { AppStore } from '../../store/states/app.state';
 import { PageComponent } from '../page.component';
-
+import { UserPreferencesService } from '@alfresco/adf-core';
 @Component({
   templateUrl: './favorite-libraries.component.html'
 })
 export class FavoriteLibrariesComponent extends PageComponent
   implements OnInit {
+  pagination: Pagination;
+  isLoading = false;
   list: FavoritePaging;
-  dataIsLoading = true;
   isSmallScreen = false;
   columns: any[] = [];
 
@@ -49,7 +50,8 @@ export class FavoriteLibrariesComponent extends PageComponent
     store: Store<AppStore>,
     extensions: AppExtensionService,
     private contentApiService: ContentApiService,
-    private breakpointObserver: BreakpointObserver
+    private breakpointObserver: BreakpointObserver,
+    private preferences: UserPreferencesService
   ) {
     super(store, extensions, content);
   }
@@ -57,7 +59,7 @@ export class FavoriteLibrariesComponent extends PageComponent
   ngOnInit() {
     super.ngOnInit();
 
-    this.getList();
+    this.getList({ maxItems: this.preferences.paginationSize });
 
     this.subscriptions = this.subscriptions.concat([
       this.content.libraryDeleted.subscribe(() => this.reloadList()),
@@ -81,21 +83,33 @@ export class FavoriteLibrariesComponent extends PageComponent
     }
   }
 
-  private getList() {
+  onChangePageSize(pagination: Pagination) {
-    this.contentApiService.getFavoriteLibraries().subscribe(
+    this.preferences.paginationSize = pagination.maxItems;
+    this.getList(pagination);
+  }
+
+  onChange(pagination: Pagination) {
+    this.getList(pagination);
+  }
+
+  private getList(pagination: Pagination) {
+    this.isLoading = true;
+    this.contentApiService.getFavoriteLibraries('-me-', pagination).subscribe(
       (favoriteLibraries: FavoritePaging) => {
         this.list = favoriteLibraries;
-        this.dataIsLoading = false;
+        this.pagination = favoriteLibraries.list.pagination;
+        this.isLoading = false;
       },
       () => {
         this.list = null;
-        this.dataIsLoading = false;
+        this.pagination = null;
+        this.isLoading = false;
       }
     );
   }
 
   private reloadList() {
     this.reload();
-    this.getList();
+    this.getList(this.pagination);
   }
 }

src/app/services/content-api.service.ts

@@ -186,8 +186,14 @@ export class ContentApiService {
     return from(this.api.favoritesApi.getFavorites(personId, opts));
   }
 
-  getFavoriteLibraries(personId: string = '-me-'): Observable<FavoritePaging> {
+  getFavoriteLibraries(
-    return this.getFavorites(personId, { where: '(EXISTS(target/site))' }).pipe(
+    personId: string = '-me-',
+    opts?: any
+  ): Observable<FavoritePaging> {
+    return this.getFavorites(personId, {
+      ...opts,
+      where: '(EXISTS(target/site))'
+    }).pipe(
       map((response: FavoritePaging) => {
         return {
           list: {