[ACS-5089] performance improvements for Thumbnail Column (#3232)

This commit is contained in:
Denys Vuika
2023-05-25 16:14:05 +01:00
committed by GitHub
parent e2574560e8
commit 05991f8553
2 changed files with 30 additions and 14 deletions

View File

@@ -1,7 +1,2 @@
<mat-icon class="adf-datatable-selected" *ngIf="context.row.isSelected" svgIcon="selected"></mat-icon>
<img *ngIf="!context.row.isSelected"
class="adf-datatable-center-img-ie"
src="{{ getThumbnail(context) }}"
[alt]="getToolTip(context)"
[matTooltip]="getToolTip(context)">
<mat-icon class="adf-datatable-selected" *ngIf="isSelected" svgIcon="selected"></mat-icon>
<img *ngIf="!isSelected" class="adf-datatable-center-img-ie" [src]="thumbnailUrl" [alt]="tooltip" [matTooltip]="tooltip" />

View File

@@ -22,7 +22,7 @@
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation, inject } from '@angular/core';
import { TranslationService } from '@alfresco/adf-core';
@Component({
@@ -30,18 +30,39 @@ import { TranslationService } from '@alfresco/adf-core';
templateUrl: './thumbnail-column.component.html',
encapsulation: ViewEncapsulation.None
})
export class ThumbnailColumnComponent {
export class ThumbnailColumnComponent implements OnChanges {
private translation = inject(TranslationService);
@Input()
context: any;
constructor(private translation: TranslationService) {}
public thumbnailUrl?: string;
public tooltip?: string;
getThumbnail({ data, row, col }): string {
get isSelected(): boolean {
return !!this.context.row.isSelected;
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.context) {
const context = changes.context.currentValue;
if (context) {
this.thumbnailUrl = this.getThumbnail(context);
this.tooltip = this.getToolTip(context);
} else {
this.thumbnailUrl = null;
this.tooltip = null;
}
}
}
private getThumbnail({ data, row, col }): string {
return data.getValue(row, col);
}
getToolTip({ row }): string {
const user = row.node?.entry?.properties && row.node.entry.properties['cm:lockOwner'] && row.node.entry.properties['cm:lockOwner'].displayName;
return user ? `${this.translation.instant('APP.LOCKED_BY')} ${user}` : '';
private getToolTip({ row }): string {
const displayName = row.node?.entry?.properties?.['cm:lockOwner']?.displayName;
return displayName ? `${this.translation.instant('APP.LOCKED_BY')} ${displayName}` : '';
}
}