#164 column types, date formatting

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

@@ -17,7 +17,7 @@
         </empty-folder-content>
         -->
         <content-columns>
-            <content-column source="$thumbnail"></content-column>
+            <content-column source="$thumbnail" type="image"></content-column>
             <content-column
                     title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                     source="name"
@@ -35,7 +35,9 @@
             </content-column>
             <content-column
                     title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
-                    source="createdAt">
+                    source="createdAt"
+                    type="date"
+                    format="medium">
             </content-column>
         </content-columns>
 

ng2-components/ng2-alfresco-documentlist/demo/src/main.ts

@@ -50,7 +50,7 @@ import {
             <alfresco-document-list #doclist>
 
                 <content-columns>
-                    <content-column source="$thumbnail"></content-column>
+                    <content-column source="$thumbnail" type="image"></content-column>
                     <content-column
                             title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                             source="name"
@@ -66,7 +66,9 @@ import {
                     </content-column>
                     <content-column
                             title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
-                            source="createdAt">
+                            source="createdAt"
+                            type="date"
+                            format="medium">
                     </content-column>
                 </content-columns>
                 <content-actions>

ng2-components/ng2-alfresco-documentlist/src/components/content-column.ts

@@ -40,6 +40,12 @@ export class ContentColumn implements OnInit, OnChanges {
     @Input('class')
     cssClass: string;
 
+    @Input()
+    type: string = 'text';
+
+    @Input()
+    format: string;
+
     model: ContentColumnModel;
 
     constructor(private list: ContentColumnList) {
@@ -51,7 +57,9 @@ export class ContentColumn implements OnInit, OnChanges {
             title: this.title,
             srTitle: this.srTitle,
             source: this.source,
-            cssClass: this.cssClass
+            cssClass: this.cssClass,
+            type: this.type,
+            format: this.format
         });
 
         if (!this.model.srTitle && this.model.source === '$thumbnail') {

ng2-components/ng2-alfresco-documentlist/src/components/document-list.css

@@ -23,6 +23,8 @@
     cursor: pointer;
 }
 
+:host .cell-value {}
+
 :host .folder-row-cell.name-column,
 :host .document-row-cell.name-column {
     font-size: 15px;

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -36,15 +36,18 @@
     <tr *ngFor="#content of folder.list.entries; #idx = index"
         [attr.data-automation-id]="getObjectValue(content.entry, 'name')">
         <!-- Columns -->
-        <td *ngFor="#col of columns" [ngSwitch]="col.source"
+        <td *ngFor="#col of columns" [ngSwitch]="col.type"
             class="mdl-data-table__cell--non-numeric {{content.entry.isFolder ? 'folder-row-cell' : 'document-row-cell'}} {{col.cssClass}}"
             (click)="onItemClick(content, $event)"
             [attr.data-automation-id]="col.source === '$thumbnail' ? '$thumbnail' : col.source + '_' + getObjectValue(content.entry, col.source)">
-            <div *ngSwitchWhen="'$thumbnail'">
+            <div *ngSwitchWhen="'image'" class="cell-value">
-                <img class="thumbnail" src="{{getThumbnailUrl(content)}}">
+                <img class="thumbnail" [src]="getCellValue(content, col)">
             </div>
-            <span *ngSwitchDefault>
+            <span *ngSwitchWhen="'date'" class="cell-value">
-                {{getObjectValue(content.entry, col.source)}}
+                {{ getCellValue(content, col) }}
+            </span>
+            <span *ngSwitchDefault class="cell-value">
+                {{ getCellValue(content, col) }}
             </span>
         </td>
 

ng2-components/ng2-alfresco-documentlist/src/components/document-list.spec.ts

@@ -59,7 +59,9 @@ describe('DocumentList', () => {
             title: 'title',
             source: 'source',
             cssClass: 'css',
-            srTitle: ''
+            srTitle: '',
+            type: 'text',
+            format: ''
         };
         documentList.columns.push(column);
 

ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts

@@ -26,6 +26,7 @@ import {
     OnChanges,
     TemplateRef
 } from 'angular2/core';
+import { DatePipe } from 'angular2/common';
 import { AlfrescoService } from './../services/alfresco.service';
 import { MinimalNodeEntity, NodePaging } from './../models/document-library.model';
 import { ContentActionModel } from './../models/content-action.model';
@@ -345,12 +346,36 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
         return target;
     }
 
+    getCellValue(row: MinimalNodeEntity, col: ContentColumnModel): any {
+        let value = this._getObjectValueRaw(row.entry, col.source);
+
+        if (col.type === 'date') {
+            let datePipe = new DatePipe();
+            if (datePipe.supports(value)) {
+                // TODO: to be changed to plan non-array value post angular2 beta.15
+                let pattern = col.format ? [col.format] : [];
+                return datePipe.transform(value, pattern);
+            }
+        }
+
+        if (col.type === 'image') {
+
+            if (col.source === '$thumbnail') {
+                return this.getThumbnailUrl(row);
+            }
+
+        }
+
+        return value;
+    }
+
     /**
      * Creates a set of predefined columns.
      */
     setupDefaultColumns(): void {
         let thumbnailCol = new ContentColumnModel();
         thumbnailCol.source = '$thumbnail';
+        thumbnailCol.type = 'image';
 
         let nameCol = new ContentColumnModel();
         nameCol.title = 'Name';

ng2-components/ng2-alfresco-documentlist/src/models/content-column.model.ts

@@ -20,6 +20,8 @@ export class ContentColumnModel {
     srTitle: string;
     source: string;
     cssClass: string;
+    type: string = 'text'; // text|date|image|number
+    format: string = 'medium';
 
     constructor(obj?: any) {
         if (obj) {
@@ -27,6 +29,8 @@ export class ContentColumnModel {
             this.srTitle = obj.srTitle;
             this.source = obj.source;
             this.cssClass = obj.cssClass;
+            this.type = obj.type || 'text';
+            this.format = obj.format;
         }
     }
 }