mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
#101 datatable demo project
This commit is contained in:
Denys Vuika
parent
0600fc6491
commit
a6d2df6004
@ -8,6 +8,11 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-10">
|
<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
|
<button
|
||||||
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
|
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
|
||||||
(click)="addRow()">
|
(click)="addRow()">
|
||||||
|
|||||||
@ -16,7 +16,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component } from 'angular2/core';
|
import { Component } from 'angular2/core';
|
||||||
import { AlfrescoPipeTranslate } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
|
|
||||||
import {
|
import {
|
||||||
ALFRESCO_DATATABLE_DIRECTIVES,
|
ALFRESCO_DATATABLE_DIRECTIVES,
|
||||||
ObjectDataTableAdapter,
|
ObjectDataTableAdapter,
|
||||||
@ -31,8 +30,7 @@ declare let __moduleName: string;
|
|||||||
moduleId: __moduleName,
|
moduleId: __moduleName,
|
||||||
selector: 'datatable-demo',
|
selector: 'datatable-demo',
|
||||||
templateUrl: './datatable-demo.component.html',
|
templateUrl: './datatable-demo.component.html',
|
||||||
directives: [ALFRESCO_DATATABLE_DIRECTIVES],
|
directives: [ALFRESCO_DATATABLE_DIRECTIVES]
|
||||||
pipes: [AlfrescoPipeTranslate]
|
|
||||||
})
|
})
|
||||||
export class DataTableDemoComponent {
|
export class DataTableDemoComponent {
|
||||||
|
|
||||||
@ -46,6 +44,10 @@ export class DataTableDemoComponent {
|
|||||||
};
|
};
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
this.data = new ObjectDataTableAdapter(
|
this.data = new ObjectDataTableAdapter(
|
||||||
[
|
[
|
||||||
{id: 1, name: 'Name 1', createdBy: this._createdBy, icon: 'material-icons://folder_open'},
|
{id: 1, name: 'Name 1', createdBy: this._createdBy, icon: 'material-icons://folder_open'},
|
||||||
|
|||||||
5
ng2-components/ng2-alfresco-datatable/demo/.gitignore
vendored
Normal file
5
ng2-components/ng2-alfresco-datatable/demo/.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
node_modules
|
||||||
|
.idea
|
||||||
|
coverage
|
||||||
|
dist
|
||||||
|
typings
|
||||||
13
ng2-components/ng2-alfresco-datatable/demo/README.md
Normal file
13
ng2-components/ng2-alfresco-datatable/demo/README.md
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# DataTable demo
|
||||||
|
|
||||||
|
Install:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Run the project:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm start
|
||||||
|
```
|
||||||
55
ng2-components/ng2-alfresco-datatable/demo/index.html
Normal file
55
ng2-components/ng2-alfresco-datatable/demo/index.html
Normal file
@ -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>
|
||||||
52
ng2-components/ng2-alfresco-datatable/demo/package.json
Normal file
52
ng2-components/ng2-alfresco-datatable/demo/package.json
Normal file
@ -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/"
|
||||||
|
}
|
||||||
|
}
|
||||||
138
ng2-components/ng2-alfresco-datatable/demo/src/main.ts
Normal file
138
ng2-components/ng2-alfresco-datatable/demo/src/main.ts
Normal file
@ -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, []);
|
||||||
19
ng2-components/ng2-alfresco-datatable/demo/tsconfig.json
Normal file
19
ng2-components/ng2-alfresco-datatable/demo/tsconfig.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
124
ng2-components/ng2-alfresco-datatable/demo/tslint.json
Normal file
124
ng2-components/ng2-alfresco-datatable/demo/tslint.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
9
ng2-components/ng2-alfresco-datatable/demo/typings.json
Normal file
9
ng2-components/ng2-alfresco-datatable/demo/typings.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
# Document List demo
|
# DocumentList demo
|
||||||
|
|
||||||
Install:
|
Install:
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user