inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-08 14:51:32 +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-analytics/.npmignore
View File

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

115
ng2-components/ng2-activiti-analytics/README.md
View File

@@ -38,46 +38,69 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
## Install
```sh
npm install ng2-activiti-analytics ng2-charts chart.js moment md-date-time-picker material-design-icons material-design-lite --save
```
Follow the 3 steps below:
Also make sure you include these dependencies in your `index.html` file:
1. Npm
```html
```sh
npm install ng2-activiti-analytics --save
```
<!-- Charts -->
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
2. Html
<!-- Moment js -->
<script src="node_modules/moment/min/moment.min.js"></script>
Include these dependencies in your index.html page:
<!-- Date picker -->
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
```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">
<!-- Charts -->
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
<script src="node_modules/raphael/raphael.min.js"></script>
```
<!-- Moment js -->
<script src="node_modules/moment/min/moment.min.js"></script>
*If you need to have a large cross-browser compatibility make sure you include the polyfill necessary to Angular 2. More info at this
[page](/BROWSER-SUPPORT.md) .*
<!-- Date picker -->
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
## Dependencies
<!-- 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 following component needs to be added to your systemjs.config.js :
<!-- 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>
- ng2-charts
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-activiti-diagrams
- ng2-activiti-analytics
<!-- 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>
Please refer to the following example to have an idea of how your systemjs.config should look [systemjs.config.js](demo/systemjs
.config.js) .
<!-- 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>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-charts
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-activiti-diagrams
- ng2-activiti-analytics
Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
## Basic usage example Activiti Analytics List
@@ -92,6 +115,12 @@ Example of an App that use Activiti Analytics List component :
**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 { AnalyticsModule } from 'ng2-activiti-analytics';
@Component({
selector: 'activiti-analytics-demo',
template: `
@@ -106,6 +135,17 @@ Example of an App that use Activiti Analytics List component :
export class AnalyticsDemoComponent {
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({
@@ -149,13 +189,19 @@ Example of an App that use Activiti Analytics component :
**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 { AnalyticsModule } from 'ng2-activiti-analytics';
@Component({
selector: 'activiti-analytics-demo',
template: `
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
<activiti-analytics [appId]="123" *ngIf="report" [reportId]="123"></activiti-analytics>
<activiti-analytics [appId]="1001" [reportId]="2006"></activiti-analytics>
</div>
</div>
</div>`
@@ -163,6 +209,17 @@ Example of an App that use Activiti Analytics component :
export class AnalyticsDemoComponent {
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({

37
ng2-components/ng2-activiti-analytics/demo/index.html
View File

@@ -6,35 +6,48 @@
<title>Alfresco Angular 2 Activiti Analytics - Demo</title>
<base href="./">
<!-- Charts -->
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
<script src="node_modules/raphael/raphael.min.js"></script>
<!-- Moment js -->
<script src="node_modules/moment/min/moment.min.js"></script>
<!-- Date picker -->
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
<!-- 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">
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
<!-- 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/moment/min/moment.min.js"></script>
<script src="node_modules/chart.js/dist/Chart.bundle.min.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="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.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); });
</script>
</head>
<style> .chart {display: block; width: 100%;} </style>
<style> .chart {display: block; width: 100%;}</style>
<body>

31
ng2-components/ng2-activiti-analytics/demo/package.json
View File

@@ -30,34 +30,7 @@
"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",
"ng2-activiti-analytics": "^0.3.0",
"chart.js": "^2.1.4",
"moment": "2.15.1",
"md-date-time-picker": "^2.2.0",
"ng2-charts": "1.1.0"
"ng2-activiti-analytics": "^0.3.0"
},
"devDependencies": {
"@types/core-js": "^0.9.32",
@@ -68,4 +41,4 @@
"typescript": "^2.0.3",
"wsrv": "^0.1.5"
}
}
}

66
ng2-components/ng2-activiti-analytics/demo/src/main.ts
View File

@@ -15,16 +15,25 @@
* limitations under the License.
*/
import { NgModule, Component } from '@angular/core';
import { NgModule, Component, OnInit } 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 { AnalyticsModule } from 'ng2-activiti-analytics';
@Component({
selector: 'activiti-analytics-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>
<div class="page-content">
<label for="appId"><b>Insert the appId:</b></label><br>
<input id="appId" size="10" type="text" [(ngModel)]="appId">
@@ -39,14 +48,56 @@ import { AnalyticsModule } from 'ng2-activiti-analytics';
</div>`
})
export class AnalyticsDemoComponent {
export class AnalyticsDemoComponent implements OnInit {
appId: number;
report: any;
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();
}
}
onReportClick(event: any) {
this.report = event;
}
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;
});
}
}
@NgModule({
@@ -55,9 +106,10 @@ export class AnalyticsDemoComponent {
CoreModule.forRoot(),
AnalyticsModule
],
declarations: [ AnalyticsDemoComponent ],
bootstrap: [ AnalyticsDemoComponent ]
declarations: [AnalyticsDemoComponent],
bootstrap: [AnalyticsDemoComponent]
})
export class AppModule { }
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);

51
ng2-components/ng2-activiti-analytics/package.json
View File

@@ -41,51 +41,36 @@
"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",
"moment": "2.15.1",
"chart.js": "^2.1.4",
"core-js": "^2.4.1",
"md-date-time-picker": "^2.2.0",
"ng2-alfresco-core": "0.3.2",
"ng2-activiti-diagrams": "0.3.3",
"ng2-charts": "1.1.0",
"ng2-translate": "2.5.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
"moment": "2.15.1",
"ng2-alfresco-core": "0.3.2",
"ng2-activiti-diagrams": "0.3.3"
},
"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",

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",

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

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

15
ng2-components/ng2-activiti-processlist/.npmignore Normal file
View File

@@ -0,0 +1,15 @@
npm-debug.log
.idea
coverage/
node_modules
typings/
fonts/
/.editorconfig
/.travis.yml
/*.js
/*.json
/*.ts
/*.js.map
/.npmignore

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

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

1
ng2-components/ng2-alfresco-core/.npmignore
View File

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

13
ng2-components/ng2-alfresco-core/package.json
View File

@@ -63,13 +63,20 @@
"@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-translate": "2.5.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
"zone.js": "^0.6.23",
"ng2-translate": "2.5.0",
"alfresco-js-api": "^0.3.0",
"intl": "1.2.4",
"dialog-polyfill": "^0.4.3",
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.1"
},
"devDependencies": {
"@types/core-js": "^0.9.32",

1
ng2-components/ng2-alfresco-datatable/.npmignore
View File

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

1
ng2-components/ng2-alfresco-documentlist/.npmignore
View File

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

1
ng2-components/ng2-alfresco-login/.npmignore
View File

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

79
ng2-components/ng2-alfresco-login/README.md
View File

@@ -38,42 +38,65 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
## Install
```sh
npm install ng2-alfresco-login material-design-icons material-design-lite --save
```
Follow the 3 steps below:
Also make sure you include these dependencies in your .html page:
1. Npm
```html
```sh
npm install ng2-alfresco-login --save
```
<!-- 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">
2. Html
```
Include these dependencies in your index.html page:
*If you need to have a large cross-browser compatibility make sure you include the polyfill necessary to Angular 2. More info at this
[page](/BROWSER-SUPPORT.md) .*
```html
## Dependencies
<!-- 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 following component needs to be added to your systemjs.config.js :
<!-- 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>
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-login
<!-- 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>
Please refer to the following example to have an idea of how your systemjs.config should look this [systemjs.config.js](demo/systemjs
.config.js) .
<!-- 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>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-login
Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
## Basic usage
This component allow to authenticate to Alfresco One and Alfresco Activiti.
```html
<alfresco-login [providers]="'ALL'"></alfresco-login>
```
Example of an App that use Alfresco login component :
Usage example of this component :
**main.ts**
```ts
@@ -133,17 +156,17 @@ platformBrowserDynamic().bootstrapModule(AppModule);
| `onSuccess` | The event is emitted when the login is done |
| `onError` | The event is emitted when the login fails |
Attribute | Description |
--- | --- |
`onSuccess` | The event is emitted when the login is done |
`onError` | The event is emitted when the login fails |
| Name | Description |
| --- | --- |
| `onSuccess` | The event is emitted when the login is done |
| `onError` | The event is emitted when the login fails |
#### Options
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`providers` | *string* | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
`disableCsrf` | *boolean* | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
| Name | Options | Default | Description | Mandatory
| --- | --- | --- | --- | ---
| `providers` | *string* | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
| `disableCsrf` | *boolean* | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
## Custom logo and background

1
ng2-components/ng2-alfresco-login/demo/index.html
View File

@@ -24,6 +24,7 @@
<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>

23
ng2-components/ng2-alfresco-login/demo/package.json
View File

@@ -45,29 +45,6 @@
"alfresco"
],
"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",
"moment": "2.15.1",
"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-alfresco-login": "^0.3.2"
},
"devDependencies": {

4
ng2-components/ng2-alfresco-login/demo/src/main.ts
View File

@@ -29,6 +29,7 @@ import { LoginModule } from 'ng2-alfresco-login';
ECM Host: <input id="ecmHost" type="text" size="48" (change)="updateEcmHost()" [(ngModel)]="ecmHost"><br>
BPM Host: <input id="bpmHost" type="text" size="48" (change)="updateBpmHost()" [(ngModel)]="bpmHost"><br>
<div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 120px; z-index: 1;">
<p style="width:120px;margin: 20px;">
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch1" class="mdl-switch__input" checked
@@ -130,7 +131,6 @@ export class AppComponent {
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);

20
ng2-components/ng2-alfresco-login/package.json
View File

@@ -56,25 +56,7 @@
"alfresco"
],
"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",
"ng2-translate": "2.5.0",
"ng2-alfresco-core": "0.3.2",
"alfresco-js-api": "^0.3.0"
"ng2-alfresco-core": "0.3.2"
},
"devDependencies": {
"@types/core-js": "^0.9.32",

1
ng2-components/ng2-alfresco-search/.npmignore
View File

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

15
ng2-components/ng2-alfresco-tag/.npmignore Normal file
View File

@@ -0,0 +1,15 @@
npm-debug.log
.idea
coverage/
node_modules
typings/
fonts/
/.editorconfig
/.travis.yml
/*.js
/*.json
/*.ts
/*.js.map
/.npmignore

1
ng2-components/ng2-alfresco-upload/.npmignore
View File

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

15
ng2-components/ng2-alfresco-userinfo/.npmignore Normal file
View File

@@ -0,0 +1,15 @@
npm-debug.log
.idea
coverage/
node_modules
typings/
fonts/
/.editorconfig
/.travis.yml
/*.js
/*.json
/*.ts
/*.js.map
/.npmignore

1
ng2-components/ng2-alfresco-viewer/.npmignore
View File

@@ -2,7 +2,6 @@ npm-debug.log
.idea
demo/localTestFile.pdf
assets/
coverage/
node_modules
typings/

15
ng2-components/ng2-alfresco-webscript/.npmignore Normal file
View File

@@ -0,0 +1,15 @@
npm-debug.log
.idea
coverage/
node_modules
typings/
fonts/
/.editorconfig
/.travis.yml
/*.js
/*.json
/*.ts
/*.js.map
/.npmignore