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

Alfresco · May 25, 2023 · 05991f8 · 05991f8
1 parent e257456
commit 05991f8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/.../src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.html b/.../src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.html
@@ -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" />
diff --git a/...nt/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.ts b/...nt/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.ts
@@ -22,26 +22,47 @@
  * 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({
   selector: 'aca-custom-thumbnail-column',
   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;
+
+  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;
+      }
+    }
+  }
 
-  getThumbnail({ data, row, col }): string {
+  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}` : '';
   }
 }