/**
 * -------------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
 * See License in the project root for license information.
 * -------------------------------------------------------------------------------------------
 */ import { User } from '@microsoft/microsoft-graph-types' ; import { customElement , html , TemplateResult } from 'lit-element' ; import { TeamsHelper } from '@microsoft/mgt-element' ; import { classMap } from 'lit-html/directives/class-map' ; import { getEmailFromGraphEntity } from '../../../../graph/graph.people' ; import { BasePersonCardSection } from '../BasePersonCardSection' ; import { styles } from './mgt-person-card-contact-css' ; import { getSvg , SvgIcon } from '../../../../utils/SvgHelper' ; import { strings } from './strings' ; interface interface IContactPart { icon : TemplateResult ; title : string ; value ? : string ; onClick ? : ( e : Event ) => void ; showCompact : boolean ; } export class extends MgtTemplatedComponent @ customElement ( 'mgt-person-card-contact' ) export class MgtPersonCardContact extends BasePersonCardSection { /**
     * Array of styles to apply to the element. The styles should be defined
     * using the `css` tag function.
     */ static get styles ( ) { return styles ; } protected get strings ( ) { return strings ; } readonly abstract type { boolean } memberof public get hasData ( ) : boolean { if ( ! this . _contactParts ) { return false ; } const availableParts = Object . values ( this . _contactParts ) . filter ( ( p ) => ! ! p . value ) ; return ! ! availableParts . length ; } private _person : User ; private _contactParts = { email : { icon : getSvg ( SvgIcon . Email , '#929292' ) , onClick : ( ) => this . sendEmail ( ) , showCompact : true , title : 'Email' } as IContactPart , chat : { icon : getSvg ( SvgIcon . Chat , '#929292' ) , onClick : ( ) => this . sendChat ( ) , showCompact : false , title : 'Teams' } as IContactPart , businessPhone : { icon : getSvg ( SvgIcon . CellPhone , '#929292' ) , onClick : ( ) => this . sendCall ( 'businessPhone' ) , showCompact : true , title : 'Business Phone' } as IContactPart , cellPhone : { icon : getSvg ( SvgIcon . CellPhone , '#929292' ) , onClick : ( ) => this . sendCall ( 'cellPhone' ) , showCompact : true , title : 'Mobile Phone' } as IContactPart , department : { icon : getSvg ( SvgIcon . Department , '#929292' ) , showCompact : false , title : 'Department' } as IContactPart , title : { icon : getSvg ( SvgIcon . Person , '#929292' ) , showCompact : false , title : 'Title' } as IContactPart , officeLocation : { icon : getSvg ( SvgIcon . OfficeLocation , '#929292' ) , showCompact : true , title : 'Office Location' } as IContactPart } ; public constructor ( person ) { super ( ) ; this . _person = person ; this . _contactParts . email . value = getEmailFromGraphEntity ( this . _person ) ; this . _contactParts . chat . value = this . _person . userPrincipalName ; this . _contactParts . cellPhone . value = this . _person . mobilePhone ; this . _contactParts . department . value = this . _person . department ; this . _contactParts . title . value = this . _person . jobTitle ; this . _contactParts . officeLocation . value = this . _person . officeLocation ; if ( this . _person . businessPhones && this . _person . businessPhones . length ) { this . _contactParts . businessPhone . value = this . _person . businessPhones [ 0 ] ; } } readonly type { string } memberof public get displayName ( ) : string { return this . strings . contactSectionTitle ; } returns { TemplateResult } memberof public renderIcon ( ) { return getSvg ( SvgIcon . Contact ) ; } protected memberof public clearState ( ) { super . clearState ( ) ; for ( const key of Object . keys ( this . _contactParts ) ) { this . _contactParts [ key ] . value = null ; } } returns { TemplateResult } memberof protected renderCompactView ( ) { let contentTemplate ; if ( ! this . hasData ) { return null ; } const availableParts = Object . values ( this . _contactParts ) . filter ( ( p ) => ! ! p . value ) ; let compactParts = Object . values ( availableParts ) . filter ( ( p ) => ! ! p . value && p . showCompact ) ; if ( ! compactParts || ! compactParts . length ) { compactParts = Object . values ( availableParts ) . slice ( 0 , 2 ) ; } contentTemplate = html `
      ${ compactParts . map ( p => this . renderContactPart ( p ) ) }
    ` ; return html `
      <div class="root compact" dir=${ this . direction }>
        ${ contentTemplate }
      </div>
    ` ; } protected returns { TemplateResult } memberof protected renderFullView ( ) { let contentTemplate ; if ( this . hasData ) { const availableParts = Object . values ( this . _contactParts ) . filter ( ( p ) => ! ! p . value ) ; contentTemplate = html `
        ${ availableParts . map ( part => this . renderContactPart ( part ) ) }
      ` ; } return html `
      <div class="root" dir=${ this . direction }>
        <div class="title">${ this . displayName }</div>
        ${ contentTemplate }
      </div>
    ` ; } protected param { IContactPart } part returns { TemplateResult } memberof protected renderContactPart ( part ) { let isPhone = false ; if ( part . title === 'Mobile Phone' || part . title === 'Business Phone' ) { isPhone = true ; } const partLinkClasses = { part__link : true , phone : isPhone } ; const valueTemplate = part . onClick ? html `
          <span class=${ classMap ( partLinkClasses ) } @click=${ ( e ) => part . onClick ( e ) }>${ part . value }</span>
        ` : html `
          ${ part . value }
        ` ; return html `
      <div class="part" @click=${ ( e ) => this . handlePartClick ( e , part . value ) }>
        <div class="part__icon">${ part . icon }</div>
        <div class="part__details">
          <div class="part__title">${ part . title }</div>
          <div class="part__value">${ valueTemplate }</div>
        </div>
        <div class="part__copy">
          ${ getSvg ( SvgIcon . Copy ) }
        </div>
      </div>
    ` ; } protected memberof protected handlePartClick ( e , value ) { if ( value ) { navigator . clipboard . writeText ( value ) ; } } protected memberof protected sendChat ( ) { const chat = this . _contactParts . chat . value ; if ( ! chat ) { return ; } const url = `https://teams.microsoft.com/l/chat/0/0?users=${ chat }` ; const openWindow = ( ) => window . open ( url , '_blank' ) ; if ( TeamsHelper . isAvailable ) { TeamsHelper . executeDeepLink ( url , ( status ) => { if ( ! status ) { openWindow ( ) ; } } ) ; } else { openWindow ( ) ; } } protected memberof protected sendEmail ( ) { const email = this . _contactParts . email . value ; if ( email ) { window . open ( 'mailto:' + email , '_blank' ) ; } } protected memberof protected sendCall ( phone ) { const cellPhone = this . _contactParts . cellPhone . value ; const businessPhone = this . _contactParts . businessPhone . value ; if ( phone === 'cellPhone' ) { window . open ( 'tel:' + cellPhone , '_blank' ) ; } else if ( phone === 'businessPhone' ) { window . open ( 'tel:' + businessPhone , '_blank' ) ; } } }