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

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

@@ -39,38 +39,57 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
## 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) 2. Html
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
```sh Include these dependencies in your index.html page:
npm install --save ng2-translate ng2-alfresco-core
```
#### Material Design Lite ```html
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 <!-- Google Material Design Lite -->
design dependency to your project: <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">
```sh <!-- Polyfill(s) for Safari (pre-10.x) -->
npm install --save material-design-icons material-design-lite <script src="node_modules/intl/dist/Intl.min.js"></script>
``` <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
Also make sure you include these dependencies in your `index.html` file: <!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
```html <!-- Polyfill(s) for dialogs -->
<!-- Google Material Design Lite --> <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<script src="node_modules/material-design-lite/material.min.js"></script> <style>._dialog_overlay { position: static !important; } </style>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
``` <!-- 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,32 +97,33 @@ 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
[ [
@@ -124,6 +144,22 @@ export class MyView {
); );
} }
} }
@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
@@ -413,7 +450,7 @@ npm run build
$ npm run build:w $ npm run build:w
``` ```
### Running unit tests ## Running unit tests
```sh ```sh
npm test npm test
@@ -433,3 +470,17 @@ before performing unit testing.
```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": {