[CST-9636] WIP improve bulk access page

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

@@ -22,7 +22,7 @@
           <a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="mx-n3">
-              <ds-themed-search [configuration]="'default'"
+              <ds-themed-search [configuration]="'administrativeBulkAccess'"
                                 [selectable]="true"
                                 [selectionConfig]="{ repeatable: true, listId: listId }"
                                 [showThumbnails]="false"></ds-themed-search>
@@ -30,15 +30,20 @@
           </ng-template>
         </li>
         <li [ngbNavItem]="'selected'">
-          <a
-            ngbNavLink>{{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}</a>
+          <a ngbNavLink>
+            {{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}
+          </a>
           <ng-template ngbNavContent>
-            <ds-viewable-collection [config]="paginationOptions"
-                                    [hideGear]="true"
-                                    [objects]="objectsSelected$ | async"
-                                    [selectable]="true"
-                                    [selectionConfig]="{ repeatable: true, listId: listId }"
-                                    [showThumbnails]="false"></ds-viewable-collection>
+            <ds-themed-object-list [config]="paginationOptions$ | async"
+                                   [hideGear]="true"
+                                   [listToPaginate]="true"
+                                   [objects]="objectsSelected$ | async"
+                                   [selectable]="true"
+                                   [selectionConfig]="{ repeatable: true, listId: listId }"
+                                   [showThumbnails]="false"
+                                   [showPaginator]="false"
+                                   (next)="pageNext()"
+                                   (prev)="pagePrev()"></ds-themed-object-list>
           </ng-template>
         </li>
       </ul>

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)
+  }
 }

src/app/access-control/bulk-access/bulk-access.component.html

@@ -1,8 +1,8 @@
 
 <div class="container">
-  <ds-bulk-access-browse></ds-bulk-access-browse>
+  <ds-bulk-access-browse [listId]="listId"></ds-bulk-access-browse>
   <div class="clearfix mb-3"></div>
-  <ds-bulk-access-settings></ds-bulk-access-settings>
+  <ds-bulk-access-settings [listId]="listId"></ds-bulk-access-settings>
 </div>
 
 

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

@@ -7,6 +7,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BulkAccessComponent implements OnInit {
 
+
+  /**
+   * The selection list id
+   */
+  listId: string = 'bulk-access-list';
+
   constructor() { }
 
   ngOnInit(): void {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'ds-bulk-access-settings',
@@ -7,6 +7,11 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BulkAccessSettingsComponent implements OnInit {
 
+  /**
+   * The selection list id
+   */
+  @Input() listId!: string;
+
   constructor() { }
 
   ngOnInit(): void {