79325: Fix pagination in the external metadata lookup

This commit is contained in:
Yana De Pauw
2021-05-11 11:39:46 +02:00
parent a87bf009ef
commit a77ca2f126
8 changed files with 64 additions and 13 deletions

View File

@@ -14,7 +14,7 @@
<ds-viewable-collection *ngIf="entriesRD?.hasSucceeded && !entriesRD?.isLoading && entriesRD?.payload?.page?.length > 0" @fadeIn <ds-viewable-collection *ngIf="entriesRD?.hasSucceeded && !entriesRD?.isLoading && entriesRD?.payload?.page?.length > 0" @fadeIn
[objects]="entriesRD" [objects]="entriesRD"
[selectionConfig]="{ repeatable: repeatable, listId: listId }" [selectionConfig]="{ repeatable: repeatable, listId: listId }"
[config]="initialPagination" [config]="(currentPagination$ |async)"
[hideGear]="true" [hideGear]="true"
[context]="context" [context]="context"
[importable]="true" [importable]="true"

View File

@@ -24,6 +24,8 @@ import { Collection } from '../../../../../../core/shared/collection.model';
import { RelationshipOptions } from '../../../models/relationship-options.model'; import { RelationshipOptions } from '../../../models/relationship-options.model';
import { ExternalSourceEntryImportModalComponent } from './external-source-entry-import-modal/external-source-entry-import-modal.component'; import { ExternalSourceEntryImportModalComponent } from './external-source-entry-import-modal/external-source-entry-import-modal.component';
import { createPaginatedList } from '../../../../../testing/utils.test'; import { createPaginatedList } from '../../../../../testing/utils.test';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
import { PaginationServiceStub } from '../../../../../testing/pagination-service.stub';
describe('DsDynamicLookupRelationExternalSourceTabComponent', () => { describe('DsDynamicLookupRelationExternalSourceTabComponent', () => {
let component: DsDynamicLookupRelationExternalSourceTabComponent; let component: DsDynamicLookupRelationExternalSourceTabComponent;
@@ -103,7 +105,8 @@ describe('DsDynamicLookupRelationExternalSourceTabComponent', () => {
} }
}, },
{ provide: ExternalSourceService, useValue: externalSourceService }, { provide: ExternalSourceService, useValue: externalSourceService },
{ provide: SelectableListService, useValue: selectableListService } { provide: SelectableListService, useValue: selectableListService },
{ provide: PaginationService, useValue: new PaginationServiceStub() }
], ],
schemas: [NO_ERRORS_SCHEMA] schemas: [NO_ERRORS_SCHEMA]
}).compileComponents(); }).compileComponents();

View File

@@ -3,7 +3,6 @@ import { SEARCH_CONFIG_SERVICE } from '../../../../../../+my-dspace-page/my-dspa
import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service'; import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ExternalSourceService } from '../../../../../../core/data/external-source.service'; import { ExternalSourceService } from '../../../../../../core/data/external-source.service';
import { Observable, Subscription } from 'rxjs';
import { RemoteData } from '../../../../../../core/data/remote-data'; import { RemoteData } from '../../../../../../core/data/remote-data';
import { PaginatedList } from '../../../../../../core/data/paginated-list.model'; import { PaginatedList } from '../../../../../../core/data/paginated-list.model';
import { ExternalSourceEntry } from '../../../../../../core/shared/external-source-entry.model'; import { ExternalSourceEntry } from '../../../../../../core/shared/external-source-entry.model';
@@ -21,6 +20,8 @@ import { hasValue } from '../../../../../empty.util';
import { SelectableListService } from '../../../../../object-list/selectable-list/selectable-list.service'; import { SelectableListService } from '../../../../../object-list/selectable-list/selectable-list.service';
import { Item } from '../../../../../../core/shared/item.model'; import { Item } from '../../../../../../core/shared/item.model';
import { Collection } from '../../../../../../core/shared/collection.model'; import { Collection } from '../../../../../../core/shared/collection.model';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
import { Observable, Subscription } from 'rxjs';
@Component({ @Component({
selector: 'ds-dynamic-lookup-relation-external-source-tab', selector: 'ds-dynamic-lookup-relation-external-source-tab',
@@ -81,10 +82,15 @@ export class DsDynamicLookupRelationExternalSourceTabComponent implements OnInit
* The initial pagination options * The initial pagination options
*/ */
initialPagination = Object.assign(new PaginationComponentOptions(), { initialPagination = Object.assign(new PaginationComponentOptions(), {
id: 'submission-external-source-relation-list', id: 'spc',
pageSize: 5 pageSize: 5
}); });
/**
* The current pagination options
*/
currentPagination$: Observable<PaginationComponentOptions>;
/** /**
* The external source we're selecting entries for * The external source we're selecting entries for
*/ */
@@ -114,17 +120,21 @@ export class DsDynamicLookupRelationExternalSourceTabComponent implements OnInit
public searchConfigService: SearchConfigurationService, public searchConfigService: SearchConfigurationService,
private externalSourceService: ExternalSourceService, private externalSourceService: ExternalSourceService,
private modalService: NgbModal, private modalService: NgbModal,
private selectableListService: SelectableListService) { private selectableListService: SelectableListService,
private paginationService: PaginationService
) {
} }
/** /**
* Get the entries for the selected external source * Get the entries for the selected external source
*/ */
ngOnInit(): void { ngOnInit(): void {
this.resetRoute();
this.entriesRD$ = this.searchConfigService.paginatedSearchOptions.pipe( this.entriesRD$ = this.searchConfigService.paginatedSearchOptions.pipe(
switchMap((searchOptions: PaginatedSearchOptions) => switchMap((searchOptions: PaginatedSearchOptions) =>
this.externalSourceService.getExternalSourceEntries(this.externalSource.id, searchOptions).pipe(startWith(undefined))) this.externalSourceService.getExternalSourceEntries(this.externalSource.id, searchOptions).pipe(startWith(undefined)))
); );
this.currentPagination$ = this.paginationService.getCurrentPagination(this.searchConfigService.paginationID, this.initialPagination);
this.importConfig = { this.importConfig = {
buttonLabel: 'submission.sections.describe.relationship-lookup.external-source.import-button-title.' + this.label buttonLabel: 'submission.sections.describe.relationship-lookup.external-source.import-button-title.' + this.label
}; };
@@ -159,4 +169,14 @@ export class DsDynamicLookupRelationExternalSourceTabComponent implements OnInit
this.importObjectSub.unsubscribe(); this.importObjectSub.unsubscribe();
} }
} }
/**
* Method to reset the route when the tab is opened to make sure no strange pagination issues appears
*/
resetRoute() {
this.paginationService.updateRoute(this.searchConfigService.paginationID, {
page: 1,
pageSize: 5
});
}
} }

View File

@@ -17,6 +17,8 @@ import { ItemSearchResult } from '../../../../../object-collection/shared/item-s
import { Item } from '../../../../../../core/shared/item.model'; import { Item } from '../../../../../../core/shared/item.model';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { LookupRelationService } from '../../../../../../core/data/lookup-relation.service'; import { LookupRelationService } from '../../../../../../core/data/lookup-relation.service';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
import { PaginationServiceStub } from '../../../../../testing/pagination-service.stub';
describe('DsDynamicLookupRelationSearchTabComponent', () => { describe('DsDynamicLookupRelationSearchTabComponent', () => {
let component: DsDynamicLookupRelationSearchTabComponent; let component: DsDynamicLookupRelationSearchTabComponent;
@@ -88,7 +90,8 @@ describe('DsDynamicLookupRelationSearchTabComponent', () => {
} }
}, },
{ provide: ActivatedRoute, useValue: { snapshot: { queryParams: {} } } }, { provide: ActivatedRoute, useValue: { snapshot: { queryParams: {} } } },
{ provide: LookupRelationService, useValue: lookupRelationService } { provide: LookupRelationService, useValue: lookupRelationService },
{ provide: PaginationService, useValue: new PaginationServiceStub() }
], ],
schemas: [NO_ERRORS_SCHEMA] schemas: [NO_ERRORS_SCHEMA]
}) })

View File

@@ -19,6 +19,7 @@ import { RouteService } from '../../../../../../core/services/route.service';
import { CollectionElementLinkType } from '../../../../../object-collection/collection-element-link.type'; import { CollectionElementLinkType } from '../../../../../object-collection/collection-element-link.type';
import { Context } from '../../../../../../core/shared/context.model'; import { Context } from '../../../../../../core/shared/context.model';
import { LookupRelationService } from '../../../../../../core/data/lookup-relation.service'; import { LookupRelationService } from '../../../../../../core/data/lookup-relation.service';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
@Component({ @Component({
selector: 'ds-dynamic-lookup-relation-search-tab', selector: 'ds-dynamic-lookup-relation-search-tab',
@@ -117,7 +118,8 @@ export class DsDynamicLookupRelationSearchTabComponent implements OnInit, OnDest
private selectableListService: SelectableListService, private selectableListService: SelectableListService,
public searchConfigService: SearchConfigurationService, public searchConfigService: SearchConfigurationService,
private routeService: RouteService, private routeService: RouteService,
public lookupRelationService: LookupRelationService public lookupRelationService: LookupRelationService,
private paginationService: PaginationService
) { ) {
} }
@@ -137,9 +139,7 @@ export class DsDynamicLookupRelationSearchTabComponent implements OnInit, OnDest
* Method to reset the route when the window is opened to make sure no strange pagination issues appears * Method to reset the route when the window is opened to make sure no strange pagination issues appears
*/ */
resetRoute() { resetRoute() {
this.router.navigate([], { this.paginationService.updateRoute(this.searchConfigService.paginationID, this.initialPagination);
queryParams: Object.assign({ query: this.query }, this.route.snapshot.queryParams, this.initialPagination),
});
} }
/** /**

View File

@@ -12,7 +12,7 @@
<ds-viewable-collection [objects]="selectionRD$ | async" <ds-viewable-collection [objects]="selectionRD$ | async"
[selectable]="true" [selectable]="true"
[selectionConfig]="{ repeatable: repeatable, listId: listId }" [selectionConfig]="{ repeatable: repeatable, listId: listId }"
[config]="initialPagination" [config]="(currentPagination$ |async)"
[hideGear]="true" [hideGear]="true"
[context]="context" [context]="context"
(deselectObject)="deselectObject.emit($event)" (deselectObject)="deselectObject.emit($event)"

View File

@@ -15,6 +15,8 @@ import { RemoteData } from '../../../../../../core/data/remote-data';
import { buildPaginatedList, PaginatedList } from '../../../../../../core/data/paginated-list.model'; import { buildPaginatedList, PaginatedList } from '../../../../../../core/data/paginated-list.model';
import { ListableObject } from '../../../../../object-collection/shared/listable-object.model'; import { ListableObject } from '../../../../../object-collection/shared/listable-object.model';
import { createSuccessfulRemoteDataObject$ } from '../../../../../remote-data.utils'; import { createSuccessfulRemoteDataObject$ } from '../../../../../remote-data.utils';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
import { PaginationServiceStub } from '../../../../../testing/pagination-service.stub';
describe('DsDynamicLookupRelationSelectionTabComponent', () => { describe('DsDynamicLookupRelationSelectionTabComponent', () => {
let component: DsDynamicLookupRelationSelectionTabComponent; let component: DsDynamicLookupRelationSelectionTabComponent;
@@ -54,6 +56,9 @@ describe('DsDynamicLookupRelationSelectionTabComponent', () => {
}, },
{ {
provide: Router, useValue: router provide: Router, useValue: router
},
{
provide: PaginationService, useValue: new PaginationServiceStub()
} }
], ],
schemas: [NO_ERRORS_SCHEMA] schemas: [NO_ERRORS_SCHEMA]

View File

@@ -15,6 +15,7 @@ import { PaginatedSearchOptions } from '../../../../../search/paginated-search-o
import { PageInfo } from '../../../../../../core/shared/page-info.model'; import { PageInfo } from '../../../../../../core/shared/page-info.model';
import { Context } from '../../../../../../core/shared/context.model'; import { Context } from '../../../../../../core/shared/context.model';
import { createSuccessfulRemoteDataObject } from '../../../../../remote-data.utils'; import { createSuccessfulRemoteDataObject } from '../../../../../remote-data.utils';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
@Component({ @Component({
selector: 'ds-dynamic-lookup-relation-selection-tab', selector: 'ds-dynamic-lookup-relation-selection-tab',
@@ -76,18 +77,26 @@ export class DsDynamicLookupRelationSelectionTabComponent {
* The initial pagination to use * The initial pagination to use
*/ */
initialPagination = Object.assign(new PaginationComponentOptions(), { initialPagination = Object.assign(new PaginationComponentOptions(), {
id: 'submission-relation-list', id: 'spc',
pageSize: 5 pageSize: 5
}); });
/**
* The current pagination options
*/
currentPagination$: Observable<PaginationComponentOptions>;
constructor(private router: Router, constructor(private router: Router,
private searchConfigService: SearchConfigurationService) { private searchConfigService: SearchConfigurationService,
private paginationService: PaginationService
) {
} }
/** /**
* Set up the selection and pagination on load * Set up the selection and pagination on load
*/ */
ngOnInit() { ngOnInit() {
this.resetRoute();
this.selectionRD$ = this.searchConfigService.paginatedSearchOptions this.selectionRD$ = this.searchConfigService.paginatedSearchOptions
.pipe( .pipe(
map((options: PaginatedSearchOptions) => options.pagination), map((options: PaginatedSearchOptions) => options.pagination),
@@ -110,5 +119,16 @@ export class DsDynamicLookupRelationSelectionTabComponent {
); );
}) })
); );
this.currentPagination$ = this.paginationService.getCurrentPagination(this.searchConfigService.paginationID, this.initialPagination);
}
/**
* Method to reset the route when the tab is opened to make sure no strange pagination issues appears
*/
resetRoute() {
this.paginationService.updateRoute(this.searchConfigService.paginationID, {
page: 1,
pageSize: 5
});
} }
} }