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 tag component

Browse Source
This commit is contained in:
Mario Romano
2016-11-09 02:25:06 +00:00
parent 7579253a50
commit 5e0f592380
9 changed files with 217 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ng2-components/ng2-alfresco-search/demo/index.html
View File

@@ -10,9 +10,21 @@
<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 -->
<!-- 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" />
<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>

309
ng2-components/ng2-alfresco-tag/README.md
View File

@@ -31,53 +31,65 @@
</a>
</p>
### Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Install
```sh
npm install --save ng2-alfresco-tag
```
Follow the 3 steps below:
Components included:
* Alfresco Tag Component
#### Dependencies
Add the following dependency to your index.html:
```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
The following component needs to be added to your systemjs.config:
- ng2-translate
- ng2-alfresco-core
Please refer to the following example to have an idea of how your systemjs.config should look like :
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js
#### Style
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
design dependency to your project:
1. Npm
```sh
npm install --save material-design-icons material-design-lite
npm install ng2-alfresco-tag --save
```
Also make sure you include these dependencies in your .html page:
2. Html
Include these dependencies in your index.html page:
```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">
<!-- 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" />
<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-tag
Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
#### Basic usage
In this component are present three different tags :
@@ -93,70 +105,45 @@ In this component are present three different tags :
```
```ts
import { Component, OnInit, Input } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService
} from 'ng2-alfresco-core';
import { TAGCOMPONENT, TAGSERVICES } from 'ng2-alfresco-tag';
import { NgModule, Component, Input } 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 { TagModule } from 'ng2-alfresco-tag';
@Component({
selector: 'alfresco-tag-demo',
template: `
<div class="container" *ngIf="authenticated">
<alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>
</div>
`,
directives: [TAGCOMPONENT],
providers: [TAGSERVICES]
selector: 'alfresco-app-demo',
template: `<alfresco-tag-node-actions-list [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'"></alfresco-tag-node-actions-list>
`
})
class TagDemo implements OnInit {
class TagDemo {
@Input()
nodeId: string = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
authenticated: boolean;
ecmHost: string = 'http://127.0.0.1:8080';
ticket: string;
constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = this.ecmHost;
settingsService.setProviders('ECM');
}
ngOnInit() {
this.login();
}
login() {
this.authService.login('admin', 'admin').subscribe(
ticket => {
this.authenticated = true;
console.log(ticket);
},
error => {
this.authenticated = false;
console.log(error);
});
}
public updateHost(): void {
this.settingsService.ecmHost = this.ecmHost;
this.login();
}
logData(data) {
console.log(data);
}
}
bootstrap(TagDemo, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
TagModule
],
declarations: [ TagDemo ],
bootstrap: [ TagDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
### Options
@@ -174,71 +161,45 @@ Attribute | Options | Default | Description | Mandatory
```
```ts
import { Component, OnInit, Input } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService
} from 'ng2-alfresco-core';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { TAGCOMPONENT, TAGSERVICES } from 'ng2-alfresco-tag';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { TagModule } from 'ng2-alfresco-tag';
@Component({
selector: 'alfresco-tag-demo',
template: `
<div class="container" *ngIf="authenticated">
<alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
</div>
`,
directives: [TAGCOMPONENT],
providers: [TAGSERVICES]
selector: 'alfresco-app-demo',
template: `<alfresco-tag-node-list [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'"></alfresco-tag-node-list>
`
})
class TagDemo implements OnInit {
class TagDemo {
@Input()
nodeId: string = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
authenticated: boolean;
ecmHost: string = 'http://127.0.0.1:8080';
ticket: string;
constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = this.ecmHost;
settingsService.setProviders('ECM');
}
ngOnInit() {
this.login();
}
login() {
this.authService.login('admin', 'admin').subscribe(
ticket => {
this.authenticated = true;
console.log(ticket);
},
error => {
this.authenticated = false;
console.log(error);
});
}
public updateHost(): void {
this.settingsService.ecmHost = this.ecmHost;
this.login();
}
logData(data) {
console.log(data);
}
}
bootstrap(TagDemo, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
TagModule
],
declarations: [ TagDemo ],
bootstrap: [ TagDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
### Options
@@ -256,72 +217,51 @@ Attribute | Options | Default | Description | Mandatory
```
```ts
import { Component, OnInit, Input } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService
} from 'ng2-alfresco-core';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { TAGCOMPONENT, TAGSERVICES } from 'ng2-alfresco-tag';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { TagModule } from 'ng2-alfresco-tag';
@Component({
selector: 'alfresco-tag-demo',
template: `
<div class="container" *ngIf="authenticated">
<alfresco-tag-list></alfresco-tag-list>
</div>
`,
directives: [TAGCOMPONENT],
providers: [TAGSERVICES]
selector: 'alfresco-app-demo',
template: `<alfresco-tag-list></alfresco-tag-list>`
})
class TagDemo implements OnInit {
class TagDemo {
authenticated: boolean;
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
ecmHost: string = 'http://127.0.0.1:8080';
constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = this.ecmHost;
settingsService.setProviders('ECM');
}
ngOnInit() {
this.login();
}
login() {
this.authService.login('admin', 'admin').subscribe(
ticket => {
this.authenticated = true;
console.log(ticket);
},
error => {
this.authenticated = false;
console.log(error);
});
}
public updateHost(): void {
this.settingsService.ecmHost = this.ecmHost;
this.login();
}
logData(data) {
console.log(data);
}
}
bootstrap(TagDemo, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
TagModule
],
declarations: [ TagDemo ],
bootstrap: [ TagDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
![Custom columns](docs/assets/tag2.png)
## Build from sources
Alternatively you can build component from sources with the following commands:
@@ -330,10 +270,10 @@ npm install
npm run build
```
##Build the files and keep watching for changes
### Build the files and keep watching for changes
```sh
npm run build:w
$ npm run build:w
```
## Running unit tests
@@ -342,7 +282,7 @@ npm run build:w
npm test
```
## Running unit tests in browser
### Running unit tests in browser
```sh
npm test-browser
@@ -351,7 +291,7 @@ npm test-browser
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
## Code coverage
### Code coverage
```sh
npm run coverage
@@ -367,3 +307,6 @@ npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

13
ng2-components/ng2-alfresco-tag/demo/index.html
View File

@@ -11,10 +11,21 @@
<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 -->
<!-- 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" />
<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>

33
ng2-components/ng2-alfresco-tag/demo/package.json
View File

@@ -7,38 +7,15 @@
"scripts": {
"clean": "npm install rimraf && rimraf dist node_modules typings dist",
"postinstall": "npm run build",
"start": "concurrently \"npm run build:w\" \"npm run server\" ",
"start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
"server": "wsrv -o -s -l",
"build": "npm run tslint && rimraf dist && tsc",
"build:w": "npm run tslint && rimraf dist && tsc -w",
"tslint": "npm run tslint-src && npm run tslint-root",
"tslint-src": "tslint -c tslint.json 'src/{,**/}**.ts'",
"tslint-root": "tslint -c tslint.json *.ts"
"build": "npm run tslint && rimraf dist && npm run tsc",
"tsc": "tsc",
"tsc:w": "tsc -w",
"tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
},
"license": "Apache-2.0",
"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",
"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-tag": "0.3.2"
},
"devDependencies": {

19
ng2-components/ng2-alfresco-tag/package.json
View File

@@ -31,24 +31,7 @@
"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",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
"ng2-alfresco-core": "0.3.2"
},
"devDependencies": {
"@types/core-js": "^0.9.32",

15
ng2-components/ng2-alfresco-upload/demo/index.html
View File

@@ -8,14 +8,25 @@
<base href="./">
<!-- Google Material Design Lite -->
<link rel="stylesheet" href="assets/material.orange-blue.min.css">
<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 -->
<!-- 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" />
<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>

16
ng2-components/ng2-alfresco-userinfo/demo/index.html
View File

@@ -8,12 +8,22 @@
<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="./assets/material.orange-blue.min.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" />
<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>

16
ng2-components/ng2-alfresco-viewer/demo/index.html
View File

@@ -10,14 +10,28 @@
<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 -->
<!-- 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" />
<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>
<!-- Polyfill(s) for pdf support -->
<script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
<script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>

16
ng2-components/ng2-alfresco-webscript/demo/index.html
View File

@@ -11,17 +11,25 @@
<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 -->
<!-- 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" />
<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>
<!-- Additional Alfresco libraries -->
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(