inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

#878 doc and demo datatable

Browse Source
This commit is contained in:
Mario Romano
2016-11-09 00:11:26 +00:00
parent 76f17b2e74
commit e778940f94
3 changed files with 109 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
ng2-components/ng2-alfresco-datatable/README.md
View File

@@ -34,43 +34,62 @@
## Prerequisites ## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md). necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Install ## Install
```sh Follow the 3 steps below:
npm install --save ng2-alfresco-datatable
```
### Dependencies 1. Npm
You must separately install the following libraries for your application: ```sh
npm install ng2-alfresco-datatable --save
- [ng2-translate](https://github.com/ocombe/ng2-translate) ```
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
```sh 2. Html
npm install --save ng2-translate ng2-alfresco-core
```
#### Material Design Lite Include these dependencies in your index.html page:
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material ```html
design dependency to your project:
```sh <!-- Google Material Design Lite -->
npm install --save material-design-icons 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">
Also make sure you include these dependencies in your `index.html` file: <!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
```html <!-- Polyfill(s) for older browsers -->
<!-- Google Material Design Lite --> <script src="node_modules/core-js/client/shim.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/material-design-lite/material.min.js"></script> <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
``` <!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-datatable
Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
## Basic usage example ## Basic usage example
@@ -78,52 +97,69 @@ Also make sure you include these dependencies in your `index.html` file:
**my.component.ts** **my.component.ts**
```ts ```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { import { CONTEXT_MENU_DIRECTIVES, CONTEXT_MENU_PROVIDERS } from 'ng2-alfresco-core';
CONTEXT_MENU_DIRECTIVES, import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
CONTEXT_MENU_PROVIDERS
} from 'ng2-alfresco-core';
import {
ALFRESCO_DATATABLE_DIRECTIVES,
ObjectDataTableAdapter
} from 'ng2-alfresco-datatable';
@Component({ @Component({
selector: 'my-view', selector: 'alfresco-app-demo',
template: `<alfresco-datatable [data]="data"> template: `<alfresco-datatable [data]="data">
</alfresco-datatable>`, </alfresco-datatable>`,
directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES], directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
providers: [CONTEXT_MENU_PROVIDERS] providers: [CONTEXT_MENU_PROVIDERS]
}) })
export class MyView { export class DataTableDemo {
data: ObjectDataTableAdapter; data: ObjectDataTableAdapter;
constructor() { constructor() {
this.data = new ObjectDataTableAdapter( this.data = new ObjectDataTableAdapter(
// data // data
[ [
{ id: 1, name: 'Name 1' }, {id: 1, name: 'Name 1'},
{ id: 2, name: 'Name 2' } {id: 2, name: 'Name 2'}
], ],
// schema // schema
[ [
{ {
type: 'text', type: 'text',
key: 'id', key: 'id',
title: 'Id', title: 'Id',
sortable: true sortable: true
}, },
{ {
type: 'text', type: 'text',
key: 'name', key: 'name',
title: 'Name', title: 'Name',
cssClass: 'full-width', cssClass: 'full-width',
sortable: true sortable: true
} }
] ]
); );
} }
} }
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DataTableModule
],
declarations: [DataTableDemo],
bootstrap: [DataTableDemo]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
``` ```
![DataTable demo](docs/assets/datatable-demo.png) ![DataTable demo](docs/assets/datatable-demo.png)
@@ -132,10 +168,10 @@ export class MyView {
| Name | Type | Default | Description | Name | Type | Default | Description
| --- | --- | --- | --- | | --- | --- | --- | --- |
| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source | | `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | | `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| actions | boolean | false | Toggles data actions column | | `actions` | boolean | false | Toggles data actions column |
| fallbackThubnail | string | | Fallback image for row ehre thubnail is missing| | `fallbackThubnail` | string | | Fallback image for row ehre thubnail is missing|
### Events ### Events
@@ -366,6 +402,7 @@ let data = new ObjectDataTableAdapter(
``` ```
## Generate schema ## Generate schema
Is possible to auto generate your schema if you have only the data row Is possible to auto generate your schema if you have only the data row
```ts ```ts
@@ -397,11 +434,11 @@ let schema = ObjectDataTableAdapter.generateSchema(data);
``` ```
## Build from sources ## Build from sources
Alternatively you can build component from sources with the following commands: Alternatively you can build component from sources with the following commands:
```sh ```sh
npm install npm install
npm run build npm run build
@@ -412,8 +449,8 @@ npm run build
```sh ```sh
$ npm run build:w $ npm run build:w
``` ```
### Running unit tests ## Running unit tests
```sh ```sh
npm test npm test
@@ -425,11 +462,25 @@ npm test
npm test-browser npm test-browser
``` ```
This task rebuilds all the code, runs tslint, license checks and other quality check tools This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing. before performing unit testing.
### Code coverage ### Code coverage
```sh ```sh
npm run coverage npm run coverage
``` ```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

25
ng2-components/ng2-alfresco-datatable/demo/package.json
View File

@@ -22,30 +22,7 @@
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@angular/common": "2.0.0", "ng2-alfresco-datatable": "0.3.2"
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"@types/node": "^6.0.42",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"license-check": "1.1.5",
"ng2-translate": "2.5.0",
"ng2-alfresco-core": "0.3.2",
"ng2-alfresco-datatable": "0.3.2",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.1"
}, },
"devDependencies": { "devDependencies": {
"@types/core-js": "^0.9.32", "@types/core-js": "^0.9.32",

18
ng2-components/ng2-alfresco-datatable/package.json
View File

@@ -44,24 +44,6 @@
"alfresco" "alfresco"
], ],
"dependencies": { "dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"@types/node": "^6.0.42",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"alfresco-js-api": "^0.3.0",
"ng2-translate": "2.5.0",
"ng2-alfresco-core": "0.3.2" "ng2-alfresco-core": "0.3.2"
}, },
"devDependencies": { "devDependencies": {