From 9e050722902dfefd81423e261ba7ea5e255c917a Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Tue, 16 Jun 2020 14:26:59 +0200 Subject: [PATCH 01/10] [CST-3090] done --- .../my-dspace-new-submission.component.html | 4 +- .../my-dspace-new-submission.component.ts | 15 +- src/app/core/data/collection-data.service.ts | 16 +- .../collection-dropdown.component.html | 43 +++ .../collection-dropdown.component.scss | 15 + .../collection-dropdown.component.spec.ts | 200 +++++++++++++ .../collection-dropdown.component.ts | 229 +++++++++++++++ ...create-item-parent-selector.component.html | 11 + .../create-item-parent-selector.component.ts | 3 +- src/app/shared/shared.module.ts | 7 +- .../submission-form-collection.component.html | 28 +- ...bmission-form-collection.component.spec.ts | 274 +----------------- .../submission-form-collection.component.ts | 104 +------ 13 files changed, 550 insertions(+), 399 deletions(-) create mode 100644 src/app/shared/collection-dropdown/collection-dropdown.component.html create mode 100644 src/app/shared/collection-dropdown/collection-dropdown.component.scss create mode 100644 src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts create mode 100644 src/app/shared/collection-dropdown/collection-dropdown.component.ts create mode 100644 src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html diff --git a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html index 911ba26b31..4809f206ae 100644 --- a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html +++ b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html @@ -7,9 +7,9 @@
- +
diff --git a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts index 81d66bb5f7..8d20a5736a 100644 --- a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts +++ b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts @@ -15,6 +15,9 @@ import { HALEndpointService } from '../../core/shared/hal-endpoint.service'; import { NotificationType } from '../../shared/notifications/models/notification-type'; import { hasValue } from '../../shared/empty.util'; import { SearchResult } from '../../shared/search/search-result.model'; +import { Router } from '@angular/router'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { CreateItemParentSelectorComponent } from 'src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component'; /** * This component represents the whole mydspace page header @@ -55,7 +58,9 @@ export class MyDSpaceNewSubmissionComponent implements OnDestroy, OnInit { private halService: HALEndpointService, private notificationsService: NotificationsService, private store: Store, - private translate: TranslateService) { + private translate: TranslateService, + private router: Router, + private modalService: NgbModal) { } /** @@ -105,6 +110,14 @@ export class MyDSpaceNewSubmissionComponent implements OnDestroy, OnInit { this.notificationsService.error(null, this.translate.get('mydspace.upload.upload-failed')); } + /** + * Method called on clicking the button "New Submition", It opens a dialog for + * select a collection. + */ + openDialog() { + this.modalService.open(CreateItemParentSelectorComponent); + } + /** * Unsubscribe from the subscription */ diff --git a/src/app/core/data/collection-data.service.ts b/src/app/core/data/collection-data.service.ts index 0639a7d8ca..d28421356a 100644 --- a/src/app/core/data/collection-data.service.ts +++ b/src/app/core/data/collection-data.service.ts @@ -72,14 +72,18 @@ export class CollectionDataService extends ComColDataService { /** * Get all collections the user is authorized to submit to * + * @param query limit the returned collection to those with metadata values matching the query terms. * @param options The [[FindListOptions]] object * @return Observable>> * collection list */ - getAuthorizedCollection(options: FindListOptions = {}): Observable>> { + getAuthorizedCollection(query: string, options: FindListOptions = {}, ...linksToFollow: Array>): Observable>> { const searchHref = 'findAuthorized'; + options = Object.assign({}, options, { + searchParams: [new RequestParam('query', query)] + }); - return this.searchBy(searchHref, options).pipe( + return this.searchBy(searchHref, options, ...linksToFollow).pipe( filter((collections: RemoteData>) => !collections.isResponsePending)); } @@ -87,14 +91,18 @@ export class CollectionDataService extends ComColDataService { * Get all collections the user is authorized to submit to, by community * * @param communityId The community id + * @param query limit the returned collection to those with metadata values matching the query terms. * @param options The [[FindListOptions]] object * @return Observable>> * collection list */ - getAuthorizedCollectionByCommunity(communityId: string, options: FindListOptions = {}): Observable>> { + getAuthorizedCollectionByCommunity(communityId: string, query: string, options: FindListOptions = {}): Observable>> { const searchHref = 'findAuthorizedByCommunity'; options = Object.assign({}, options, { - searchParams: [new RequestParam('uuid', communityId)] + searchParams: [ + new RequestParam('uuid', communityId), + new RequestParam('query', query) + ] }); return this.searchBy(searchHref, options).pipe( diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html new file mode 100644 index 0000000000..0674084a43 --- /dev/null +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html @@ -0,0 +1,43 @@ +
+ +
+
+
+
+ + + +
+
\ No newline at end of file diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.scss b/src/app/shared/collection-dropdown/collection-dropdown.component.scss new file mode 100644 index 0000000000..deecc39510 --- /dev/null +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.scss @@ -0,0 +1,15 @@ +.scrollable-menu { + height: auto; + max-height: $dropdown-menu-max-height; + overflow-x: hidden; +} + +.collection-item { + border-bottom: $dropdown-border-width solid $dropdown-border-color; +} + +#collectionControlsDropdownMenu { + outline: 0; + left: 0 !important; + box-shadow: $btn-focus-box-shadow; +} diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts new file mode 100644 index 0000000000..33c848f9c4 --- /dev/null +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts @@ -0,0 +1,200 @@ +import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; + +import { CollectionDropdownComponent } from './collection-dropdown.component'; +import { FollowLinkConfig } from '../utils/follow-link-config.model'; +import { Observable, of } from 'rxjs'; +import { RemoteData } from 'src/app/core/data/remote-data'; +import { PaginatedList } from 'src/app/core/data/paginated-list'; +import { cold, getTestScheduler, hot } from 'jasmine-marbles'; +import { createSuccessfulRemoteDataObject } from '../remote-data.utils'; +import { PageInfo } from 'src/app/core/shared/page-info.model'; +import { Collection } from '../../core/shared/collection.model'; +import { NO_ERRORS_SCHEMA, ChangeDetectorRef, ElementRef } from '@angular/core'; +import { CollectionDataService } from 'src/app/core/data/collection-data.service'; +import { FindListOptions } from 'src/app/core/data/request.models'; +import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; +import { TranslateLoaderMock } from '../mocks/translate-loader.mock'; +import { TestScheduler } from 'rxjs/testing'; +import { By } from '@angular/platform-browser'; +import { Community } from 'src/app/core/shared/community.model'; + +const community: Community = Object.assign(new Community(), { + id: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88', + uuid: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88', + name: 'Community 1' +}); + +const collections: Collection[] = [ + Object.assign(new Collection(), { + id: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88', + name: 'Collection 1', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 1' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }), + Object.assign(new Collection(), { + id: '59ee713b-ee53-4220-8c3f-9860dc84fe33', + name: 'Collection 2', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 2' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }), + Object.assign(new Collection(), { + id: 'e9dbf393-7127-415f-8919-55be34a6e9ed', + name: 'Collection 3', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 3' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }), + Object.assign(new Collection(), { + id: '59da2ff0-9bf4-45bf-88be-e35abd33f304', + name: 'Collection 4', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 4' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }), + Object.assign(new Collection(), { + id: 'a5159760-f362-4659-9e81-e3253ad91ede', + name: 'Collection 5', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 5' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }) +]; + +const listElementMock = { + communities: [ + { + id: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88', + name: 'Community 1' + } + ], + collection: { + id: 'e9dbf393-7127-415f-8919-55be34a6e9ed', + uuid: 'e9dbf393-7127-415f-8919-55be34a6e9ed', + name: 'Collection 3' + } + }; + +// tslint:disable-next-line: max-classes-per-file +class CollectionDataServiceMock { + getAuthorizedCollection(query: string, options: FindListOptions = {}, ...linksToFollow: Array>): Observable>> { + return of( + createSuccessfulRemoteDataObject( + new PaginatedList(new PageInfo(), collections) + ) + ); + } +} + +describe('CollectionDropdownComponent', () => { + let component: CollectionDropdownComponent; + let fixture: ComponentFixture; + let scheduler: TestScheduler; + const searchedCollection = 'TEXT'; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: TranslateLoaderMock + } + }) + ], + declarations: [ CollectionDropdownComponent ], + providers: [ + {provide: CollectionDataService, useClass: CollectionDataServiceMock}, + {provide: ChangeDetectorRef, useValue: {}}, + {provide: ElementRef, userValue: {}} + ], + schemas: [NO_ERRORS_SCHEMA] + }) + .compileComponents(); + })); + + beforeEach(() => { + scheduler = getTestScheduler(); + fixture = TestBed.createComponent(CollectionDropdownComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should populate collections list with five items', () => { + const elements = fixture.debugElement.queryAll(By.css('.collection-item')); + expect(elements.length).toEqual(5); + }); + + it('should trigger onSelect method when select a new collection from list', fakeAsync(() => { + spyOn(component, 'onSelect'); + const collectionItem = fixture.debugElement.query(By.css('.collection-item:nth-child(2)')); + collectionItem.triggerEventHandler('click', null); + fixture.detectChanges(); + tick(); + fixture.whenStable().then(() => { + expect(component.onSelect).toHaveBeenCalled(); + }); + })); + + it('should emit collectionChange event when selecting a new collection', () => { + spyOn(component.selectionChange, 'emit').and.callThrough(); + component.ngOnInit(); + component.onSelect(listElementMock as any); + fixture.detectChanges(); + + expect(component.selectionChange.emit).toHaveBeenCalledWith(listElementMock as any); + }); + + it('should reset collections list after reset of searchField', fakeAsync(() => { + spyOn(component, 'reset').and.callThrough(); + spyOn(component.searchField, 'setValue').and.callThrough(); + spyOn(component, 'resetPagination').and.callThrough(); + spyOn(component, 'populateCollectionList').and.callThrough(); + component.reset(); + const input = fixture.debugElement.query(By.css('input.form-control')); + const el = input.nativeElement; + el.value = searchedCollection; + el.dispatchEvent(new Event('input')); + fixture.detectChanges(); + tick(250); + + fixture.whenStable().then(() => { + expect(component.reset).toHaveBeenCalled(); + expect(component.searchField.setValue).toHaveBeenCalledWith(''); + expect(component.resetPagination).toHaveBeenCalled(); + expect(component.currentQuery).toEqual(''); + expect(component.populateCollectionList).toHaveBeenCalledWith(component.currentQuery, component.currentPage); + }); + })); +}); diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts new file mode 100644 index 0000000000..e9e0445ca6 --- /dev/null +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -0,0 +1,229 @@ +import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { Observable, of, Subscription } from 'rxjs'; +import { hasValue, isNotEmpty } from '../empty.util'; +import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { RemoteData } from 'src/app/core/data/remote-data'; +import { FindListOptions } from 'src/app/core/data/request.models'; +import { PaginatedList } from 'src/app/core/data/paginated-list'; +import { Community } from 'src/app/core/shared/community.model'; +import { CollectionDataService } from 'src/app/core/data/collection-data.service'; +import { Collection } from '../../core/shared/collection.model'; +import { followLink } from '../utils/follow-link-config.model'; + +/** + * An interface to represent a collection entry + */ +interface CollectionListEntryItem { + id: string; + uuid: string; + name: string; +} + +/** + * An interface to represent an entry in the collection list + */ +interface CollectionListEntry { + communities: CollectionListEntryItem[], + collection: CollectionListEntryItem +} + +@Component({ + selector: 'ds-collection-dropdown', + templateUrl: './collection-dropdown.component.html', + styleUrls: ['./collection-dropdown.component.scss'] +}) +export class CollectionDropdownComponent implements OnInit, OnDestroy { + + /** + * The search form control + * @type {FormControl} + */ + public searchField: FormControl = new FormControl(); + + /** + * The collection list obtained from a search + * @type {Observable} + */ + public searchListCollection$: Observable; + + /** + * A boolean representing if dropdown list is scrollable to the bottom + * @type {boolean} + */ + private scrollableBottom = false; + + /** + * A boolean representing if dropdown list is scrollable to the top + * @type {boolean} + */ + private scrollableTop = false; + + /** + * Array to track all subscriptions and unsubscribe them onDestroy + * @type {Array} + */ + private subs: Subscription[] = []; + + /** + * The list of collection to render + */ + searchListCollection: CollectionListEntry[] = []; + + @Output() selectionChange = new EventEmitter(); + /** + * A boolean representing if the loader is visible or not + */ + isLoadingList: boolean; + + /** + * A numeric representig current page + */ + currentPage: number; + + /** + * A boolean representing if exist another page to render + */ + hasNextPage: boolean; + + /** + * Current seach query used to filter collection list + */ + currentQuery: string; + + constructor( + private changeDetectorRef: ChangeDetectorRef, + private collectionDataService: CollectionDataService, + private el: ElementRef + ) { } + + /** + * Method called on mousewheel event, it prevent the page scroll + * when arriving at the top/bottom of dropdown menu + * + * @param event + * mousewheel event + */ + @HostListener('mousewheel', ['$event']) onMousewheel(event) { + if (event.wheelDelta > 0 && this.scrollableTop) { + event.preventDefault(); + } + if (event.wheelDelta < 0 && this.scrollableBottom) { + event.preventDefault(); + } + } + + /** + * Initialize collection list + */ + ngOnInit() { + this.subs.push(this.searchField.valueChanges.pipe( + debounceTime(200), + distinctUntilChanged(), + startWith('') + ).subscribe( + (next) => { + if (hasValue(next)) { + this.resetPagination(); + this.currentQuery = next; + this.populateCollectionList(this.currentQuery, this.currentPage); + } + } + )); + // Workaround for prevent the scroll of main page when this component is placed in a dialog + setTimeout(() => this.el.nativeElement.querySelector('input').focus(), 0); + } + + /** + * Check if dropdown scrollbar is at the top or bottom of the dropdown list + * + * @param event + */ + onScroll(event) { + this.scrollableBottom = (event.target.scrollTop + event.target.clientHeight === event.target.scrollHeight); + this.scrollableTop = (event.target.scrollTop === 0); + } + + /** + * Method used from infitity scroll for retrive more data on scroll down + */ + onScrollDown() { + if ( this.hasNextPage ) { + this.populateCollectionList(this.currentQuery, ++this.currentPage); + } + } + + /** + * Emit a [selectionChange] event when a new collection is selected from list + * + * @param event + * the selected [CollectionListEntry] + */ + onSelect(event: CollectionListEntry) { + this.selectionChange.emit(event); + } + + /** + * Method called for populate the collection list + * @param query text for filter the collection list + * @param page page number + */ + populateCollectionList(query?: string, page?: number) { + this.isLoadingList = true; + // Set the pagination info + const findOptions: FindListOptions = { + elementsPerPage: 10, + currentPage: page + }; + this.searchListCollection$ = this.collectionDataService + .getAuthorizedCollection(query, findOptions, followLink('parentCommunity')) + .pipe( + find((collections: RemoteData>) => !collections.isResponsePending && collections.hasSucceeded), + mergeMap((collections: RemoteData>) => { + if ( (this.searchListCollection.length + findOptions.elementsPerPage) >= collections.payload.totalElements ) { + this.hasNextPage = false; + } + return collections.payload.page; + }), + filter((collectionData: Collection) => isNotEmpty(collectionData)), + mergeMap((collection: Collection) => collection.parentCommunity.pipe( + find((communityResponse: RemoteData) => !communityResponse.isResponsePending && communityResponse.hasSucceeded), + mergeMap((communityResponse: RemoteData) => of(communityResponse.payload)), + map((community: Community) => ({ + communities: [{ id: community.id, name: community.name }], + collection: { id: collection.id, uuid: collection.id, name: collection.name } + }) + ))), + reduce((acc: any, value: any) => [...acc, ...value], []), + startWith([]) + ); + this.subs.push(this.searchListCollection$.subscribe( + (next) => { this.searchListCollection.push(...next); }, undefined, + () => { this.isLoadingList = false; this.changeDetectorRef.detectChanges(); } + )); + } + + /** + * Unsubscribe from all subscriptions + */ + ngOnDestroy(): void { + this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe()); + } + + /** + * Reset search form control + */ + reset() { + this.searchField.setValue(''); + } + + /** + * Reset pagination values + */ + resetPagination() { + this.currentPage = 1; + this.currentQuery = ''; + this.hasNextPage = true; + this.searchListCollection = []; + } +} diff --git a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html new file mode 100644 index 0000000000..ef8865ad87 --- /dev/null +++ b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html @@ -0,0 +1,11 @@ +
+
{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}} + +
+
+ + +
+
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.ts b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.ts index 02a0bd79cd..45d15ae306 100644 --- a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.ts +++ b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.ts @@ -13,7 +13,8 @@ import { DSOSelectorModalWrapperComponent, SelectorActionType } from '../dso-sel @Component({ selector: 'ds-create-item-parent-selector', // styleUrls: ['./create-item-parent-selector.component.scss'], - templateUrl: '../dso-selector-modal-wrapper.component.html', + // templateUrl: '../dso-selector-modal-wrapper.component.html', + templateUrl: './create-item-parent-selector.component.html' }) export class CreateItemParentSelectorComponent extends DSOSelectorModalWrapperComponent implements OnInit { objectType = DSpaceObjectType.ITEM; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 67d7db5c5d..8ef3f91257 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -202,6 +202,7 @@ import { ResourcePolicyTargetResolver } from './resource-policies/resolvers/reso import { ResourcePolicyResolver } from './resource-policies/resolvers/resource-policy.resolver'; import { EpersonSearchBoxComponent } from './resource-policies/form/eperson-group-list/eperson-search-box/eperson-search-box.component'; import { GroupSearchBoxComponent } from './resource-policies/form/eperson-group-list/group-search-box/group-search-box.component'; +import { CollectionDropdownComponent } from './collection-dropdown/collection-dropdown.component'; const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -386,7 +387,8 @@ const COMPONENTS = [ ResourcePolicyFormComponent, EpersonGroupListComponent, EpersonSearchBoxComponent, - GroupSearchBoxComponent + GroupSearchBoxComponent, + CollectionDropdownComponent ]; const ENTRY_COMPONENTS = [ @@ -504,8 +506,7 @@ const DIRECTIVES = [ ...COMPONENTS, ...DIRECTIVES, ...ENTRY_COMPONENTS, - ...SHARED_ITEM_PAGE_COMPONENTS, - + ...SHARED_ITEM_PAGE_COMPONENTS ], providers: [ ...PROVIDERS diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html index 6f4a8a864c..ad53be200c 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.html +++ b/src/app/submission/form/collection/submission-form-collection.component.html @@ -20,31 +20,9 @@ class="dropdown-menu" id="collectionControlsDropdownMenu" aria-labelledby="collectionControlsMenuButton"> -
- -
-
-
- - -
+ + diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts index 105d94b966..5baa1013ab 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts @@ -1,17 +1,14 @@ -import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core'; +import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core'; import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { of as observableOf } from 'rxjs'; -import { filter } from 'rxjs/operators'; import { TranslateModule } from '@ngx-translate/core'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { Store } from '@ngrx/store'; -import { cold } from 'jasmine-marbles'; import { SubmissionServiceStub } from '../../../shared/testing/submission-service.stub'; -import { mockSubmissionId, mockSubmissionRestResponse } from '../../../shared/mocks/submission.mock'; +import { mockSubmissionId } from '../../../shared/mocks/submission.mock'; import { SubmissionService } from '../../submission.service'; import { SubmissionFormCollectionComponent } from './submission-form-collection.component'; import { CommunityDataService } from '../../../core/data/community-data.service'; @@ -19,173 +16,9 @@ import { SubmissionJsonPatchOperationsService } from '../../../core/submission/s import { SubmissionJsonPatchOperationsServiceStub } from '../../../shared/testing/submission-json-patch-operations-service.stub'; import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder'; import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner'; -import { RemoteData } from '../../../core/data/remote-data'; -import { Community } from '../../../core/shared/community.model'; -import { PaginatedList } from '../../../core/data/paginated-list'; -import { PageInfo } from '../../../core/shared/page-info.model'; -import { Collection } from '../../../core/shared/collection.model'; import { createTestComponent } from '../../../shared/testing/utils.test'; import { CollectionDataService } from '../../../core/data/collection-data.service'; -const subcommunities = [Object.assign(new Community(), { - name: 'SubCommunity 1', - id: '123456789-1', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'SubCommunity 1' - }] -}), - Object.assign(new Community(), { - name: 'SubCommunity 1', - id: '123456789s-1', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'SubCommunity 1' - }] - }) -]; - -const mockCommunity1Collection1 = Object.assign(new Collection(), { - name: 'Community 1-Collection 1', - id: '1234567890-1', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 1-Collection 1' - }] -}); - -const mockCommunity1Collection2 = Object.assign(new Collection(), { - name: 'Community 1-Collection 2', - id: '1234567890-2', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 1-Collection 2' - }] -}); - -const mockCommunity2Collection1 = Object.assign(new Collection(), { - name: 'Community 2-Collection 1', - id: '1234567890-3', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 2-Collection 1' - }] -}); - -const mockCommunity2Collection2 = Object.assign(new Collection(), { - name: 'Community 2-Collection 2', - id: '1234567890-4', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 2-Collection 2' - }] -}); - -const mockCommunity = Object.assign(new Community(), { - name: 'Community 1', - id: '123456789-1', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 1' - }], - collections: observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity1Collection1, mockCommunity1Collection2]))), - subcommunities: observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), subcommunities))), -}); - -const mockCommunity2 = Object.assign(new Community(), { - name: 'Community 2', - id: '123456789-2', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 2' - }], - collections: observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity2Collection1, mockCommunity2Collection2]))), - subcommunities: observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), []))), -}); - -const mockCommunity1Collection1Rd = observableOf(new RemoteData(true, true, true, - undefined, mockCommunity1Collection1)); - -const mockCommunityList = observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity, mockCommunity2]))); - -const mockCommunityCollectionList = observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity1Collection1, mockCommunity1Collection2]))); - -const mockCommunity2CollectionList = observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity2Collection1, mockCommunity2Collection2]))); - -const mockCollectionList = [ - { - communities: [ - { - id: '123456789-1', - name: 'Community 1' - } - ], - collection: { - id: '1234567890-1', - name: 'Community 1-Collection 1' - } - }, - { - communities: [ - { - id: '123456789-1', - name: 'Community 1' - } - ], - collection: { - id: '1234567890-2', - name: 'Community 1-Collection 2' - } - }, - { - communities: [ - { - id: '123456789-2', - name: 'Community 2' - } - ], - collection: { - id: '1234567890-3', - name: 'Community 2-Collection 1' - } - }, - { - communities: [ - { - id: '123456789-2', - name: 'Community 2' - } - ], - collection: { - id: '1234567890-4', - name: 'Community 2-Collection 2' - } - } -]; - describe('SubmissionFormCollectionComponent Component', () => { let comp: SubmissionFormCollectionComponent; @@ -197,8 +30,6 @@ describe('SubmissionFormCollectionComponent Component', () => { const submissionId = mockSubmissionId; const collectionId = '1234567890-1'; const definition = 'traditional'; - const submissionRestResponse = mockSubmissionRestResponse; - const searchedCollection = 'Community 2-Collection 2'; const communityDataService: any = jasmine.createSpyObj('communityDataService', { findAll: jasmine.createSpy('findAll') @@ -299,72 +130,11 @@ describe('SubmissionFormCollectionComponent Component', () => { expect(compAsAny.pathCombiner).toEqual(expected); }); - it('should init collection list properly', () => { - communityDataService.findAll.and.returnValue(mockCommunityList); - collectionDataService.findById.and.returnValue(mockCommunity1Collection1Rd); - collectionDataService.getAuthorizedCollectionByCommunity.and.returnValues(mockCommunityCollectionList, mockCommunity2CollectionList); - - comp.ngOnChanges({ - currentCollectionId: new SimpleChange(null, collectionId, true) - }); - - expect(comp.searchListCollection$).toBeObservable(cold('(ab)', { - a: [], - b: mockCollectionList - })); - - expect(comp.selectedCollectionName$).toBeObservable(cold('(a|)', { - a: 'Community 1-Collection 1' - })); - }); - - it('should show only the searched collection', () => { - comp.searchListCollection$ = observableOf(mockCollectionList); - fixture.detectChanges(); - - comp.searchField.setValue(searchedCollection); - fixture.detectChanges(); - - comp.searchListCollection$.pipe( - filter(() => !comp.disabled$.getValue()) - ).subscribe((list) => { - expect(list).toEqual([mockCollectionList[3]]); - }); - - }); - - it('should emit collectionChange event when selecting a new collection', () => { - spyOn(comp.searchField, 'reset').and.callThrough(); - spyOn(comp.collectionChange, 'emit').and.callThrough(); - jsonPatchOpServiceStub.jsonPatchByResourceID.and.returnValue(observableOf(submissionRestResponse)); - comp.ngOnInit(); - comp.onSelect(mockCollectionList[1]); - fixture.detectChanges(); - - expect(comp.searchField.reset).toHaveBeenCalled(); - expect(comp.collectionChange.emit).toHaveBeenCalledWith(submissionRestResponse[0] as any); - expect(submissionServiceStub.changeSubmissionCollection).toHaveBeenCalled(); - expect(comp.selectedCollectionId).toBe(mockCollectionList[1].collection.id); - expect(comp.selectedCollectionName$).toBeObservable(cold('(a|)', { - a: mockCollectionList[1].collection.name - })); - - }); - - it('should reset searchField when dropdown menu has been closed', () => { - spyOn(comp.searchField, 'reset').and.callThrough(); - comp.toggled(false); - - expect(comp.searchField.reset).toHaveBeenCalled(); - }); - describe('', () => { let dropdowBtn: DebugElement; let dropdownMenu: DebugElement; beforeEach(() => { - - comp.searchListCollection$ = observableOf(mockCollectionList); fixture.detectChanges(); dropdowBtn = fixture.debugElement.query(By.css('#collectionControlsMenuButton')); dropdownMenu = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu')); @@ -387,46 +157,6 @@ describe('SubmissionFormCollectionComponent Component', () => { fixture.whenStable().then(() => { expect(comp.onClose).toHaveBeenCalled(); expect(dropdownMenu.nativeElement.classList).toContain('show'); - expect(dropdownMenu.queryAll(By.css('.collection-item')).length).toBe(4); - }); - })); - - it('should trigger onSelect method when select a new collection from dropdown menu', fakeAsync(() => { - - spyOn(comp, 'onSelect'); - dropdowBtn.triggerEventHandler('click', null); - tick(); - fixture.detectChanges(); - - const secondLink: DebugElement = dropdownMenu.query(By.css('.collection-item:nth-child(2)')); - secondLink.triggerEventHandler('click', null); - tick(); - fixture.detectChanges(); - - fixture.whenStable().then(() => { - - expect(comp.onSelect).toHaveBeenCalled(); - }); - })); - - it('should update searchField on input type', fakeAsync(() => { - - dropdowBtn.triggerEventHandler('click', null); - tick(); - fixture.detectChanges(); - - fixture.whenStable().then(() => { - const input = fixture.debugElement.query(By.css('input.form-control')); - const el = input.nativeElement; - - expect(el.value).toBe(''); - - el.value = searchedCollection; - el.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - expect(fixture.componentInstance.searchField.value).toEqual(searchedCollection); }); })); diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts index f84764d6a4..691d93aed1 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.ts @@ -7,52 +7,27 @@ import { OnChanges, OnInit, Output, - SimpleChanges + SimpleChanges, + ViewChild } from '@angular/core'; -import { FormControl } from '@angular/forms'; -import { BehaviorSubject, combineLatest, Observable, of as observableOf, Subscription } from 'rxjs'; +import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs'; import { - debounceTime, - distinctUntilChanged, - filter, find, - flatMap, - map, - mergeMap, - reduce, - startWith + map } from 'rxjs/operators'; import { Collection } from '../../../core/shared/collection.model'; import { CommunityDataService } from '../../../core/data/community-data.service'; -import { Community } from '../../../core/shared/community.model'; -import { hasValue, isEmpty, isNotEmpty } from '../../../shared/empty.util'; +import { hasValue, isNotEmpty } from '../../../shared/empty.util'; import { RemoteData } from '../../../core/data/remote-data'; import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner'; import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder'; -import { PaginatedList } from '../../../core/data/paginated-list'; import { SubmissionService } from '../../submission.service'; import { SubmissionObject } from '../../../core/submission/models/submission-object.model'; import { SubmissionJsonPatchOperationsService } from '../../../core/submission/submission-json-patch-operations.service'; import { CollectionDataService } from '../../../core/data/collection-data.service'; -import { FindListOptions } from '../../../core/data/request.models'; - -/** - * An interface to represent a collection entry - */ -interface CollectionListEntryItem { - id: string; - name: string; -} - -/** - * An interface to represent an entry in the collection list - */ -interface CollectionListEntry { - communities: CollectionListEntryItem[], - collection: CollectionListEntryItem -} +import { CollectionDropdownComponent } from 'src/app/shared/collection-dropdown/collection-dropdown.component'; /** * This component allows to show the current collection the submission belonging to and to change it. @@ -100,18 +75,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ public processingChange$ = new BehaviorSubject(false); - /** - * The search form control - * @type {FormControl} - */ - public searchField: FormControl = new FormControl(); - - /** - * The collection list obtained from a search - * @type {Observable} - */ - public searchListCollection$: Observable; - /** * The selected collection id * @type {string} @@ -148,6 +111,11 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ private subs: Subscription[] = []; + /** + * The html child that contains the collections list + */ + @ViewChild(CollectionDropdownComponent, {static: false}) collectionDropdown: CollectionDropdownComponent; + /** * Initialize instance variables * @@ -204,51 +172,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { find((collectionRD: RemoteData) => isNotEmpty(collectionRD.payload)), map((collectionRD: RemoteData) => collectionRD.payload.name) ); - - const findOptions: FindListOptions = { - elementsPerPage: 1000 - }; - - // Retrieve collection list only when is the first change - if (changes.currentCollectionId.isFirstChange()) { - // @TODO replace with search/top browse endpoint - // @TODO implement community/subcommunity hierarchy - const communities$ = this.communityDataService.findAll(findOptions).pipe( - find((communities: RemoteData>) => isNotEmpty(communities.payload)), - mergeMap((communities: RemoteData>) => communities.payload.page)); - - const listCollection$ = communities$.pipe( - flatMap((communityData: Community) => { - return this.collectionDataService.getAuthorizedCollectionByCommunity(communityData.uuid, findOptions).pipe( - find((collections: RemoteData>) => !collections.isResponsePending && collections.hasSucceeded), - mergeMap((collections: RemoteData>) => collections.payload.page), - filter((collectionData: Collection) => isNotEmpty(collectionData)), - map((collectionData: Collection) => ({ - communities: [{ id: communityData.id, name: communityData.name }], - collection: { id: collectionData.id, name: collectionData.name } - })) - ); - }), - reduce((acc: any, value: any) => [...acc, ...value], []), - startWith([]) - ); - - const searchTerm$ = this.searchField.valueChanges.pipe( - debounceTime(200), - distinctUntilChanged(), - startWith('') - ); - - this.searchListCollection$ = combineLatest(searchTerm$, listCollection$).pipe( - map(([searchTerm, listCollection]) => { - this.disabled$.next(isEmpty(listCollection)); - if (isEmpty(searchTerm)) { - return listCollection; - } else { - return listCollection.filter((v) => v.collection.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1).slice(0, 5); - } - })); - } } } @@ -273,7 +196,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { * the selected [CollectionListEntryItem] */ onSelect(event) { - this.searchField.reset(); this.processingChange$.next(true); this.operationsBuilder.replace(this.pathCombiner.getPath(), event.collection.id, true); this.subs.push(this.operationsService.jsonPatchByResourceID( @@ -296,7 +218,7 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { * Reset search form control on dropdown menu close */ onClose() { - this.searchField.reset(); + this.collectionDropdown.reset(); } /** @@ -307,7 +229,7 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ toggled(isOpen: boolean) { if (!isOpen) { - this.searchField.reset(); + this.collectionDropdown.reset(); } } } From 5f0f665501825a7f873fb2af40b575fcb3101f1d Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Tue, 16 Jun 2020 15:51:56 +0200 Subject: [PATCH 02/10] [CTS-3090] - fix --- .../collection-dropdown/collection-dropdown.component.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index e9e0445ca6..cf69fc31a6 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -10,7 +10,7 @@ import { Community } from 'src/app/core/shared/community.model'; import { CollectionDataService } from 'src/app/core/data/collection-data.service'; import { Collection } from '../../core/shared/collection.model'; import { followLink } from '../utils/follow-link-config.model'; - +import { getFirstSucceededRemoteDataPayload, getAllSucceededRemoteData, getSucceededRemoteWithNotEmptyData } from '../../core/shared/operators'; /** * An interface to represent a collection entry */ @@ -178,17 +178,15 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { this.searchListCollection$ = this.collectionDataService .getAuthorizedCollection(query, findOptions, followLink('parentCommunity')) .pipe( - find((collections: RemoteData>) => !collections.isResponsePending && collections.hasSucceeded), + getSucceededRemoteWithNotEmptyData(), mergeMap((collections: RemoteData>) => { if ( (this.searchListCollection.length + findOptions.elementsPerPage) >= collections.payload.totalElements ) { this.hasNextPage = false; } return collections.payload.page; }), - filter((collectionData: Collection) => isNotEmpty(collectionData)), mergeMap((collection: Collection) => collection.parentCommunity.pipe( - find((communityResponse: RemoteData) => !communityResponse.isResponsePending && communityResponse.hasSucceeded), - mergeMap((communityResponse: RemoteData) => of(communityResponse.payload)), + getFirstSucceededRemoteDataPayload(), map((community: Community) => ({ communities: [{ id: community.id, name: community.name }], collection: { id: collection.id, uuid: collection.id, name: collection.name } From efc476ab312eb45924f84b5cc11f0b9ddf40a92d Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Tue, 16 Jun 2020 17:46:24 +0200 Subject: [PATCH 03/10] remove unused disabled$ variable --- .../collection/submission-form-collection.component.html | 2 +- .../form/collection/submission-form-collection.component.ts | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html index ad53be200c..98ec9e0576 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.html +++ b/src/app/submission/form/collection/submission-form-collection.component.html @@ -10,7 +10,7 @@ class="btn btn-outline-primary" (blur)="onClose()" (click)="onClose()" - [disabled]="(disabled$ | async) || (processingChange$ | async)" + [disabled]="(processingChange$ | async)" ngbDropdownToggle> {{ selectedCollectionName$ | async }} diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts index 691d93aed1..613bf70ede 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.ts @@ -63,12 +63,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ @Output() collectionChange: EventEmitter = new EventEmitter(); - /** - * A boolean representing if this dropdown button is disabled - * @type {BehaviorSubject} - */ - public disabled$ = new BehaviorSubject(true); - /** * A boolean representing if a collection change operation is processing * @type {BehaviorSubject} From 294f5e5f3140128845a67eeb16faf012e9955b6b Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Wed, 17 Jun 2020 10:47:46 +0200 Subject: [PATCH 04/10] [CST-3090] fix services name and dropdown --- src/app/core/data/collection-data.service.ts | 6 +-- .../collection-dropdown.component.ts | 2 +- .../submission-form-collection.component.ts | 39 ------------------- 3 files changed, 4 insertions(+), 43 deletions(-) diff --git a/src/app/core/data/collection-data.service.ts b/src/app/core/data/collection-data.service.ts index d28421356a..41f70dd31c 100644 --- a/src/app/core/data/collection-data.service.ts +++ b/src/app/core/data/collection-data.service.ts @@ -78,7 +78,7 @@ export class CollectionDataService extends ComColDataService { * collection list */ getAuthorizedCollection(query: string, options: FindListOptions = {}, ...linksToFollow: Array>): Observable>> { - const searchHref = 'findAuthorized'; + const searchHref = 'findSubmitAuthorized'; options = Object.assign({}, options, { searchParams: [new RequestParam('query', query)] }); @@ -97,7 +97,7 @@ export class CollectionDataService extends ComColDataService { * collection list */ getAuthorizedCollectionByCommunity(communityId: string, query: string, options: FindListOptions = {}): Observable>> { - const searchHref = 'findAuthorizedByCommunity'; + const searchHref = 'findSubmitAuthorizedByCommunity'; options = Object.assign({}, options, { searchParams: [ new RequestParam('uuid', communityId), @@ -116,7 +116,7 @@ export class CollectionDataService extends ComColDataService { * true if the user has at least one collection to submit to */ hasAuthorizedCollection(): Observable { - const searchHref = 'findAuthorized'; + const searchHref = 'findSubmitAuthorized'; const options = new FindListOptions(); options.elementsPerPage = 1; diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index cf69fc31a6..0bb3ebdad9 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -123,7 +123,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { startWith('') ).subscribe( (next) => { - if (hasValue(next)) { + if (hasValue(next) && next !== this.currentQuery) { this.resetPagination(); this.currentQuery = next; this.populateCollectionList(this.currentQuery, this.currentPage); diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts index 613bf70ede..d2f45e002c 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.ts @@ -87,18 +87,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ protected pathCombiner: JsonPatchOperationPathCombiner; - /** - * A boolean representing if dropdown list is scrollable to the bottom - * @type {boolean} - */ - private scrollableBottom = false; - - /** - * A boolean representing if dropdown list is scrollable to the top - * @type {boolean} - */ - private scrollableTop = false; - /** * Array to track all subscriptions and unsubscribe them onDestroy * @type {Array} @@ -121,39 +109,12 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { * @param {SubmissionService} submissionService */ constructor(protected cdr: ChangeDetectorRef, - private communityDataService: CommunityDataService, private collectionDataService: CollectionDataService, private operationsBuilder: JsonPatchOperationsBuilder, private operationsService: SubmissionJsonPatchOperationsService, private submissionService: SubmissionService) { } - /** - * Method called on mousewheel event, it prevent the page scroll - * when arriving at the top/bottom of dropdown menu - * - * @param event - * mousewheel event - */ - @HostListener('mousewheel', ['$event']) onMousewheel(event) { - if (event.wheelDelta > 0 && this.scrollableTop) { - event.preventDefault(); - } - if (event.wheelDelta < 0 && this.scrollableBottom) { - event.preventDefault(); - } - } - - /** - * Check if dropdown scrollbar is at the top or bottom of the dropdown list - * - * @param event - */ - onScroll(event) { - this.scrollableBottom = (event.target.scrollTop + event.target.clientHeight === event.target.scrollHeight); - this.scrollableTop = (event.target.scrollTop === 0); - } - /** * Initialize collection list */ From 3b581b93c5e7ae90e173ebb587033cfb0f27488c Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Wed, 17 Jun 2020 16:31:11 +0200 Subject: [PATCH 05/10] [CST-3090] fix --- .../collection-dropdown.component.html | 4 +-- .../collection-dropdown.component.ts | 33 +++++++++++++------ 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html index 0674084a43..36269294c1 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.html +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html @@ -20,7 +20,7 @@ [infiniteScrollContainer]="'.scrollable-menu'" [fromRoot]="true" (scrolled)="onScrollDown()"> - - diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index 0bb3ebdad9..0c36d40ff6 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core'; import { FormControl } from '@angular/forms'; -import { Observable, of, Subscription } from 'rxjs'; +import { Observable, of, Subscription, BehaviorSubject } from 'rxjs'; import { hasValue, isNotEmpty } from '../empty.util'; -import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan } from 'rxjs/operators'; import { RemoteData } from 'src/app/core/data/remote-data'; import { FindListOptions } from 'src/app/core/data/request.models'; import { PaginatedList } from 'src/app/core/data/paginated-list'; @@ -11,6 +11,8 @@ import { CollectionDataService } from 'src/app/core/data/collection-data.service import { Collection } from '../../core/shared/collection.model'; import { followLink } from '../utils/follow-link-config.model'; import { getFirstSucceededRemoteDataPayload, getAllSucceededRemoteData, getSucceededRemoteWithNotEmptyData } from '../../core/shared/operators'; +import { constructor } from 'lodash'; +import { query } from '@angular/animations'; /** * An interface to represent a collection entry */ @@ -74,7 +76,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { /** * A boolean representing if the loader is visible or not */ - isLoadingList: boolean; + isLoadingList: BehaviorSubject = new BehaviorSubject(false); /** * A numeric representig current page @@ -91,6 +93,8 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { */ currentQuery: string; + hideLoaderWhenUnsubscribed$ = new Observable(() => () => this.hideShowLoader(false) ); + constructor( private changeDetectorRef: ChangeDetectorRef, private collectionDataService: CollectionDataService, @@ -118,7 +122,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { */ ngOnInit() { this.subs.push(this.searchField.valueChanges.pipe( - debounceTime(200), + debounceTime(300), distinctUntilChanged(), startWith('') ).subscribe( @@ -168,8 +172,8 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { * @param query text for filter the collection list * @param page page number */ - populateCollectionList(query?: string, page?: number) { - this.isLoadingList = true; + populateCollectionList(query: string, page: number) { + this.isLoadingList.next(true); // Set the pagination info const findOptions: FindListOptions = { elementsPerPage: 10, @@ -179,7 +183,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { .getAuthorizedCollection(query, findOptions, followLink('parentCommunity')) .pipe( getSucceededRemoteWithNotEmptyData(), - mergeMap((collections: RemoteData>) => { + switchMap((collections: RemoteData>) => { if ( (this.searchListCollection.length + findOptions.elementsPerPage) >= collections.payload.totalElements ) { this.hasNextPage = false; } @@ -192,12 +196,13 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { collection: { id: collection.id, uuid: collection.id, name: collection.name } }) ))), - reduce((acc: any, value: any) => [...acc, ...value], []), - startWith([]) + scan((acc: any, value: any) => [...acc, ...value], []), + startWith([]), + merge(this.hideLoaderWhenUnsubscribed$) ); this.subs.push(this.searchListCollection$.subscribe( (next) => { this.searchListCollection.push(...next); }, undefined, - () => { this.isLoadingList = false; this.changeDetectorRef.detectChanges(); } + () => { this.hideShowLoader(false); this.changeDetectorRef.detectChanges(); } )); } @@ -224,4 +229,12 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { this.hasNextPage = true; this.searchListCollection = []; } + + /** + * Hide/Show the collection list loader + * @param hideShow true for show, false otherwise + */ + hideShowLoader(hideShow: boolean) { + this.isLoadingList.next(hideShow); + } } From be2d49633533323551302aca1daea34269b5ce19 Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Wed, 17 Jun 2020 17:02:27 +0200 Subject: [PATCH 06/10] [CTS-3090] update imports --- .../collection-dropdown.component.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index 0c36d40ff6..fb044ce073 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -1,8 +1,8 @@ -import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core'; +import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ElementRef } from '@angular/core'; import { FormControl } from '@angular/forms'; -import { Observable, of, Subscription, BehaviorSubject } from 'rxjs'; -import { hasValue, isNotEmpty } from '../empty.util'; -import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan } from 'rxjs/operators'; +import { Observable, Subscription, BehaviorSubject } from 'rxjs'; +import { hasValue } from '../empty.util'; +import { map, mergeMap, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan } from 'rxjs/operators'; import { RemoteData } from 'src/app/core/data/remote-data'; import { FindListOptions } from 'src/app/core/data/request.models'; import { PaginatedList } from 'src/app/core/data/paginated-list'; @@ -10,9 +10,8 @@ import { Community } from 'src/app/core/shared/community.model'; import { CollectionDataService } from 'src/app/core/data/collection-data.service'; import { Collection } from '../../core/shared/collection.model'; import { followLink } from '../utils/follow-link-config.model'; -import { getFirstSucceededRemoteDataPayload, getAllSucceededRemoteData, getSucceededRemoteWithNotEmptyData } from '../../core/shared/operators'; -import { constructor } from 'lodash'; -import { query } from '@angular/animations'; +import { getFirstSucceededRemoteDataPayload, getSucceededRemoteWithNotEmptyData } from '../../core/shared/operators'; + /** * An interface to represent a collection entry */ From f33f391eb39ef7e918899e23a77b656ad54cda7b Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Thu, 18 Jun 2020 10:23:56 +0200 Subject: [PATCH 07/10] [CTS-3090] - fix pagination --- .../collection-dropdown.component.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index fb044ce073..0986badf45 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, import { FormControl } from '@angular/forms'; import { Observable, Subscription, BehaviorSubject } from 'rxjs'; import { hasValue } from '../empty.util'; -import { map, mergeMap, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan } from 'rxjs/operators'; +import { map, mergeMap, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan, reduce } from 'rxjs/operators'; import { RemoteData } from 'src/app/core/data/remote-data'; import { FindListOptions } from 'src/app/core/data/request.models'; import { PaginatedList } from 'src/app/core/data/paginated-list'; @@ -92,8 +92,6 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { */ currentQuery: string; - hideLoaderWhenUnsubscribed$ = new Observable(() => () => this.hideShowLoader(false) ); - constructor( private changeDetectorRef: ChangeDetectorRef, private collectionDataService: CollectionDataService, @@ -121,7 +119,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { */ ngOnInit() { this.subs.push(this.searchField.valueChanges.pipe( - debounceTime(300), + debounceTime(500), distinctUntilChanged(), startWith('') ).subscribe( @@ -195,9 +193,8 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { collection: { id: collection.id, uuid: collection.id, name: collection.name } }) ))), - scan((acc: any, value: any) => [...acc, ...value], []), - startWith([]), - merge(this.hideLoaderWhenUnsubscribed$) + reduce((acc: any, value: any) => [...acc, ...value], []), + startWith([]) ); this.subs.push(this.searchListCollection$.subscribe( (next) => { this.searchListCollection.push(...next); }, undefined, From 136e36afab428d104dcb8e95d5aba0cbbb7b9958 Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Thu, 18 Jun 2020 11:30:45 +0200 Subject: [PATCH 08/10] [CST-3105] done --- .../submission-form-collection.component.html | 17 ++++++++++++++++- .../submission-form-collection.component.ts | 11 ++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html index 98ec9e0576..d897cc31fd 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.html +++ b/src/app/submission/form/collection/submission-form-collection.component.html @@ -1,5 +1,20 @@
-
+
+
+ {{ 'submission.sections.general.collection' | translate }} +
+
+ {{ selectedCollectionName$ | async }} +
+
+
{{ 'submission.sections.general.collection' | translate }} diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts index d2f45e002c..6517be7101 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.ts @@ -28,6 +28,7 @@ import { SubmissionObject } from '../../../core/submission/models/submission-obj import { SubmissionJsonPatchOperationsService } from '../../../core/submission/submission-json-patch-operations.service'; import { CollectionDataService } from '../../../core/data/collection-data.service'; import { CollectionDropdownComponent } from 'src/app/shared/collection-dropdown/collection-dropdown.component'; +import { SectionsService } from '../../sections/sections.service'; /** * This component allows to show the current collection the submission belonging to and to change it. @@ -98,6 +99,12 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ @ViewChild(CollectionDropdownComponent, {static: false}) collectionDropdown: CollectionDropdownComponent; + /** + * A boolean representing if the collection section is available + * @type {BehaviorSubject} + */ + available$: Observable; + /** * Initialize instance variables * @@ -112,7 +119,8 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { private collectionDataService: CollectionDataService, private operationsBuilder: JsonPatchOperationsBuilder, private operationsService: SubmissionJsonPatchOperationsService, - private submissionService: SubmissionService) { + private submissionService: SubmissionService, + private sectionsService: SectionsService) { } /** @@ -135,6 +143,7 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ ngOnInit() { this.pathCombiner = new JsonPatchOperationPathCombiner('sections', 'collection'); + this.available$ = this.sectionsService.isSectionAvailable(this.submissionId, 'collection'); } /** From 709726e04122d62db1afda4df0aa43850b31808f Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Thu, 18 Jun 2020 12:00:30 +0200 Subject: [PATCH 09/10] [CST-3105] tests --- ...bmission-form-collection.component.spec.ts | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts index 5baa1013ab..cfdc2e2406 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts @@ -18,8 +18,12 @@ import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/jso import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner'; import { createTestComponent } from '../../../shared/testing/utils.test'; import { CollectionDataService } from '../../../core/data/collection-data.service'; +import { hot } from 'jasmine-marbles'; +import { of } from 'rxjs'; +import { SectionsService } from '../../sections/sections.service'; +import { componentFactoryName } from '@angular/compiler'; -describe('SubmissionFormCollectionComponent Component', () => { +fdescribe('SubmissionFormCollectionComponent Component', () => { let comp: SubmissionFormCollectionComponent; let compAsAny: any; @@ -48,6 +52,10 @@ describe('SubmissionFormCollectionComponent Component', () => { replace: jasmine.createSpy('replace') }); + const sectionsService: any = jasmine.createSpyObj('sectionsService', { + isSectionAvailable: of(true) + }); + beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ @@ -67,6 +75,7 @@ describe('SubmissionFormCollectionComponent Component', () => { { provide: CommunityDataService, useValue: communityDataService }, { provide: JsonPatchOperationsBuilder, useValue: jsonPatchOpBuilder }, { provide: Store, useValue: store }, + { provide: SectionsService, useValue: sectionsService }, ChangeDetectorRef, SubmissionFormCollectionComponent ], @@ -160,6 +169,17 @@ describe('SubmissionFormCollectionComponent Component', () => { }); })); + it('the dropdown menu should be enable', () => { + const dropDown = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu')); + expect(dropDown).toBeTruthy(); + }); + + it('the dropdown menu should be disabled', () => { + comp.available$ = of(false); + fixture.detectChanges(); + const dropDown = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu')); + expect(dropDown).toBeFalsy(); + }); }); }); From f841e45019057b1652e94cca44b3f8c45c99c535 Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Thu, 18 Jun 2020 15:38:03 +0200 Subject: [PATCH 10/10] [CST-3090] fix tests --- ...my-dspace-new-submission.component.spec.ts | 28 +++++- .../core/data/collection-data.service.spec.ts | 87 ++++++++++++++++++- .../collection-dropdown.component.spec.ts | 43 ++++++++- .../collection-dropdown.component.ts | 2 +- ...bmission-form-collection.component.spec.ts | 85 +++++++++++++++++- 5 files changed, 237 insertions(+), 8 deletions(-) diff --git a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts index ac9eea6c0c..16b50d18f0 100644 --- a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts +++ b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts @@ -1,5 +1,5 @@ import { ChangeDetectorRef, Component, NO_ERRORS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, inject, TestBed, tick, fakeAsync } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { Store } from '@ngrx/store'; @@ -21,6 +21,8 @@ import { NotificationsServiceStub } from '../../shared/testing/notifications-ser import { SharedModule } from '../../shared/shared.module'; import { getMockScrollToService } from '../../shared/mocks/scroll-to-service.mock'; import { UploaderService } from '../../shared/uploader/uploader.service'; +import { By } from '@angular/platform-browser'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; describe('MyDSpaceNewSubmissionComponent test', () => { @@ -54,6 +56,11 @@ describe('MyDSpaceNewSubmissionComponent test', () => { { provide: ScrollToService, useValue: getMockScrollToService() }, { provide: Store, useValue: store }, { provide: TranslateService, useValue: translateService }, + { + provide: NgbModal, useValue: { + open: () => {/*comment*/} + } + }, ChangeDetectorRef, MyDSpaceNewSubmissionComponent, UploaderService @@ -86,6 +93,25 @@ describe('MyDSpaceNewSubmissionComponent test', () => { })); }); + describe('', () => { + let fixture: ComponentFixture; + let comp: MyDSpaceNewSubmissionComponent; + + beforeEach(() => { + fixture = TestBed.createComponent(MyDSpaceNewSubmissionComponent); + comp = fixture.componentInstance; + }); + + it('should call app.openDialog', () => { + spyOn(comp, 'openDialog'); + const submissionButton = fixture.debugElement.query(By.css('button.btn-primary')); + submissionButton.triggerEventHandler('click', { + preventDefault: () => {/**/ + } + }); + expect(comp.openDialog).toHaveBeenCalled(); + }); + }); }); // declare a test component diff --git a/src/app/core/data/collection-data.service.spec.ts b/src/app/core/data/collection-data.service.spec.ts index eb3dabf195..7087655a26 100644 --- a/src/app/core/data/collection-data.service.spec.ts +++ b/src/app/core/data/collection-data.service.spec.ts @@ -13,13 +13,19 @@ import { RequestEntry } from './request.reducer'; import { ErrorResponse, RestResponse } from '../cache/response.models'; import { ObjectCacheService } from '../cache/object-cache.service'; import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service'; +import { Collection } from '../shared/collection.model'; +import { PageInfo } from '../shared/page-info.model'; +import { PaginatedList } from './paginated-list'; +import { createSuccessfulRemoteDataObject } from 'src/app/shared/remote-data.utils'; +import { hot, getTestScheduler, cold } from 'jasmine-marbles'; +import { TestScheduler } from 'rxjs/testing'; const url = 'fake-url'; const collectionId = 'fake-collection-id'; describe('CollectionDataService', () => { let service: CollectionDataService; - + let scheduler: TestScheduler; let requestService: RequestService; let translate: TranslateService; let notificationsService: any; @@ -27,6 +33,44 @@ describe('CollectionDataService', () => { let objectCache: ObjectCacheService; let halService: any; + const mockCollection1: Collection = Object.assign(new Collection(), { + id: 'test-collection-1-1', + name: 'test-collection-1', + _links: { + self: { + href: 'https://rest.api/collections/test-collection-1-1' + } + } + }); + + const mockCollection2: Collection = Object.assign(new Collection(), { + id: 'test-collection-2-2', + name: 'test-collection-2', + _links: { + self: { + href: 'https://rest.api/collections/test-collection-2-2' + } + } + }); + + const mockCollection3: Collection = Object.assign(new Collection(), { + id: 'test-collection-3-3', + name: 'test-collection-3', + _links: { + self: { + href: 'https://rest.api/collections/test-collection-3-3' + } + } + }); + + const queryString = 'test-string'; + const communityId = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a'; + + const pageInfo = new PageInfo(); + const array = [mockCollection1, mockCollection2, mockCollection3]; + const paginatedList = new PaginatedList(pageInfo, array); + const paginatedListRD = createSuccessfulRemoteDataObject(paginatedList); + describe('when the requests are successful', () => { beforeEach(() => { createService(); @@ -74,6 +118,43 @@ describe('CollectionDataService', () => { }); }); + describe('when calling getAuthorizedCollection', () => { + beforeEach(() => { + scheduler = getTestScheduler(); + spyOn(service, 'getAuthorizedCollection').and.callThrough(); + spyOn(service, 'getAuthorizedCollectionByCommunity').and.callThrough(); + }); + + it('should proxy the call to getAuthorizedCollection', () => { + scheduler.schedule(() => service.getAuthorizedCollection(queryString)); + scheduler.flush(); + + expect(service.getAuthorizedCollection).toHaveBeenCalledWith(queryString); + }); + + it('should return a RemoteData> for the getAuthorizedCollection', () => { + const result = service.getAuthorizedCollection(queryString) + const expected = cold('a|', { + a: paginatedListRD + }); + expect(result).toBeObservable(expected); + }); + + it('should proxy the call to getAuthorizedCollectionByCommunity', () => { + scheduler.schedule(() => service.getAuthorizedCollectionByCommunity(communityId, queryString)); + scheduler.flush(); + + expect(service.getAuthorizedCollectionByCommunity).toHaveBeenCalledWith(communityId, queryString); + }); + + it('should return a RemoteData> for the getAuthorizedCollectionByCommunity', () => { + const result = service.getAuthorizedCollectionByCommunity(communityId, queryString) + const expected = cold('a|', { + a: paginatedListRD + }); + expect(result).toBeObservable(expected); + }); + }); }); describe('when the requests are unsuccessful', () => { @@ -117,7 +198,9 @@ describe('CollectionDataService', () => { function createService(requestEntry$?) { requestService = getMockRequestService(requestEntry$); rdbService = jasmine.createSpyObj('rdbService', { - buildList: jasmine.createSpy('buildList') + buildList: hot('a|', { + a: paginatedListRD + }) }); objectCache = jasmine.createSpyObj('objectCache', { remove: jasmine.createSpy('remove') diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts index 33c848f9c4..8530be665e 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts @@ -167,6 +167,21 @@ describe('CollectionDropdownComponent', () => { }); })); + it('should init component with collection list', fakeAsync(() => { + spyOn(component.subs, 'push').and.callThrough(); + spyOn(component, 'resetPagination').and.callThrough(); + spyOn(component, 'populateCollectionList').and.callThrough(); + component.ngOnInit(); + tick(); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + expect(component.subs.push).toHaveBeenCalled(); + expect(component.resetPagination).toHaveBeenCalled(); + expect(component.populateCollectionList).toHaveBeenCalled(); + }); + })); + it('should emit collectionChange event when selecting a new collection', () => { spyOn(component.selectionChange, 'emit').and.callThrough(); component.ngOnInit(); @@ -177,6 +192,7 @@ describe('CollectionDropdownComponent', () => { }); it('should reset collections list after reset of searchField', fakeAsync(() => { + spyOn(component.subs, 'push').and.callThrough(); spyOn(component, 'reset').and.callThrough(); spyOn(component.searchField, 'setValue').and.callThrough(); spyOn(component, 'resetPagination').and.callThrough(); @@ -187,7 +203,7 @@ describe('CollectionDropdownComponent', () => { el.value = searchedCollection; el.dispatchEvent(new Event('input')); fixture.detectChanges(); - tick(250); + tick(500); fixture.whenStable().then(() => { expect(component.reset).toHaveBeenCalled(); @@ -195,6 +211,31 @@ describe('CollectionDropdownComponent', () => { expect(component.resetPagination).toHaveBeenCalled(); expect(component.currentQuery).toEqual(''); expect(component.populateCollectionList).toHaveBeenCalledWith(component.currentQuery, component.currentPage); + expect(component.searchListCollection).toEqual(collections as any); + expect(component.subs.push).toHaveBeenCalled(); }); })); + + it('should reset searchField when dropdown menu has been closed', () => { + spyOn(component.searchField, 'setValue').and.callThrough(); + component.reset(); + + expect(component.searchField.setValue).toHaveBeenCalled(); + }); + + it('should change loader status', () => { + spyOn(component.isLoadingList, 'next').and.callThrough(); + component.hideShowLoader(true); + + expect(component.isLoadingList.next).toHaveBeenCalledWith(true); + }); + + it('reset pagination fields', () => { + component.resetPagination(); + + expect(component.currentPage).toEqual(1); + expect(component.currentQuery).toEqual(''); + expect(component.hasNextPage).toEqual(true); + expect(component.searchListCollection).toEqual([]); + }); }); diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index 0986badf45..0e9a4ab629 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -64,7 +64,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { * Array to track all subscriptions and unsubscribe them onDestroy * @type {Array} */ - private subs: Subscription[] = []; + public subs: Subscription[] = []; /** * The list of collection to render diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts index cfdc2e2406..0132289266 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts @@ -8,7 +8,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { Store } from '@ngrx/store'; import { SubmissionServiceStub } from '../../../shared/testing/submission-service.stub'; -import { mockSubmissionId } from '../../../shared/mocks/submission.mock'; +import { mockSubmissionId, mockSubmissionRestResponse } from '../../../shared/mocks/submission.mock'; import { SubmissionService } from '../../submission.service'; import { SubmissionFormCollectionComponent } from './submission-form-collection.component'; import { CommunityDataService } from '../../../core/data/community-data.service'; @@ -18,12 +18,13 @@ import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/jso import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner'; import { createTestComponent } from '../../../shared/testing/utils.test'; import { CollectionDataService } from '../../../core/data/collection-data.service'; -import { hot } from 'jasmine-marbles'; +import { hot, cold } from 'jasmine-marbles'; import { of } from 'rxjs'; import { SectionsService } from '../../sections/sections.service'; import { componentFactoryName } from '@angular/compiler'; +import { Collection } from 'src/app/core/shared/collection.model'; -fdescribe('SubmissionFormCollectionComponent Component', () => { +describe('SubmissionFormCollectionComponent Component', () => { let comp: SubmissionFormCollectionComponent; let compAsAny: any; @@ -34,6 +35,58 @@ fdescribe('SubmissionFormCollectionComponent Component', () => { const submissionId = mockSubmissionId; const collectionId = '1234567890-1'; const definition = 'traditional'; + const submissionRestResponse = mockSubmissionRestResponse; + + const mockCollectionList = [ + { + communities: [ + { + id: '123456789-1', + name: 'Community 1' + } + ], + collection: { + id: '1234567890-1', + name: 'Community 1-Collection 1' + } + }, + { + communities: [ + { + id: '123456789-1', + name: 'Community 1' + } + ], + collection: { + id: '1234567890-2', + name: 'Community 1-Collection 2' + } + }, + { + communities: [ + { + id: '123456789-2', + name: 'Community 2' + } + ], + collection: { + id: '1234567890-3', + name: 'Community 2-Collection 1' + } + }, + { + communities: [ + { + id: '123456789-2', + name: 'Community 2' + } + ], + collection: { + id: '1234567890-4', + name: 'Community 2-Collection 2' + } + } + ]; const communityDataService: any = jasmine.createSpyObj('communityDataService', { findAll: jasmine.createSpy('findAll') @@ -180,6 +233,32 @@ fdescribe('SubmissionFormCollectionComponent Component', () => { const dropDown = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu')); expect(dropDown).toBeFalsy(); }); + + it('should be simulated when the drop-down menu is closed', () => { + spyOn(comp, 'onClose'); + comp.onClose(); + expect(comp.onClose).toHaveBeenCalled(); + }); + + it('should be simulated when the drop-down menu is toggled', () => { + spyOn(comp, 'toggled'); + comp.toggled(false); + expect(comp.toggled).toHaveBeenCalled(); + }); + + it('should ', () => { + spyOn(comp.collectionChange, 'emit').and.callThrough(); + jsonPatchOpServiceStub.jsonPatchByResourceID.and.returnValue(of(submissionRestResponse)); + comp.ngOnInit(); + comp.onSelect(mockCollectionList[1]); + fixture.detectChanges(); + + expect(submissionServiceStub.changeSubmissionCollection).toHaveBeenCalled(); + expect(comp.selectedCollectionId).toBe(mockCollectionList[1].collection.id); + expect(comp.selectedCollectionName$).toBeObservable(cold('(a|)', { + a: mockCollectionList[1].collection.name + })); + }); }); });