Merge pull request #3464 from atmire/item-edit-bitstreams-table-main

Edit Item, Bitstreams tab: Accessibility improvements

Author: tdonohue

src/app/core/data/object-updates/object-updates.service.stub.ts

@@ -0,0 +1,28 @@
+export class ObjectUpdatesServiceStub {
+
+  initialize = jasmine.createSpy('initialize');
+  saveFieldUpdate = jasmine.createSpy('saveFieldUpdate');
+  getObjectEntry = jasmine.createSpy('getObjectEntry');
+  getFieldState = jasmine.createSpy('getFieldState');
+  getFieldUpdates = jasmine.createSpy('getFieldUpdates');
+  getFieldUpdatesExclusive = jasmine.createSpy('getFieldUpdatesExclusive');
+  isValid = jasmine.createSpy('isValid');
+  isValidPage = jasmine.createSpy('isValidPage');
+  saveAddFieldUpdate = jasmine.createSpy('saveAddFieldUpdate');
+  saveRemoveFieldUpdate = jasmine.createSpy('saveRemoveFieldUpdate');
+  saveChangeFieldUpdate = jasmine.createSpy('saveChangeFieldUpdate');
+  isSelectedVirtualMetadata = jasmine.createSpy('isSelectedVirtualMetadata');
+  setSelectedVirtualMetadata = jasmine.createSpy('setSelectedVirtualMetadata');
+  setEditableFieldUpdate = jasmine.createSpy('setEditableFieldUpdate');
+  setValidFieldUpdate = jasmine.createSpy('setValidFieldUpdate');
+  discardFieldUpdates = jasmine.createSpy('discardFieldUpdates');
+  discardAllFieldUpdates = jasmine.createSpy('discardAllFieldUpdates');
+  reinstateFieldUpdates = jasmine.createSpy('reinstateFieldUpdates');
+  removeSingleFieldUpdate = jasmine.createSpy('removeSingleFieldUpdate');
+  getUpdateFields = jasmine.createSpy('getUpdateFields');
+  hasUpdates = jasmine.createSpy('hasUpdates');
+  isReinstatable = jasmine.createSpy('isReinstatable');
+  getLastModified = jasmine.createSpy('getLastModified');
+  createPatch = jasmine.createSpy('getPatch');
+
+}

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

@@ -1,4 +1,8 @@
 <div class="item-bitstreams" *ngVar="(bundles$ | async) as bundles">
+  <div class="mt-2" id="reorder-description">
+    <ds-alert [content]="'item.edit.bitstreams.info-alert'" [type]="AlertType.Info"></ds-alert>
+  </div>
+
   <div class="button-row top d-flex mt-2 space-children-mr">
     <button class="mr-auto btn btn-success"
             [attr.aria-label]="'item.edit.bitstreams.upload-button' | translate"
@@ -27,21 +31,13 @@
     </button>
   </div>
 
-  <div *ngIf="item && bundles?.length > 0" class="container table-bordered mt-4">
-    <div class="row header-row font-weight-bold">
-      <div class="{{columnSizes.columns[0].buildClasses()}} row-element">
-        <ds-item-edit-bitstream-drag-handle></ds-item-edit-bitstream-drag-handle>
-        {{'item.edit.bitstreams.headers.name' | translate}}
-      </div>
-      <div class="{{columnSizes.columns[1].buildClasses()}} row-element">{{'item.edit.bitstreams.headers.description' | translate}}</div>
-      <div class="{{columnSizes.columns[2].buildClasses()}} text-center row-element">{{'item.edit.bitstreams.headers.format' | translate}}</div>
-      <div class="{{columnSizes.columns[3].buildClasses()}} text-center row-element">{{'item.edit.bitstreams.headers.actions' | translate}}</div>
-    </div>
-    <ds-item-edit-bitstream-bundle *ngFor="let bundle of bundles"
+  <div *ngIf="item && bundles?.length > 0" class="mt-4 table-border scrollable-table" [ngClass]="{'disabled-overlay': (isProcessingMoveRequest | async)}">
+    <ds-item-edit-bitstream-bundle *ngFor="let bundle of bundles; first as isFirst"
                                    [bundle]="bundle"
                                    [item]="item"
                                    [columnSizes]="columnSizes"
-                                   (dropObject)="dropBitstream(bundle, $event)">
+                                   [isFirstTable]="isFirst"
+                                   aria-describedby="reorder-description">
     </ds-item-edit-bitstream-bundle>
   </div>
   <div *ngIf="bundles?.length === 0"
@@ -74,3 +70,5 @@
     </div>
   </div>
 </div>
+
+<ds-loading *ngIf="isProcessingMoveRequest | async" class="loading-overlay"></ds-loading>

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

@@ -1,23 +1,4 @@
-.header-row {
-  color: var(--bs-table-dark-color);
-  background-color: var(--bs-table-dark-bg);
-  border-color: var(--bs-table-dark-border-color);
-}
-
-.bundle-row {
-  color: var(--bs-table-head-color);
-  background-color: var(--bs-table-head-bg);
-  border-color: var(--bs-table-border-color);
-}
-
-.row-element {
-  padding: 12px;
-  padding: 0.75em;
-  border-bottom: var(--bs-table-border-width) solid var(--bs-table-border-color);
-}
-
 .drag-handle {
-  visibility: hidden;
   &:hover {
     cursor: move;
   }
@@ -27,10 +8,6 @@
   cursor: move;
 }
 
-:host ::ng-deep .bitstream-row:hover .drag-handle, :host ::ng-deep .bitstream-row-drag-handle:focus .drag-handle {
-  visibility: visible !important;
-}
-
 .cdk-drag-preview {
   margin-left: 0;
   box-sizing: border-box;
@@ -54,3 +31,25 @@
 :host ::ng-deep .larger-tooltip .tooltip-inner {
   max-width: 500px;
 }
+
+.table-border {
+  border: 1px solid #dee2e6;
+}
+
+:host ::ng-deep .pagination {
+  padding-top: 0.5rem;
+}
+
+.scrollable-table {
+  overflow-x: auto;
+}
+
+.disabled-overlay {
+  opacity: 0.6;
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+}

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

@@ -7,6 +7,7 @@ import {
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
   ActivatedRoute,
   Router,
@@ -15,7 +16,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
 
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
-import { RestResponse } from '../../../core/cache/response.models';
 import { BitstreamDataService } from '../../../core/data/bitstream-data.service';
 import { BundleDataService } from '../../../core/data/bundle-data.service';
 import { ItemDataService } from '../../../core/data/item-data.service';
@@ -44,8 +44,12 @@ import { createPaginatedList } from '../../../shared/testing/utils.test';
 import { ObjectValuesPipe } from '../../../shared/utils/object-values-pipe';
 import { VarDirective } from '../../../shared/utils/var.directive';
 import { ItemBitstreamsComponent } from './item-bitstreams.component';
+import { ItemBitstreamsService } from './item-bitstreams.service';
+import {
+  getItemBitstreamsServiceStub,
+  ItemBitstreamsServiceStub,
+} from './item-bitstreams.service.stub';
 import { ItemEditBitstreamBundleComponent } from './item-edit-bitstream-bundle/item-edit-bitstream-bundle.component';
-import { ItemEditBitstreamDragHandleComponent } from './item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component';
 
 let comp: ItemBitstreamsComponent;
 let fixture: ComponentFixture<ItemBitstreamsComponent>;
@@ -97,6 +101,7 @@ let objectCache: ObjectCacheService;
 let requestService: RequestService;
 let searchConfig: SearchConfigurationService;
 let bundleService: BundleDataService;
+let itemBitstreamsService: ItemBitstreamsServiceStub;
 
 describe('ItemBitstreamsComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -165,11 +170,19 @@ describe('ItemBitstreamsComponent', () => {
       url: url,
     });
     bundleService = jasmine.createSpyObj('bundleService', {
-      patch: observableOf(new RestResponse(true, 200, 'OK')),
+      patch: createSuccessfulRemoteDataObject$({}),
     });
 
+    itemBitstreamsService = getItemBitstreamsServiceStub();
+
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), ItemBitstreamsComponent, ObjectValuesPipe, VarDirective],
+      imports: [
+        TranslateModule.forRoot(),
+        ItemBitstreamsComponent,
+        ObjectValuesPipe,
+        VarDirective,
+        BrowserAnimationsModule,
+      ],
       providers: [
         { provide: ItemDataService, useValue: itemService },
         { provide: ObjectUpdatesService, useValue: objectUpdatesService },
@@ -181,6 +194,7 @@ describe('ItemBitstreamsComponent', () => {
         { provide: RequestService, useValue: requestService },
         { provide: SearchConfigurationService, useValue: searchConfig },
         { provide: BundleDataService, useValue: bundleService },
+        { provide: ItemBitstreamsService, useValue: itemBitstreamsService },
         ChangeDetectorRef,
       ], schemas: [
         NO_ERRORS_SCHEMA,
@@ -189,7 +203,6 @@ describe('ItemBitstreamsComponent', () => {
       .overrideComponent(ItemBitstreamsComponent, {
         remove: {
           imports: [ItemEditBitstreamBundleComponent,
-            ItemEditBitstreamDragHandleComponent,
             ThemedLoadingComponent],
         },
       })
@@ -209,28 +222,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();
     });
   });
 
@@ -247,4 +240,114 @@ describe('ItemBitstreamsComponent', () => {
       expect(objectUpdatesService.reinstateFieldUpdates).toHaveBeenCalledWith(bundle.self);
     });
   });
+
+  describe('moveUp', () => {
+    it('should move the selected bitstream up', () => {
+      itemBitstreamsService.hasSelectedBitstream.and.returnValue(true);
+
+      const event = {
+        preventDefault: () => {/* Intentionally empty */},
+      } as KeyboardEvent;
+      comp.moveUp(event);
+
+      expect(itemBitstreamsService.moveSelectedBitstreamUp).toHaveBeenCalled();
+    });
+
+    it('should not do anything if no bitstream is selected', () => {
+      itemBitstreamsService.hasSelectedBitstream.and.returnValue(false);
+
+      const event = {
+        preventDefault: () => {/* Intentionally empty */},
+      } as KeyboardEvent;
+      comp.moveUp(event);
+
+      expect(itemBitstreamsService.moveSelectedBitstreamUp).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('moveDown', () => {
+    it('should move the selected bitstream down', () => {
+      itemBitstreamsService.hasSelectedBitstream.and.returnValue(true);
+
+      const event = {
+        preventDefault: () => {/* Intentionally empty */},
+      } as KeyboardEvent;
+      comp.moveDown(event);
+
+      expect(itemBitstreamsService.moveSelectedBitstreamDown).toHaveBeenCalled();
+    });
+
+    it('should not do anything if no bitstream is selected', () => {
+      itemBitstreamsService.hasSelectedBitstream.and.returnValue(false);
+
+      const event = {
+        preventDefault: () => {/* Intentionally empty */},
+      } as KeyboardEvent;
+      comp.moveDown(event);
+
+      expect(itemBitstreamsService.moveSelectedBitstreamDown).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('cancelSelection', () => {
+    it('should cancel the selection', () => {
+      itemBitstreamsService.hasSelectedBitstream.and.returnValue(true);
+
+      const event = {
+        preventDefault: () => {/* Intentionally empty */},
+      } as KeyboardEvent;
+      comp.cancelSelection(event);
+
+      expect(itemBitstreamsService.cancelSelection).toHaveBeenCalled();
+    });
+
+    it('should not do anything if no bitstream is selected', () => {
+      itemBitstreamsService.hasSelectedBitstream.and.returnValue(false);
+
+      const event = {
+        preventDefault: () => {/* Intentionally empty */},
+      } as KeyboardEvent;
+      comp.cancelSelection(event);
+
+      expect(itemBitstreamsService.cancelSelection).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('clearSelection', () => {
+    it('should clear the selection', () => {
+      itemBitstreamsService.hasSelectedBitstream.and.returnValue(true);
+
+      const event = {
+        target: document.createElement('BODY'),
+        preventDefault: () => {/* Intentionally empty */},
+      } as unknown as KeyboardEvent;
+      comp.clearSelection(event);
+
+      expect(itemBitstreamsService.clearSelection).toHaveBeenCalled();
+    });
+
+    it('should not do anything if no bitstream is selected', () => {
+      itemBitstreamsService.hasSelectedBitstream.and.returnValue(false);
+
+      const event = {
+        target: document.createElement('BODY'),
+        preventDefault: () => {/* Intentionally empty */},
+      } as unknown as KeyboardEvent;
+      comp.clearSelection(event);
+
+      expect(itemBitstreamsService.clearSelection).not.toHaveBeenCalled();
+    });
+
+    it('should not do anything if the event target is not \'BODY\'', () => {
+      itemBitstreamsService.hasSelectedBitstream.and.returnValue(true);
+
+      const event = {
+        target: document.createElement('NOT-BODY'),
+        preventDefault: () => {/* Intentionally empty */},
+      } as unknown as KeyboardEvent;
+      comp.clearSelection(event);
+
+      expect(itemBitstreamsService.clearSelection).not.toHaveBeenCalled();
+    });
+  });
 });