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)">
{{asIconValue(row, col)}} - {{iconAltTextKey(data.getValue(row, col))|translate}} + {{iconAltTextKey(data.getValue(row, col))|translate}}
{{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( {key: 'column_1'}, 'asc')).toBeTruthy(); expect(dataTable.isColumnSorted( {key: 'column_2'}, 'desc')).toBeFalsy(); }); + + it('should replace image source with fallback thumbnail on error', () => { + let event = { + srcElement: { + src: 'missing-image' + } + }; + + dataTable.fallbackThumbnail = ''; + 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 = { + 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..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 @@ -63,6 +63,9 @@ export class DataTableComponent implements OnInit, AfterViewChecked { @Input() actions: boolean = false; + @Input() + fallbackThumbnail: string; + @Output() rowClick: EventEmitter = new EventEmitter(); @@ -155,6 +158,13 @@ export class DataTableComponent implements OnInit, AfterViewChecked { } } + onImageLoadingError(event: Event) { + if (event && this.fallbackThumbnail) { + let element = event.srcElement; + element.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)"