Added some upgrades to demo and added the component to demo shell

This commit is contained in:
Vito Albano
2016-09-22 01:14:15 +01:00
parent a8c7486a26
commit 3b6b8ed59b
11 changed files with 167 additions and 119 deletions

View File

@@ -21,6 +21,10 @@
<a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a> <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
</nav> </nav>
<div *ngIf="isLoggedIn()">
<ng2-alfresco-userinfo></ng2-alfresco-userinfo>
</div>
<!-- Right aligned menu below button --> <!-- Right aligned menu below button -->
<button id="demo-menu-lower-right" data-automation-id="right-action-menu" <button id="demo-menu-lower-right" data-automation-id="right-action-menu"
class="mdl-button mdl-js-button mdl-button--icon"> class="mdl-button mdl-js-button mdl-button--icon">

View File

@@ -0,0 +1,16 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

View File

@@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">

View File

@@ -8,10 +8,11 @@
<base href="/"> <base href="/">
<!-- Google Material Design Lite --> <!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> <link rel="stylesheet" href="assets/material.orange-blue.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script> <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/material-design-icons/iconfont/material-icons.css">
<!-- Polyfill(s) for older browsers --> <!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script>

View File

@@ -7,8 +7,7 @@
"typings": "./dist/index.d.ts", "typings": "./dist/index.d.ts",
"scripts": { "scripts": {
"clean": "rimraf dist node_modules typings", "clean": "rimraf dist node_modules typings",
"typings": "typings install", "postinstall": "npm run build",
"postinstall": "npm run typings && npm run build",
"start": "npm run tslint && rimraf dist && tsc && concurrently \"tsc -w\" \"npm run server\" ", "start": "npm run tslint && rimraf dist && tsc && concurrently \"tsc -w\" \"npm run server\" ",
"server": "wsrv -o -l -s", "server": "wsrv -o -l -s",
"build": "npm run tslint && rimraf dist && tsc", "build": "npm run tslint && rimraf dist && tsc",
@@ -23,9 +22,11 @@
"demo" "demo"
], ],
"dependencies": { "dependencies": {
"alfresco-js-api": "^0.3.0",
"@angular/common": "2.0.0-rc.3", "@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3", "@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3", "@angular/core": "2.0.0-rc.3",
"@angular/forms": "0.1.1",
"@angular/http": "2.0.0-rc.3", "@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3", "@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3", "@angular/platform-browser-dynamic": "2.0.0-rc.3",
@@ -33,24 +34,38 @@
"@angular/router-deprecated": "2.0.0-rc.2", "@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.3", "@angular/upgrade": "2.0.0-rc.3",
"systemjs": "0.19.27", "systemjs": "0.19.27",
"core-js": "^2.4.0", "core-js": "2.4.0",
"reflect-metadata": "^0.1.3", "reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6", "rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12", "zone.js": "0.6.12",
"material-design-icons": "^2.2.3",
"material-design-lite": "^1.1.3",
"ng2-translate": "2.2.2", "ng2-translate": "2.2.2",
"ng2-alfresco-core": "0.3.2",
"ng2-alfresco-userinfo": "file:../", "ng2-alfresco-userinfo": "file:../"
"ng2-alfresco-core": "^0.3.0", },
"alfresco-js-api": "^0.3.0" "peerDependencies": {
"material-design-icons": "^2.2.3",
"material-design-lite": "^1.1.3"
}, },
"devDependencies": { "devDependencies": {
"concurrently": "^2.0.0", "@types/core-js": "^0.9.32",
"@types/jasmine": "^2.2.33",
"cpx": "1.3.1",
"jasmine-ajax": "3.2.0",
"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-jasmine-ajax": "^0.1.13",
"karma-jasmine-html-reporter": "0.2.0",
"karma-mocha-reporter": "2.0.3",
"license-check": "1.1.5",
"remap-istanbul": "0.6.3",
"rimraf": "2.5.2", "rimraf": "2.5.2",
"tslint": "^3.8.1", "traceur": "0.0.91",
"typescript": "^1.8.10", "tslint": "3.8.1",
"typings": "^1.0.4", "typescript": "^2.0.2",
"wsrv": "^0.1.4" "wsrv": "^0.1.5"
} }
} }

View File

@@ -6,6 +6,7 @@ import { HTTP_PROVIDERS } from '@angular/http';
import { import {
AlfrescoSettingsService, AlfrescoSettingsService,
AlfrescoAuthenticationService, AlfrescoAuthenticationService,
MDL,
ALFRESCO_CORE_PROVIDERS ALFRESCO_CORE_PROVIDERS
} from 'ng2-alfresco-core'; } from 'ng2-alfresco-core';
@@ -31,7 +32,7 @@ import {
</p> </p>
</div> </div>
<div *ngIf="isLoggedIn()"> <div *ngIf="isLoggedIn()">
<ng2-alfresco-userinfo [userEmail]=userToLogin></ng2-alfresco-userinfo> <ng2-alfresco-userinfo></ng2-alfresco-userinfo>
</div> </div>
<p></p> <p></p>
<div> <div>
@@ -49,7 +50,7 @@ import {
<button (click)="logout()">Logout</button>`, <button (click)="logout()">Logout</button>`,
directives: [ UserInfoComponent ], directives: [ UserInfoComponent ],
providers: [AlfrescoAuthenticationService, AlfrescoSettingsService] providers: [AlfrescoAuthenticationService, AlfrescoSettingsService, MDL]
}) })

View File

@@ -4,9 +4,7 @@
"version": "0.1.0", "version": "0.1.0",
"author": "vito albano <vito.albano@alfresco.com>", "author": "vito albano <vito.albano@alfresco.com>",
"scripts": { "scripts": {
"postinstall": "typings install", "clean": "rimraf dist node_modules",
"clean": "rimraf dist node_modules typings",
"typings": "typings install",
"license-check": "echo 'license check is disabled'", "license-check": "echo 'license check is disabled'",
"build": "npm run tslint && rimraf dist && tsc && npm run copy-dist && npm run license-check", "build": "npm run tslint && rimraf dist && tsc && npm run copy-dist && npm run license-check",
"build:w": "npm run tslint && rimraf dist && npm run watch-task", "build:w": "npm run tslint && rimraf dist && npm run watch-task",
@@ -21,7 +19,6 @@
"test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"", "test-browser": "npm run build && concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
"posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json", "posttest": "remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
"coverage": "npm run test && wsrv -o -p 9875 ./coverage/report", "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
"prepublish": "npm run build",
"travis": "echo 'placeholder'" "travis": "echo 'placeholder'"
}, },
"main": "./dist/index.js", "main": "./dist/index.js",
@@ -33,10 +30,13 @@
"bugs": { "bugs": {
"url": "https://github.com/alfresco/ng2-alfresco-userinfo/issues" "url": "https://github.com/alfresco/ng2-alfresco-userinfo/issues"
}, },
"dependencies": { "dependencies": {
"alfresco-js-api": "^0.3.0",
"@angular/common": "2.0.0-rc.3", "@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3", "@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3", "@angular/core": "2.0.0-rc.3",
"@angular/forms": "0.1.1",
"@angular/http": "2.0.0-rc.3", "@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3", "@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3", "@angular/platform-browser-dynamic": "2.0.0-rc.3",
@@ -44,34 +44,35 @@
"@angular/router-deprecated": "2.0.0-rc.2", "@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.3", "@angular/upgrade": "2.0.0-rc.3",
"systemjs": "0.19.27", "systemjs": "0.19.27",
"core-js": "^2.4.0", "core-js": "2.4.0",
"reflect-metadata": "^0.1.3", "reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6", "rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12", "zone.js": "0.6.12",
"ng2-translate": "2.2.2", "ng2-translate": "2.2.2",
"alfresco-js-api": "^0.3.0", "ng2-alfresco-core": "0.3.2",
"ng2-alfresco-core": "0.3.2" "material-design-icons": "2.2.3",
"material-design-lite": "1.1.3"
}, },
"devDependencies": { "devDependencies": {
"angular-cli": "1.0.0-beta.9", "@types/core-js": "^0.9.32",
"concurrently": "^2.1.0", "@types/jasmine": "^2.2.33",
"cpx": "^1.3.1", "cpx": "1.3.1",
"jasmine-ajax": "^3.2.0", "jasmine-ajax": "3.2.0",
"jasmine-core": "2.4.1", "jasmine-core": "2.4.1",
"karma": "~0.13.22", "karma": "0.13.22",
"karma-chrome-launcher": "~1.0.1", "karma-chrome-launcher": "1.0.1",
"karma-coverage": "^1.0.0", "karma-coverage": "1.0.0",
"karma-jasmine": "~1.0.2", "karma-jasmine": "1.0.2",
"karma-jasmine-ajax": "^0.1.13", "karma-jasmine-ajax": "^0.1.13",
"karma-jasmine-html-reporter": "^0.2.0", "karma-jasmine-html-reporter": "0.2.0",
"karma-mocha-reporter": "^2.0.3", "karma-mocha-reporter": "2.0.3",
"remap-istanbul": "^0.6.3", "license-check": "1.1.5",
"remap-istanbul": "0.6.3",
"rimraf": "2.5.2", "rimraf": "2.5.2",
"traceur": "^0.0.91", "traceur": "0.0.91",
"tslint": "^3.8.1", "tslint": "3.8.1",
"typescript": "^1.8.10", "typescript": "^2.0.2",
"typings": "^1.0.4", "wsrv": "^0.1.5"
"wsrv": "^0.1.3"
}, },
"keywords": [ "keywords": [
"component", "component",

View File

@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core'; import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Response } from '@angular/http'; import { Response } from '@angular/http';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
@@ -29,37 +29,35 @@ import { BpmUserModel } from '../models/bpmUser.model';
@Injectable() @Injectable()
export class BPMUserService { export class BPMUserService {
constructor(public authService: AlfrescoAuthenticationService) {} constructor(private authService: AlfrescoAuthenticationService,
private settingService: AlfrescoSettingsService) {
}
/** /**
* get User Information via ECM * get User Information via ECM
* @param userName - the user name * @param userName - the user name
*/ */
getCurrentUserInfo(): Observable<BpmUserModel> { getCurrentUserInfo(): Observable<BpmUserModel> {
return Observable.fromPromise(this.callApiGetProfile()) if ( this.authService.getAlfrescoApi().bpmAuth.isLoggedIn() ) {
.map( return Observable.fromPromise(this.callApiGetProfile())
data => <BpmUserModel> data .map(
) data => <BpmUserModel> data
.do( )
data => console.log('Node data', data) .do(
) // eyeball results in the console data => console.log('Node data', data)
.catch(this.handleError); ) // eyeball results in the console
.catch(this.handleError);
}
} }
/** /**
* get User Information via ECM * get User Information via ECM
* @param userName - the user name * @param userName - the user name
*/ */
getCurrentUserProfileImage(): Observable<BpmUserModel> { getCurrentUserProfileImage(): string {
return Observable.fromPromise(this.callApiGetProfileImage()) if ( this.authService.getAlfrescoApi().bpmAuth.isLoggedIn() ) {
.do( return this.settingService.getBPMApiBaseUrl() + '/api/enterprise/profile-picture';
data => console.log('Node data', data) }
) // eyeball results in the console
.catch(this.handleError);
}
private callApiGetProfileImage() {
return this.authService.getAlfrescoApi().activiti.profileApi.getProfilePicture();
} }
private callApiGetProfile() { private callApiGetProfile() {

View File

@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { AlfrescoApiService } from 'ng2-alfresco-core'; import { AlfrescoAuthenticationService, AlfrescoContentService } from 'ng2-alfresco-core';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Response } from '@angular/http'; import { Response } from '@angular/http';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
@@ -29,23 +29,33 @@ import { EcmUserModel } from '../models/ecmUser.model';
@Injectable() @Injectable()
export class ECMUserService { export class ECMUserService {
constructor(private apiService: AlfrescoApiService) {} constructor(private authService: AlfrescoAuthenticationService,
private contentService: AlfrescoContentService) {}
/** /**
* get User Information via ECM * get User Information via ECM
* @param userName - the user name * @param userName - the user name
*/ */
getUserInfo(userName: string): Observable<EcmUserModel> { getUserInfo(userName: string): Observable<EcmUserModel> {
if ( this.authService.getAlfrescoApi().ecmAuth.isLoggedIn() ) {
return Observable.fromPromise(this.callApiGetPersonInfo(userName)) return Observable.fromPromise(this.callApiGetPersonInfo(userName))
.map( data => <EcmUserModel> data['entry']) .map( data => <EcmUserModel> data['entry'])
.do( .do(
data => console.log('Node data', data['entry']) data => console.log('Node data', data['entry'])
) // eyeball results in the console ) // eyeball results in the console
.catch(this.handleError); .catch(this.handleError);
}
} }
private callApiGetPersonInfo(userName: string, opts?: any) { private callApiGetPersonInfo(userName: string, opts?: any) {
return this.apiService.getInstance().core.peopleApi.getPerson(userName, opts); return this.authService.getAlfrescoApi().core.peopleApi.getPerson(userName, opts);
}
getCurrentUserProfileImageUrl(avatarId: string) {
if ( avatarId ) {
let nodeObj = {entry: {id: avatarId}};
return this.contentService.getContentUrl(nodeObj);
}
} }
/** /**

View File

@@ -1,9 +1,16 @@
<div id="profile-container"> <span *ngIf="ecmUser">{{ecmUser.firstName}} {{ecmUser.lastName}}</span>
<div class="button-profile" id="demo-menu-lower-right" data-automation-id="right-action-menu"> <span *ngIf="bpmUser">{{bpmUser.fullname}}</span>
<span *ngIf="ecmUser">{{ecmUser.firstName}} {{ecmUser.lastName}}</span> <button id="demo-menu-lower-right"
<span *ngIf="bpmUser">{{bpmUser.fullname}}</span> class="mdl-button mdl-js-button mdl-button--icon">
<img id="logged-user-img" <img id="logged-user-img"
src="{{ getUserAvatar() }}" src="{{ getUserAvatar() }}"
class="profile-image"/> class="profile-image"/>
</div> </button>
</div>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>

View File

@@ -15,12 +15,12 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ECMUserService } from './services/ecmUser.service'; import { ECMUserService } from './services/ecmUser.service';
import { BPMUserService } from './services/bpmUser.service'; import { BPMUserService } from './services/bpmUser.service';
import { EcmUserModel } from './models/ecmUser.model'; import { EcmUserModel } from './models/ecmUser.model';
import { BpmUserModel } from './models/bpmUser.model'; import { BpmUserModel } from './models/bpmUser.model';
import { AlfrescoContentService } from 'ng2-alfresco-core'; import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
declare let __moduleName: string; declare let __moduleName: string;
@@ -29,14 +29,11 @@ declare let __moduleName: string;
moduleId: __moduleName, moduleId: __moduleName,
styleUrls: ['./userinfo.component.css'], styleUrls: ['./userinfo.component.css'],
templateUrl: './userinfo.component.html', templateUrl: './userinfo.component.html',
providers: [ ECMUserService, BPMUserService, AlfrescoContentService ] providers: [ECMUserService, BPMUserService, AlfrescoAuthenticationService]
}) })
export class UserInfoComponent implements OnInit { export class UserInfoComponent implements OnInit {
@Input()
userEmail: string;
private ecmUser: EcmUserModel; private ecmUser: EcmUserModel;
private bpmUser: BpmUserModel; private bpmUser: BpmUserModel;
public bpmUserImage: any; public bpmUserImage: any;
@@ -46,51 +43,48 @@ export class UserInfoComponent implements OnInit {
constructor(private ecmUserService: ECMUserService, constructor(private ecmUserService: ECMUserService,
private bpmUserService: BPMUserService, private bpmUserService: BPMUserService,
private contentService: AlfrescoContentService) { public authService: AlfrescoAuthenticationService) {
} }
ngOnInit() { ngOnInit() {
this.ecmUserService.getUserInfo(this.userEmail) if (this.authService.getAlfrescoApi().ecmAuth.isLoggedIn()) {
.subscribe( this.ecmUserService.getUserInfo('-me-')
res => { .subscribe(
this.ecmUser = <EcmUserModel> res; (res) => {
this.getUserProfileImage(); this.ecmUser = <EcmUserModel> res;
console.log(this.ecmUserImage); this.getUserProfileImage();
} }
); );
this.bpmUserService.getCurrentUserInfo() }
.subscribe( if (this.authService.getAlfrescoApi().bpmAuth.isLoggedIn()) {
res => { this.bpmUserService.getCurrentUserInfo()
this.bpmUser = <BpmUserModel> res; .subscribe(
} (res) => {
); this.bpmUser = <BpmUserModel> res;
this.getUserProfileImage();
}
);
}
} }
private getUserProfileImage() { private getUserProfileImage() {
if (this.ecmUser && this.ecmUser.avatarId) { if (this.ecmUser) {
let nodeObj = { entry: { id: this.ecmUser.avatarId } }; this.ecmUserImage = this.ecmUserService.getCurrentUserProfileImageUrl(this.ecmUser.avatarId);
this.ecmUserImage = this.contentService.getContentUrl(nodeObj); }
} if (this.bpmUser) {
if (this.bpmUser) { this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
this.bpmUserService.getCurrentUserProfileImage() }
.subscribe(
res => this.bpmUserImage = res
);
}
} }
public getUserAvatar() { public getUserAvatar() {
if (this.ecmUserImage) { if (this.ecmUserImage) {
return this.ecmUserImage; return this.ecmUserImage;
} }
if (this.bpmUserImage) { if (this.bpmUserImage) {
return this.bpmUserImage; return this.bpmUserImage;
} }
if (!this.ecmUserImage && !this.bpmUserImage) { if (!this.ecmUserImage && !this.bpmUserImage) {
return this.baseComponentPath + '/img/anonymous.gif'; return this.baseComponentPath + '/img/anonymous.gif';
} }
} }
} }