icon type for columns (#1902)

- new 'icon' type for columns to render internal icons
- enable attachment list in the demo shell

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -72,10 +72,10 @@
                         </activiti-task-details>
                         <hr>
                         <h5>Attachments</h5>
-                        <!--<adf-task-attachment-list *ngIf="currentTaskId"-->
+                        <adf-task-attachment-list *ngIf="currentTaskId"
-                          <!--[taskId]="currentTaskId"-->
+                          [taskId]="currentTaskId"
-                          <!--(attachmentClick)="onAttachmentClick($event)">-->
+                          (attachmentClick)="onAttachmentClick($event)">
-                        <!--</adf-task-attachment-list>-->
+                        </adf-task-attachment-list>
                     </div>
                 </div>
             </div>

ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html

@@ -5,7 +5,7 @@
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)">
     <data-columns>
-        <data-column key="icon" type="image" srTitle="Thumbnail" [sortable]="false"></data-column>
+        <data-column key="icon" type="icon" srTitle="Thumbnail" [sortable]="false"></data-column>
         <data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>
         <data-column key="created" type="date" format="shortDate" title="Date"></data-column>
     </data-columns>

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -65,8 +65,14 @@
                         <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}}"
+                            alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                            src="{{data.getValue(row, col)}}"
+                            src="{{ data.getValue(row, col) }}"
+                            (error)="onImageLoadingError($event)">
+                    </div>
+                    <div *ngSwitchCase="'icon'" class="cell-value">
+                        <img 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)">

ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts

@@ -25,6 +25,33 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
     private _sorting: DataSorting;
     private _rows: DataRow[];
     private _columns: DataColumn[];
+    private icons: string[] = [
+        'empty_doc_lib.svg',
+        'ft_ic_archive.svg',
+        'ft_ic_audio.svg',
+        'ft_ic_database.svg',
+        'ft_ic_document.svg',
+        'ft_ic_ebook.svg',
+        'ft_ic_folder.svg',
+        'ft_ic_folder_empty.svg',
+        'ft_ic_form.svg',
+        'ft_ic_google_docs.svg',
+        'ft_ic_google_drawings.svg',
+        'ft_ic_google_forms.svg',
+        'ft_ic_google_sheets.svg',
+        'ft_ic_google_slides.svg',
+        'ft_ic_miscellaneous.svg',
+        'ft_ic_ms_excel.svg',
+        'ft_ic_ms_powerpoint.svg',
+        'ft_ic_ms_word.svg',
+        'ft_ic_pdf.svg',
+        'ft_ic_presentation.svg',
+        'ft_ic_raster_image.svg',
+        'ft_ic_spreadsheet.svg',
+        'ft_ic_vector_image.svg',
+        'ft_ic_video.svg',
+        'ft_ic_website.svg'
+    ];
 
     selectedRow: DataRow;
 
@@ -111,16 +138,12 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
             }
         }
 
-        if (col.type === 'image') {
+        if (col.type === 'icon') {
-
+            const iconName = row.getValue(col.key);
-            if (col.key === 'icon') {
+            if (this.icons.indexOf(iconName) > -1) {
-
+                return this.getImagePath(iconName);
-                let icon = this.getImagePath(row.getValue('icon'));
-                if (icon) {
-                    return icon;
-                }
-                return this.getImagePath('ft_ic_miscellaneous.svg');
             }
+            return this.getImagePath('ft_ic_miscellaneous.svg');
         }
 
         return value;