Added support for change list sizes on bundle edit

src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts

@@ -218,7 +218,7 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
           this.zone.run(() => {
             this.displayNotifications('item.edit.bitstreams.notifications.move', [response]);
             // Remove all cached requests from this bundle and call the event's callback when the requests are cleared
-            this.requestService.removeByHrefSubstring(bundle.self).pipe(
+            this.requestService.setStaleByHrefSubstring(bundle.self).pipe(
               filter((isCached) => isCached),
               take(1),
             ).subscribe(() => event.finish());

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

@@ -15,6 +15,21 @@
                 title="{{'item.edit.bitstreams.bundle.edit.buttons.upload' | translate}}">
           <i class="fas fa-upload fa-fw"></i>
         </button>
+        <div ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="btn-group float-right">
+          <button class="btn btn-outline-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog" aria-hidden="true"></i></button>
+          <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu" ngbDropdownMenu>
+            <li role="menuitem">
+              <span class="dropdown-header" id="pagination-control_results-per-page" role="heading">{{ 'pagination.results-per-page' | translate}}</span>
+              <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
+                <li *ngFor="let item of pageSizeOptions" role="option" [attr.aria-selected]="item === (pageSize$ | async)">
+                  <button (click)="doPageSizeChange(item)" class="dropdown-item">
+                    <i [ngClass]="{'invisible': item !== (pageSize$ | async) }" class="fas fa-check" aria-hidden="true"></i> {{item}}
+                  </button>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.spec.ts

@@ -7,7 +7,13 @@ import {
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
+import { PaginationService } from 'ngx-pagination';
+import { of } from 'rxjs';
+import { ActivatedRouteStub } from 'src/app/shared/testing/active-router.stub';
+import { PaginationServiceStub } from 'src/app/shared/testing/pagination-service.stub';
 
 import { Bundle } from '../../../../core/shared/bundle.model';
 import { Item } from '../../../../core/shared/item.model';
@@ -38,10 +44,20 @@ describe('ItemEditBitstreamBundleComponent', () => {
       self: { href: 'bundle-1-selflink' },
     },
   });
+  const mockStore = {
+    select: () => of({}),
+    dispatch: jasmine.createSpy('dispatch'),
+  };
+
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), ItemEditBitstreamBundleComponent],
+      providers: [
+        { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
+        { provide: PaginationService, useValue: new PaginationServiceStub() },
+        { provide: Store, useValue: mockStore },
+      ],
       schemas: [
         NO_ERRORS_SCHEMA,
       ],

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts

@@ -1,3 +1,8 @@
+import {
+  AsyncPipe,
+  NgClass,
+  NgFor,
+} from '@angular/common';
 import {
   Component,
   EventEmitter,
@@ -9,7 +14,14 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import {
+  map,
+  Observable,
+} from 'rxjs';
+import { PaginationService } from 'src/app/core/pagination/pagination.service';
+import { PaginationComponentOptions } from 'src/app/shared/pagination/pagination-component-options.model';
 
 import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 import { Bundle } from '../../../../core/shared/bundle.model';
@@ -29,6 +41,10 @@ import { PaginatedDragAndDropBitstreamListComponent } from './paginated-drag-and
     TranslateModule,
     RouterLink,
     ItemEditBitstreamDragHandleComponent,
+    NgbDropdownModule,
+    AsyncPipe,
+    NgClass,
+    NgFor,
   ],
   standalone: true,
 })
@@ -77,20 +93,54 @@ export class ItemEditBitstreamBundleComponent implements OnInit, OnDestroy {
    */
   itemPageRoute: string;
 
+  /**
+   * Reference to child paginatedDragAndDropBitstreamListComponent
+   */
+  @ViewChild(PaginatedDragAndDropBitstreamListComponent) paginatedDragAndDropBitstreamListComponent: PaginatedDragAndDropBitstreamListComponent;
+
+  /**
+   * Options object for PaginationComponent
+   * ID match with default ID to affect all paginated bundles
+   */
+  options = Object.assign(new PaginationComponentOptions(),{
+    id: 'dad',
+  });
+
+  /**
+   * current page size
+   */
+  public pageSize$: Observable<number>;
+
+  public pageSizeOptions: number[];
+
   constructor(
     protected viewContainerRef: ViewContainerRef,
     public dsoNameService: DSONameService,
+    public paginationService: PaginationService,
   ) {
   }
 
   ngOnInit(): void {
     this.bundleNameColumn = this.columnSizes.combineColumns(0, 2);
     this.viewContainerRef.createEmbeddedView(this.bundleView);
     this.itemPageRoute = getItemPageRoute(this.item);
+    this.pageSizeOptions = this.options.pageSizeOptions;
+    this.pageSize$ = this.paginationService.getCurrentPagination(this.options.id, this.options).pipe(
+      map((currentPagination) => currentPagination.pageSize),
+    );
   }
 
   ngOnDestroy(): void {
     this.viewContainerRef.clear();
   }
 
+  /**
+   * Method to update page size in child components
+   *
+   * @param pageSize
+   *    The page size being navigated to.
+   */
+  public doPageSizeChange(pageSize: number) {
+    this.paginatedDragAndDropBitstreamListComponent.paginationComponent.doPageSizeChange(pageSize);
+  }
 }

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html

@@ -7,7 +7,7 @@
   <ng-container *ngIf="(loading$ | async) !== true">
     <div [id]="bundle.id" class="bundle-bitstreams-list"
          [ngClass]="{'mb-3': (objectsRD$ | async)?.payload?.totalElements > pageSize}"
-         *ngVar="(updates$ | async) as updates" cdkDropList (cdkDropListDropped)="drop($event)">
+         *ngVar="(updates$ | async) as updates" cdkDropList (cdkDropListDropped)="drop($event)" [ngbTooltip]="'item.edit.bitstreams.bundle.tooltip' | translate">
       <ng-container *ngIf="updates">
         <div class="row bitstream-row" *ngFor="let uuid of customOrder" cdkDrag
              [id]="uuid"

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.ts

@@ -15,6 +15,7 @@ import {
   Input,
   OnInit,
 } from '@angular/core';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { switchMap } from 'rxjs/operators';
 
@@ -54,6 +55,7 @@ import { ItemEditBitstreamDragHandleComponent } from '../../item-edit-bitstream-
     CdkDragHandle,
     ThemedLoadingComponent,
     TranslateModule,
+    NgbTooltipModule,
   ],
   standalone: true,
 })

src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.spec.ts

@@ -104,15 +104,21 @@ describe('AbstractPaginatedDragAndDropListComponent', () => {
     const event = {
       previousIndex: 0,
       currentIndex: 1,
+      dropPoint: {
+        x: 0,
+        y: 0,
+      },
       item: { element: { nativeElement: { id: object1.uuid } } },
     } as any;
 
     describe('when the user is hovering over a new page', () => {
       const hoverPage = 3;
-      const hoverElement = { textContent: '' + hoverPage };
+      const hoverElement = document.createElement('div');
+      hoverElement.textContent = '' + hoverPage;
+      hoverElement.classList.add('page-link');
 
       beforeEach(() => {
-        elRef.nativeElement.querySelector.and.returnValue(hoverElement);
+        spyOn(document, 'elementFromPoint').and.returnValue(hoverElement);
         spyOn(component.dropObject, 'emit');
         component.drop(event);
       });

src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts

@@ -211,10 +211,9 @@ export abstract class AbstractPaginatedDragAndDropListComponent<T extends DSpace
     const dragPage = this.currentPage$.value.currentPage - 1;
     let dropPage = this.currentPage$.value.currentPage - 1;
 
-    // Check if the user is hovering over any of the pagination's pages at the time of dropping the object
-    const droppedOnElement = this.elRef.nativeElement.querySelector('.page-item:hover');
-    if (hasValue(droppedOnElement) && hasValue(droppedOnElement.textContent)) {
-      // The user is hovering over a page, fetch the page's number from the element
+    // Check if the user is droping a element over any of the pagination's pages based on event's drop point
+    const droppedOnElement = document.elementFromPoint(event.dropPoint.x, event.dropPoint.y);
+    if (hasValue(droppedOnElement) && hasValue(droppedOnElement.textContent) && droppedOnElement.classList.contains('page-link')) {
       const droppedPage = Number(droppedOnElement.textContent);
       if (hasValue(droppedPage) && !Number.isNaN(droppedPage)) {
         dropPage = droppedPage - 1;

src/assets/i18n/en.json5

@@ -2278,6 +2278,8 @@
 
   "item.edit.bitstreams.upload-button": "Upload",
 
+  "item.edit.bitstreams.bundle.tooltip": "If you need to move an item to another page you can drop it to the page number",
+
   "item.edit.delete.cancel": "Cancel",
 
   "item.edit.delete.confirm": "Delete",

src/assets/i18n/es.json5

@@ -3279,6 +3279,9 @@
   // "item.edit.bitstreams.upload-button": "Upload",
   "item.edit.bitstreams.upload-button": "Subir",
 
+  //"item.edit.bitstreams.bundle.tooltip": "If you need to move an item to another page you can drop it to the page number",
+  "item.edit.bitstreams.bundle.tooltip": "Si necesita mover un elemento a otra página, puede soltarlo en el número de la página a donde desea mover",
+
   // "item.edit.delete.cancel": "Cancel",
   "item.edit.delete.cancel": "Cancelar",