[ADF-1404] Data Column enhancements for Document List (#2220)

* support 'timeAgo' format for data-column

* file size column type and bug fixes

* readme updates

* location column type

* readme fixes

* update unit tests

* file size pipe tests

ng2-components/ng2-alfresco-documentlist/README.md

@@ -441,7 +441,7 @@ Here's the list of available properties you can define for a Data Column definit
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
-| type | string (text\|image\|date) | text | Value type |
+| type | string | text | Value type |
 | format | string | | Value format (if supported by components), for example format of the date |
 | sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header |
 | title | string | | Display title of the column, typically used for column headers |
@@ -450,6 +450,18 @@ Here's the list of available properties you can define for a Data Column definit
 | class | string | | Additional CSS class to be applied to column (header and cells) |
 | formatTooltip | Function | | Custom tooltip formatter function. |
 
+### Column Types
+
+The DataColumn `type` property can take one of the following values:
+
+- text
+- image
+- date
+- fileSize
+- location
+
+### Underlying node object
+
 DocumentList component assigns an instance of `MinimalNode` type (`alfresco-js-api`) as a data context of each row.
 
 ```js
@@ -493,24 +505,54 @@ Here's a short example:
 </adf-document-list>
 ```
 
-## Column definition
-
-Properties:
-
-| Name | Type | Default | Description
-| --- | --- | --- | --- |
-| title | string | | Column title |
-| sr-title | string | | Screen reader title, used only when `title` is empty |
-| key | string | | Column source key, example: `createdByUser.displayName` |
-| sortable | boolean | false | Toggle sorting ability via column header clicks |
-| class | string | | CSS class list, example: `full-width ellipsis-cell` |
-| type | string | text | Column type, text\|date\|number |
-| format | string | | Value format pattern |
-| template | `TemplateRef<any>` | | Column template |
+### Date Column
 
 For `date` column type the [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) formatting is used.
 For a full list of available `format` values please refer to [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) documentation.
 
+ADF also supports additional `timeAgo` value for the `format` property.
+That triggers the date values to be rendered using popular ["Time from now"](https://momentjs.com/docs/#/displaying/fromnow/) format.
+
+### Location Column
+
+This column is used to display a clickable location link pointing to the parent path of the node.
+
+You are going to use it with custom navigation or when displaying content from the sources like:
+
+- Sites
+- Shared Links
+- Recent Files
+- Favorites
+- Trashcan
+
+or any other location that needs nagivating to the node parent folder easily.
+
+Note that the parent node is evaluated automatically,
+the generated link will be pointing to URL based on the `format` property value with the node `id` value appended:
+
+```text
+/<format>/:id
+```
+
+For example:
+
+```html
+<data-column
+    key="path"
+    type="location"
+    format="/files"
+    title="Location">
+</data-column>
+```
+
+All links rendered in the column above will have an address mapped to `/files`:
+
+```text
+/files/node-1-id
+/files/node-2-id
+...
+```
+
 ### Column Template
 
 It is possible to provide custom column/cell template that may contain other Angular components or HTML elements:

ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts

@@ -17,7 +17,7 @@
 
 import { DatePipe } from '@angular/common';
 import { MinimalNode, MinimalNodeEntity, NodePaging } from 'alfresco-js-api';
-import { ObjectUtils } from 'ng2-alfresco-core';
+import { ObjectUtils, TimeAgoPipe } from 'ng2-alfresco-core';
 import { DataColumn, DataRow, DataSorting, DataTableAdapter } from 'ng2-alfresco-datatable';
 import { PermissionStyleModel } from './../models/permissions-style.model';
 import { DocumentListService } from './../services/document-list.service';
@@ -27,8 +27,6 @@ export class ShareDataTableAdapter implements DataTableAdapter {
     ERR_ROW_NOT_FOUND: string = 'Row not found';
     ERR_COL_NOT_FOUND: string = 'Column not found';
 
-    DEFAULT_DATE_FORMAT: string = 'medium';
-
     private sorting: DataSorting;
     private rows: DataRow[];
     private columns: DataColumn[];
@@ -81,13 +79,11 @@ export class ShareDataTableAdapter implements DataTableAdapter {
         }
 
         if (col.type === 'date') {
-            let datePipe = new DatePipe('en-US');
-            let format = col.format || this.DEFAULT_DATE_FORMAT;
             try {
-                let result = datePipe.transform(value, format);
+                const result =  this.formatDate(col, value);
                 return dataRow.cacheValue(col.key, result);
             } catch (err) {
-                console.error(`Error parsing date ${value} to format ${format}`);
+                console.error(`Error parsing date ${value} to format ${col.format}`);
                 return 'Error';
             }
         }
@@ -129,6 +125,21 @@ export class ShareDataTableAdapter implements DataTableAdapter {
         return dataRow.cacheValue(col.key, value);
     }
 
+    formatDate(col: DataColumn, value: any): string {
+        if (col.type === 'date') {
+            const format = col.format || 'medium';
+            if (format === 'timeAgo') {
+                const timeAgoPipe = new TimeAgoPipe();
+                return timeAgoPipe.transform(value);
+            } else {
+                const datePipe = new DatePipe('en-US');
+                return datePipe.transform(value, format);
+            }
+        }
+
+        return value;
+    }
+
     getSorting(): DataSorting {
         return this.sorting;
     }