mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-07 10:04:11 +00:00
[CST-4510] Fix issue with multiple selection in the collection-dropdown.component
This commit is contained in:
@@ -18,21 +18,23 @@
|
|||||||
[scrollWindow]="false"
|
[scrollWindow]="false"
|
||||||
(scrolled)="onScrollDown()">
|
(scrolled)="onScrollDown()">
|
||||||
|
|
||||||
<button class="dropdown-item disabled" *ngIf="searchListCollection?.length == 0 && !(isLoadingList | async)">
|
<button class="dropdown-item disabled" *ngIf="searchListCollection?.length == 0 && !(isLoading | async)">
|
||||||
{{'submission.sections.general.no-collection' | translate}}
|
{{'submission.sections.general.no-collection' | translate}}
|
||||||
</button>
|
</button>
|
||||||
<button *ngFor="let listItem of searchListCollection"
|
<ng-container *ngIf="searchListCollection?.length > 0 && !(isLoading | async)">
|
||||||
class="dropdown-item collection-item"
|
<button *ngFor="let listItem of searchListCollection"
|
||||||
title="{{ listItem.collection.name }}"
|
class="dropdown-item collection-item"
|
||||||
(click)="onSelect(listItem)">
|
title="{{ listItem.collection.name }}"
|
||||||
<ul class="list-unstyled mb-0">
|
(click)="onSelect(listItem)">
|
||||||
<li class="list-item text-truncate text-secondary" *ngFor="let item of listItem.communities">
|
<ul class="list-unstyled mb-0">
|
||||||
{{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
|
<li class="list-item text-truncate text-secondary" *ngFor="let item of listItem.communities">
|
||||||
</li>
|
{{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
|
||||||
<li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.collection.name}}</li>
|
</li>
|
||||||
</ul>
|
<li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.collection.name}}</li>
|
||||||
</button>
|
</ul>
|
||||||
<button class="dropdown-item disabled" *ngIf="(isLoadingList | async)">
|
</button>
|
||||||
|
</ng-container>
|
||||||
|
<button class="dropdown-item disabled" *ngIf="(isLoading | async)">
|
||||||
<ds-loading message="{{'loading.default' | translate}}">
|
<ds-loading message="{{'loading.default' | translate}}">
|
||||||
</ds-loading>
|
</ds-loading>
|
||||||
</button>
|
</button>
|
||||||
|
@@ -108,9 +108,6 @@ describe('CollectionDropdownComponent', () => {
|
|||||||
const paginatedCollection = buildPaginatedList(new PageInfo(), collections);
|
const paginatedCollection = buildPaginatedList(new PageInfo(), collections);
|
||||||
const paginatedCollectionRD$ = createSuccessfulRemoteDataObject$(paginatedCollection);
|
const paginatedCollectionRD$ = createSuccessfulRemoteDataObject$(paginatedCollection);
|
||||||
|
|
||||||
const paginatedEmptyCollection = buildPaginatedList(new PageInfo(), []);
|
|
||||||
const paginatedEmptyCollectionRD$ = createSuccessfulRemoteDataObject$(paginatedEmptyCollection);
|
|
||||||
|
|
||||||
const paginatedOneElementCollection = buildPaginatedList(new PageInfo(), [collections[0]]);
|
const paginatedOneElementCollection = buildPaginatedList(new PageInfo(), [collections[0]]);
|
||||||
const paginatedOneElementCollectionRD$ = createSuccessfulRemoteDataObject$(paginatedOneElementCollection);
|
const paginatedOneElementCollectionRD$ = createSuccessfulRemoteDataObject$(paginatedOneElementCollection);
|
||||||
|
|
||||||
@@ -203,10 +200,10 @@ describe('CollectionDropdownComponent', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('should change loader status', () => {
|
it('should change loader status', () => {
|
||||||
spyOn(component.isLoadingList, 'next').and.callThrough();
|
spyOn(component.isLoading, 'next').and.callThrough();
|
||||||
component.hideShowLoader(true);
|
component.hideShowLoader(true);
|
||||||
|
|
||||||
expect(component.isLoadingList.next).toHaveBeenCalledWith(true);
|
expect(component.isLoading.next).toHaveBeenCalledWith(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('reset pagination fields', () => {
|
it('reset pagination fields', () => {
|
||||||
|
@@ -87,10 +87,10 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
|
|||||||
/**
|
/**
|
||||||
* A boolean representing if the loader is visible or not
|
* A boolean representing if the loader is visible or not
|
||||||
*/
|
*/
|
||||||
isLoadingList: BehaviorSubject<boolean> = new BehaviorSubject(false);
|
isLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A numeric representig current page
|
* A numeric representing current page
|
||||||
*/
|
*/
|
||||||
currentPage: number;
|
currentPage: number;
|
||||||
|
|
||||||
@@ -100,7 +100,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
|
|||||||
hasNextPage: boolean;
|
hasNextPage: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Current seach query used to filter collection list
|
* Current search query used to filter collection list
|
||||||
*/
|
*/
|
||||||
currentQuery: string;
|
currentQuery: string;
|
||||||
|
|
||||||
@@ -145,6 +145,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
|
|||||||
* Initialize collection list
|
* Initialize collection list
|
||||||
*/
|
*/
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this.isLoading.next(false);
|
||||||
this.subs.push(this.searchField.valueChanges.pipe(
|
this.subs.push(this.searchField.valueChanges.pipe(
|
||||||
debounceTime(500),
|
debounceTime(500),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
@@ -173,7 +174,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Method used from infitity scroll for retrive more data on scroll down
|
* Method used from infinity scroll for retrieve more data on scroll down
|
||||||
*/
|
*/
|
||||||
onScrollDown() {
|
onScrollDown() {
|
||||||
if ( this.hasNextPage ) {
|
if ( this.hasNextPage ) {
|
||||||
@@ -188,6 +189,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
|
|||||||
* the selected [CollectionListEntry]
|
* the selected [CollectionListEntry]
|
||||||
*/
|
*/
|
||||||
onSelect(event: CollectionListEntry) {
|
onSelect(event: CollectionListEntry) {
|
||||||
|
this.isLoading.next(true);
|
||||||
this.selectionChange.emit(event);
|
this.selectionChange.emit(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -197,13 +199,13 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
|
|||||||
* @param page page number
|
* @param page page number
|
||||||
*/
|
*/
|
||||||
populateCollectionList(query: string, page: number) {
|
populateCollectionList(query: string, page: number) {
|
||||||
this.isLoadingList.next(true);
|
this.isLoading.next(true);
|
||||||
// Set the pagination info
|
// Set the pagination info
|
||||||
const findOptions: FindListOptions = {
|
const findOptions: FindListOptions = {
|
||||||
elementsPerPage: 10,
|
elementsPerPage: 10,
|
||||||
currentPage: page
|
currentPage: page
|
||||||
};
|
};
|
||||||
let searchListService$: Observable<RemoteData<PaginatedList<Collection>>> = null;
|
let searchListService$: Observable<RemoteData<PaginatedList<Collection>>>;
|
||||||
if (this.entityType) {
|
if (this.entityType) {
|
||||||
searchListService$ = this.collectionDataService
|
searchListService$ = this.collectionDataService
|
||||||
.getAuthorizedCollectionByEntityType(
|
.getAuthorizedCollectionByEntityType(
|
||||||
@@ -279,7 +281,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
|
|||||||
* @param hideShow true for show, false otherwise
|
* @param hideShow true for show, false otherwise
|
||||||
*/
|
*/
|
||||||
hideShowLoader(hideShow: boolean) {
|
hideShowLoader(hideShow: boolean) {
|
||||||
this.isLoadingList.next(hideShow);
|
this.isLoading.next(hideShow);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@@ -18,7 +18,7 @@ import { ListableObject } from '../../../../../../object-collection/shared/lista
|
|||||||
import { ItemDataService } from '../../../../../../../core/data/item-data.service';
|
import { ItemDataService } from '../../../../../../../core/data/item-data.service';
|
||||||
import { PaginationComponentOptions } from '../../../../../../pagination/pagination-component-options.model';
|
import { PaginationComponentOptions } from '../../../../../../pagination/pagination-component-options.model';
|
||||||
import { getFirstSucceededRemoteData, getRemoteDataPayload } from '../../../../../../../core/shared/operators';
|
import { getFirstSucceededRemoteData, getRemoteDataPayload } from '../../../../../../../core/shared/operators';
|
||||||
import { mergeMap, take } from 'rxjs/operators';
|
import { switchMap, take } from 'rxjs/operators';
|
||||||
import { ItemSearchResult } from '../../../../../../object-collection/shared/item-search-result.model';
|
import { ItemSearchResult } from '../../../../../../object-collection/shared/item-search-result.model';
|
||||||
import { NotificationsService } from '../../../../../../notifications/notifications.service';
|
import { NotificationsService } from '../../../../../../notifications/notifications.service';
|
||||||
import { TranslateService } from '@ngx-translate/core';
|
import { TranslateService } from '@ngx-translate/core';
|
||||||
@@ -219,7 +219,7 @@ export class ExternalSourceEntryImportModalComponent implements OnInit {
|
|||||||
this.modalRef.componentInstance.entityType = this.relatedEntityType.label;
|
this.modalRef.componentInstance.entityType = this.relatedEntityType.label;
|
||||||
|
|
||||||
this.modalRef.componentInstance.selectedEvent.pipe(
|
this.modalRef.componentInstance.selectedEvent.pipe(
|
||||||
mergeMap((collectionListEntry: CollectionListEntry) => {
|
switchMap((collectionListEntry: CollectionListEntry) => {
|
||||||
return this.itemService.importExternalSourceEntry(this.externalSourceEntry, collectionListEntry.collection.id).pipe(
|
return this.itemService.importExternalSourceEntry(this.externalSourceEntry, collectionListEntry.collection.id).pipe(
|
||||||
getFirstSucceededRemoteData(),
|
getFirstSucceededRemoteData(),
|
||||||
getRemoteDataPayload(),
|
getRemoteDataPayload(),
|
||||||
|
Reference in New Issue
Block a user