From 2d8d31aed4911d63c16f23df9a51f8dae48c2c94 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Thu, 25 Aug 2016 12:49:36 +0100
Subject: [PATCH 1/2] #601 support for fallback thumbnails

---
 .../app/components/files/files.component.ts   |  2 +-
 .../datatable/datatable.component.html        |  6 ++++-
 .../datatable/datatable.component.spec.ts     | 25 +++++++++++++++++++
 .../datatable/datatable.component.ts          |  9 +++++++
 .../src/components/document-list.html         |  1 +
 5 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/demo-shell-ng2/app/components/files/files.component.ts b/demo-shell-ng2/app/components/files/files.component.ts
index 388918f659..32dcb35b62 100644
--- a/demo-shell-ng2/app/components/files/files.component.ts
+++ b/demo-shell-ng2/app/components/files/files.component.ts
@@ -120,7 +120,7 @@ export class FilesComponent implements OnInit {
         return this.acceptedFilesTypeShow;
     }
 
-    toggleVersioning(){
+    toggleVersioning() {
         this.versioning = !this.versioning;
         return this.versioning;
     }
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index 3c726bdd2c..537efb6226 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -47,7 +47,11 @@
             [context-menu]="getContextMenuActions(row, col)">
             <div *ngSwitchCase="'image'" class="cell-value">
                 <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
-                <img *ngIf="!isIconValue(row, col)" class="image-cell" alt="{{iconAltTextKey(data.getValue(row, col))|translate}}" src="{{data.getValue(row, col)}}">
+                <img *ngIf="!isIconValue(row, col)"
+                     class="image-cell"
+                     alt="{{iconAltTextKey(data.getValue(row, col))|translate}}"
+                     src="{{data.getValue(row, col)}}"
+                     (error)="onImageLoadingError($event)">
             </div>
             <div *ngSwitchCase="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
                 {{data.getValue(row, col)}}
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
index e605788a8f..7aafdf8e7e 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
@@ -320,4 +320,29 @@ describe('DataTable', () => {
         expect(dataTable.isColumnSorted(<DataColumn> {key: 'column_1'}, 'asc')).toBeTruthy();
         expect(dataTable.isColumnSorted(<DataColumn> {key: 'column_2'}, 'desc')).toBeFalsy();
     });
+
+    it('should replace image source with fallback thumbnail on error', () => {
+        let event = <any> {
+            srcElement: {
+                src: 'missing-image'
+            }
+        };
+
+        dataTable.fallbackThumbnail = '<fallback>';
+        dataTable.onImageLoadingError(event);
+        expect(event.srcElement.src).toBe(dataTable.fallbackThumbnail);
+    });
+
+    it('should replace image source only when fallback available', () => {
+        const originalSrc = 'missing-image';
+        let event = <any> {
+            srcElement: {
+                src: originalSrc
+            }
+        };
+
+        dataTable.fallbackThumbnail = null;
+        dataTable.onImageLoadingError(event);
+        expect(event.srcElement.src).toBe(originalSrc);
+    });
 });
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
index f72b200561..00f28523d3 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
@@ -63,6 +63,9 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
     @Input()
     actions: boolean = false;
 
+    @Input()
+    fallbackThumbnail: string;
+
     @Output()
     rowClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
 
@@ -155,6 +158,12 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
         }
     }
 
+    onImageLoadingError(event: Event) {
+        if (event && this.fallbackThumbnail) {
+            event.srcElement.src = this.fallbackThumbnail;
+        }
+    }
+
     isIconValue(row: DataRow, col: DataColumn) {
         if (row && col) {
             let value = row.getValue(col.key);
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
index 5964792515..5a1f88de8e 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
@@ -2,6 +2,7 @@
     [data]="data"
     [actions]="contentActions"
     [multiselect]="multiselect"
+    [fallbackThumbnail]="baseComponentPath + '/img/ft_ic_miscellaneous.svg'"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"

From c3f5395190a13a96f0c03e67028b26a29254811b Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Thu, 25 Aug 2016 13:32:08 +0100
Subject: [PATCH 2/2] Fix typing issue

---
 .../src/components/datatable/datatable.component.ts            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
index 00f28523d3..f9387b8725 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
@@ -160,7 +160,8 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
 
     onImageLoadingError(event: Event) {
         if (event && this.fallbackThumbnail) {
-            event.srcElement.src = this.fallbackThumbnail;
+            let element = <any> event.srcElement;
+            element.src = this.fallbackThumbnail;
         }
     }