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

2025-07-24 17:32:15 +00:00 · 2016-09-22 01:14:15 +01:00
parent a8c7486a26
commit 3b6b8ed59b
11 changed files with 167 additions and 119 deletions
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -21,6 +21,10 @@
                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
            </nav>

+            <div *ngIf="isLoggedIn()">
+                <ng2-alfresco-userinfo></ng2-alfresco-userinfo>
+            </div>
+
            <!-- Right aligned menu below button -->
            <button id="demo-menu-lower-right" data-automation-id="right-action-menu"
                    class="mdl-button mdl-js-button mdl-button--icon">
--- a/demo-shell-ng2/app/components/profile/profile.component.ts
+++ b/demo-shell-ng2/app/components/profile/profile.component.ts
@@ -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.
+ */
--- a/ng2-components/ng2-alfresco-upload/demo/index.html
+++ b/ng2-components/ng2-alfresco-upload/demo/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
--- a/ng2-components/ng2-alfresco-userinfo/demo/index.html
+++ b/ng2-components/ng2-alfresco-userinfo/demo/index.html
@@ -8,10 +8,11 @@
    <base href="/">

    <!-- 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>
    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

+
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
--- a/ng2-components/ng2-alfresco-userinfo/demo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/demo/package.json
@@ -7,8 +7,7 @@
  "typings": "./dist/index.d.ts",
  "scripts": {
    "clean": "rimraf dist node_modules typings",
-    "typings": "typings install",
-    "postinstall": "npm run typings && npm run build",
+    "postinstall": "npm run build",
    "start": "npm run tslint && rimraf dist && tsc && concurrently \"tsc -w\" \"npm run server\" ",
    "server": "wsrv -o -l -s",
    "build": "npm run tslint && rimraf dist && tsc",
@@ -23,9 +22,11 @@
    "demo"
  ],
  "dependencies": {
+    "alfresco-js-api": "^0.3.0",
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "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/platform-browser": "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/upgrade": "2.0.0-rc.3",
    "systemjs": "0.19.27",
-    "core-js": "^2.4.0",
-    "reflect-metadata": "^0.1.3",
+    "core-js": "2.4.0",
+    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
-    "zone.js": "^0.6.12",
-    "material-design-icons": "^2.2.3",
-    "material-design-lite": "^1.1.3",
+    "zone.js": "0.6.12",
    "ng2-translate": "2.2.2",
-
-    "ng2-alfresco-userinfo": "file:../",
-    "ng2-alfresco-core": "^0.3.0",
-    "alfresco-js-api": "^0.3.0"
+    "ng2-alfresco-core": "0.3.2",
+    "ng2-alfresco-userinfo": "file:../"
+  },
+  "peerDependencies": {
+    "material-design-icons": "^2.2.3",
+    "material-design-lite": "^1.1.3"
  },
  "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",
-    "tslint": "^3.8.1",
-    "typescript": "^1.8.10",
-    "typings": "^1.0.4",
-    "wsrv": "^0.1.4"
+    "traceur": "0.0.91",
+    "tslint": "3.8.1",
+    "typescript": "^2.0.2",
+    "wsrv": "^0.1.5"
  }
+
 }
--- a/ng2-components/ng2-alfresco-userinfo/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-userinfo/demo/src/main.ts
@@ -6,6 +6,7 @@ import { HTTP_PROVIDERS } from '@angular/http';
 import {
    AlfrescoSettingsService,
    AlfrescoAuthenticationService,
+    MDL,
    ALFRESCO_CORE_PROVIDERS
 } from 'ng2-alfresco-core';

@@ -31,7 +32,7 @@ import {
  </p>
 </div>
 <div *ngIf="isLoggedIn()">
-    <ng2-alfresco-userinfo [userEmail]=userToLogin></ng2-alfresco-userinfo>
+    <ng2-alfresco-userinfo></ng2-alfresco-userinfo>
 </div>
 <p></p>
 <div>
@@ -49,7 +50,7 @@ import {

 <button (click)="logout()">Logout</button>`,
  directives: [ UserInfoComponent ],
-  providers: [AlfrescoAuthenticationService, AlfrescoSettingsService]
+  providers: [AlfrescoAuthenticationService, AlfrescoSettingsService, MDL]
 })


--- a/ng2-components/ng2-alfresco-userinfo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/package.json
@@ -4,9 +4,7 @@
  "version": "0.1.0",
  "author": "vito albano <vito.albano@alfresco.com>",
  "scripts": {
-    "postinstall": "typings install",
-    "clean": "rimraf dist node_modules typings",
-    "typings": "typings install",
+    "clean": "rimraf dist node_modules",
    "license-check": "echo 'license check is disabled'",
    "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",
@@ -21,7 +19,6 @@
    "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",
    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish": "npm run build",
    "travis": "echo 'placeholder'"
  },
  "main": "./dist/index.js",
@@ -33,10 +30,13 @@
  "bugs": {
    "url": "https://github.com/alfresco/ng2-alfresco-userinfo/issues"
  },
+
  "dependencies": {
+    "alfresco-js-api": "^0.3.0",
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "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/platform-browser": "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/upgrade": "2.0.0-rc.3",
    "systemjs": "0.19.27",
-    "core-js": "^2.4.0",
-    "reflect-metadata": "^0.1.3",
+    "core-js": "2.4.0",
+    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
-    "zone.js": "^0.6.12",
+    "zone.js": "0.6.12",
    "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": {
-    "angular-cli": "1.0.0-beta.9",
-    "concurrently": "^2.1.0",
-    "cpx": "^1.3.1",
-    "jasmine-ajax": "^3.2.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": "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",
-    "remap-istanbul": "^0.6.3",
+    "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",
-    "traceur": "^0.0.91",
-    "tslint": "^3.8.1",
-    "typescript": "^1.8.10",
-    "typings": "^1.0.4",
-    "wsrv": "^0.1.3"
+    "traceur": "0.0.91",
+    "tslint": "3.8.1",
+    "typescript": "^2.0.2",
+    "wsrv": "^0.1.5"
  },
  "keywords": [
    "component",
--- a/ng2-components/ng2-alfresco-userinfo/src/services/bpmUser.service.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/services/bpmUser.service.ts
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
@@ -29,37 +29,35 @@ import { BpmUserModel } from '../models/bpmUser.model';
@Injectable()
 export class BPMUserService {

-    constructor(public authService: AlfrescoAuthenticationService) {}
+    constructor(private authService: AlfrescoAuthenticationService,
+                private settingService: AlfrescoSettingsService) {
+    }

    /**
     * get User Information via ECM
     * @param userName - the user name
     */
    getCurrentUserInfo(): Observable<BpmUserModel> {
-        return Observable.fromPromise(this.callApiGetProfile())
-            .map(
-                 data => <BpmUserModel> data
-                )
-            .do(
-                 data => console.log('Node data', data)
-                ) // eyeball results in the console
-            .catch(this.handleError);
+       if ( this.authService.getAlfrescoApi().bpmAuth.isLoggedIn() ) {
+            return Observable.fromPromise(this.callApiGetProfile())
+                .map(
+                     data => <BpmUserModel> data
+                    )
+                .do(
+                     data => console.log('Node data', data)
+                    ) // eyeball results in the console
+                .catch(this.handleError);
+        }
    }

    /**
     * get User Information via ECM
     * @param userName - the user name
     */
-    getCurrentUserProfileImage(): Observable<BpmUserModel> {
-        return Observable.fromPromise(this.callApiGetProfileImage())
-            .do(
-                 data => console.log('Node data', data)
-                ) // eyeball results in the console
-            .catch(this.handleError);
-    }
-
-    private callApiGetProfileImage() {
-        return this.authService.getAlfrescoApi().activiti.profileApi.getProfilePicture();
+    getCurrentUserProfileImage(): string {
+       if ( this.authService.getAlfrescoApi().bpmAuth.isLoggedIn() ) {
+            return this.settingService.getBPMApiBaseUrl() + '/api/enterprise/profile-picture';
+       }
    }

    private callApiGetProfile() {
--- a/ng2-components/ng2-alfresco-userinfo/src/services/ecmUser.service.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/services/ecmUser.service.ts
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { AlfrescoAuthenticationService, AlfrescoContentService } from 'ng2-alfresco-core';
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
@@ -29,23 +29,33 @@ import { EcmUserModel } from '../models/ecmUser.model';
@Injectable()
 export class ECMUserService {

-    constructor(private apiService: AlfrescoApiService) {}
+    constructor(private authService: AlfrescoAuthenticationService,
+                private contentService: AlfrescoContentService) {}

    /**
     * get User Information via ECM
     * @param userName - the user name
     */
    getUserInfo(userName: string): Observable<EcmUserModel> {
+      if ( this.authService.getAlfrescoApi().ecmAuth.isLoggedIn() ) {
        return Observable.fromPromise(this.callApiGetPersonInfo(userName))
            .map( data => <EcmUserModel> data['entry'])
            .do(
                 data => console.log('Node data', data['entry'])
                ) // eyeball results in the console
            .catch(this.handleError);
+      }
    }

    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);
+       }
    }

    /**
--- a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html
+++ b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html
@@ -1,9 +1,16 @@
-<div id="profile-container">
-    <div class="button-profile" id="demo-menu-lower-right" data-automation-id="right-action-menu">
-        <span *ngIf="ecmUser">{{ecmUser.firstName}} {{ecmUser.lastName}}</span>
-        <span *ngIf="bpmUser">{{bpmUser.fullname}}</span>
-        <img id="logged-user-img"
-             src="{{ getUserAvatar() }}"
-             class="profile-image"/>
-    </div>
-</div>
+<span *ngIf="ecmUser">{{ecmUser.firstName}} {{ecmUser.lastName}}</span>
+<span *ngIf="bpmUser">{{bpmUser.fullname}}</span>
+<button id="demo-menu-lower-right"
+        class="mdl-button mdl-js-button mdl-button--icon">
+            <img id="logged-user-img"
+                 src="{{ getUserAvatar() }}"
+                 class="profile-image"/>
+</button>
+
+<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>
--- a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts
@@ -15,12 +15,12 @@
 * limitations under the License.
 */

-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ECMUserService } from './services/ecmUser.service';
 import { BPMUserService } from './services/bpmUser.service';
 import { EcmUserModel } from './models/ecmUser.model';
 import { BpmUserModel } from './models/bpmUser.model';
-import { AlfrescoContentService } from 'ng2-alfresco-core';
+import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';

 declare let __moduleName: string;

@@ -29,14 +29,11 @@ declare let __moduleName: string;
    moduleId: __moduleName,
    styleUrls: ['./userinfo.component.css'],
    templateUrl: './userinfo.component.html',
-    providers: [ ECMUserService, BPMUserService, AlfrescoContentService ]
+    providers: [ECMUserService, BPMUserService, AlfrescoAuthenticationService]
 })

 export class UserInfoComponent implements OnInit {

-    @Input()
-    userEmail: string;
-
    private  ecmUser: EcmUserModel;
    private  bpmUser: BpmUserModel;
    public   bpmUserImage: any;
@@ -46,51 +43,48 @@ export class UserInfoComponent implements OnInit {

    constructor(private ecmUserService: ECMUserService,
                private bpmUserService: BPMUserService,
-                private contentService: AlfrescoContentService) {
+                public authService: AlfrescoAuthenticationService) {
    }

    ngOnInit() {
-        this.ecmUserService.getUserInfo(this.userEmail)
-                                .subscribe(
-                                      res => {
-                                        this.ecmUser = <EcmUserModel> res;
-                                        this.getUserProfileImage();
-                                        console.log(this.ecmUserImage);
-                                      }
-                                );
-        this.bpmUserService.getCurrentUserInfo()
-                                .subscribe(
-                                      res => {
-                                        this.bpmUser = <BpmUserModel> res;
-                                      }
-                                );
-
+        if (this.authService.getAlfrescoApi().ecmAuth.isLoggedIn()) {
+            this.ecmUserService.getUserInfo('-me-')
+                .subscribe(
+                    (res) => {
+                    this.ecmUser = <EcmUserModel> res;
+                    this.getUserProfileImage();
+                }
+            );
+        }
+        if (this.authService.getAlfrescoApi().bpmAuth.isLoggedIn()) {
+            this.bpmUserService.getCurrentUserInfo()
+                .subscribe(
+                    (res) => {
+                    this.bpmUser = <BpmUserModel> res;
+                    this.getUserProfileImage();
+                }
+            );
+        }
    }

    private getUserProfileImage() {
-      if (this.ecmUser && this.ecmUser.avatarId) {
-          let nodeObj = { entry: { id: this.ecmUser.avatarId } };
-          this.ecmUserImage = this.contentService.getContentUrl(nodeObj);
-      }
-      if (this.bpmUser) {
-          this.bpmUserService.getCurrentUserProfileImage()
-                                .subscribe(
-                                      res => this.bpmUserImage = res
-                                );
-      }
+        if (this.ecmUser) {
+            this.ecmUserImage = this.ecmUserService.getCurrentUserProfileImageUrl(this.ecmUser.avatarId);
+        }
+        if (this.bpmUser) {
+            this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
+        }
    }

    public getUserAvatar() {
-      if (this.ecmUserImage) {
-         return this.ecmUserImage;
-      }
-      if (this.bpmUserImage) {
-         return this.bpmUserImage;
-      }
-      if (!this.ecmUserImage && !this.bpmUserImage) {
-         return  this.baseComponentPath + '/img/anonymous.gif';
-      }
+        if (this.ecmUserImage) {
+            return this.ecmUserImage;
+        }
+        if (this.bpmUserImage) {
+            return this.bpmUserImage;
+        }
+        if (!this.ecmUserImage && !this.bpmUserImage) {
+            return this.baseComponentPath + '/img/anonymous.gif';
+        }
    }
-
-
 }