From 5c401007f28acd7e20729bc745ae1d9661610816 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Tue, 29 Nov 2016 13:26:41 +0000
Subject: [PATCH] user-info fixes and performance improvements (#1171)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* #1167 document-list improvements

- allow setting custom root path
- document-list module now re-exports datatable module (no need
importing it separately if document-list is already used)
- documentation updates and fixes

* readme updates and unit test

* user-info fixes and performance improvements

- setup live reloads for user-info (demo shell)
- optimise user-info template (single *ngIf, [mdl] directive for
‘user-profile-lists’ instead of CPU-hungry `ngAfterViewChecked`)
---
 demo-shell-ng2/wsrv-config.json               |   1 +
 .../src/components/user-info.component.html   | 145 +++++++++---------
 .../src/components/user-info.component.ts     |  11 +-
 3 files changed, 76 insertions(+), 81 deletions(-)

diff --git a/demo-shell-ng2/wsrv-config.json b/demo-shell-ng2/wsrv-config.json
index bacfda5339..5329327a46 100644
--- a/demo-shell-ng2/wsrv-config.json
+++ b/demo-shell-ng2/wsrv-config.json
@@ -6,6 +6,7 @@
         "node_modules/ng2-alfresco-login/dist/**/*.{html,css,js}",
         "node_modules/ng2-alfresco-search/dist/**/*.{html,css,js}",
         "node_modules/ng2-alfresco-upload/dist/**/*.{html,css,js}",
+        "node_modules/ng2-alfresco-userinfo/dist/**/*.{html,css,js}",
         "node_modules/ng2-alfresco-viewer/dist/**/*.{html,css,js}",
         "node_modules/ng2-alfresco-webscript/dist/**/*.{html,css,js}",
         "node_modules/ng2-activiti-form/dist/**/*.{html,css,js}",
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 753230730e..0591a3d99e 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
@@ -1,83 +1,84 @@
 <div id="userinfo_container" *ngIf="isLoggedIn()">
-    <div *ngIf="ecmUser || bpmUser" class="button-profile" id="user-profile" data-automation-id="user-profile">
-        <img id="logged-user-img"
-             [src]="getUserAvatar()"
-             alt="user-info-profile-button"
-             (error)="onImageLoadingError($event)"
-             class="profile-image"/>
-    </div>
-    <div *ngIf="ecmUser || bpmUser" 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"
-         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">ECM</a>
-                <a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">BPM</a>
-            </div>
-            <div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" 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 + '/../img/orangeBanner.png')+')'">
-                            <img class="profile-picture"
-                                 id="ecm-user-detail-image"
-                                 alt="ecm-profile-image"
-                                 (error)="onImageLoadingError($event)"
-                                 [src]="getEcmUserAvatar()"/>
-                            <h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
-                        </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="ecm-full-name" class="truncate-long-names">
-                                      {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
-                                  </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>
-                            </li>
+    <div *ngIf="ecmUser || bpmUser">
+        <div class="button-profile" id="user-profile" data-automation-id="user-profile">
+            <img id="logged-user-img"
+                [src]="getUserAvatar()"
+                alt="user-info-profile-button"
+                (error)="onImageLoadingError($event)"
+                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"
+            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">ECM</a>
+                    <a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">BPM</a>
+                </div>
+                <div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" 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 + '/../img/orangeBanner.png')+')'">
+                                <img class="profile-picture"
+                                    id="ecm-user-detail-image"
+                                    alt="ecm-profile-image"
+                                    (error)="onImageLoadingError($event)"
+                                    [src]="getEcmUserAvatar()"/>
+                                <h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
+                            </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="ecm-full-name" class="truncate-long-names">
+                                        {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
+                                    </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>
+                                </li>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" 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 + '/../img/blueBanner.png')+')'">
-                            <img class="profile-picture"
-                                 id="bpm-user-detail-image"
-                                 alt="bpm-profile-image"
-                                 (error)="onImageLoadingError($event)"
-                                 [src]="getBpmUserAvatar()"/>
-                            <h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
-                        </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>
-                            </li>
+                <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" 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 + '/../img/blueBanner.png')+')'">
+                                <img class="profile-picture"
+                                    id="bpm-user-detail-image"
+                                    alt="bpm-profile-image"
+                                    (error)="onImageLoadingError($event)"
+                                    [src]="getBpmUserAvatar()"/>
+                                <h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
+                            </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>
+                                </li>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
 
+    </div>
 </div>
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 35a9419f3c..9045a09c0e 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
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Input, AfterViewChecked } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { EcmUserModel } from './../models/ecm-user.model';
 import { BpmUserModel } from './../models/bpm-user.model';
 import { EcmUserService } from './../services/ecm-user.service';
@@ -30,7 +30,7 @@ declare let componentHandler: any;
     styleUrls: ['./user-info.component.css'],
     templateUrl: './user-info.component.html'
 })
-export class UserInfoComponent implements AfterViewChecked, OnInit {
+export class UserInfoComponent implements OnInit {
 
     @Input()
     ecmBackgroundImage: string;
@@ -69,13 +69,6 @@ export class UserInfoComponent implements AfterViewChecked, OnInit {
         });
     }
 
-    ngAfterViewChecked() {
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-    }
-
     ngOnInit() {
         this.getUserInfo();
     }