Skip to content

Commit

Permalink
115046: Fixed performance issues in virtual metadata popup
Browse files Browse the repository at this point in the history
  • Loading branch information
alexandrevryghem committed May 30, 2024
1 parent df80c33 commit 58bcb9b
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@
</button>
</div>
<div class="modal-body">
<ng-container *ngFor="let item of items; trackBy: trackItem">
<div *ngVar="(isSelectedVirtualMetadataItem(item) | async) as selected"
(click)="setSelectedVirtualMetadataItem(item, !selected)"
<ng-container *ngFor="let itemDTO of itemDTOs$ | async; trackBy: trackItemDTO">
<div *ngVar="(itemDTO.isSelectedVirtualMetadataItem$ | async) as selected"
(click)="setSelectedVirtualMetadataItem(itemDTO.item, !selected)"
class="item d-flex flex-row">
<div class="m-2">
<label>
<input class="select" type="checkbox" [checked]="selected">
</label>
</div>
<div class="flex-column">
<ds-listable-object-component-loader [object]="item">
<ds-listable-object-component-loader [object]="itemDTO.item">
</ds-listable-object-component-loader>
<div *ngFor="let metadata of virtualMetadata.get(item.uuid)">
<div *ngFor="let metadata of virtualMetadata.get(itemDTO.item.uuid)">
<div class="font-weight-bold">
{{metadata.metadataField}}
</div>
Expand All @@ -31,7 +31,7 @@
<div class="d-flex flex-row-reverse m-2">
<button class="btn btn-primary save"
(click)="save.emit()">
<i class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
<i aria-hidden="true" class="fas fa-save"></i> {{ 'item.edit.metadata.save-button' | translate }}
</button>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ describe('VirtualMetadataComponent', () => {
comp.url = url;
comp.leftItem = item;
comp.rightItem = relatedItem;
comp.ngOnChanges();
comp.relationshipId = relationshipId;

fixture.detectChanges();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,17 @@ import {
EventEmitter,
Inject,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
} from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import {
BehaviorSubject,
Observable,
Subscription,
} from 'rxjs';

import {
APP_CONFIG,
Expand All @@ -21,9 +27,18 @@ import {
import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
import { Item } from '../../../core/shared/item.model';
import { MetadataValue } from '../../../core/shared/metadata.models';
import { hasValue } from '../../../shared/empty.util';
import { ListableObjectComponentLoaderComponent } from '../../../shared/object-collection/shared/listable-object/listable-object-component-loader.component';
import { VarDirective } from '../../../shared/utils/var.directive';

interface ItemDTO {

item: Item;

isSelectedVirtualMetadataItem$: Observable<boolean>;

}

@Component({
selector: 'ds-virtual-metadata',
templateUrl: './virtual-metadata.component.html',
Expand All @@ -42,7 +57,7 @@ import { VarDirective } from '../../../shared/utils/var.directive';
* The component is shown when a relationship is marked to be deleted.
* Each item has a checkbox to indicate whether its virtual metadata should be saved as real metadata.
*/
export class VirtualMetadataComponent implements OnInit {
export class VirtualMetadataComponent implements OnInit, OnChanges, OnDestroy {

/**
* The current url of this page
Expand Down Expand Up @@ -83,9 +98,9 @@ export class VirtualMetadataComponent implements OnInit {
/**
* Get an array of the left and the right item of the relationship to be deleted.
*/
get items() {
return [this.leftItem, this.rightItem];
}
itemDTOs$: BehaviorSubject<ItemDTO[]> = new BehaviorSubject([]);

subs: Subscription[] = [];

public virtualMetadata: Map<string, VirtualMetadata[]> = new Map<string, VirtualMetadata[]>();

Expand Down Expand Up @@ -137,14 +152,33 @@ export class VirtualMetadataComponent implements OnInit {
/**
* Prevent unnecessary rerendering so fields don't lose focus
*/
trackItem(index, item: Item) {
return item && item.uuid;
trackItemDTO(index, itemDTO: ItemDTO): string {
return itemDTO?.item?.uuid;
}

ngOnInit(): void {
this.items.forEach((item) => {
this.virtualMetadata.set(item.uuid, this.getVirtualMetadata(item));
});
this.subs.push(this.itemDTOs$.subscribe((itemDTOs: ItemDTO[]) => {
itemDTOs.forEach((itemDTO: ItemDTO) => this.virtualMetadata.set(itemDTO.item.uuid, this.getVirtualMetadata(itemDTO.item)));
}));
}

ngOnChanges(): void {
if (hasValue(this.leftItem) && hasValue(this.rightItem)) {
this.itemDTOs$.next([
{
item: this.leftItem,
isSelectedVirtualMetadataItem$: this.isSelectedVirtualMetadataItem(this.leftItem),
},
{
item: this.rightItem,
isSelectedVirtualMetadataItem$: this.isSelectedVirtualMetadataItem(this.rightItem),
},
]);
}
}

ngOnDestroy(): void {
this.subs.forEach((sub: Subscription) => sub.unsubscribe());
}
}

Expand Down

0 comments on commit 58bcb9b

Please sign in to comment.