118223: Implement bitstream reordering with keyboard

Author: AAwouters

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

@@ -33,7 +33,6 @@
                                    [item]="item"
                                    [columnSizes]="columnSizes"
                                    [isFirstTable]="isFirst"
-                                   (dropObject)="dropBitstream(bundle, $event)"
                                    aria-describedby="reorder-description">
     </ds-item-edit-bitstream-bundle>
   </div>

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

@@ -25,6 +25,10 @@ import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } f
 import { createPaginatedList } from '../../../shared/testing/utils.test';
 import { FieldChangeType } from '../../../core/data/object-updates/field-change-type.model';
 import { BitstreamDataServiceStub } from '../../../shared/testing/bitstream-data-service.stub';
+import { ItemBitstreamsService } from './item-bitstreams.service';
+import { ResponsiveTableSizes } from '../../../shared/responsive-table-sizes/responsive-table-sizes';
+import { ResponsiveColumnSizes } from '../../../shared/responsive-table-sizes/responsive-column-sizes';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 
 let comp: ItemBitstreamsComponent;
 let fixture: ComponentFixture<ItemBitstreamsComponent>;
@@ -76,6 +80,7 @@ let objectCache: ObjectCacheService;
 let requestService: RequestService;
 let searchConfig: SearchConfigurationService;
 let bundleService: BundleDataService;
+let itemBitstreamsService: ItemBitstreamsService;
 
 describe('ItemBitstreamsComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -147,6 +152,19 @@ describe('ItemBitstreamsComponent', () => {
       patch: createSuccessfulRemoteDataObject$({}),
     });
 
+    itemBitstreamsService = jasmine.createSpyObj('itemBitstreamsService', {
+      getColumnSizes: new ResponsiveTableSizes([
+        new ResponsiveColumnSizes(2, 2, 3, 4, 4),
+        new ResponsiveColumnSizes(2, 3, 3, 3, 3),
+        new ResponsiveColumnSizes(2, 2, 2, 2, 2),
+        new ResponsiveColumnSizes(6, 5, 4, 3, 3)
+      ]),
+      getSelectedBitstream$: observableOf({}),
+      getInitialBundlesPaginationOptions: new PaginationComponentOptions(),
+      removeMarkedBitstreams: createSuccessfulRemoteDataObject$({}),
+      displayNotifications: undefined,
+    });
+
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
       declarations: [ItemBitstreamsComponent, ObjectValuesPipe, VarDirective],
@@ -161,6 +179,7 @@ describe('ItemBitstreamsComponent', () => {
         { provide: RequestService, useValue: requestService },
         { provide: SearchConfigurationService, useValue: searchConfig },
         { provide: BundleDataService, useValue: bundleService },
+        { provide: ItemBitstreamsService, useValue: itemBitstreamsService },
         ChangeDetectorRef
       ], schemas: [
         NO_ERRORS_SCHEMA
@@ -181,28 +200,8 @@ describe('ItemBitstreamsComponent', () => {
       comp.submit();
     });
 
-    it('should call removeMultiple on the bitstreamService for the marked field', () => {
-      expect(bitstreamService.removeMultiple).toHaveBeenCalledWith([bitstream2]);
-    });
-
-    it('should not call removeMultiple on the bitstreamService for the unmarked field', () => {
-      expect(bitstreamService.removeMultiple).not.toHaveBeenCalledWith([bitstream1]);
-    });
-  });
-
-  describe('when dropBitstream is called', () => {
-    beforeEach((done) => {
-      comp.dropBitstream(bundle, {
-        fromIndex: 0,
-        toIndex: 50,
-        finish: () => {
-          done();
-        }
-      });
-    });
-
-    it('should send out a patch for the move operation', () => {
-      expect(bundleService.patch).toHaveBeenCalled();
+    it('should call removeMarkedBitstreams on the itemBitstreamsService', () => {
+      expect(itemBitstreamsService.removeMarkedBitstreams).toHaveBeenCalled();
     });
   });
 

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

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, NgZone, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, NgZone, OnDestroy, HostListener } from '@angular/core';
 import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component';
 import { map, switchMap, take } from 'rxjs/operators';
 import { Observable, Subscription, zip as observableZip } from 'rxjs';
@@ -8,13 +8,11 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 import { BitstreamDataService } from '../../../core/data/bitstream-data.service';
-import { hasValue } from '../../../shared/empty.util';
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
 import { RequestService } from '../../../core/data/request.service';
 import {
   getFirstSucceededRemoteData,
   getRemoteDataPayload,
-  getFirstCompletedRemoteData
 } from '../../../core/shared/operators';
 import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
@@ -23,7 +21,6 @@ import { BundleDataService } from '../../../core/data/bundle-data.service';
 import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-search-options.model';
 import { ResponsiveTableSizes } from '../../../shared/responsive-table-sizes/responsive-table-sizes';
 import { NoContent } from '../../../core/shared/NoContent.model';
-import { Operation } from 'fast-json-patch';
 import { ItemBitstreamsService } from './item-bitstreams.service';
 import { AlertType } from '../../../shared/alert/aletr-type';
 
@@ -88,13 +85,63 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
   postItemInit(): void {
     const bundlesOptions = this.itemBitstreamsService.getInitialBundlesPaginationOptions();
 
-    this. bundles$ = this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({pagination: bundlesOptions})).pipe(
+    this.bundles$ = this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({pagination: bundlesOptions})).pipe(
       getFirstSucceededRemoteData(),
       getRemoteDataPayload(),
       map((bundlePage: PaginatedList<Bundle>) => bundlePage.page)
     );
   }
 
+  /**
+   * Handles keyboard events that should move the currently selected bitstream up
+   */
+  @HostListener('document:keydown.arrowUp', ['$event'])
+  moveUp(event: KeyboardEvent) {
+    if (this.itemBitstreamsService.hasSelectedBitstream()) {
+      event.preventDefault();
+      this.itemBitstreamsService.moveSelectedBitstreamUp();
+    }
+  }
+
+  /**
+   * Handles keyboard events that should move the currently selected bitstream down
+   */
+  @HostListener('document:keydown.arrowDown', ['$event'])
+  moveDown(event: KeyboardEvent) {
+    if (this.itemBitstreamsService.hasSelectedBitstream()) {
+      event.preventDefault();
+      this.itemBitstreamsService.moveSelectedBitstreamDown();
+    }
+  }
+
+  /**
+   * Handles keyboard events that should cancel the currently selected bitstream.
+   * A cancel means that the selected bitstream is returned to its original position and is no longer selected.
+   * @param event
+   */
+  @HostListener('document:keyup.escape', ['$event'])
+  cancelSelection(event: KeyboardEvent) {
+    if (this.itemBitstreamsService.hasSelectedBitstream()) {
+      event.preventDefault();
+      this.itemBitstreamsService.cancelSelection();
+    }
+  }
+
+  /**
+   * Handles keyboard events that should clear the currently selected bitstream.
+   * A clear means that the selected bitstream remains in its current position but is no longer selected.
+   */
+  @HostListener('document:keydown.enter', ['$event'])
+  @HostListener('document:keydown.space', ['$event'])
+  clearSelection(event: KeyboardEvent) {
+    // Only when no specific element is in focus do we want to clear the currently selected bitstream
+    // Otherwise we might clear the selection when a different action was intended, e.g. clicking a button or selecting
+    // a different bitstream.
+    if (event.target instanceof Element && event.target.tagName === 'BODY') {
+      this.itemBitstreamsService.clearSelection();
+    }
+  }
+
   /**
    * Initialize the notification messages prefix
    */
@@ -120,36 +167,6 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
     });
   }
 
-  /**
-   * A bitstream was dropped in a new location. Send out a Move Patch request to the REST API, display notifications,
-   * refresh the bundle's cache (so the lists can properly reload) and call the event's callback function (which will
-   * navigate the user to the correct page)
-   * @param bundle  The bundle to send patch requests to
-   * @param event   The event containing the index the bitstream came from and was dropped to
-   */
-  dropBitstream(bundle: Bundle, event: any) {
-    this.zone.runOutsideAngular(() => {
-      if (hasValue(event) && hasValue(event.fromIndex) && hasValue(event.toIndex) && hasValue(event.finish)) {
-        const moveOperation = {
-          op: 'move',
-          from: `/_links/bitstreams/${event.fromIndex}/href`,
-          path: `/_links/bitstreams/${event.toIndex}/href`
-        } as Operation;
-        this.bundleService.patch(bundle, [moveOperation]).pipe(
-          getFirstCompletedRemoteData(),
-        ).subscribe((response: RemoteData<Bundle>) => {
-          this.zone.run(() => {
-            this.itemBitstreamsService.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.setStaleByHrefSubstring(bundle.self).pipe(
-              take(1)
-            ).subscribe(() => event.finish());
-          });
-        });
-      }
-    });
-  }
-
   /**
    * Request the object updates service to discard all current changes to this item
    * Shows a notification to remind the user that they can undo this

src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.service.spec.ts

@@ -16,28 +16,47 @@ import {
   createFailedRemoteDataObject,
   createSuccessfulRemoteDataObject
 } from '../../../shared/remote-data.utils';
+import { BundleDataService } from '../../../core/data/bundle-data.service';
+import { RequestService } from '../../../core/data/request.service';
+import { LiveRegionService } from '../../../shared/live-region/live-region.service';
+import { Bundle } from '../../../core/shared/bundle.model';
+import { of } from 'rxjs';
+import { getLiveRegionServiceStub } from '../../../shared/live-region/live-region.service.stub';
 
 describe('ItemBitstreamsService', () => {
   let service: ItemBitstreamsService;
   let notificationsService: NotificationsService;
   let translateService: TranslateService;
   let objectUpdatesService: ObjectUpdatesService;
   let bitstreamDataService: BitstreamDataService;
+  let bundleDataService: BundleDataService;
   let dsoNameService: DSONameService;
+  let requestService: RequestService;
+  let liveRegionService: LiveRegionService;
 
   beforeEach(() => {
     notificationsService = new NotificationsServiceStub() as any;
     translateService = getMockTranslateService();
     objectUpdatesService = new ObjectUpdatesServiceStub() as any;
     bitstreamDataService = new BitstreamDataServiceStub() as any;
+    bundleDataService = jasmine.createSpyObj('bundleDataService', {
+      patch: createSuccessfulRemoteDataObject$(new Bundle()),
+    });
     dsoNameService = new DSONameServiceMock() as any;
+    requestService = jasmine.createSpyObj('requestService', {
+      setStaleByHrefSubstring: of(true),
+    });
+    liveRegionService = getLiveRegionServiceStub();
 
     service = new ItemBitstreamsService(
       notificationsService,
       translateService,
       objectUpdatesService,
       bitstreamDataService,
+      bundleDataService,
       dsoNameService,
+      requestService,
+      liveRegionService,
     );
   });