93665: fixes for post 7.2 and updated back button for browse by pages

This commit is contained in:
lotte
2022-08-19 11:05:08 +02:00
parent 27bb45b1bd
commit 606995881f
5 changed files with 73 additions and 20 deletions

View File

@@ -247,10 +247,12 @@ describe('BrowseByComponent', () => {
}); });
describe('back', () => { describe('back', () => {
it('should navigate back to the main browse page', () => { it('should navigate back to the main browse page', () => {
const id = 'test-pagination';
comp.back(); comp.back();
expect(paginationService.updateRoute).toHaveBeenCalledWith('test-pagination', {page: 1}, { expect(paginationService.updateRoute).toHaveBeenCalledWith(id, {page: 1}, {
value: null, value: null,
startsWith: null startsWith: null,
[id + '.return']: null
}); });
}); });
}); });

View File

@@ -1,10 +1,10 @@
import { Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Injector, Input, OnDestroy, OnInit, Output } from '@angular/core';
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 { PaginationComponentOptions } from '../pagination/pagination-component-options.model'; import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
import { fadeIn, fadeInOut } from '../animations/fade'; import { fadeIn, fadeInOut } from '../animations/fade';
import { combineLatest as observableCombineLatest, Observable } from 'rxjs'; import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
import { ListableObject } from '../object-collection/shared/listable-object.model'; import { ListableObject } from '../object-collection/shared/listable-object.model';
import { getStartsWithComponent, StartsWithType } from '../starts-with/starts-with-decorator'; import { getStartsWithComponent, StartsWithType } from '../starts-with/starts-with-decorator';
import { PaginationService } from '../../core/pagination/pagination.service'; import { PaginationService } from '../../core/pagination/pagination.service';
@@ -12,6 +12,7 @@ import { ViewMode } from '../../core/shared/view-mode.model';
import { RouteService } from '../../core/services/route.service'; import { RouteService } from '../../core/services/route.service';
import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators';
import { hasValue } from '../empty.util'; import { hasValue } from '../empty.util';
import { BBM_PAGINATION_ID } from '../../browse-by/browse-by-metadata-page/browse-by-metadata-page.component';
@Component({ @Component({
selector: 'ds-browse-by', selector: 'ds-browse-by',
@@ -25,7 +26,7 @@ import { hasValue } from '../empty.util';
/** /**
* Component to display a browse-by page for any ListableObject * Component to display a browse-by page for any ListableObject
*/ */
export class BrowseByComponent implements OnInit { export class BrowseByComponent implements OnInit, OnDestroy {
/** /**
* ViewMode that should be passed to {@link ListableObjectComponentLoaderComponent}. * ViewMode that should be passed to {@link ListableObjectComponentLoaderComponent}.
@@ -112,6 +113,16 @@ export class BrowseByComponent implements OnInit {
*/ */
shouldDisplayResetButton$: Observable<boolean>; shouldDisplayResetButton$: Observable<boolean>;
/**
* Page number of the previous page
*/
previousPage$ = new BehaviorSubject<string>('1');
/**
* Subscription that has to be unsubscribed from on destroy
*/
sub: Subscription;
public constructor(private injector: Injector, public constructor(private injector: Injector,
protected paginationService: PaginationService, protected paginationService: PaginationService,
private routeService: RouteService, private routeService: RouteService,
@@ -171,9 +182,20 @@ export class BrowseByComponent implements OnInit {
this.shouldDisplayResetButton$ = observableCombineLatest([startsWith$, value$]).pipe( this.shouldDisplayResetButton$ = observableCombineLatest([startsWith$, value$]).pipe(
map(([startsWith, value]) => hasValue(startsWith) || hasValue(value)) map(([startsWith, value]) => hasValue(startsWith) || hasValue(value))
); );
this.sub = this.routeService.getQueryParameterValue(this.paginationConfig.id + '.return').subscribe(this.previousPage$);
} }
/**
* Navigate back to the previous browse by page
*/
back() { back() {
this.paginationService.updateRoute(this.paginationConfig.id, {page: 1}, {value: null, startsWith: null}); const page = +this.previousPage$.value > 1 ? +this.previousPage$.value : 1;
this.paginationService.updateRoute(this.paginationConfig.id, {page: page}, {[this.paginationConfig.id + '.return']: null, value: null, startsWith: null});
}
ngOnDestroy(): void {
if (this.sub) {
this.sub.unsubscribe();
}
} }
} }

View File

@@ -1,5 +1,5 @@
<div class="d-flex flex-row"> <div class="d-flex flex-row">
<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[]" [queryParams]="queryParams" [queryParamsHandling]="'merge'" class="lead"> <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[]" [queryParams]="queryParams$ | async" [queryParamsHandling]="'merge'" class="lead">
{{object.value}} {{object.value}}
</a> </a>
<span *ngIf="linkType == linkTypes.None" class="lead"> <span *ngIf="linkType == linkTypes.None" class="lead">

View File

@@ -4,7 +4,9 @@ import { By } from '@angular/platform-browser';
import { TruncatePipe } from '../../utils/truncate.pipe'; import { TruncatePipe } from '../../utils/truncate.pipe';
import { BrowseEntryListElementComponent } from './browse-entry-list-element.component'; import { BrowseEntryListElementComponent } from './browse-entry-list-element.component';
import { BrowseEntry } from '../../../core/shared/browse-entry.model'; import { BrowseEntry } from '../../../core/shared/browse-entry.model';
import { PaginationService } from '../../../core/pagination/pagination.service';
import { RouteService } from '../../../core/services/route.service';
import { of as observableOf } from 'rxjs';
let browseEntryListElementComponent: BrowseEntryListElementComponent; let browseEntryListElementComponent: BrowseEntryListElementComponent;
let fixture: ComponentFixture<BrowseEntryListElementComponent>; let fixture: ComponentFixture<BrowseEntryListElementComponent>;
@@ -13,12 +15,28 @@ const mockValue: BrowseEntry = Object.assign(new BrowseEntry(), {
value: 'De Langhe Kristof' value: 'De Langhe Kristof'
}); });
describe('MetadataListElementComponent', () => { let paginationService;
let routeService;
const pageParam = 'bbm.page';
function init() {
paginationService = jasmine.createSpyObj('paginationService', {
getPageParam: pageParam
});
routeService = jasmine.createSpyObj('routeService', {
getQueryParameterValue: observableOf('1')
})
}
describe('BrowseEntryListElementComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
init();
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [BrowseEntryListElementComponent, TruncatePipe], declarations: [BrowseEntryListElementComponent, TruncatePipe],
providers: [ providers: [
{ provide: 'objectElementProvider', useValue: { mockValue } } { provide: 'objectElementProvider', useValue: { mockValue } },
{provide: PaginationService, useValue: paginationService},
{provide: RouteService, useValue: routeService},
], ],
schemas: [NO_ERRORS_SCHEMA] schemas: [NO_ERRORS_SCHEMA]

View File

@@ -7,6 +7,9 @@ import { listableObjectComponent } from '../../object-collection/shared/listable
import { PaginationService } from '../../../core/pagination/pagination.service'; import { PaginationService } from '../../../core/pagination/pagination.service';
import { Params } from '@angular/router'; import { Params } from '@angular/router';
import { BBM_PAGINATION_ID } from '../../../browse-by/browse-by-metadata-page/browse-by-metadata-page.component'; import { BBM_PAGINATION_ID } from '../../../browse-by/browse-by-metadata-page/browse-by-metadata-page.component';
import { RouteService } from 'src/app/core/services/route.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({ @Component({
selector: 'ds-browse-entry-list-element', selector: 'ds-browse-entry-list-element',
@@ -19,26 +22,34 @@ import { BBM_PAGINATION_ID } from '../../../browse-by/browse-by-metadata-page/br
*/ */
@listableObjectComponent(BrowseEntry, ViewMode.ListElement) @listableObjectComponent(BrowseEntry, ViewMode.ListElement)
export class BrowseEntryListElementComponent extends AbstractListableElementComponent<BrowseEntry> implements OnInit { export class BrowseEntryListElementComponent extends AbstractListableElementComponent<BrowseEntry> implements OnInit {
queryParams: Params; /**
* Emits the query parameters for the link of this browse entry list element
*/
queryParams$: Observable<Params>;
constructor(private paginationService: PaginationService) { constructor(private paginationService: PaginationService, private routeService: RouteService) {
super(); super();
} }
ngOnInit() { ngOnInit() {
this.queryParams = this.getQueryParams(); this.queryParams$ = this.getQueryParams();
} }
/** /**
* Get the query params to access the item page of this browse entry. * Get the query params to access the item page of this browse entry.
*/ */
private getQueryParams(): Params { private getQueryParams(): Observable<Params> {
const pageParamName = this.paginationService.getPageParam(BBM_PAGINATION_ID); const pageParamName = this.paginationService.getPageParam(BBM_PAGINATION_ID);
return this.routeService.getQueryParameterValue(pageParamName).pipe(
map((currentPage) => {
return { return {
value: this.object.value, value: this.object.value,
authority: !!this.object.authority ? this.object.authority : undefined, authority: !!this.object.authority ? this.object.authority : undefined,
startsWith: undefined, startsWith: undefined,
[pageParamName]: null, [pageParamName]: null,
[BBM_PAGINATION_ID + '.return']: currentPage
}; };
})
);
} }
} }