mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
[ADF-1237] removed material design lite from userinfo component (#2238)
* [ADF-1083] removing material design lite from userinfo component * [ADF-1237] - styled userinfo component] * [ADF-1237] removed material design lite from userinfo component * [ADF-1237] updated readme with the two new options
This commit is contained in:
Vito
Mario Romano
parent
07ba8bc15f
commit
98cb6de595
@ -1,7 +1,8 @@
|
||||
<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
|
||||
<ng2-alfresco-userinfo
|
||||
class="user-profile"
|
||||
[menuOpenType]="left">
|
||||
[menuPositionX]="'before'"
|
||||
[menuPositionY]="'above'">
|
||||
</ng2-alfresco-userinfo>
|
||||
|
||||
<span>ADF Demo Application</span>
|
||||
|
||||
@ -33,6 +33,8 @@
|
||||
@import '../../ng2-alfresco-core/styles/theme-colors';
|
||||
|
||||
@import '../../ng2-alfresco-datatable/src/components/datatable/datatable.component.scss';
|
||||
@import '../../ng2-alfresco-userinfo/src/components/user-info.component.scss';
|
||||
|
||||
|
||||
@mixin alfresco-material-theme($theme) {
|
||||
@include mat-colors-theme($theme);
|
||||
@ -61,4 +63,5 @@
|
||||
@include mat-breadcrumb-dropdown-theme($theme);
|
||||
@include mat-datatable-theme($theme);
|
||||
@include mat-content-node-selector-theme($theme);
|
||||
@include mat-userinfo-theme($theme);
|
||||
}
|
||||
|
||||
@ -42,7 +42,8 @@ npm install ng2-alfresco-userinfo
|
||||
| --- | --- | --- | --- |
|
||||
| ecmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for ECM users |
|
||||
| bpmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for BPM users |
|
||||
| menuOpenType | string | right | Custom choice for opening the menu bottom : `right` or `left` |
|
||||
| menuPositionX | string | | Custom choice for opening the menu bottom : `before` or `after` |
|
||||
| menuPositionY | string | | Custom choice for opening the menu bottom : `above` or `below` |
|
||||
| fallBackThumbnailImage | string | (alfresco image) | Fallback image for profile when thumbnail is missing|
|
||||
|
||||
This will show a round icon with user and on click some user information.
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
|
||||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
|
||||
import { MaterialModule } from './src/material.module';
|
||||
|
||||
import { UserInfoComponent } from './src/components/user-info.component';
|
||||
import { BpmUserService } from './src/services/bpm-user.service';
|
||||
@ -37,7 +38,8 @@ export const USER_INFO_PROVIDERS: any[] = [
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CoreModule
|
||||
CoreModule,
|
||||
MaterialModule
|
||||
],
|
||||
declarations: [
|
||||
...USER_INFO_DIRECTIVES
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
.profile-image {
|
||||
text-align: center;
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 0%;
|
||||
cursor: pointer;
|
||||
border: 1px solid #999999;
|
||||
vertical-align: middle;
|
||||
background-color:white;;
|
||||
}
|
||||
|
||||
.button-profile {
|
||||
display: inline-block;
|
||||
border: 0px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.detail-user-profile-list-mdl{
|
||||
padding: 0px 0;
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 480px) {
|
||||
.user-profile-list-mdl{
|
||||
max-height: 450px;
|
||||
min-width: 450px;
|
||||
overflow: auto;
|
||||
padding:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-profile{
|
||||
color: rgb(255,152,0);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
hr.title-start {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: #333;
|
||||
background-image: linear-gradient(to right, #ccc, #333, #ccc);
|
||||
}
|
||||
|
||||
span.role-label-user{
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
color: rgba(0,0,0,.87);
|
||||
}
|
||||
|
||||
.truncate-long-names{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.demo-card-wide.mdl-card {
|
||||
width: inherit;
|
||||
}
|
||||
.demo-card-wide > .mdl-card__title {
|
||||
color: #fff;
|
||||
height: 176px;
|
||||
}
|
||||
.demo-card-wide > .mdl-card__menu {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-title__option{
|
||||
height: 100px!important;
|
||||
}
|
||||
|
||||
img.profile-picture {
|
||||
background-color: white;
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 4px rgba(0,0,0,0.3);
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
z-index: 3;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.user-info__job-title {
|
||||
align-items: flex-start;
|
||||
font-size: 14px;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
@ -1,79 +1,66 @@
|
||||
<div id="userinfo_container" *ngIf="isLoggedIn()">
|
||||
<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'"
|
||||
[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" 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 + ')'">
|
||||
<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">{{ecmUser.fullNameDisplay}}</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">{{ecmUser.fullNameDisplay}}</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 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" 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 + ')'">
|
||||
<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">{{bpmUser.fullNameDisplay}}</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">{{ bpmUser.fullNameDisplay }}</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button md-button [mdMenuTriggerFor]="menu" class="adf-userinfo-menu_button">
|
||||
<div class="adf-userinfo-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="adf-userinfo-profile-image"/>
|
||||
</div>
|
||||
</button>
|
||||
<md-menu #menu="mdMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" [overlapTrigger]="false" class="adf-userinfo-menu">
|
||||
<md-tab-group id="tab-group-env" (click)="stopClosing($event)"
|
||||
class="adf-userinfo-tab" [class.adf-hide-tab]="!bpmUser || !ecmUser">
|
||||
<md-tab id="ecm-panel" label="Content Services" *ngIf="ecmUser">
|
||||
<md-card class="adf-userinfo-card">
|
||||
<md-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
|
||||
<img class="adf-userinfo-profile-picture"
|
||||
id="ecm-user-detail-image"
|
||||
alt="ecm-profile-image"
|
||||
(error)="onImageLoadingError($event)"
|
||||
[src]="getEcmUserAvatar()" />
|
||||
<h2 class="adf-userinfo-title" id="ecm-username">{{ecmUser.fullNameDisplay}}</h2>
|
||||
</md-card-header>
|
||||
<md-card-content>
|
||||
<div class="adf-userinfo-supporting-text">
|
||||
<div class="adf-userinfo-detail">
|
||||
<span id="ecm-full-name" class="adf-userinfo__detail-title">{{ecmUser.fullNameDisplay}}</span>
|
||||
<span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
|
||||
</div>
|
||||
<div class="adf-userinfo-detail">
|
||||
<span class="adf-userinfo__secondary-info">
|
||||
{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
|
||||
<span id="ecm-job-title" class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</md-tab>
|
||||
<md-tab label="Process Services" id="bpm-panel" *ngIf="bpmUser">
|
||||
<md-card class="adf-userinfo-card">
|
||||
<md-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
|
||||
<img class="adf-userinfo-profile-picture"
|
||||
id="bpm-user-detail-image"
|
||||
alt="bpm-profile-image"
|
||||
(error)="onImageLoadingError($event)"
|
||||
[src]="getBpmUserAvatar()"/>
|
||||
<h2 class="adf-userinfo-title" id="bpm-username">{{bpmUser.fullNameDisplay}}</h2>
|
||||
</md-card-header>
|
||||
<md-card-content>
|
||||
<div class="adf-userinfo-supporting-text">
|
||||
<div class="adf-userinfo-detail">
|
||||
<span id="bpm-full-name" class="adf-userinfo__detail-title">{{ bpmUser.fullNameDisplay }}</span>
|
||||
<span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
|
||||
</div>
|
||||
<div class="adf-userinfo-detail">
|
||||
<span id="bpm-tenant" class="adf-userinfo__secondary-info">
|
||||
{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
|
||||
<span class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : 'N/A' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</md-menu>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,153 @@
|
||||
@mixin mat-userinfo-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.adf {
|
||||
|
||||
&-userinfo-profile-image {
|
||||
text-align: center;
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 0%;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-userinfo-menu_button.mat-button {
|
||||
margin-right: 0%;
|
||||
border-radius: 90%;
|
||||
padding: 0px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&-userinfo-tab /deep/ .mat-tab-header {
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-userinfo-tab /deep/ .mat-tab-label {
|
||||
flex: auto;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-userinfo-card-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
line-height: normal;
|
||||
height: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&-userinfo-card.mat-card {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
&-userinfo-supporting-text {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-userinfo-title {
|
||||
font: 500 20px/32px Roboto,"Helvetica Neue",sans-serif;
|
||||
margin: 0;
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
-webkit-align-self: flex-end;
|
||||
overflow: hidden;
|
||||
transform-origin: 149px 48px;
|
||||
padding: 0;
|
||||
-webkit-margin-before: 0.83em;
|
||||
-webkit-margin-after: 0.83em;
|
||||
-webkit-margin-start: 0px;
|
||||
-webkit-margin-end: 0px;
|
||||
}
|
||||
|
||||
&-userinfo__detail-profile {
|
||||
align-items: flex-start;
|
||||
font-size: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
align-items: flex-start;
|
||||
margin: 0px;
|
||||
color: mat-color($primary, A100);
|
||||
}
|
||||
|
||||
&-userinfo__detail-title {
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: .04em;
|
||||
line-height: 20px;
|
||||
align-items: flex-start
|
||||
}
|
||||
|
||||
&-userinfo__secondary-info {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&-userinfo-profile-picture {
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
z-index: 3;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-userinfo-button-profile {
|
||||
display: inline-block;
|
||||
border: 0px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-userinfo-detail {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
&-hide-tab /deep/ .mat-tab-label-active {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 480px) {
|
||||
.mat-menu-panel.adf-userinfo-menu {
|
||||
max-height: 450px;
|
||||
min-width: 450px;
|
||||
overflow: auto;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-panel.adf-userinfo-menu /deep/ .mat-menu-content{
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
@ -16,6 +16,7 @@
|
||||
*/
|
||||
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import {
|
||||
AlfrescoAuthenticationService,
|
||||
AlfrescoContentService,
|
||||
@ -25,6 +26,7 @@ import {
|
||||
import { fakeBpmUser } from '../assets/fake-bpm-user.service.mock';
|
||||
import { fakeEcmEditedUser, fakeEcmUser, fakeEcmUserNoImage } from '../assets/fake-ecm-user.service.mock';
|
||||
import { TranslationMock } from '../assets/translation.service.mock';
|
||||
import { MaterialModule } from '../material.module';
|
||||
import { BpmUserService } from '../services/bpm-user.service';
|
||||
import { EcmUserService } from '../services/ecm-user.service';
|
||||
import { BpmUserModel } from './../models/bpm-user.model';
|
||||
@ -46,7 +48,8 @@ describe('User info component', () => {
|
||||
window['componentHandler'] = componentHandler;
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
CoreModule.forRoot()
|
||||
CoreModule.forRoot(),
|
||||
MaterialModule
|
||||
],
|
||||
declarations: [
|
||||
UserInfoComponent
|
||||
@ -110,11 +113,15 @@ describe('User info component', () => {
|
||||
});
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#ecm-username')).toBeDefined();
|
||||
expect(element.querySelector('#ecm-username').textContent).not.toContain('fake-ecm-first-name');
|
||||
expect(element.querySelector('#ecm-username').textContent).not.toContain('null');
|
||||
let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
|
||||
expect(ecmUsername).toBeDefined();
|
||||
expect(ecmUsername).not.toBeNull();
|
||||
expect(ecmUsername.nativeElement.textContent).not.toContain('fake-ecm-first-name');
|
||||
expect(ecmUsername.nativeElement.textContent).not.toContain('null');
|
||||
});
|
||||
}));
|
||||
|
||||
@ -132,23 +139,32 @@ describe('User info component', () => {
|
||||
|
||||
it('should get the ecm current user image from the service', async(() => {
|
||||
fixture.whenStable().then(() => {
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#logged-user-img')).toBeDefined();
|
||||
expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain('assets/images/ecmImg.gif');
|
||||
let loggedImage = fixture.debugElement.query(By.css('#logged-user-img'));
|
||||
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(loggedImage).not.toBeNull();
|
||||
expect(loggedImage.properties.src).toContain('assets/images/ecmImg.gif');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should get the ecm user informations from the service', () => {
|
||||
fixture.whenStable().then(() => {
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#ecm_username')).toBeDefined();
|
||||
expect(element.querySelector('#ecm_title')).toBeDefined();
|
||||
expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
|
||||
expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toContain('assets/images/ecmImg.gif');
|
||||
expect(element.querySelector('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
|
||||
expect(element.querySelector('#ecm-job-title').textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
|
||||
let ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
|
||||
let ecmFullName = fixture.debugElement.query(By.css('#ecm-full-name'));
|
||||
let ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title-label'));
|
||||
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(fixture.debugElement.query(By.css('#ecm-username'))).not.toBeNull();
|
||||
expect(ecmImage).not.toBeNull();
|
||||
expect(ecmImage.properties.src).toContain('assets/images/ecmImg.gif');
|
||||
expect(ecmFullName.nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
|
||||
expect(ecmJobTitle.nativeElement.textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -166,15 +182,22 @@ describe('User info component', () => {
|
||||
}));
|
||||
|
||||
it('should show N/A when the job title is null', async(() => {
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#ecm-job-title')).toBeDefined();
|
||||
expect(element.querySelector('#ecm-job-title').textContent).toContain('N/A');
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
let ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title'));
|
||||
expect(ecmJobTitle).not.toBeNull();
|
||||
expect(ecmJobTitle).not.toBeNull();
|
||||
expect(ecmJobTitle.nativeElement.textContent).toContain('N/A');
|
||||
}));
|
||||
|
||||
it('should not show the tabs', () => {
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
|
||||
let tabHeader = fixture.debugElement.query(By.css('#tab-group-env'));
|
||||
expect(tabHeader.classes['adf-hide-tab']).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -203,10 +226,14 @@ describe('User info component', () => {
|
||||
});
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#bpm-username')).toBeDefined();
|
||||
expect(element.querySelector('#bpm-username').innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
|
||||
let bpmUserName = fixture.debugElement.query(By.css('#bpm-username'));
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(bpmUserName).toBeDefined();
|
||||
expect(bpmUserName).not.toBeNull();
|
||||
expect(bpmUserName.nativeElement.innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
|
||||
});
|
||||
});
|
||||
|
||||
@ -220,8 +247,8 @@ describe('User info component', () => {
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#logged-user-img')).toBeDefined();
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(element.querySelector('#logged-user-img')).not.toBeNull();
|
||||
expect(element.querySelector('#logged-user-img').getAttribute('src'))
|
||||
.toContain('activiti-app/app/rest/admin/profile-picture');
|
||||
});
|
||||
@ -315,6 +342,8 @@ describe('User info component', () => {
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
|
||||
imageButton.click();
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
@ -323,24 +352,30 @@ describe('User info component', () => {
|
||||
});
|
||||
|
||||
it('should get the bpm user informations from the service', () => {
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#bpm_username')).toBeDefined();
|
||||
expect(element.querySelector('#bpm_title')).toBeDefined();
|
||||
expect(element.querySelector('#bpm-user-detail-image')).toBeDefined();
|
||||
expect(element.querySelector('#bpm-user-detail-image').getAttribute('src'))
|
||||
.toContain('app/rest/admin/profile-picture');
|
||||
expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
|
||||
expect(element.querySelector('#bpm-tenant').textContent).toContain('fake-tenant-name');
|
||||
let bpmTab = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'))[1];
|
||||
bpmTab.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
let bpmUsername = fixture.debugElement.query(By.css('#bpm-username'));
|
||||
let bpmImage = fixture.debugElement.query(By.css('#bpm-user-detail-image'));
|
||||
|
||||
expect(element.querySelector('#userinfo_container')).not.toBeNull();
|
||||
expect(bpmUsername).not.toBeNull();
|
||||
expect(bpmImage).not.toBeNull();
|
||||
expect(bpmImage.properties.src).toContain('app/rest/admin/profile-picture');
|
||||
expect(bpmUsername.nativeElement.textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
|
||||
expect(fixture.debugElement.query(By.css('#bpm-tenant')).nativeElement.textContent).toContain('fake-tenant-name');
|
||||
});
|
||||
|
||||
it('should get the ecm user informations from the service', () => {
|
||||
let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
|
||||
let ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
|
||||
|
||||
expect(element.querySelector('#userinfo_container')).toBeDefined();
|
||||
expect(element.querySelector('#ecm_username')).toBeDefined();
|
||||
expect(element.querySelector('#ecm_title')).toBeDefined();
|
||||
expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
|
||||
expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toContain('assets/images/ecmImg.gif');
|
||||
expect(element.querySelector('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
|
||||
expect(element.querySelector('#ecm-job-title').textContent).toContain('job-ecm-test');
|
||||
expect(ecmUsername).not.toBeNull();
|
||||
expect(ecmImage).not.toBeNull();
|
||||
expect(ecmImage.properties.src).toContain('assets/images/ecmImg.gif');
|
||||
expect(fixture.debugElement.query(By.css('#ecm-full-name')).nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
|
||||
expect(fixture.debugElement.query(By.css('#ecm-job-title')).nativeElement.textContent).toContain('job-ecm-test');
|
||||
});
|
||||
|
||||
it('should show the ecm image if exists', () => {
|
||||
@ -358,20 +393,22 @@ describe('User info component', () => {
|
||||
});
|
||||
|
||||
it('should show the tabs for the env', () => {
|
||||
expect(element.querySelector('#tab-bar-env')).toBeDefined();
|
||||
expect(element.querySelector('#tab-bar-env')).not.toBeNull();
|
||||
expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull();
|
||||
expect(element.querySelector('#ecm-tab')).not.toBeNull();
|
||||
expect(element.querySelector('#bpm-tab')).not.toBeNull();
|
||||
let tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
|
||||
let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
|
||||
|
||||
expect(tabGroup).not.toBeNull();
|
||||
expect(tabGroup.classes['adf-hide-tab']).toBeFalsy();
|
||||
expect(tabs.length).toBe(2);
|
||||
});
|
||||
|
||||
it('should not close the menu when a tab is clicked', () => {
|
||||
expect(element.querySelector('#tab-bar-env')).toBeDefined();
|
||||
expect(element.querySelector('#tab-bar-env')).not.toBeNull();
|
||||
expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull();
|
||||
let bpmTab = <HTMLElement>element.querySelector('#bpm-tab');
|
||||
bpmTab.click();
|
||||
expect(element.querySelector('#user-profile-lists')).not.toBeNull();
|
||||
let tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
|
||||
let tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
|
||||
|
||||
expect(tabGroup).not.toBeNull();
|
||||
tabs[1].triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.query(By.css('#user-profile-lists'))).not.toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { BpmUserModel } from './../models/bpm-user.model';
|
||||
import { EcmUserModel } from './../models/ecm-user.model';
|
||||
@ -26,8 +26,9 @@ declare var require: any;
|
||||
|
||||
@Component({
|
||||
selector: 'adf-userinfo, ng2-alfresco-userinfo',
|
||||
styleUrls: ['./user-info.component.css'],
|
||||
templateUrl: './user-info.component.html'
|
||||
styleUrls: ['./user-info.component.scss'],
|
||||
templateUrl: './user-info.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class UserInfoComponent implements OnInit {
|
||||
|
||||
@ -38,7 +39,10 @@ export class UserInfoComponent implements OnInit {
|
||||
bpmBackgroundImage: string = require('../assets/images/bpm-background.png');
|
||||
|
||||
@Input()
|
||||
menuOpenType: string = 'right';
|
||||
menuPositionX: string = 'after';
|
||||
|
||||
@Input()
|
||||
menuPositionY: string = 'below';
|
||||
|
||||
@Input()
|
||||
fallBackThumbnailImage: string;
|
||||
|
||||
39
ng2-components/ng2-alfresco-userinfo/src/material.module.ts
Normal file
39
ng2-components/ng2-alfresco-userinfo/src/material.module.ts
Normal file
@ -0,0 +1,39 @@
|
||||
/*!
|
||||
* @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.
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
MdButtonModule,
|
||||
MdCardModule,
|
||||
MdMenuModule,
|
||||
MdTabsModule
|
||||
} from '@angular/material';
|
||||
|
||||
export function modules() {
|
||||
return [
|
||||
MdButtonModule,
|
||||
MdMenuModule,
|
||||
MdTabsModule,
|
||||
MdCardModule
|
||||
];
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: modules(),
|
||||
exports: modules()
|
||||
})
|
||||
export class MaterialModule {}
|
||||
@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { async, TestBed } from '@angular/core/testing';
|
||||
import { AlfrescoAuthenticationService, AlfrescoContentService, CoreModule} from 'ng2-alfresco-core';
|
||||
import { AlfrescoAuthenticationService, AlfrescoContentService, CoreModule } from 'ng2-alfresco-core';
|
||||
import { fakeEcmUser } from '../assets/fake-ecm-user.service.mock';
|
||||
import { EcmUserService } from '../services/ecm-user.service';
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user