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,demo and code improvements userinfo component

Browse Source
This commit is contained in:
Mario Romano
2016-11-09 12:27:44 +00:00
parent 3aa64626de
commit 177c9694af
21 changed files with 269 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -302,6 +302,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@@ -211,6 +211,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

10
ng2-components/ng2-activiti-form/README.md
View File

@@ -371,6 +371,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

10
ng2-components/ng2-activiti-processlist/README.md
View File

@@ -411,6 +411,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

10
ng2-components/ng2-activiti-tasklist/README.md
View File

@@ -343,6 +343,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

10
ng2-components/ng2-alfresco-core/README.md
View File

@@ -246,6 +246,16 @@ before performing unit testing.
npm run coverage
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

2
ng2-components/ng2-alfresco-core/src/services/AlfrescoAuthentication.service.ts
View File

@@ -105,10 +105,10 @@ export class AlfrescoAuthenticationService {
* @returns {Observable<R>|Observable<T>}
*/
public logout() {
this.removeTicket();
return Observable.fromPromise(this.callApiLogout())
.map(res => <any> res)
.do(response => {
this.removeTicket();
return response;
})
.catch(this.handleError);

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

@@ -482,6 +482,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

10
ng2-components/ng2-alfresco-documentlist/README.md
View File

@@ -779,6 +779,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@@ -312,6 +312,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

10
ng2-components/ng2-alfresco-search/README.md
View File

@@ -285,6 +285,16 @@ platformBrowserDynamic().bootstrapModule(AppModule);
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@@ -308,6 +308,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

10
ng2-components/ng2-alfresco-upload/README.md
View File

@@ -311,6 +311,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

147
ng2-components/ng2-alfresco-userinfo/README.md
View File

@@ -1,4 +1,5 @@
# Alfresco User Info 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
@@ -11,8 +12,8 @@
<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-alfresco-login'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-login.svg' alt='npm downloads' />
<a href='https://www.npmjs.com/package/ng2-alfresco-userinfo'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-userinfo.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' />
@@ -31,78 +32,130 @@
</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, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Installation
## Install
```bash
Follow the 3 steps below:
1. Npm
```sh
npm install ng2-alfresco-userinfo --save
```
## Dependencies
Add the following dependency to your index.html:
```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
2. Html
You must separately install the following libraries for your application:
- [ng2-translate](https://github.com/ocombe/ng2-translate)
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
```sh
npm install --save ng2-translate ng2-alfresco-core
```
#### Material Design Lite
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:
```sh
npm install --save material-design-icons material-design-lite
```
Also make sure you include these dependencies in your `index.html` file:
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>
```
## Example
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-userinfo
Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
## Basic usage
```html
<alfresco-document-list
[ecmBackgroundImage]="pathToEcmBannerImage"
[bpmBackgroundImage]="pathToBpmBannerImage"
[fallBackThumbnailImage]="pathToDefaultImage">
</alfresco-document-list>
<ng2-alfresco-userinfo></ng2-alfresco-userinfo>
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ecmBackgroundImage | string | | Custom path for the background banner image for ECM users |
| bpmBackgroundImage | string | | Custom path for the background banner image for BPM users |
| menuOpenType | string | bottom-right | Custom choice for opening menu bottom right or bottom left |
| fallBackThumbnailImage | string | image at ng2-alfresco-userinfo/src/img/anonymous.gif | Fallback image for profile when thubnail is missing|
| `ecmBackgroundImage` | string | ng2-alfresco-userinfo/src/img/orangeBanner.gif | Custom path for the background banner image for ECM users |
| `bpmBackgroundImage` | string | ng2-alfresco-userinfo/src/img/blueBanner.gif | Custom path for the background banner image for BPM users |
| `menuOpenType` | string | right | Custom choice for opening menu bottom : `right` or `left` |
| `fallBackThumbnailImage` | string | ng2-alfresco-userinfo/src/img/anonymous.gif | Fallback image for profile when thubnail is missing|
This will show a round icon with user and on click some user information are showed.
If user is logged in with ECM and BPM the ECM image will be showed.
## 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
```sh
$ npm run build:w
```
## Running unit tests
```sh
npm test
```
### 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.
### Code coverage
```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
```
## NPM scripts
| Command | Description |
@@ -113,10 +166,6 @@ If user is logged in with ECM and BPM the ECM image will be showed.
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## History
## License
For detailed changelog, check [Releases](https://github.com/alfresco/ng2-alfresco-userinfo/releases).
## Contributors
[Contributors](https://github.com/alfresco/ng2-alfresco-userinfo/graphs/contributors)
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

22
ng2-components/ng2-alfresco-userinfo/demo/package.json
View File

@@ -16,28 +16,6 @@
},
"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-userinfo": "0.3.2"
},
"devDependencies": {

2
ng2-components/ng2-alfresco-userinfo/demo/src/main.ts
View File

@@ -43,7 +43,7 @@ import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfr
</p>
</div>
<div *ngIf="isLoggedIn()">
<ng2-alfresco-userinfo></ng2-alfresco-userinfo>
<ng2-alfresco-userinfo [menuOpenType]="left"></ng2-alfresco-userinfo>
</div>
<p></p>
<div>

1
ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js
View File

@@ -38,7 +38,6 @@
defaultExtension: 'js'
},
'ng2-translate': { defaultExtension: 'js' },
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}

18
ng2-components/ng2-alfresco-userinfo/package.json
View File

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

31
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
View File

@@ -15,12 +15,14 @@
* limitations under the License.
*/
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, AfterViewChecked } from '@angular/core';
import { EcmUserModel } from './../models/ecm-user.model';
import { BpmUserModel } from './../models/bpm-user.model';
import { EcmUserService } from './../services/ecm-user.service';
import { BpmUserService } from './../services/bpm-user.service';
import { AlfrescoSettingsService, AlfrescoTranslationService } from 'ng2-alfresco-core';
import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
declare let componentHandler: any;
@Component({
selector: 'ng2-alfresco-userinfo',
@@ -28,8 +30,7 @@ import { AlfrescoSettingsService, AlfrescoTranslationService } from 'ng2-alfresc
styleUrls: ['./user-info.component.css'],
templateUrl: './user-info.component.html'
})
export class UserInfoComponent implements OnInit {
export class UserInfoComponent implements AfterViewChecked, OnInit {
@Input()
ecmBackgroundImage: string;
@@ -53,16 +54,27 @@ export class UserInfoComponent implements OnInit {
constructor(private ecmUserService: EcmUserService,
private bpmUserService: BpmUserService,
public setting: AlfrescoSettingsService,
private authService: AlfrescoAuthenticationService,
private translate: AlfrescoTranslationService) {
if (translate) {
translate.addTranslationFolder('node_modules/ng2-alfresco-userinfo/src');
}
}
ngAfterViewChecked() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
ngOnInit() {
if (this.setting.getProviders() === 'ECM' ||
this.setting.getProviders() === 'ALL') {
this.getEcmUserInfo();
this.getBpmUserInfo();
}
getEcmUserInfo(): void {
if (this.authService.isEcmLoggedIn()) {
this.ecmUserService.getCurrentUserInfo()
.subscribe((res) => {
this.ecmUser = <EcmUserModel> res;
@@ -70,9 +82,10 @@ export class UserInfoComponent implements OnInit {
}
);
}
}
if (this.setting.getProviders() === 'BPM' ||
this.setting.getProviders() === 'ALL') {
getBpmUserInfo(): void {
if (this.authService.isBpmLoggedIn()) {
this.bpmUserService.getCurrentUserInfo()
.subscribe((res) => {
this.bpmUser = <BpmUserModel> res;

10
ng2-components/ng2-alfresco-viewer/README.md
View File

@@ -267,6 +267,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

10
ng2-components/ng2-alfresco-webscript/README.md
View File

@@ -328,6 +328,16 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)