#82 separate page for data table within demo app

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

@@ -8,7 +8,8 @@
             <div class="mdl-layout-spacer"></div>
             <!-- Navigation. We hide it in small screens. -->
             <nav class="mdl-navigation mdl-layout--large-screen-only">
-                <a class="mdl-navigation__link" data-automation-id="files" href="" [routerLink]="['Files']">Files</a>
+                <a class="mdl-navigation__link" data-automation-id="files" href="" [routerLink]="['Files']">DocumentList</a>
+                <a class="mdl-navigation__link" data-automation-id="datatable" href="" [routerLink]="['DataTable']">DataTable</a>
                 <a class="mdl-navigation__link" data-automation-id="uploader" href="" [routerLink]="['Uploader']">Uploader</a>
                 <a class="mdl-navigation__link" data-automation-id="login" href="" [routerLink]="['Login']">Login</a>
             </nav>
@@ -43,7 +44,8 @@
     <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">Alfresco</span>
         <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" href="" [routerLink]="['Files']" (click)="hideDrawer()">Files</a>
+            <a class="mdl-navigation__link" href="" [routerLink]="['Files']" (click)="hideDrawer()">DocumentList</a>
+            <a class="mdl-navigation__link" href="" [routerLink]="['DataTable']" (click)="hideDrawer()">DataTable</a>
             <a class="mdl-navigation__link" href="" [routerLink]="['Uploader']" (click)="hideDrawer()">Uploader</a>
             <a class="mdl-navigation__link" href="" [routerLink]="['Login']" (click)="hideDrawer()">Login</a>
         </nav>

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

@@ -14,16 +14,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Component} from 'angular2/core';
+
-import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import { Component } from 'angular2/core';
-import {AlfrescoAuthenticationService} from 'ng2-alfresco-login/ng2-alfresco-login';
+import { Router, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
-import {MDL} from 'ng2-alfresco-core/material';
+import { AlfrescoAuthenticationService } from 'ng2-alfresco-login/ng2-alfresco-login';
-import {FilesComponent} from './components/files/files.component';
+import { MDL } from 'ng2-alfresco-core/material';
-import {AlfrescoLoginComponent} from 'ng2-alfresco-login/ng2-alfresco-login';
+import { FilesComponent } from './components/files/files.component';
-import {AuthRouterOutlet} from './components/router/AuthRouterOutlet';
+import { AlfrescoLoginComponent } from 'ng2-alfresco-login/ng2-alfresco-login';
-import {AlfrescoSettingsService} from 'ng2-alfresco-core/services';
+import { AuthRouterOutlet } from './components/router/AuthRouterOutlet';
-import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
+import { AlfrescoSettingsService } from 'ng2-alfresco-core/services';
-import {UploadButtonComponent} from 'ng2-alfresco-upload/ng2-alfresco-upload';
+import { TranslateService, TranslatePipe } from 'ng2-translate/ng2-translate';
+import { UploadButtonComponent } from 'ng2-alfresco-upload/ng2-alfresco-upload';
+import { DataTableDemoComponent } from './components/datatable/datatable-demo.component';
 
 declare var document: any;
 
@@ -36,26 +38,27 @@ declare var document: any;
 @RouteConfig([
     {path: '/home', name: 'Home', component: FilesComponent},
     {path: '/', name: 'Files', component: FilesComponent, useAsDefault: true},
+    {path: '/datatable', name: 'DataTable', component: DataTableDemoComponent},
     {path: '/uploader', name: 'Uploader', component: UploadButtonComponent},
     {path: '/login', name: 'Login', component: AlfrescoLoginComponent}
 ])
 export class AppComponent {
     translate: TranslateService;
 
-    constructor(public auth:AlfrescoAuthenticationService,
+    constructor(public auth: AlfrescoAuthenticationService,
-                public router:Router,
+                public router: Router,
                 translate: TranslateService,
-                alfrescoSettingsService:AlfrescoSettingsService) {
+                alfrescoSettingsService: AlfrescoSettingsService) {
         alfrescoSettingsService.host = 'http://192.168.99.100:8080';
 
         this.translationInit(translate);
     }
 
-    isActive(instruction:any[]):boolean {
+    isActive(instruction: any[]): boolean {
         return this.router.isRouteActive(this.router.generate(instruction));
     }
 
-    isLoggedIn():boolean {
+    isLoggedIn(): boolean {
         return this.auth.isLoggedIn();
     }
 
@@ -67,7 +70,7 @@ export class AppComponent {
             );
     }
 
-    changeLanguage(lang:string) {
+    changeLanguage(lang: string) {
         this.translate.use(lang);
     }
 

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

@@ -0,0 +1,72 @@
+<div class="p-10">
+    <alfresco-datatable>
+        <data-columns>
+            <data-column source="$thumbnail"></data-column>
+            <data-column
+                    title="{{'DATATABLE.COLUMNS.DISPLAY_NAME' | translate}}"
+                    source="name"
+                    class="full-width name-column">
+            </data-column>
+            <data-column
+                    title="{{'DATATABLE.COLUMNS.CREATED_BY' | translate}}"
+                    source="createdByUser.displayName">
+            </data-column>
+            <data-column
+                    title="{{'DATATABLE.COLUMNS.CREATED_ON' | translate}}"
+                    source="createdAt">
+            </data-column>
+        </data-columns>
+        <data-actions>
+            <data-action
+                    target="folder"
+                    type="button"
+                    icon="delete"
+                    handler="system1">
+            </data-action>
+            <data-action
+                    target="folder"
+                    type="menu"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
+                    handler="system1">
+            </data-action>
+            <data-action
+                    target="folder"
+                    type="menu"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
+                    (execute)="myFolderAction1($event)">
+            </data-action>
+
+            <!-- document actions -->
+            <data-action
+                    target="document"
+                    type="button"
+                    icon="account_circle"
+                    handler="my-handler">
+            </data-action>
+            <data-action
+                    target="document"
+                    type="button"
+                    icon="cloud_download"
+                    handler="download">
+            </data-action>
+            <data-action
+                    target="document"
+                    type="menu"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
+                    handler="download">
+            </data-action>
+            <data-action
+                    target="document"
+                    type="menu"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
+                    handler="system2">
+            </data-action>
+            <data-action
+                    target="document"
+                    type="menu"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
+                    (execute)="myCustomAction1($event)">
+            </data-action>
+        </data-actions>
+    </alfresco-datatable>
+</div>

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

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component} from 'angular2/core';
+import {TranslatePipe} from 'ng2-translate/ng2-translate';
+
+import {
+    ALFRESCO_DATATABLE_DIRECTIVES,
+    ALFRESCO_DATATABLE_PROVIDERS
+} from 'ng2-alfresco-datatable/ng2-alfresco-datatable';
+
+declare let __moduleName:string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'datatable-demo',
+    templateUrl: './datatable-demo.component.html',
+    directives: [ALFRESCO_DATATABLE_DIRECTIVES],
+    providers: [ALFRESCO_DATATABLE_PROVIDERS],
+    pipes: [TranslatePipe]
+})
+export class DataTableDemoComponent {
+    
+}

demo-shell-ng2/app/css/app.css

@@ -2,4 +2,8 @@
 
 .p-10 {
     padding: 10px;
-}
+}
+
+.m-10 {
+    margin: 10px;
+}

demo-shell-ng2/i18n/en.json

@@ -18,5 +18,24 @@
                 "CUSTOM": "Custom action"
             }
         }
+    },
+
+    "DATATABLE": {
+        "COLUMNS": {
+            "DISPLAY_NAME": "Display name",
+            "CREATED_BY": "Created by",
+            "CREATED_ON": "Created on"
+        },
+        "ACTIONS": {
+            "FOLDER": {
+                "SYSTEM_1": "System folder action 1",
+                "CUSTOM": "Custom folder action"
+            },
+            "DOCUMENT": {
+                "DOWNLOAD": "Download",
+                "SYSTEM_2": "System document action 2",
+                "CUSTOM": "Custom action"
+            }
+        }
     }
 }

demo-shell-ng2/index.html

@@ -37,6 +37,7 @@
             map: {
                 'ng2-uploader': 'node_modules/ng2-uploader',
                 'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
+                'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable',
                 'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist',
                 'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
                 'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
@@ -48,27 +49,14 @@
                     format: 'register',
                     defaultExtension: 'js'
                 },
-                'ng2-uploader': {
+                'ng2-uploader': {defaultExtension: 'js'},
-                    defaultExtension: 'js'
+                'ng2-alfresco-core': {defaultExtension: 'js'},
-                },
+                'ng2-alfresco-documentlist': {defaultExtension: 'js'},
-                'ng2-alfresco-core': {
+                'ng2-alfresco-login': {defaultExtension: 'js'},
-                    defaultExtension: 'js'
+                'ng2-alfresco-upload': {defaultExtension: 'js'},
-                },
+                'ng2-alfresco-datatable': {defaultExtension: 'js'},
-                'ng2-alfresco-documentlist': {
+                'ng2-translate': {defaultExtension: 'js'},
-                    defaultExtension: 'js'
+                'rxjs': {defaultExtension: 'js'}
-                },
-                'ng2-alfresco-login': {
-                    defaultExtension: 'js'
-                },
-                'ng2-alfresco-upload': {
-                    defaultExtension: 'js'
-                },
-                'ng2-translate': {
-                    defaultExtension: 'js'
-                },
-                'rxjs': {
-                    defaultExtension: 'js'
-                }
             }
         });
         System.import('app/main')