fixed issue with browse back button

This commit is contained in:
Michael Spalti
2023-01-20 11:34:26 -08:00
parent 055787ee55
commit f8d0dab747
5 changed files with 49 additions and 30 deletions

View File

@@ -3,7 +3,9 @@
<ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container> <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
<div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn> <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
<div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset"> <div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset">
<ds-themed-results-back-button [paginationConfig]="paginationConfig" [previousPage$]="previousPage$"></ds-themed-results-back-button> <ds-results-back-button [paginationConfig]="paginationConfig"
[previousPage$]="previousPage$"
[alwaysShowButton]=true></ds-results-back-button>
</div> </div>
<ds-viewable-collection <ds-viewable-collection
[config]="paginationConfig" [config]="paginationConfig"
@@ -18,7 +20,9 @@
<ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error> <ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error>
<div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0"> <div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0">
<div *ngIf="shouldDisplayResetButton$ |async" class="d-inline-block mb-4 reset"> <div *ngIf="shouldDisplayResetButton$ |async" class="d-inline-block mb-4 reset">
<ds-themed-results-back-button [paginationConfig]="paginationConfig" [previousPage$]="previousPage$" ></ds-themed-results-back-button> <ds-results-back-button [paginationConfig]="paginationConfig"
[previousPage$]="previousPage$"
[alwaysShowButton]=true></ds-results-back-button>
</div> </div>
<div class="alert alert-info w-100" role="alert"> <div class="alert alert-info w-100" role="alert">
{{'browse.empty' | translate}} {{'browse.empty' | translate}}

View File

@@ -1,4 +1,4 @@
<button *ngIf="showBackButton | async" class="btn btn-secondary btn-sm mb-2 ng-tns-c242-28" (click)="back()"> <button *ngIf="showBackButton" class="btn btn-secondary btn-sm mb-2 ng-tns-c242-28" (click)="back()">
<i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i> <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
{{this.buttonLabel | async}} {{this.buttonLabel | async}}
</button> </button>

View File

@@ -30,9 +30,17 @@ export class ResultsBackButtonComponent {
@Input() paginationConfig?: PaginationComponentOptions; @Input() paginationConfig?: PaginationComponentOptions;
/** /**
* Used to configure search in mirador. * Tells component to always show the back button.
* When not true the button is displayed based on
* the previous route.
*/ */
showBackButton: Observable<boolean>; @Input() alwaysShowButton?: boolean;
/**
* Always show back button when true regardless of
* previous route.
*/
showBackButton: boolean;
/** /**
* The button text * The button text
@@ -52,12 +60,21 @@ export class ResultsBackButtonComponent {
} else { } else {
this.buttonLabel = this.translateService.get('search.browse.item-back'); this.buttonLabel = this.translateService.get('search.browse.item-back');
} }
// Show the back to results button when the previous context was a search or browse list.
this.showBackButton = this.routeService.getPreviousUrl().pipe( if(this.alwaysShowButton) {
filter(url => /^(\/search|\/browse|\/collections|\/admin\/search|\/mydspace)/.test(url)), this.showBackButton = true;
take(1), }
map(() => true) else {
); // Show the back button when the previous route was a search or browse list.
// Include the button for admin search results and MyDspace.
this.routeService.getPreviousUrl().pipe(
filter(url => /^(\/search|\/browse|\/collections|\/admin\/search|\/mydspace)/.test(url)),
take(1),
map(() => true)
).subscribe(showButton => {
this.showBackButton = showButton;
});
}
} }
/** /**
@@ -72,7 +89,9 @@ export class ResultsBackButtonComponent {
this.routeService.getPreviousUrl().pipe( this.routeService.getPreviousUrl().pipe(
take(1) take(1)
).subscribe( ).subscribe(
(url => this.router.navigateByUrl(url)) (url => {
this.router.navigateByUrl(url)
})
); );
} }
} }

View File

@@ -11,10 +11,6 @@ import { BehaviorSubject } from 'rxjs';
}) })
export class ThemedResultsBackButtonComponent extends ThemedComponent<ResultsBackButtonComponent> { export class ThemedResultsBackButtonComponent extends ThemedComponent<ResultsBackButtonComponent> {
@Input() previousPage$?: BehaviorSubject<string>;
@Input() paginationConfig?: PaginationComponentOptions;
protected getComponentName(): string { protected getComponentName(): string {
return 'ResultsBackButtonComponent'; return 'ResultsBackButtonComponent';
} }

View File

@@ -81,20 +81,20 @@ const DECLARATIONS = [
]; ];
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
SharedModule, SharedModule,
RootModule, RootModule,
NavbarModule, NavbarModule,
SharedBrowseByModule, SharedBrowseByModule,
ResultsBackButtonModule, ResultsBackButtonModule,
ItemPageModule, ItemPageModule,
ItemSharedModule, ItemSharedModule,
], ],
declarations: DECLARATIONS, declarations: DECLARATIONS,
providers: [ providers: [
...ENTRY_COMPONENTS.map((component) => ({ provide: component })) ...ENTRY_COMPONENTS.map((component) => ({provide: component}))
], ],
}) })
/** /**
* This module is included in the main bundle that gets downloaded at first page load. So it should * This module is included in the main bundle that gets downloaded at first page load. So it should