117287: Fixed UI freezing on withdrawn item pages

(cherry picked from commit 976ac7604b)
This commit is contained in:
Alexandre Vryghem
2024-10-29 17:36:33 +01:00
parent f0e9948992
commit 5dcc90c1cd
3 changed files with 22 additions and 9 deletions

View File

@@ -8,7 +8,7 @@
<span class="align-self-center">{{'item.alerts.withdrawn' | translate}}</span> <span class="align-self-center">{{'item.alerts.withdrawn' | translate}}</span>
<div class="gap-2 d-flex"> <div class="gap-2 d-flex">
<a routerLink="/home" class="btn btn-primary btn-sm">{{"404.link.home-page" | translate}}</a> <a routerLink="/home" class="btn btn-primary btn-sm">{{"404.link.home-page" | translate}}</a>
<a *ngIf="showReinstateButton$() | async" class="btn btn-primary btn-sm" (click)="openReinstateModal()">{{ 'item.alerts.reinstate-request' | translate}}</a> <a *ngIf="showReinstateButton$ | async" class="btn btn-primary btn-sm" (click)="openReinstateModal()">{{ 'item.alerts.reinstate-request' | translate}}</a>
</div> </div>
</div> </div>
</ds-alert> </ds-alert>

View File

@@ -161,7 +161,7 @@ describe('ItemAlertsComponent', () => {
(authorizationService.isAuthorized).and.returnValue(isAdmin$); (authorizationService.isAuthorized).and.returnValue(isAdmin$);
(correctionTypeDataService.findByItem).and.returnValue(correction$); (correctionTypeDataService.findByItem).and.returnValue(correction$);
expectObservable(component.showReinstateButton$()).toBe(expectedMarble, expectedValues); expectObservable(component.shouldShowReinstateButton()).toBe(expectedMarble, expectedValues);
}); });
}); });

View File

@@ -5,6 +5,8 @@ import {
import { import {
Component, Component,
Input, Input,
OnChanges,
SimpleChanges,
} from '@angular/core'; } from '@angular/core';
import { RouterLink } from '@angular/router'; import { RouterLink } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@@ -45,12 +47,17 @@ import {
/** /**
* Component displaying alerts for an item * Component displaying alerts for an item
*/ */
export class ItemAlertsComponent { export class ItemAlertsComponent implements OnChanges {
/** /**
* The Item to display alerts for * The Item to display alerts for
*/ */
@Input() item: Item; @Input() item: Item;
/**
* Whether the reinstate button should be shown
*/
showReinstateButton$: Observable<boolean>;
/** /**
* The AlertType enumeration * The AlertType enumeration
* @type {AlertType} * @type {AlertType}
@@ -58,18 +65,24 @@ export class ItemAlertsComponent {
public AlertTypeEnum = AlertType; public AlertTypeEnum = AlertType;
constructor( constructor(
private authService: AuthorizationDataService, protected authService: AuthorizationDataService,
private dsoWithdrawnReinstateModalService: DsoWithdrawnReinstateModalService, protected dsoWithdrawnReinstateModalService: DsoWithdrawnReinstateModalService,
private correctionTypeDataService: CorrectionTypeDataService, protected correctionTypeDataService: CorrectionTypeDataService,
) { ) {
} }
ngOnChanges(changes: SimpleChanges): void {
if (changes.item?.currentValue.withdrawn && this.showReinstateButton$) {
this.showReinstateButton$ = this.shouldShowReinstateButton();
}
}
/** /**
* Determines whether to show the reinstate button. * Determines whether to show the reinstate button.
* The button is shown if the user is not an admin and the item has a reinstate request. * The button is shown if the user is not an admin and the item has a reinstate request.
* @returns An Observable that emits a boolean value indicating whether to show the reinstate button. * @returns An Observable that emits a boolean value indicating whether to show the reinstate button.
*/ */
showReinstateButton$(): Observable<boolean> { shouldShowReinstateButton(): Observable<boolean> {
const correction$ = this.correctionTypeDataService.findByItem(this.item.uuid, true).pipe( const correction$ = this.correctionTypeDataService.findByItem(this.item.uuid, true).pipe(
getFirstCompletedRemoteData(), getFirstCompletedRemoteData(),
map((correctionTypeRD: RemoteData<PaginatedList<CorrectionType>>) => correctionTypeRD.hasSucceeded ? correctionTypeRD.payload.page : []), map((correctionTypeRD: RemoteData<PaginatedList<CorrectionType>>) => correctionTypeRD.hasSucceeded ? correctionTypeRD.payload.page : []),
@@ -78,8 +91,8 @@ export class ItemAlertsComponent {
return combineLatest([isAdmin$, correction$]).pipe( return combineLatest([isAdmin$, correction$]).pipe(
map(([isAdmin, correction]) => { map(([isAdmin, correction]) => {
return !isAdmin && correction.some((correctionType) => correctionType.topic === REQUEST_REINSTATE); return !isAdmin && correction.some((correctionType) => correctionType.topic === REQUEST_REINSTATE);
}, }),
)); );
} }
/** /**