[CST-9636] WIP improve bulk access page

src/app/access-control/bulk-access/browse/bulk-access-browse.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
@@ -13,6 +13,7 @@ import { ListableObject } from '../../../shared/object-collection/shared/listabl
 import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import { hasValue } from '../../../shared/empty.util';
 
 @Component({
   selector: 'ds-bulk-access-browse',
@@ -25,43 +26,97 @@ import { PaginationComponentOptions } from '../../../shared/pagination/paginatio
     }
   ]
 })
-export class BulkAccessBrowseComponent implements OnInit {
+export class BulkAccessBrowseComponent implements OnInit, OnDestroy {
+
+  /**
+   * The selection list id
+   */
+  @Input() listId!: string;
+
   /**
    * The active nav id
    */
   activateId = 'search';
 
-  /**
-   * The selection list id
-   */
-  listId: string = 'bulk-access-list';
-
   /**
    * The list of the objects already selected
    */
   objectsSelected$: BehaviorSubject<RemoteData<PaginatedList<ListableObject>>> = new BehaviorSubject<RemoteData<PaginatedList<ListableObject>>>(null);
 
-  paginationOptions: PaginationComponentOptions;
+  /**
+   * The pagination options object used for the list of selected elements
+   */
+  paginationOptions$: BehaviorSubject<PaginationComponentOptions> = new BehaviorSubject<PaginationComponentOptions>(Object.assign(new PaginationComponentOptions(), {
+    id: 'bas',
+    pageSize: 5,
+    currentPage: 1
+  }));
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   */
   private subs: Subscription[] = [];
 
   constructor(private selectableListService: SelectableListService) {
   }
 
+  /**
+   * Subscribe to selectable list updates
+   */
   ngOnInit(): void {
-    this.paginationOptions = Object.assign(new PaginationComponentOptions(), {
-      id: 'elp',
-      pageSize: 10,
-      currentPage: 1
-    });
+
     this.subs.push(
       this.selectableListService.getSelectableList(this.listId).pipe(
         distinctUntilChanged(),
-        map((list: SelectableListState) => {
-          console.log(list);
-          return createSuccessfulRemoteDataObject(buildPaginatedList(new PageInfo(), list?.selection || []))
-        })
+        map((list: SelectableListState) => this.generatePaginatedListBySelectedElements(list))
       ).subscribe(this.objectsSelected$)
     )
   }
 
+  pageNext() {
+    this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, {
+      currentPage: this.paginationOptions$.value.currentPage + 1
+    }));
+    console.log(this.paginationOptions$.value);
+  }
+
+  pagePrev() {
+    this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, {
+      currentPage: this.paginationOptions$.value.currentPage - 1
+    }));
+    console.log(this.paginationOptions$.value);
+  }
+
+  private calculatePageCount(pageSize, totalCount = 0) {
+    // we suppose that if we have 0 items we want 1 empty page
+    return totalCount < pageSize ? 1 : Math.ceil(totalCount / pageSize);
+  };
+
+  /**
+   * Generate The RemoteData object containing the list of the selected elements
+   * @param list
+   * @private
+   */
+  private generatePaginatedListBySelectedElements(list: SelectableListState): RemoteData<PaginatedList<ListableObject>> {
+    const pageInfo = new PageInfo({
+      elementsPerPage: this.paginationOptions$.value.pageSize,
+      totalElements: list?.selection.length,
+      totalPages: this.calculatePageCount(this.paginationOptions$.value.pageSize, list?.selection.length),
+      currentPage: this.paginationOptions$.value.currentPage
+    });
+    if (pageInfo.currentPage > pageInfo.totalPages) {
+      pageInfo.currentPage = pageInfo.totalPages;
+      this.paginationOptions$.next(Object.assign(new PaginationComponentOptions(), this.paginationOptions$.value, {
+        currentPage: pageInfo.currentPage
+      }));
+    }
+    return createSuccessfulRemoteDataObject(buildPaginatedList(pageInfo, list?.selection || []));
+  }
+
+  ngOnDestroy(): void {
+    this.subs
+      .filter((sub) => hasValue(sub))
+      .forEach((sub) => sub.unsubscribe());
+    this.selectableListService.deselectAll(this.listId)
+  }
 }