@microsoft/mgt
Version:
The Microsoft Graph Toolkit
364 lines • 13 kB
JavaScript
/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { customElement, html, property } from 'lit-element';
import { Providers } from '../../Providers';
import { ProviderState } from '../../providers/IProvider';
import { getEmailFromGraphEntity } from '../../utils/GraphHelpers';
import { getSvg, SvgIcon } from '../../utils/SvgHelper';
import { MgtTemplatedComponent } from '../templatedComponent';
import { styles } from './mgt-person-card-css';
/**
* Web Component used to show detailed data for a person in the
* Microsoft Graph
*
* @export
* @class MgtPersonCard
* @extends {MgtTemplatedComponent}
*/
let MgtPersonCard = class MgtPersonCard extends MgtTemplatedComponent {
constructor() {
super(...arguments);
/**
* Gets or sets whether additional details section is rendered
*
* @type {boolean}
* @memberof MgtPersonCard
*/
this.isExpanded = false;
/**
* Gets or sets whether additional details should be inherited from an mgt-person parent
* Useful when used as template in an mgt-person component
*
* @type {boolean}
* @memberof MgtPersonCard
*/
this.inheritDetails = false;
}
/**
* Array of styles to apply to the element. The styles should be defined
* using the `css` tag function.
*/
static get styles() {
return styles;
}
/**
* Synchronizes property values when attributes change.
*
* @param {*} name
* @param {*} oldValue
* @param {*} newValue
* @memberof MgtPersonCard
*/
attributeChangedCallback(name, oldValue, newValue) {
super.attributeChangedCallback(name, oldValue, newValue);
if (name === 'is-expanded' && oldValue !== newValue) {
this.isExpanded = false;
}
}
/**
* Invoked when the element is first updated. Implement to perform one time
* work on the element after update.
*
* Setting properties inside this method will trigger the element to update
* again after this update cycle completes.
*
* * @param _changedProperties Map of changed properties with old values
*/
firstUpdated() {
Providers.onProviderUpdated(() => this.loadData());
this.loadData();
}
/**
* Invoked on each update to perform rendering tasks. This method must return
* a lit-html TemplateResult. Setting properties inside this method will *not*
* trigger the element to update.
*/
render() {
if (this.personDetails) {
const user = this.personDetails;
let department;
let jobTitle;
if (user.department) {
department = html `
<div class="department">${user.department}</div>
`;
}
if (user.jobTitle) {
jobTitle = html `
<div class="job-title">${user.jobTitle}</div>
`;
}
const image = this.getImage();
return html `
<div class="root" =${this.handleClose}>
<div class="default-view">
${this.renderTemplate('default', { person: this.personDetails, personImage: image }) ||
html `
<mgt-person
class="person-image"
.personDetails=${this.personDetails}
.personImage=${image}
></mgt-person>
<div class="details">
<div class="display-name">${user.displayName}</div>
${jobTitle} ${department}
<div class="base-icons">
${this.renderIcons()}
</div>
</div>
`}
</div>
<div class="additional-details-container">
${this.renderAdditionalDetails()}
</div>
</div>
`;
}
}
renderIcons() {
if (this.isExpanded === true) {
return html ``;
}
else {
const user = this.personDetails;
let chat;
let email;
let phone;
if (user.mailNickname) {
chat = html `
<div class="icon" =${this._chatUser}>
${getSvg(SvgIcon.Chat, '#666666')}
</div>
`;
}
if (getEmailFromGraphEntity(user)) {
email = html `
<div class="icon" =${this._emailUser}>
${getSvg(SvgIcon.Email, '#666666')}
</div>
`;
}
if (user.businessPhones && user.businessPhones.length > 0) {
phone = html `
<div class="icon" =${this._callUser}>
${getSvg(SvgIcon.Phone, '#666666')}
</div>
`;
}
return html `
${chat} ${email} ${phone}
`;
}
}
renderAdditionalDetails() {
if (this.isExpanded === true) {
const user = this.personDetails;
let phone;
let email;
let location;
let chat;
if (user.businessPhones && user.businessPhones.length > 0) {
phone = html `
<div class="details-icon" =${this._callUser}>
${getSvg(SvgIcon.SmallPhone, '#666666')}
<span class="link-subtitle data">${user.businessPhones[0]}</span>
</div>
`;
}
if (getEmailFromGraphEntity(user)) {
email = html `
<div class="details-icon" =${this._emailUser}>
${getSvg(SvgIcon.SmallEmail, '#666666')}
<span class="link-subtitle data">${getEmailFromGraphEntity(user)}</span>
</div>
`;
}
if (user.mailNickname) {
chat = html `
<div class="details-icon" =${this._chatUser}>
${getSvg(SvgIcon.SmallChat, '#666666')}
<span class="link-subtitle data">${user.mailNickname}</span>
</div>
`;
}
if (user.officeLocation) {
location = html `
<div class="details-icon">
${getSvg(SvgIcon.SmallLocation, '#666666')}<span class="normal-subtitle data">${user.officeLocation}</span>
</div>
`;
}
const renderAdditionalSection = this.templates && this.templates['additional-details'];
return html `
<div class="additional-details-info">
<div class="contact-text">Contact</div>
<div class="additional-details-row">
<div class="additional-details-item">
<div class="icons">
${chat} ${email} ${phone} ${location}
</div>
${renderAdditionalSection
? html `
<div class="section-divider"></div>
<div class="custom-section">
${this.renderTemplate('additional-details', {
person: this.personDetails,
personImage: this.getImage()
})}
</div>
`
: null}
</div>
</div>
</div>
`;
}
else {
return html `
<div class="additional-details-button" =${this._showAdditionalDetails}>
<svg
class="additional-details-svg"
width="16"
height="15"
viewBox="0 0 16 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M15 7L8.24324 13.7568L1.24324 6.75676" stroke="#3078CD" />
</svg>
</div>
`;
}
}
_showAdditionalDetails(e) {
// handles clicking when parent is also activated by click
e.stopPropagation();
const root = this.renderRoot.querySelector('.root');
if (root && root.animate) {
// play back
root.animate([
{
height: 'auto',
transformOrigin: 'top left'
},
{
height: 'auto',
transformOrigin: 'top left'
}
], {
duration: 1000,
easing: 'ease-in-out',
fill: 'both'
});
}
this.isExpanded = true;
}
_callUser(e) {
const user = this.personDetails;
let phone;
if (user.businessPhones && user.businessPhones.length > 0) {
phone = user.businessPhones[0];
}
e.stopPropagation();
window.open('tel:' + phone, '_blank');
}
_emailUser(e) {
const user = this.personDetails;
let email;
if (getEmailFromGraphEntity(user)) {
email = getEmailFromGraphEntity(user);
}
e.stopPropagation();
window.open('mailto:' + email, '_blank');
}
_chatUser(e) {
const user = this.personDetails;
let chat;
if (user.mailNickname) {
chat = user.mailNickname;
}
e.stopPropagation();
window.open('sip:' + chat, '_blank');
}
loadData() {
return __awaiter(this, void 0, void 0, function* () {
if (this.inheritDetails) {
let parent = this.parentElement;
while (parent && parent.tagName !== 'MGT-PERSON') {
parent = parent.parentElement;
}
if (parent && parent.personDetails) {
this.personDetails = parent.personDetails;
this.personImage = parent.personImage;
}
}
if (this.personDetails) {
return;
}
const provider = Providers.globalProvider;
if (!provider || provider.state !== ProviderState.SignedIn) {
return;
}
});
}
handleClose(e) {
e.stopPropagation();
}
getImage() {
if (this.personImage && this.personImage !== '@') {
return this.personImage;
}
else if (this.personDetails && this.personDetails.personImage) {
return this.personDetails.personImage;
}
return null;
}
};
__decorate([
property({
attribute: 'person-details',
type: Object
})
], MgtPersonCard.prototype, "personDetails", void 0);
__decorate([
property({
attribute: 'person-image',
type: String
})
], MgtPersonCard.prototype, "personImage", void 0);
__decorate([
property({
attribute: 'is-expanded',
type: Boolean
})
], MgtPersonCard.prototype, "isExpanded", void 0);
__decorate([
property({
attribute: 'inherit-details',
type: Boolean
})
], MgtPersonCard.prototype, "inheritDetails", void 0);
MgtPersonCard = __decorate([
customElement('mgt-person-card')
], MgtPersonCard);
export { MgtPersonCard };
//# sourceMappingURL=mgt-person-card.js.map