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

#878 fix documentation diagrams,login,analytics,core and package.json dependencies

Browse Source
This commit is contained in:
Mario Romano
2016-11-07 16:39:34 +00:00
parent e58a5e721a
commit 7cbee40b4a
42 changed files with 550 additions and 1133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ng2-components/ng2-activiti-diagrams/.npmignore
View File

@@ -1,7 +1,6 @@
npm-debug.log
.idea
assets/
coverage/
node_modules
typings/

190
ng2-components/ng2-activiti-diagrams/README.md
View File

@@ -1,4 +1,35 @@
# Activiti Diagrams Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-activiti-diagrams'>
<img src='https://img.shields.io/npm/dt/ng2-activiti-diagrams.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
## Prerequisites
@@ -7,71 +38,136 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
## Install
```sh
npm install --save ng2-activiti-diagrams
```
Follow the 3 steps below:
1. Npm
### Dependencies
```sh
npm install ng2-activiti-diagrams --save
```
Add the following dependency to your index.html:
2. Html
```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
Include these dependencies in your index.html page:
The following component needs to be added to your `systemjs.config.js` file:
```html
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
#### raphael
```sh
npm install raphael --save
```
Also make sure you include these dependencies in your `index.html` file:
```html
<!-- Raphael -->
<script src="node_modules/raphael/raphael.min.js"></script>
```
<!-- Diagrams -->
<script src="node_modules/ng2-activiti-diagrams/assets/Polyline.js"></script>
#### Material Design Lite
<!-- 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">
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
design dependency to your project:
<!-- 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>
```sh
npm install --save material-design-icons material-design-lite
```
<!-- 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>
Also make sure you include these dependencies in your `index.html` file:
<!-- 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" />
```html
<!-- 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">
```
<!-- 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-translat
- ng2-alfresco-core
- ng2-activiti-diagrams
- alfresco-js-api
- raphael
Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
## Basic usage example Activiti Diagrams
The component shows the diagram of the input process.
This component shows the diagram of a process.
```html
<activiti-diagrams [processDefinitionId]="processDefinitionId"></activiti-diagrams>
```
#### Events
**onSuccess**: The event is emitted when the diagrams element are loaded
Usage example of this component :
**onError**: The event is emitted when the an error occur during the loading
**main.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { DiagramsModule } from 'ng2-activiti-diagrams';
@Component({
selector: 'activiti-diagrams-demo',
template: `<activiti-diagram [processDefinitionId]="'HealthCareExpressVisitationLog:10:27642'"></activiti-diagram>`
})
export class DiagramDemoComponent {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DiagramsModule
],
declarations: [ DiagramDemoComponent ],
bootstrap: [ DiagramDemoComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Events
| Name | Description |
| --- | --- |
| `onSuccess` | The event is emitted when the diagrams element are loaded |
| `onError` | The event is emitted when the an error occur during the loading |
#### Options
**metricPercentages** The array that contains the percentage of the time for each element
| Name | Description |
| --- | --- |
| `metricPercentage` | The array that contains the percentage of the time for each element |
## Build from sources
Alternatively you can build component from sources with the following commands:
```sh
npm install
npm run build
@@ -83,7 +179,7 @@ npm run build
$ npm run build:w
```
### Running unit tests
## Running unit tests
```sh
npm test
@@ -103,3 +199,17 @@ before performing unit testing.
```sh
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)

24
ng2-components/ng2-activiti-diagrams/demo/index.html
View File

@@ -6,23 +6,35 @@
<title>Alfresco Angular 2 Activiti Diagrams - Demo</title>
<base href="./">
<!-- Raphael -->
<script src="node_modules/raphael/raphael.min.js"></script>
<!-- Diagrams -->
<script src="node_modules/ng2-activiti-diagrams/assets/Polyline.js"></script>
<!-- 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 -->
<!-- 1. Load libraries -->
<!-- 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>
<!-- 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>
<!-- 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" />
<!-- 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>
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
<script src="node_modules/raphael/raphael.min.js"></script>
<script src="assets/Polyline.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });

24
ng2-components/ng2-activiti-diagrams/demo/package.json
View File

@@ -30,28 +30,6 @@
"activiti-diagrams"
],
"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",
"md-date-time-picker": "^2.2.0",
"raphael": "^2.2.6",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.1",
"ng2-translate": "2.5.0",
"alfresco-js-api": "^0.3.0",
"ng2-alfresco-core": "^0.3.0",
"ng2-activiti-diagrams": "^0.3.0"
},
"devDependencies": {
@@ -63,4 +41,4 @@
"typescript": "^2.0.3",
"wsrv": "^0.1.5"
}
}
}

55
ng2-components/ng2-activiti-diagrams/demo/src/main.ts
View File

@@ -19,12 +19,22 @@ 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 { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { DiagramsModule } from 'ng2-activiti-diagrams';
@Component({
selector: 'activiti-diagrams-demo',
template: `
<label for="ticket"><b>Insert a valid ticket:</b></label><br>
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
<label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
<div *ngIf="!authenticated" style="color:#FF2323">
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
operations.
</div>
<hr>
<label for="processDefinitionId"><b>Insert the ProcessDefinitionId:</b></label><br>
<input id="processDefinitionId" size="70" type="text" [(ngModel)]="processDefinitionId">
<activiti-diagram [processDefinitionId]="processDefinitionId"></activiti-diagram>`
@@ -32,10 +42,47 @@ import { DiagramsModule } from 'ng2-activiti-diagrams';
export class DiagramDemoComponent {
private processDefinitionId: string;
processDefinitionId: string = 'ThirdProcess:1:15053';
ngOnInit() {
this.processDefinitionId = 'ThirdProcess:1:15053';
authenticated: boolean;
host: string = 'http://localhost:9999';
ticket: string;
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = this.host;
settingsService.setProviders('BPM');
if (this.authService.getTicketBpm()) {
this.ticket = this.authService.getTicketBpm();
}
}
public updateTicket(): void {
localStorage.setItem('ticket-BPM', this.ticket);
}
public updateHost(): void {
this.settingsService.bpmHost = this.host;
this.login();
}
public ngOnInit(): void {
this.login();
}
login() {
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
this.ticket = this.authService.getTicketBpm();
this.authenticated = true;
},
error => {
console.log(error);
this.authenticated = false;
});
}
}

46
ng2-components/ng2-activiti-diagrams/package.json
View File

@@ -37,47 +37,31 @@
"url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
},
"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",
"alfresco-js-api": "^0.3.0",
"core-js": "^2.4.1",
"ng2-alfresco-core": "0.3.2",
"ng2-translate": "2.5.0",
"raphael": "^2.2.6",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
"raphael": "^2.2.6"
},
"devDependencies": {
"@types/core-js": "^0.9.32",
"@types/jasmine": "^2.2.33",
"concurrently": "^2.2.0",
"cpx": "^1.3.1",
"jasmine-ajax": "^3.2.0",
"cpx": "1.3.1",
"jasmine-core": "2.4.1",
"karma": "~0.13.22",
"karma-chrome-launcher": "~1.0.1",
"karma-coverage": "^1.0.0",
"karma-jasmine": "~1.0.2",
"karma": "0.13.22",
"karma-chrome-launcher": "1.0.1",
"karma-coverage": "1.0.0",
"karma-jasmine": "1.0.2",
"karma-jasmine-ajax": "^0.1.13",
"karma-jasmine-html-reporter": "^0.2.0",
"karma-mocha-reporter": "^2.0.3",
"license-check": "^1.0.4",
"remap-istanbul": "^0.6.3",
"karma-mocha-reporter": "2.0.3",
"karma-jasmine-html-reporter": "0.2.0",
"license-check": "1.1.5",
"remap-istanbul": "0.6.3",
"rimraf": "2.5.2",
"traceur": "^0.0.91",
"tslint": "^3.8.1",
"traceur": "0.0.91",
"tslint": "3.15.1",
"typescript": "^2.0.3",
"wsrv": "^0.1.5"
"wsrv": "^0.1.5",
"xo": "0.14.0",
"yargs": "4.7.0"
},
"keywords": [
"tag",