hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-17 23:13:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

115427: Fixed delete item page freezing when it has relationships

Browse Source 
(cherry picked from commit e6086e16ea)
This commit is contained in:
Alexandre Vryghem
2024-05-24 17:49:42 +02:00
committed by github-actions[bot]
parent a3a298f51e
commit 2843659416
2 changed files with 81 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/item-page/edit-item-page/item-delete/item-delete.component.html
View File

@@ -6,30 +6,29 @@
<p>{{descriptionMessage | translate}}</p>
<ds-modify-item-overview [item]="item"></ds-modify-item-overview>
<ng-container *ngVar="(types$ | async) as types">
<ng-container *ngVar="(typeDTOs$ | async) as types">
<div *ngIf="types && types.length > 0" class="mb-4">
{{'virtual-metadata.delete-item.info' | translate}}
<div *ngFor="let type of types" class="mb-4">
<div *ngVar="(isSelected(type) | async) as selected"
<div *ngFor="let typeDto of types" class="mb-4">
<div *ngVar="(typeDto.isSelected$ | async) as selected"
class="d-flex flex-row">
<div class="m-2" (click)="setSelected(type, !selected)">
<div class="m-2" (click)="setSelected(typeDto.relationshipType, !selected)">
<label>
<input type="checkbox" [checked]="selected">
<input type="checkbox" [checked]="selected" [disabled]="isDeleting$ | async">
</label>
</div>
<div class="flex-column flex-grow-1">
<h5 (click)="setSelected(type, !selected)">
{{getRelationshipMessageKey(getLabel(type) | async) | translate}}
<h5 (click)="setSelected(typeDto.relationshipType, !selected)">
{{getRelationshipMessageKey(typeDto.label$ | async) | translate}}
</h5>
<div *ngFor="let relationship of (getRelationships(type) | async)"
<div *ngFor="let relationshipDto of (typeDto.relationshipDTOs$ | async)"
class="d-flex flex-row">
<ng-container *ngVar="(getRelatedItem(relationship) | async) as relatedItem">
<ng-container *ngVar="(relationshipDto.relatedItem$ | async) as relatedItem">
<ds-listable-object-component-loader
*ngIf="relatedItem"
@@ -46,7 +45,7 @@
</div>
<ng-template #virtualMetadataModal>
<div>
<div class="thumb-font-1">
<div class="modal-header">
{{'virtual-metadata.delete-item.modal-head' | translate}}
<button type="button" class="close"
@@ -60,7 +59,7 @@
[object]="relatedItem"
[viewMode]="viewMode">
</ds-listable-object-component-loader>
<div *ngFor="let metadata of (getVirtualMetadata(relationship) | async)">
<div *ngFor="let metadata of (relationshipDto.virtualMetadata$ | async)">
<div>
<div class="font-weight-bold">
{{metadata.metadataField}}
@@ -87,10 +86,11 @@
</ng-container>
<div class="space-children-mr">
<button (click)="performAction()"
<button [disabled]="isDeleting$ | async" (click)="performAction()"
class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
</button>
<button [routerLink]="[itemPageRoute, 'edit']" class="btn btn-outline-secondary cancel">
<button [disabled]="isDeleting$ | async" [routerLink]="[itemPageRoute, 'edit']"
class="btn btn-outline-secondary cancel">
{{cancelMessage| translate}}
</button>
</div>

93
src/app/item-page/edit-item-page/item-delete/item-delete.component.ts
View File

@@ -1,3 +1,4 @@
// eslint-disable-next-line max-classes-per-file
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { defaultIfEmpty, filter, map, switchMap, take } from 'rxjs/operators';
import {
@@ -37,6 +38,34 @@ import { getItemEditRoute } from '../../item-page-routing-paths';
import { RemoteData } from '../../../core/data/remote-data';
import { NoContent } from '../../../core/shared/NoContent.model';
/**
* Data Transfer Object used to prevent the HTML template to call function returning Observables
*/
class RelationshipTypeDTO {
relationshipType: RelationshipType;
isSelected$: Observable<boolean>;
label$: Observable<string>;
relationshipDTOs$: Observable<RelationshipDTO[]>;
}
/**
* Data Transfer Object used to prevent the HTML template to call function returning Observables
*/
class RelationshipDTO {
relationship: Relationship;
relatedItem$: Observable<Item>;
virtualMetadata$: Observable<VirtualMetadata[]>;
}
@Component({
selector: 'ds-item-delete',
templateUrl: '../item-delete/item-delete.component.html'
@@ -64,7 +93,7 @@ export class ItemDeleteComponent
* A list of the relationship types for which this item has relations as an observable.
* The list doesn't contain duplicates.
*/
types$: BehaviorSubject<RelationshipType[]> = new BehaviorSubject([]);
typeDTOs$: BehaviorSubject<RelationshipTypeDTO[]> = new BehaviorSubject([]);
/**
* A map which stores the relationships of this item for each type as observable lists
@@ -93,6 +122,8 @@ export class ItemDeleteComponent
*/
private subs: Subscription[] = [];
public isDeleting$: BehaviorSubject<boolean> = new BehaviorSubject(false);
constructor(protected route: ActivatedRoute,
protected router: Router,
protected notificationsService: NotificationsService,
@@ -146,14 +177,25 @@ export class ItemDeleteComponent
}, [])
),
);
})
).subscribe((types: RelationshipType[]) => this.types$.next(types)));
}),
).subscribe((types: RelationshipType[]) => this.typeDTOs$.next(types.map((relationshipType: RelationshipType) => Object.assign(new RelationshipTypeDTO(), {
relationshipType: relationshipType,
isSelected$: this.isSelected(relationshipType),
label$: this.getLabel(relationshipType),
relationshipDTOs$: this.getRelationships(relationshipType).pipe(
map((relationships: Relationship[]) => relationships.map((relationship: Relationship) => Object.assign(new RelationshipDTO(), {
relationship: relationship,
relatedItem$: this.getRelatedItem(relationship),
virtualMetadata$: this.getVirtualMetadata(relationship),
} as RelationshipDTO))),
),
})))));
}
this.subs.push(this.types$.pipe(
this.subs.push(this.typeDTOs$.pipe(
take(1),
).subscribe((types) =>
this.objectUpdatesService.initialize(this.url, types, this.item.lastModified)
).subscribe((types: RelationshipTypeDTO[]) =>
this.objectUpdatesService.initialize(this.url, types.map((relationshipTypeDto: RelationshipTypeDTO) => relationshipTypeDto.relationshipType), this.item.lastModified),
));
}
@@ -326,34 +368,33 @@ export class ItemDeleteComponent
* @param selected whether the type should be selected
*/
setSelected(type: RelationshipType, selected: boolean): void {
this.objectUpdatesService.setSelectedVirtualMetadata(this.url, this.item.uuid, type.uuid, selected);
if (this.isDeleting$.value === false) {
this.objectUpdatesService.setSelectedVirtualMetadata(this.url, this.item.uuid, type.uuid, selected);
}
}
/**
* Perform the delete operation
*/
performAction() {
this.subs.push(this.types$.pipe(
switchMap((types) =>
performAction(): void {
this.isDeleting$.next(true);
this.subs.push(this.typeDTOs$.pipe(
switchMap((types: RelationshipTypeDTO[]) =>
combineLatest(
types.map((type) => this.isSelected(type))
types.map((type: RelationshipTypeDTO) => type.isSelected$),
).pipe(
defaultIfEmpty([]),
map((selection) => types.filter(
(type, index) => selection[index]
map((selection: boolean[]) => types.filter(
(type: RelationshipTypeDTO, index: number) => selection[index],
)),
map((selectedTypes) => selectedTypes.map((type) => type.id)),
)
map((selectedDtoTypes: RelationshipTypeDTO[]) => selectedDtoTypes.map((typeDto: RelationshipTypeDTO) => typeDto.relationshipType.id)),
),
),
switchMap((types) =>
this.itemDataService.delete(this.item.id, types).pipe(getFirstCompletedRemoteData())
)
).subscribe(
(rd: RemoteData<NoContent>) => {
this.notify(rd.hasSucceeded);
}
));
switchMap((types: string[]) => this.itemDataService.delete(this.item.id, types)),
getFirstCompletedRemoteData(),
).subscribe((rd: RemoteData<NoContent>) => {
this.notify(rd.hasSucceeded);
}));
}
/**
@@ -363,10 +404,10 @@ export class ItemDeleteComponent
notify(succeeded: boolean) {
if (succeeded) {
this.notificationsService.success(this.translateService.get('item.edit.' + this.messageKey + '.success'));
this.router.navigate(['']);
void this.router.navigate(['']);
} else {
this.notificationsService.error(this.translateService.get('item.edit.' + this.messageKey + '.error'));
this.router.navigate([getItemEditRoute(this.item)]);
void this.router.navigate([getItemEditRoute(this.item)]);
}
}