#101 datatable demo project

2025-05-12 17:04:57 +00:00 · 2016-05-26 11:07:06 +01:00 · 2016-05-26 11:07:06 +01:00 · a6d2df6004
commit a6d2df6004
parent 0600fc6491
11 changed files with 426 additions and 4 deletions
--- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.html
+++ b/demo-shell-ng2/app/components/datatable/datatable-demo.component.html
@ -8,6 +8,11 @@
    </label>
 </div>
 <div class="p-10">
+    <button
+            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+            (click)="reset()">
+        Reset to default
+    </button>
    <button
        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
        (click)="addRow()">
--- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts
+++ b/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts
@ -16,7 +16,6 @@
 */

 import { Component } from 'angular2/core';
-import { AlfrescoPipeTranslate } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
 import {
    ALFRESCO_DATATABLE_DIRECTIVES,
    ObjectDataTableAdapter, 
@ -31,8 +30,7 @@ declare let __moduleName: string;
    moduleId: __moduleName,
    selector: 'datatable-demo',
    templateUrl: './datatable-demo.component.html',
-    directives: [ALFRESCO_DATATABLE_DIRECTIVES],
-    pipes: [AlfrescoPipeTranslate]
+    directives: [ALFRESCO_DATATABLE_DIRECTIVES]
 })
 export class DataTableDemoComponent {

@ -46,6 +44,10 @@ export class DataTableDemoComponent {
    };

    constructor() {
+        this.reset();
+    }
+
+    reset() {
        this.data = new ObjectDataTableAdapter(
            [
                {id: 1, name: 'Name 1', createdBy: this._createdBy, icon: 'material-icons://folder_open'},
--- a/ng2-components/ng2-alfresco-datatable/demo/.gitignore
+++ b/ng2-components/ng2-alfresco-datatable/demo/.gitignore
@ -0,0 +1,5 @@
+node_modules
+.idea
+coverage
+dist
+typings
--- a/ng2-components/ng2-alfresco-datatable/demo/README.md
+++ b/ng2-components/ng2-alfresco-datatable/demo/README.md
@ -0,0 +1,13 @@
+# DataTable demo
+
+Install:
+
+```
+npm install
+```
+
+Run the project:
+
+```
+npm start
+```
--- a/ng2-components/ng2-alfresco-datatable/demo/index.html
+++ b/ng2-components/ng2-alfresco-datatable/demo/index.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Angular 2 DataTable - Demo</title>
+    <base href="/">
+
+    <!-- Google Material Design Lite -->
+    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
+    <script src="node_modules/material-design-lite/material.min.js"></script>
+    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
+
+    <!-- 1. Load libraries -->
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script src="node_modules/angular2/bundles/router.dev.js"></script>
+    <script src="node_modules/angular2/bundles/http.dev.js"></script>
+
+    <script>
+        System.config({
+            defaultJSExtensions: true,
+            map: {
+                'ng2-translate': 'node_modules/ng2-translate',
+                'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
+                'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable',
+                'rxjs': 'node_modules/rxjs',
+                'angular2' : 'node_modules/angular2',
+                'app': 'dist'
+            },
+            packages: {
+                'app': { format: 'register', defaultExtension: 'js' },
+                'ng2-translate': { defaultExtension: 'js' },
+                'ng2-alfresco-core': { defaultExtension: 'js' },
+                'ng2-alfresco-datatable': { defaultExtension: 'js' },
+                'rxjs': { defaultExtension: 'js' },
+                'angular2': { defaultExtension: 'js' }
+            }
+        });
+
+        System.import('app/main').catch(console.log.bind(console));
+    </script>
+
+</head>
+<body>
+
+<alfresco-datatable-demo></alfresco-datatable-demo>
+
+</body>
+</html>
--- a/ng2-components/ng2-alfresco-datatable/demo/package.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/package.json
@ -0,0 +1,52 @@
+{
+    "name": "ng2-alfresco-datatable-demo",
+    "description": "Alfresco Angular2 DataTable Component - Demo",
+    "version": "0.1.0",
+    "author": "Alfresco Software, Ltd.",
+    "contributors": [
+        {
+            "name": "Denys Vuika",
+            "email": "denis.vuyka@gmail.com"
+        }
+    ],
+    "main": "index.js",
+    "scripts": {
+        "postinstall": "npm run typings && npm run build",
+        "typings": "typings install",
+        "start": "rm -rf dist && npm install && npm run server",
+        "server": "lite-server",
+        "build": "npm run tslint &&  rm -rf dist && tsc",
+        "tslint": "npm run tslint-src && npm run tslint-root",
+        "tslint-src": "tslint -c tslint.json src/**/*.ts",
+        "tslint-root": "tslint -c tslint.json *.ts"
+    },
+    "license": "Apache-2.0",
+    "dependencies": {
+        "angular2": "2.0.0-beta.15",
+        "es6-promise": "3.0.2",
+        "es6-shim": "0.35.0",
+        "reflect-metadata": "0.1.2",
+        "rxjs": "5.0.0-beta.2",
+        "material-design-icons": "^2.2.3",
+        "material-design-lite": "^1.1.3",
+        "zone.js": "0.6.10",
+        "ng2-translate": "^1.11.3",
+        "ng2-alfresco-core": "^0.1.0",
+        "ng2-alfresco-datatable": "^0.1.0"
+    },
+    "devDependencies": {
+        "browser-sync": "^2.10.0",
+        "concurrently": "^2.0.0",
+        "lite-server": "^2.2.0",
+        "tslint": "^3.8.1",
+        "typescript": "^1.8.10",
+        "typings": "^0.7.12"
+    },
+    "keywords": [
+        "angular2",
+        "typescript"
+    ],
+    "publishConfig": {
+        "registry": "http://devproducts.alfresco.me:4873/"
+    }
+}
--- a/ng2-components/ng2-alfresco-datatable/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-datatable/demo/src/main.ts
@ -0,0 +1,138 @@
+/*!
+ * @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 { bootstrap } from 'angular2/platform/browser';
+import {
+    ALFRESCO_DATATABLE_DIRECTIVES,
+    ObjectDataTableAdapter,
+    DataSorting,
+    ObjectDataRow,
+    ObjectDataColumn
+} from 'ng2-alfresco-datatable/dist/ng2-alfresco-datatable';
+
+@Component({
+    selector: 'alfresco-datatable-demo',
+    template: `
+        <div class="container">
+            <div class="p-10">
+                <alfresco-datatable [data]="data" [multiselect]="multiselect"></alfresco-datatable>
+            </div>
+            <div class="p-10">
+                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
+                    <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="multiselect">
+                    <span class="mdl-checkbox__label">Multiselect</span>
+                </label>
+            </div>
+            <div class="p-10">
+                <button
+                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+                    (click)="reset()">
+                    Reset to default
+                </button>
+                <button
+                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+                    (click)="addRow()">
+                    Add row
+                </button>
+                <button
+                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+                    (click)="replaceRows()">
+                    Replace rows
+                </button>
+                <button
+                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+                    (click)="replaceColumns()">
+                    Replace columns
+                </button>
+            </div>
+        </div>
+    `,
+    styles: [
+        ':host > .container {padding: 10px}',
+        '.p-10 { padding: 10px; }'
+    ],
+    directives: [ALFRESCO_DATATABLE_DIRECTIVES]
+})
+class DataTableDemo {
+
+    multiselect: boolean = false;
+    data: ObjectDataTableAdapter;
+
+    private _imageUrl: string = 'http://placehold.it/140x100';
+    private _createdBy: any = {
+        name: 'Denys Vuika',
+        email: 'denys.vuika@alfresco.com'
+    };
+
+    constructor() {
+        this.reset();
+    }
+
+    reset() {
+        this.data = new ObjectDataTableAdapter(
+            [
+                {id: 1, name: 'Name 1', createdBy: this._createdBy, icon: 'material-icons://folder_open'},
+                {id: 2, name: 'Name 2', createdBy: this._createdBy, icon: 'material-icons://accessibility'},
+                {id: 3, name: 'Name 3', createdBy: this._createdBy, icon: 'material-icons://alarm'},
+                {id: 4, name: 'Image 1', createdBy: this._createdBy, icon: this._imageUrl}
+            ],
+            [
+                {type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail'},
+                {type: 'text', key: 'id', title: 'Id', sortable: true},
+                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+                {type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true}
+            ]
+        );
+
+        this.data.setSorting(new DataSorting('id', 'asc'));
+    }
+
+    addRow() {
+        let id = this.data.getRows().length + 1;
+        let row = new ObjectDataRow({
+            id: id,
+            name: 'Name ' + id,
+            icon: 'material-icons://extension',
+            createdBy: this._createdBy
+        });
+        this.data.getRows().push(row);
+        this.data.sort();
+    }
+
+    replaceRows() {
+        let objects = [
+            {id: 10, name: 'Name 10', createdBy: this._createdBy, icon: 'material-icons://face'},
+            {id: 11, name: 'Name 11', createdBy: this._createdBy, icon: 'material-icons://language'},
+            {id: 12, name: 'Name 12', createdBy: this._createdBy, icon: 'material-icons://pets'},
+            {id: 13, name: 'Image 13', createdBy: this._createdBy, icon: this._imageUrl}
+        ];
+        let rows = objects.map(obj => new ObjectDataRow(obj));
+        this.data.setRows(rows);
+    }
+
+    replaceColumns() {
+        let schema = [
+            { type: 'text', key: 'id', title: 'Id', sortable: true },
+            { type: 'text', key: 'name', title: 'Name', sortable: true, cssClass: 'full-width name-column' }
+        ];
+        let columns = schema.map(col => new ObjectDataColumn(col));
+        this.data.setColumns(columns);
+    }
+}
+
+bootstrap(DataTableDemo, []);
--- a/ng2-components/ng2-alfresco-datatable/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/tsconfig.json
@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "target": "ES5",
+        "module": "system",
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "sourceMap": true,
+        "removeComments": true,
+        "declaration": true,
+        "outDir": "dist"
+    },
+    "exclude": [
+        "dist",
+        "node_modules",
+        "typings/main",
+        "typings/main.d.ts"
+    ]
+}
--- a/ng2-components/ng2-alfresco-datatable/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/tslint.json
@ -0,0 +1,124 @@
+{
+  "rules": {
+    "align": [
+      true,
+      "parameters",
+      "arguments",
+      "statements"
+    ],
+    "ban": false,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space",
+      "check-lowercase"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-name": false,
+    "jsdoc-format": true,
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-ordering": [
+      true,
+      "public-before-private",
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-any": false,
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-conditional-assignment": true,
+    "no-consecutive-blank-lines": false,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-constructor-vars": false,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-inferrable-types": false,
+    "no-internal-module": true,
+    "no-require-imports": true,
+    "no-shadowed-variable": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unreachable": true,
+    "no-unused-expression": true,
+    "no-unused-variable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "no-var-requires": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single",
+      "avoid-escape"
+    ],
+    "radix": true,
+    "semicolon": true,
+    "switch-default": true,
+    "trailing-comma": [
+      true,
+      {
+        "multiline": "never",
+        "singleline": "never"
+      }
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef": false,
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "use-strict": false,
+    "variable-name": [
+      true,
+      "check-format",
+      "allow-leading-underscore",
+      "ban-keywords"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-operator",
+      "check-separator",
+      "check-type",
+      "check-module",
+      "check-decl"
+    ]
+  }
+}
--- a/ng2-components/ng2-alfresco-datatable/demo/typings.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/typings.json
@ -0,0 +1,9 @@
+{
+  "name": "angular2-testing",
+  "dependencies": {},
+  "devDependencies": {},
+  "ambientDependencies": {
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
+    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#dd638012d63e069f2c99d06ef4dcc9616a943ee4"
+  }
+}