[CST-4510] Fix issue with multiple selection in the collection-dropdown.component

This commit is contained in:
Giuseppe Digilio
2021-10-15 19:04:14 +02:00
parent 096a1d8427
commit 7b24e3bc8e
4 changed files with 28 additions and 27 deletions

View File

@@ -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>

View File

@@ -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', () => {

View File

@@ -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);
} }
/** /**

View File

@@ -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(),