RED-10034: More performance improvements
This commit is contained in:
Adina Țeudan
parent
671c44438d
commit
9fabb7223a
@ -1,29 +1,31 @@
|
||||
<div
|
||||
*ngIf="noSelection && changesTooltip"
|
||||
[matTooltip]="changesTooltip"
|
||||
class="chip"
|
||||
matTooltipClass="multiline"
|
||||
matTooltipPosition="above"
|
||||
>
|
||||
<mat-icon [svgIcon]="'red:redaction-changes'"></mat-icon>
|
||||
</div>
|
||||
@if (_noSelection() && _changesTooltip()) {
|
||||
<div [matTooltip]="_changesTooltip()" class="chip" matTooltipClass="multiline" matTooltipPosition="above">
|
||||
<mat-icon [svgIcon]="'red:redaction-changes'"></mat-icon>
|
||||
</div>
|
||||
}
|
||||
|
||||
<ng-container *ngIf="noSelection && engines">
|
||||
<div #trigger="cdkOverlayOrigin" (mouseout)="isPopoverOpen = false" (mouseover)="isPopoverOpen = true" cdkOverlayOrigin class="chip">
|
||||
<mat-icon *ngFor="let engine of engines" [svgIcon]="engine.icon"></mat-icon>
|
||||
@if (_noSelection() && _engines()) {
|
||||
<div
|
||||
#trigger="cdkOverlayOrigin"
|
||||
(mouseout)="_isPopoverOpen.set(false)"
|
||||
(mouseover)="_isPopoverOpen.set(true)"
|
||||
cdkOverlayOrigin
|
||||
class="chip"
|
||||
>
|
||||
<mat-icon *ngFor="let engine of _engines()" [svgIcon]="engine.icon"></mat-icon>
|
||||
</div>
|
||||
|
||||
<ng-template
|
||||
[cdkConnectedOverlayOffsetY]="-8"
|
||||
[cdkConnectedOverlayOpen]="isPopoverOpen"
|
||||
[cdkConnectedOverlayOpen]="_isPopoverOpen()"
|
||||
[cdkConnectedOverlayOrigin]="trigger"
|
||||
cdkConnectedOverlay
|
||||
>
|
||||
<div class="popover">
|
||||
<div *ngFor="let engine of engines" class="flex-align-items-center">
|
||||
<div *ngFor="let engine of _engines()" class="flex-align-items-center">
|
||||
<mat-icon [svgIcon]="engine.icon"></mat-icon>
|
||||
<span [innerHTML]="engine.description | translate : engine.translateParams"></span>
|
||||
<span [innerHTML]="engine.description | translate: engine.translateParams"></span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, inject, Input, OnChanges } from '@angular/core';
|
||||
import { Component, computed, inject, input, signal } from '@angular/core';
|
||||
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
||||
import { KeysOf } from '@iqser/common-ui/lib/utils';
|
||||
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
|
||||
@ -33,30 +33,27 @@ const changesProperties: KeysOf<AnnotationWrapper>[] = [
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'redaction-annotation-details [annotation]',
|
||||
selector: 'redaction-annotation-details',
|
||||
templateUrl: './annotation-details.component.html',
|
||||
styleUrls: ['./annotation-details.component.scss'],
|
||||
standalone: true,
|
||||
imports: [NgIf, MatTooltip, MatIcon, CdkOverlayOrigin, NgForOf, CdkConnectedOverlay, TranslateModule],
|
||||
})
|
||||
export class AnnotationDetailsComponent implements OnChanges {
|
||||
@Input() annotation: ListItem<AnnotationWrapper>;
|
||||
isPopoverOpen = false;
|
||||
engines: Engine[];
|
||||
changesTooltip: string;
|
||||
noSelection: boolean;
|
||||
export class AnnotationDetailsComponent {
|
||||
readonly annotation = input.required<ListItem<AnnotationWrapper>>();
|
||||
protected readonly _isPopoverOpen = signal(false);
|
||||
protected readonly _engines = computed(() => this.#extractEngines(this.annotation().item).filter(engine => engine.show));
|
||||
private readonly _translateService = inject(TranslateService);
|
||||
private readonly _multiSelectService = inject(MultiSelectService);
|
||||
protected readonly _changesTooltip = computed(() => {
|
||||
const annotation = this.annotation().item;
|
||||
const changes = changesProperties.filter(key => annotation[key]);
|
||||
|
||||
getChangesTooltip(): string | undefined {
|
||||
const changes = changesProperties.filter(key => this.annotation.item[key]);
|
||||
|
||||
if (!changes.length && !this.annotation.item.engines?.includes(LogEntryEngines.MANUAL)) {
|
||||
if (!changes.length && !annotation.engines?.includes(LogEntryEngines.MANUAL)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const details = [];
|
||||
if (this.annotation.item.engines?.includes(LogEntryEngines.MANUAL)) {
|
||||
if (annotation.engines?.includes(LogEntryEngines.MANUAL)) {
|
||||
details.push(this._translateService.instant(_('annotation-changes.added-locally')));
|
||||
}
|
||||
|
||||
@ -66,13 +63,9 @@ export class AnnotationDetailsComponent implements OnChanges {
|
||||
|
||||
const header = this._translateService.instant(_('annotation-changes.header'));
|
||||
return [header, ...details.map(change => `• ${change}`)].join('\n');
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
this.engines = this.#extractEngines(this.annotation.item).filter(engine => engine.show);
|
||||
this.changesTooltip = this.getChangesTooltip();
|
||||
this.noSelection = !this.annotation.isSelected || this._multiSelectService.inactive();
|
||||
}
|
||||
});
|
||||
private readonly _multiSelectService = inject(MultiSelectService);
|
||||
protected readonly _noSelection = computed(() => !this.annotation().isSelected || this._multiSelectService.inactive());
|
||||
|
||||
#extractEngines(annotation: AnnotationWrapper): Engine[] {
|
||||
return [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="active-bar-marker"></div>
|
||||
|
||||
<div [class.removed]="annotation().item.isRemoved" class="annotation">
|
||||
<div #annotationDiv [class.removed]="annotation().item.isRemoved" class="annotation">
|
||||
<redaction-annotation-card
|
||||
[annotation]="annotation().item"
|
||||
[isSelected]="annotation().isSelected"
|
||||
@ -24,13 +24,15 @@
|
||||
}
|
||||
|
||||
@if (multiSelectService.inactive()) {
|
||||
<div class="actions">
|
||||
<redaction-annotation-actions
|
||||
[actionsHelpModeKey]="actionsHelpModeKey()"
|
||||
[annotations]="[annotation().item]"
|
||||
[canPerformAnnotationActions]="pdfProxyService.canPerformActions()"
|
||||
></redaction-annotation-actions>
|
||||
</div>
|
||||
@defer (on hover(annotationDiv)) {
|
||||
<div class="actions">
|
||||
<redaction-annotation-actions
|
||||
[actionsHelpModeKey]="actionsHelpModeKey()"
|
||||
[annotations]="[annotation().item]"
|
||||
[canPerformAnnotationActions]="pdfProxyService.canPerformActions()"
|
||||
></redaction-annotation-actions>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ import { AnnotationReferencesService } from '../../services/annotation-reference
|
||||
import { AnnotationsListingService } from '../../services/annotations-listing.service';
|
||||
import { MultiSelectService } from '../../services/multi-select.service';
|
||||
import { ViewModeService } from '../../services/view-mode.service';
|
||||
import { NgForOf, NgIf } from '@angular/common';
|
||||
import { JsonPipe, NgForOf, NgIf } from '@angular/common';
|
||||
import { HighlightsSeparatorComponent } from '../highlights-separator/highlights-separator.component';
|
||||
import { AnnotationWrapperComponent } from '../annotation-wrapper/annotation-wrapper.component';
|
||||
import { AnnotationReferencesListComponent } from '../annotation-references-list/annotation-references-list.component';
|
||||
@ -21,7 +21,7 @@ import { AnnotationReferencesListComponent } from '../annotation-references-list
|
||||
templateUrl: './annotations-list.component.html',
|
||||
styleUrls: ['./annotations-list.component.scss'],
|
||||
standalone: true,
|
||||
imports: [NgForOf, NgIf, HighlightsSeparatorComponent, AnnotationWrapperComponent, AnnotationReferencesListComponent],
|
||||
imports: [NgForOf, NgIf, HighlightsSeparatorComponent, AnnotationWrapperComponent, AnnotationReferencesListComponent, JsonPipe],
|
||||
})
|
||||
export class AnnotationsListComponent extends HasScrollbarDirective {
|
||||
readonly annotations = input.required<ListItem<AnnotationWrapper>[]>();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user