From b2848a5ca8a68a19dd3811af1006298b9605de49 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 8 Mar 2017 12:04:27 +0000
Subject: [PATCH] user-info component fixes (#1694)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* user-info fixes

- fix image paths to be relative rather than rooted (for user info,
refs #1606)
- fix full name rendering
- fix styling for ‘job title’

* fix unit tests
---
 .../src/components/user-info.component.css    | 11 ++---
 .../src/components/user-info.component.html   | 43 ++++++++-----------
 .../components/user-info.component.spec.ts    |  5 +--
 .../src/components/user-info.component.ts     | 34 +++++++++------
 4 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css
index 9ccf104ae2..7bc59afcde 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css
@@ -49,11 +49,6 @@ span.role-label-user{
     color: rgba(0,0,0,.87);
 }
 
-.custom-role-style{
-    font-size: 14px;
-    color: #9e9e9e;
-}
-
 .truncate-long-names{
     text-overflow: ellipsis;
 }
@@ -83,3 +78,9 @@ img.profile-picture {
     margin-left: 0px;
     margin-right: 8px;
 }
+
+.user-info__job-title {
+    align-items: flex-start;
+    font-size: 14px;
+    color: #9e9e9e;
+}
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
index 4cd58d5c4b..ed6120bf13 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
@@ -8,20 +8,20 @@
                  class="profile-image"/>
         </div>
         <div mdl id="user-profile-lists" class="user-profile-list-mdl mdl-menu mdl-js-menu mdl-js-ripple-effect"
-             [class.mdl-menu--bottom-left]="menuOpenType === 'left'? true : false"
-             [class.mdl-menu--bottom-right]="menuOpenType === 'right'? true : false"
+             [class.mdl-menu--bottom-left]="menuOpenType === 'left'"
+             [class.mdl-menu--bottom-right]="menuOpenType === 'right'"
              for="user-profile" (click)="stopClosing($event)">
             <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items">
                 <div id="tab-bar-env" class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
                     <a href="#ecm-panel" id="ecm-tab" class="mdl-tabs__tab is-active">Content Services</a>
                     <a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">Process Services</a>
                 </div>
-                <div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" id="ecm-panel">
+                <div class="mdl-tabs__panel" [class.is-active]="ecmUser" id="ecm-panel">
                     <div class="detail-user-profile-list-mdl mdl-list" *ngIf="ecmUser">
                         <div class="demo-card-wide mdl-card">
                             <div class="card-title__option mdl-card__title"
                                  id="ecm-background-image"
-                                 [style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/assets/images/ecm-background.png')+')'">
+                                 [style.background-image]="'url(' + ecmBackgroundImage + ')'">
                                 <img class="profile-picture"
                                      id="ecm-user-detail-image"
                                      alt="ecm-profile-image"
@@ -32,27 +32,24 @@
                             <div class="mdl-card__supporting-text">
                                 <li class="mdl-list__item mdl-list__item--two-line">
                                     <span class="mdl-list__item-primary-content">
-                                    <span id="ecm-full-name" class="truncate-long-names">
-                                        {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
+                                        <span id="ecm-full-name" class="truncate-long-names">{{getEcmFullName()}}</span>
+                                        <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
                                     </span>
-                                    <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
-                                    </span>
-                                    <span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
-                                        <span
-                                            class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
-                                        {{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
+                                    <span id="ecm-job-title" class="mdl-list__item-secondary-content user-info__job-title">
+                                        <span class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
+                                        {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }}
                                     </span>
                                 </li>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel">
+                <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser" id="bpm-panel">
                     <div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
                         <div class="demo-card-wide mdl-card">
                             <div class="card-title__option mdl-card__title"
                                  id="bpm-background-image"
-                                 [style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/assets/images/bpm-background.png')+')'">
+                                 [style.background-image]="'url(' + bpmBackgroundImage + ')'">
                                 <img class="profile-picture"
                                      id="bpm-user-detail-image"
                                      alt="bpm-profile-image"
@@ -62,16 +59,14 @@
                             </div>
                             <div class="mdl-card__supporting-text">
                                 <li class="mdl-list__item mdl-list__item--two-line">
-                            <span class="mdl-list__item-primary-content">
-                            <span id="bpm-full-name" class="truncate-long-names">
-                                {{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
-                            </span>
-                            <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
-                            </span>
-                                    <span id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style">
-                                <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
-                                {{bpmUser.tenantName}}
-                            </span>
+                                    <span class="mdl-list__item-primary-content">
+                                        <span id="bpm-full-name" class="truncate-long-names">{{ getBpmFullName() }}</span>
+                                        <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
+                                    </span>
+                                    <span id="bpm-tenant" class="mdl-list__item-secondary-content user-info__job-title">
+                                        <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
+                                        {{ bpmUser.tenantName }}
+                                    </span>
                                 </li>
                             </div>
                         </div>
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
index 69313b9f20..208f4b5f3d 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
@@ -119,10 +119,9 @@ describe('User info component', () => {
         expect(element.querySelector('#user-profile-lists')).toBeNull();
     });
 
-    it('should format null string values in null value', () => {
+    it('should format null string values in empty value', () => {
         let res = userInfoComp.formatValue('null');
-        expect(res).toBeDefined();
-        expect(res).toBeNull();
+        expect(res).toBe('');
     });
 
     it('should return the value when it is not null string', () => {
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
index 0098ef6949..15833f064d 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
@@ -32,11 +32,13 @@ declare let componentHandler: any;
 })
 export class UserInfoComponent implements OnInit {
 
-    @Input()
-    ecmBackgroundImage: string;
+    private baseComponentPath = module.id.replace('components/user-info.component.js', '');
 
     @Input()
-    bpmBackgroundImage: string;
+    ecmBackgroundImage: string = this.baseComponentPath + 'assets/images/ecm-background.png';
+
+    @Input()
+    bpmBackgroundImage: string = this.baseComponentPath + 'assets/images/bpm-background.png';
 
     @Input()
     menuOpenType: string = 'right';
@@ -44,16 +46,10 @@ export class UserInfoComponent implements OnInit {
     @Input()
     fallBackThumbnailImage: string;
 
-    private baseComponentPath = module.id.replace('components/user-info.component.js', '');
-
     ecmUser: EcmUserModel;
-
     bpmUser: BpmUserModel;
-
-    anonymousImageUrl: string = this.baseComponentPath + '/assets/images/anonymous.gif';
-
+    anonymousImageUrl: string = this.baseComponentPath + 'assets/images/anonymous.gif';
     bpmUserImage: any;
-
     ecmUserImage: any;
 
     constructor(private ecmUserService: EcmUserService,
@@ -119,7 +115,21 @@ export class UserInfoComponent implements OnInit {
         event.stopPropagation();
     }
 
-    getUserNameHeaderFor(env: string) {
+    getEcmFullName(): string {
+        if (this.ecmUser) {
+            return `${this.formatValue(this.ecmUser.firstName)} ${this.formatValue(this.ecmUser.lastName)}`.trim();
+        }
+        return 'N/A';
+    }
+
+    getBpmFullName(): string {
+        if (this.bpmUser) {
+            return `${this.formatValue(this.bpmUser.firstName)} ${this.formatValue(this.bpmUser.lastName)}`.trim();
+        }
+        return 'N/A';
+    }
+
+    getUserNameHeaderFor(env: string): string {
         if (this.ecmUser && env === 'ECM') {
             return this.ecmUser.firstName || this.ecmUser.lastName;
         }
@@ -148,6 +158,6 @@ export class UserInfoComponent implements OnInit {
     }
 
     formatValue(value: string) {
-        return value === 'null' ? null : value;
+        return value && value !== 'null' ? value : '';
     }
 }