Skip to content

Commit

Permalink
Merge pull request #3465 from atmire/item-edit-bitstreams-table-8_x
Browse files Browse the repository at this point in the history 
[Port dspace-8_x] Edit Item, Bitstreams tab: Accessibility improvements
  • Loading branch information
@tdonohue
tdonohue authored Dec 18, 2024
2 parents df79a99 + d5221fb commit e842c06
Show file tree
Hide file tree
Showing 27 changed files with 2,741 additions and 1,346 deletions.
28 changes: 28 additions & 0 deletions src/app/core/data/object-updates/object-updates.service.stub.ts
View file
Original file line number Diff line number Diff line change
@@ -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');

}
22 changes: 10 additions & 12 deletions src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -74,3 +70,5 @@
</div>
</div>
</div>

<ds-loading *ngIf="isProcessingMoveRequest | async" class="loading-overlay"></ds-loading>
45 changes: 22 additions & 23 deletions src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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;
Expand All @@ -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%;
}
157 changes: 130 additions & 27 deletions src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
TestBed,
waitForAsync,
} from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
ActivatedRoute,
Router,
Expand All @@ -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';
Expand Down Expand Up @@ -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>;
Expand Down Expand Up @@ -97,6 +101,7 @@ let objectCache: ObjectCacheService;
let requestService: RequestService;
let searchConfig: SearchConfigurationService;
let bundleService: BundleDataService;
let itemBitstreamsService: ItemBitstreamsServiceStub;

describe('ItemBitstreamsComponent', () => {
beforeEach(waitForAsync(() => {
Expand Down Expand Up @@ -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 },
Expand All @@ -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,
Expand All @@ -189,7 +203,6 @@ describe('ItemBitstreamsComponent', () => {
.overrideComponent(ItemBitstreamsComponent, {
remove: {
imports: [ItemEditBitstreamBundleComponent,
ItemEditBitstreamDragHandleComponent,
ThemedLoadingComponent],
},
})
Expand All @@ -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();
});
});

Expand All @@ -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();
});
});
});
Loading

0 comments on commit e842c06

Please sign in to comment.