Merge pull request #618 from Alfresco/dev-denys-601

#601 support for fallback thumbnails

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)}}

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);
+    });
 });

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,13 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
         }
     }
 
+    onImageLoadingError(event: Event) {
+        if (event && this.fallbackThumbnail) {
+            let element = <any> event.srcElement;
+            element.src = this.fallbackThumbnail;
+        }
+    }
+
     isIconValue(row: DataRow, col: DataColumn) {
         if (row && col) {
             let value = row.getValue(col.key);

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)"