Configurable columns for document list

- thumbnail, displayName and all other columns (except actions) are now
configurable
- support for default set of columns if no custom defined
refs #51

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

@@ -2,12 +2,6 @@
     <div class="row">
         <div class="col-md-2">
             <ul class="list-unstyled">
-                <li>
-                    <label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
-                        <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="thumbnails">
-                        <span class="mdl-checkbox__label">Thumbnails</span>
-                    </label>
-                </li>
                 <li>
                     <label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
                         <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" [(ngModel)]="breadcrumb">
@@ -29,13 +23,15 @@
             </ul>
         </div>
         <div class="col-md-10">
-            <alfresco-document-list #list
+            <alfresco-document-list
-                                    [thumbnails]="thumbnails"
+                    #list
-                                    [breadcrumb]="breadcrumb"
+                    [breadcrumb]="breadcrumb"
-                                    [navigate]="navigation"
+                    [navigate]="navigation"
-                                    folder-icon=""
+                    folder-icon=""
-                                    (itemClick)="onItemClick($event)">
+                    (itemClick)="onItemClick($event)">
                 <content-columns>
+                    <content-column source="$thumbnail"></content-column>
+                    <content-column title="Display Name" source="displayName" class="full-width name-column"></content-column>
                     <content-column title="Created By" source="createdBy"></content-column>
                     <content-column title="Created On" source="createdOn"></content-column>
                 </content-columns>

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

@@ -32,10 +32,8 @@ declare let __moduleName:string;
     providers: [DOCUMENT_LIST_PROVIDERS]
 })
 export class FilesComponent {
-    thumbnails: boolean = true;
     breadcrumb: boolean = false;
     navigation: boolean = true;
-
     events: any[] = [];
     
     constructor(documentActions: DocumentActionsService) {

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

@@ -11,39 +11,23 @@
     cursor: pointer;
 }
 
-:host .content-header {
+:host .parent-folder-link { cursor: pointer; }
+:host .parent-folder-link > td { text-align: left; }
+
+:host .folder-row-cell,
+:host .document-row-cell {
+    cursor: pointer;
+}
+
+:host .folder-row-cell.name-column,
+:host .document-row-cell.name-column {
     font-size: 15px;
 }
 
-:host .content-header:hover {
+:host .folder-row-cell.name-column:hover,
+:host .document-row-cell.name-column:hover {
     text-decoration: underline;
     cursor: pointer;
 }
 
-:host .parent-folder-link { cursor: pointer; }
-:host .parent-folder-link > td { text-align: left; }
-:host .folder-row-cell { cursor: pointer; }
-
 :host .breadcrumb { margin-bottom: 4px; }
-
-:host .folder-icon {
-    float: left;
-    margin-right: 10px;
-    font-size: 4em;
-}
-
-:host .file-icon {
-    width: 52px;
-    height: 52px;
-    float: left;
-    margin-right: 10px;
-}
-
-:host .document-header {
-    font-size: 24px;
-    line-height: 32px;
-}
-
-:host .document-header:hover {
-    text-decoration: underline;
-}

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

@@ -14,17 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { OnInit, EventEmitter, AfterViewChecked } from 'angular2/core';
+import { OnInit, EventEmitter, AfterContentInit, AfterViewChecked } from 'angular2/core';
 import { AlfrescoService } from './../services/alfresco.service';
 import { FolderEntity, DocumentEntity } from './../models/document-library.model';
 import { ContentActionModel } from './../models/content-action.model';
 import { ContentColumnModel } from './../models/content-column.model';
-export declare class DocumentList implements OnInit, AfterViewChecked {
+export declare class DocumentList implements OnInit, AfterViewChecked, AfterContentInit {
     private _alfrescoService;
     navigate: boolean;
     breadcrumb: boolean;
     folderIcon: string;
-    thumbnails: boolean;
     itemClick: EventEmitter<any>;
     rootFolder: {
         name: string;
@@ -39,6 +38,7 @@ export declare class DocumentList implements OnInit, AfterViewChecked {
     canNavigateParent(): boolean;
     constructor(_alfrescoService: AlfrescoService);
     ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngAfterViewChecked(): void;
     getContentActions(target: string, type: string): ContentActionModel[];
     onNavigateParentClick($event: any): void;
@@ -49,4 +49,5 @@ export declare class DocumentList implements OnInit, AfterViewChecked {
     executeContentAction(document: DocumentEntity, action: ContentActionModel): void;
     private getItemPath(item);
     private displayFolderContent(path);
+    private setupDefaultColumns();
 }

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

@@ -7,19 +7,15 @@
 <table *ngIf="folder" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
     <thead>
     <tr>
-        <!-- Thumbnails -->
+        <!-- Columns -->
-        <th *ngIf="thumbnails"></th>
+        <th class="mdl-data-table__cell--non-numeric {{col.cssClass}}" *ngFor="#col of columns">{{col.title}}</th>
-        <!-- Name -->
-        <th class="mdl-data-table__cell--non-numeric full-width">Name</th>
-        <!-- Custom columns -->
-        <th class="mdl-data-table__cell--non-numeric" *ngFor="#col of columns">{{col.title}}</th>
         <!-- Actions -->
         <th></th>
     </tr>
     </thead>
     <tbody>
     <tr class="parent-folder-link" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)">
-        <td [attr.colspan]="3 + columns?.length">
+        <td [attr.colspan]="1 + columns?.length">
             <button class="mdl-button mdl-js-button mdl-button--icon"
                     (click)="onNavigateParentClick($event)">
                 <i class="material-icons">arrow_upward</i>
@@ -28,40 +24,23 @@
     </tr>
 
     <tr *ngFor="#content of folder.items; #idx = index">
-        <!-- Thumbnails: folder -->
+        <!-- Columns -->
-        <td *ngIf="thumbnails && content.isFolder">
+        <td *ngFor="#col of columns" [ngSwitch]="col.source"
-            <i class="material-icons folder-thumbnail"
+            class="mdl-data-table__cell--non-numeric {{content.isFolder ? 'folder-row-cell' : 'document-row-cell'}} {{col.cssClass}}"
-               (click)="onItemClick(content, $event)">{{folderIcon || 'folder_open'}}</i>
-        </td>
-
-        <!-- Thumbnails: document -->
-        <td *ngIf="thumbnails && !content.isFolder">
-            <img *ngIf="thumbnails" class="document-thumbnail"
-                 alt=""
-                 src="{{getDocumentThumbnailUrl(content)}}"
-                 (click)="onItemClick(content, $event)">
-        </td>
-
-        <!-- Name: folder -->
-        <td *ngIf="content.isFolder" class="mdl-data-table__cell--non-numeric folder-row-cell"
             (click)="onItemClick(content, $event)">
-            <span class="content-header">
+            <div *ngSwitchWhen="'$thumbnail'">
-                {{content.displayName}}
+                <div *ngIf="content.isFolder">
+                    <i class="material-icons folder-thumbnail">{{folderIcon || 'folder_open'}}</i>
+                </div>
+                <div *ngIf="!content.isFolder">
+                    <img class="document-thumbnail" alt="" src="{{getDocumentThumbnailUrl(content)}}">
+                </div>
+            </div>
+            <span *ngSwitchDefault>
+                {{content[col.source]}}
             </span>
         </td>
 
-        <!-- Name: document -->
-        <td *ngIf="!content.isFolder" class="mdl-data-table__cell--non-numeric" >
-            <span class="content-header" (click)="onItemClick(content, $event)">
-                {{content.displayName}}
-            </span>
-        </td>
-
-        <!-- Custom columns -->
-        <td *ngFor="#col of columns" class="mdl-data-table__cell--non-numeric {{col.cssClass}}">
-            {{content[col.source]}}
-        </td>
-
         <!-- Actions: folder -->
         <td *ngIf="content.isFolder">
             <!-- action buttons -->

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

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-System.register(['angular2/core', './../services/alfresco.service'], function(exports_1, context_1) {
+System.register(['angular2/core', './../services/alfresco.service', './../models/content-column.model'], function(exports_1, context_1) {
     "use strict";
     var __moduleName = context_1 && context_1.id;
     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -26,7 +26,7 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
     var __metadata = (this && this.__metadata) || function (k, v) {
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
     };
-    var core_1, alfresco_service_1;
+    var core_1, alfresco_service_1, content_column_model_1;
     var DocumentList;
     return {
         setters:[
@@ -35,6 +35,9 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
             },
             function (alfresco_service_1_1) {
                 alfresco_service_1 = alfresco_service_1_1;
+            },
+            function (content_column_model_1_1) {
+                content_column_model_1 = content_column_model_1_1;
             }],
         execute: function() {
             DocumentList = (function () {
@@ -42,7 +45,6 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
                     this._alfrescoService = _alfrescoService;
                     this.navigate = true;
                     this.breadcrumb = false;
-                    this.thumbnails = true;
                     this.itemClick = new core_1.EventEmitter();
                     this.rootFolder = {
                         name: 'Document Library',
@@ -62,6 +64,11 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
                     this.route.push(this.rootFolder);
                     this.displayFolderContent(this.rootFolder.path);
                 };
+                DocumentList.prototype.ngAfterContentInit = function () {
+                    if (!this.columns || this.columns.length === 0) {
+                        this.setupDefaultColumns();
+                    }
+                };
                 DocumentList.prototype.ngAfterViewChecked = function () {
                     // workaround for MDL issues with dynamic components
                     if (componentHandler) {
@@ -144,6 +151,18 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
                         .getFolder(path)
                         .subscribe(function (folder) { return _this.folder = folder; }, function (error) { return _this.errorMessage = error; });
                 };
+                DocumentList.prototype.setupDefaultColumns = function () {
+                    var thumbnailCol = new content_column_model_1.ContentColumnModel();
+                    thumbnailCol.source = '$thumbnail';
+                    var nameCol = new content_column_model_1.ContentColumnModel();
+                    nameCol.title = 'Name';
+                    nameCol.source = 'displayName';
+                    nameCol.cssClass = 'full-width name-column';
+                    this.columns = [
+                        thumbnailCol,
+                        nameCol
+                    ];
+                };
                 __decorate([
                     core_1.Input(), 
                     __metadata('design:type', Boolean)
@@ -156,10 +175,6 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
                     core_1.Input('folder-icon'), 
                     __metadata('design:type', String)
                 ], DocumentList.prototype, "folderIcon", void 0);
-                __decorate([
-                    core_1.Input(), 
-                    __metadata('design:type', Boolean)
-                ], DocumentList.prototype, "thumbnails", void 0);
                 __decorate([
                     core_1.Output(), 
                     __metadata('design:type', core_1.EventEmitter)

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

@@ -1 +1 @@
-{"version":3,"file":"document-list.js","sourceRoot":"","sources":["document-list.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"document-list.js","sourceRoot":"","sources":["document-list.ts"],"names":[],"mappings":"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"}

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

@@ -21,6 +21,7 @@ import {
     Input,
     Output,
     EventEmitter,
+    AfterContentInit,
     AfterViewChecked
 } from 'angular2/core';
 import {AlfrescoService} from './../services/alfresco.service';
@@ -38,12 +39,11 @@ declare let __moduleName:string;
     templateUrl: './document-list.html',
     providers: [AlfrescoService]
 })
-export class DocumentList implements OnInit, AfterViewChecked {
+export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit {
 
     @Input() navigate: boolean = true;
     @Input() breadcrumb: boolean = false;
     @Input('folder-icon') folderIcon: string;
-    @Input() thumbnails: boolean = true;
 
     @Output() itemClick: EventEmitter<any> = new EventEmitter();
 
@@ -75,6 +75,12 @@ export class DocumentList implements OnInit, AfterViewChecked {
         this.displayFolderContent(this.rootFolder.path);
     }
 
+    ngAfterContentInit() {
+        if (!this.columns || this.columns.length === 0) {
+            this.setupDefaultColumns();
+        }
+    }
+
     ngAfterViewChecked() {
         // workaround for MDL issues with dynamic components
         if (componentHandler) {
@@ -174,4 +180,19 @@ export class DocumentList implements OnInit, AfterViewChecked {
                 error => this.errorMessage = <any>error
             );
     }
+
+    private setupDefaultColumns() {
+        let thumbnailCol = new ContentColumnModel();
+        thumbnailCol.source = '$thumbnail';
+
+        let nameCol = new ContentColumnModel();
+        nameCol.title = 'Name';
+        nameCol.source = 'displayName';
+        nameCol.cssClass = 'full-width name-column';
+
+        this.columns = [
+            thumbnailCol,
+            nameCol
+        ];
+    }
 }

ng2-components/ng2-alfresco-login/demo/app/app.component.js

@@ -49,9 +49,10 @@ System.register(['angular2/core', 'ng2-alfresco-login/ng2-alfresco-login', 'angu
                     router_1.RouteConfig([
                         { path: '/', name: 'Login', component: ng2_alfresco_login_1.AlfrescoLoginComponent, useAsDefault: true }
                     ]), 
-                    __metadata('design:paramtypes', [ng2_alfresco_login_2.AlfrescoAuthenticationService, router_1.Router, services_1.AlfrescoSettingsService])
+                    __metadata('design:paramtypes', [(typeof (_a = typeof ng2_alfresco_login_2.AlfrescoAuthenticationService !== 'undefined' && ng2_alfresco_login_2.AlfrescoAuthenticationService) === 'function' && _a) || Object, router_1.Router, (typeof (_b = typeof services_1.AlfrescoSettingsService !== 'undefined' && services_1.AlfrescoSettingsService) === 'function' && _b) || Object])
                 ], AppComponent);
                 return AppComponent;
+                var _a, _b;
             }());
             exports_1("AppComponent", AppComponent);
         }

ng2-components/ng2-alfresco-login/demo/app/app.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAgBA;gBAEI,sBAAmB,IAAkC,EAClC,MAAa,EACpB,uBAA+C;oBAFxC,SAAI,GAAJ,IAAI,CAA8B;oBAClC,WAAM,GAAN,MAAM,CAAO;oBAE5B,uBAAuB,CAAC,IAAI,GAAG,4BAA4B,CAAC;gBAEhE,CAAC;gBAED,sCAAe,GAAf,UAAgB,MAAM;oBAClB,OAAO,CAAC,GAAG,CAAC,wCAAwC,GAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACvE,CAAC;gBAED,oCAAa,GAAb,UAAc,MAAM;oBAChB,OAAO,CAAC,GAAG,CAAC,sCAAsC,GAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACrE,CAAC;gBAxBL;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,QAAQ;wBAClB,QAAQ,EAAE,yHAAyH;wBACnI,UAAU,EAAE,CAAC,0BAAiB,EAAE,2CAAsB,CAAC;qBAC1D,CAAC;oBAED,oBAAW,CAAC;wBACT,EAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,2CAAsB,EAAE,YAAY,EAAE,IAAI,EAAC;qBACpF,CAAC;;gCAAA;gBAkBF,mBAAC;YAAD,CAAC,AAjBD,IAiBC;YAjBD,uCAiBC,CAAA"}
+{"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAgBA;gBAEI,sBAAmB,IAAkC,EAClC,MAAa,EACpB,uBAA+C;oBAFxC,SAAI,GAAJ,IAAI,CAA8B;oBAClC,WAAM,GAAN,MAAM,CAAO;oBAE5B,uBAAuB,CAAC,IAAI,GAAG,4BAA4B,CAAC;gBAEhE,CAAC;gBAED,sCAAe,GAAf,UAAgB,MAAM;oBAClB,OAAO,CAAC,GAAG,CAAC,wCAAwC,GAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACvE,CAAC;gBAED,oCAAa,GAAb,UAAc,MAAM;oBAChB,OAAO,CAAC,GAAG,CAAC,sCAAsC,GAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACrE,CAAC;gBAxBL;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,QAAQ;wBAClB,QAAQ,EAAE,yHAAyH;wBACnI,UAAU,EAAE,CAAC,0BAAiB,EAAE,2CAAsB,CAAC;qBAC1D,CAAC;oBAED,oBAAW,CAAC;wBACT,EAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,2CAAsB,EAAE,YAAY,EAAE,IAAI,EAAC;qBACpF,CAAC;;gCAAA;gBAkBF,mBAAC;;YAAD,CAAC,AAjBD,IAiBC;YAjBD,uCAiBC,CAAA"}