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>

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

@@ -31,52 +31,64 @@
</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:
1. Npm
* Alfresco Tag Component
```sh
npm install ng2-alfresco-tag --save
```
#### Dependencies
2. Html
Add the following dependency to your index.html:
Include these dependencies in your index.html page:
```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
```html
The following component needs to be added to your systemjs.config:
<!-- 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">
- ng2-translate
- ng2-alfresco-core
<!-- 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>
Please refer to the following example to have an idea of how your systemjs.config should look like :
<!-- 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>
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-tag/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" />
<style>._dialog_overlay { position: static !important; } </style>
#### 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:
<!-- 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>
```sh
npm install --save material-design-icons material-design-lite
```
```
Also make sure you include these dependencies in your .html page:
3. SystemJs
```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">
```
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
@@ -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,102 +217,81 @@ 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:
```sh
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
```sh
npm test
```
## Running unit tests in browser
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
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(