#9 binding custom columns to nested properties

allow binding columns to bested properties and property paths, i.e.
“item.location.path”

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

@@ -7,6 +7,10 @@
                     source="displayName"
                     class="full-width name-column">
             </content-column>
+            <content-column
+                    title="{{'DOCUMENT_LIST.COLUMNS.SITE' | translate}}"
+                    source="location.site">
+            </content-column>
             <content-column
                     title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                     source="createdBy">

demo-shell-ng2/i18n/en.json

@@ -11,6 +11,7 @@
     "DOCUMENT_LIST": {
         "COLUMNS": {
             "DISPLAY_NAME": "Display name",
+            "SITE": "Site",
             "CREATED_BY": "Created by",
             "CREATED_ON": "Created on"
         },

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

@@ -89,6 +89,34 @@ A custom set of columns can look like the following:
 
 ![Custom columns](docs/assets/custom-columns.png)
 
+
+Binding to nested properties is also supported. Assuming you have the node structure similar to following:
+
+```json
+{
+    "nodeRef": "workspace://SpacesStore/8bb36efb-c26d-4d2b-9199-ab6922f53c28",
+    "nodeType": "cm:folder",
+    "type": "folder",
+    "location": {
+        "repositoryId": "552ca13e-458b-4566-9f3e-d0f9c92facff",
+        "site": "swsdp",
+        "siteTitle": "Sample: Web Site Design Project"
+    }
+}
+```
+
+the binding value for the Site column to display location site will be `location.site`:
+
+```html
+<alfresco-document-list ...>
+    <content-columns>
+        <content-column source="$thumbnail"></content-column>
+        <content-column title="Name" source="displayName" class="full-width name-column"></content-column>
+        <content-column title="Site" source="location.site"></content-column>
+    </content-columns>
+</alfresco-document-list>
+```
+
 ### Custom folder icon
 
 Document list element exposes `folder-icon` property that accepts a CSS class list value with

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

@@ -49,5 +49,13 @@ export declare class DocumentList implements OnInit, AfterViewChecked, AfterCont
     executeContentAction(node: DocumentEntity, action: ContentActionModel): void;
     displayFolderContent(path: any): void;
     getNodePath(node: DocumentEntity): string;
+    /**
+     * Gets a value from an object by composed key
+     * documentList.getObjectValue({ item: { nodeType: 'cm:folder' }}, 'item.nodeType') ==> 'cm:folder'
+     * @param target
+     * @param key
+     * @returns {string}
+     */
+    getObjectValue(target: any, key: string): string;
     setupDefaultColumns(): void;
 }

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

@@ -42,7 +42,7 @@
                 </div>
             </div>
             <span *ngSwitchDefault>
-                {{content[col.source]}}
+                {{getObjectValue(content, col.source)}}
             </span>
         </td>
 

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

@@ -163,6 +163,32 @@ System.register(['angular2/core', './../services/alfresco.service', './../models
                     }
                     return null;
                 };
+                /**
+                 * Gets a value from an object by composed key
+                 * documentList.getObjectValue({ item: { nodeType: 'cm:folder' }}, 'item.nodeType') ==> 'cm:folder'
+                 * @param target
+                 * @param key
+                 * @returns {string}
+                 */
+                DocumentList.prototype.getObjectValue = function (target, key) {
+                    var keys = key.split('.');
+                    key = '';
+                    do {
+                        key += keys.shift();
+                        var value = target[key];
+                        if (value !== undefined && (typeof value === 'object' || !keys.length)) {
+                            target = value;
+                            key = '';
+                        }
+                        else if (!keys.length) {
+                            target = undefined;
+                        }
+                        else {
+                            key += '.';
+                        }
+                    } while (keys.length);
+                    return target;
+                };
                 DocumentList.prototype.setupDefaultColumns = function () {
                     var thumbnailCol = new content_column_model_1.ContentColumnModel();
                     thumbnailCol.source = '$thumbnail';

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

@@ -197,6 +197,33 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
         return null;
     }
 
+    /**
+     * Gets a value from an object by composed key
+     * documentList.getObjectValue({ item: { nodeType: 'cm:folder' }}, 'item.nodeType') ==> 'cm:folder'
+     * @param target
+     * @param key
+     * @returns {string}
+     */
+    getObjectValue(target: any, key: string): string {
+        let keys = key.split('.');
+        key = '';
+
+        do {
+            key += keys.shift();
+            let value = target[key];
+            if (value !== undefined && (typeof value === 'object' || !keys.length)) {
+                target = value;
+                key = '';
+            } else if (!keys.length) {
+                target = undefined;
+            } else {
+                key += '.';
+            }
+        } while (keys.length);
+
+        return target;
+    }
+
     setupDefaultColumns(): void {
         let thumbnailCol = new ContentColumnModel();
         thumbnailCol.source = '$thumbnail';