/**
 * -------------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
 * See License in the project root for license information.
 * -------------------------------------------------------------------------------------------
 */ import { EducationalActivity , PersonAnnualEvent , PersonInterest , Profile } from '@microsoft/microsoft-graph-types-beta' ; import { customElement , html , TemplateResult } from 'lit-element' ; import { BasePersonCardSection } from '../BasePersonCardSection' ; import { getSvg , SvgIcon } from '../../../../utils/SvgHelper' ; import { styles } from './mgt-person-card-profile-css' ; import { strings } from './strings' ; export class extends MgtTemplatedComponent @ customElement ( 'mgt-person-card-profile' ) export class MgtPersonCardProfile 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 type { string } memberof public get displayName ( ) : string { return this . strings . SkillsAndExperienceSectionTitle ; } readonly type { boolean } memberof public get hasData ( ) : boolean { if ( ! this . profile ) { return false ; } const { languages , skills , positions , educationalActivities } = this . profile ; return ( [ this . _birthdayAnniversary , this . _personalInterests && this . _personalInterests . length , this . _professionalInterests && this . _professionalInterests . length , languages && languages . length , skills && skills . length , positions && positions . length , educationalActivities && educationalActivities . length ] . filter ( v => ! ! v ) . length > 0 ) ; } protected type { IProfile } memberof protected get profile ( ) : Profile { return this . _profile ; } protected set profile ( value ) { if ( value === this . _profile ) { return ; } this . _profile = value ; this . _birthdayAnniversary = value && value . anniversaries ? value . anniversaries . find ( this . isBirthdayAnniversary ) : null ; this . _personalInterests = value && value . interests ? value . interests . filter ( this . isPersonalInterest ) : null ; this . _professionalInterests = value && value . interests ? value . interests . filter ( this . isProfessionalInterest ) : null ; } private _profile : Profile ; private _personalInterests : PersonInterest [ ] ; private _professionalInterests : PersonInterest [ ] ; private _birthdayAnniversary : PersonAnnualEvent ; constructor ( profile ) { super ( ) ; this . profile = profile ; } returns { TemplateResult } memberof public renderIcon ( ) { return getSvg ( SvgIcon . Profile ) ; } protected memberof public clearState ( ) { super . clearState ( ) ; this . profile = null ; } protected returns { TemplateResult } memberof protected renderCompactView ( ) { return html `
      <div class="root compact" dir=${ this . direction }>
        ${ this . renderSubSections ( ) . slice ( 0 , 2 ) }
      </div>
    ` ; } protected returns memberof protected renderFullView ( ) { this . initPostRenderOperations ( ) ; return html `
      <div class="root" dir=${ this . direction }>
        <div class="title">${ this . strings . AboutCompactSectionTitle }</div>
        ${ this . renderSubSections ( ) }
      </div>
    ` ; } protected return { * } memberof protected renderSubSections ( ) { const subSections = [ this . renderSkills ( ) , this . renderBirthday ( ) , this . renderLanguages ( ) , this . renderWorkExperience ( ) , this . renderEducation ( ) , this . renderProfessionalInterests ( ) , this . renderPersonalInterests ( ) ] ; return subSections . filter ( s => ! ! s ) ; } protected returns memberof protected renderLanguages ( ) { const { languages } = this . _profile ; if ( ! ( languages && languages . length ) ) { return null ; } const languageItems = [ ] ; for ( const language of languages ) { let proficiency = null ; if ( language . proficiency && language . proficiency . length ) { proficiency = html `
          <span class="language__proficiency">
            &nbsp;(${ language . proficiency })
          </span>
        ` ; } languageItems . push ( html `
        <div class="token-list__item language">
          <span class="language__title">${ language . displayName }</span>
          ${ proficiency }
        </div>
      ` ) ; } const languageTitle = languageItems . length ? this . strings . LanguagesSubSectionTitle : '' ; return html `
      <section>
        <div class="section__title">${ languageTitle }</div>
        <div class="section__content">
          <div class="token-list">
            ${ languageItems }
          </div>
        </div>
      </section>
    ` ; } protected returns { TemplateResult } memberof protected renderSkills ( ) { const { skills } = this . _profile ; if ( ! ( skills && skills . length ) ) { return null ; } const skillItems = [ ] ; for ( const skill of skills ) { skillItems . push ( html `
        <div class="token-list__item skill">
          ${ skill . displayName }
        </div>
      ` ) ; } const skillsTitle = skillItems . length ? this . strings . SkillsSubSectionTitle : '' ; return html `
      <section>
        <div class="section__title">${ skillsTitle }</div>
        <div class="section__content">
          <div class="token-list">
            ${ skillItems }
          </div>
        </div>
      </section>
    ` ; } protected returns { TemplateResult } memberof protected renderWorkExperience ( ) { const { positions } = this . _profile ; if ( ! ( positions && positions . length ) ) { return null ; } const positionItems = [ ] ; for ( const position of this . _profile . positions ) { if ( position . detail . description || position . detail . jobTitle !== '' ) { positionItems . push ( html `
          <div class="data-list__item work-position">
            <div class="data-list__item__header">
              <div class="data-list__item__title">${ position . detail ?. jobTitle }</div>
              <div class="data-list__item__date-range">
                ${ this . getDisplayDateRange ( position . detail ) }
              </div>
            </div>
            <div class="data-list__item__content">
              <div class="work-position__company">
                ${ position ?. detail ?. company ?. displayName }
              </div>
              <div class="work-position__location">
                ${ position ?. detail ?. company ?. address ?. city }, ${ position ?. detail ?. company ?. address ?. state }
              </div>
            </div>
          </div>
        ` ) ; } } const workExperienceTitle = positionItems . length ? this . strings . WorkExperienceSubSectionTitle : '' ; return html `
      <section>
        <div class="section__title">${ workExperienceTitle }</div>
        <div class="section__content">
          <div class="data-list">
            ${ positionItems }
          </div>
        </div>
      </section>
    ` ; } protected returns { TemplateResult } memberof protected renderEducation ( ) { const { educationalActivities } = this . _profile ; if ( ! ( educationalActivities && educationalActivities . length ) ) { return null ; } const positionItems = [ ] ; for ( const educationalActivity of educationalActivities ) { positionItems . push ( html `
        <div class="data-list__item educational-activity">
          <div class="data-list__item__header">
            <div class="data-list__item__title">${ educationalActivity . institution . displayName }</div>
            <div class="data-list__item__date-range">
              ${ this . getDisplayDateRange ( educationalActivity ) }
            </div>
          </div>
          <div class="data-list__item__content">
            <div class="educational-activity__degree">
              ${ educationalActivity . program . displayName || 'Bachelors Degree' }
            </div>
          </div>
        </div>
      ` ) ; } const educationTitle = positionItems . length ? this . strings . EducationSubSectionTitle : '' ; return html `
      <section>
        <div class="section__title">${ educationTitle }</div>
        <div class="section__content">
          <div class="data-list">
            ${ positionItems }
          </div>
        </div>
      </section>
    ` ; } protected returns { TemplateResult } memberof protected renderProfessionalInterests ( ) { if ( ! this . _professionalInterests || ! this . _professionalInterests . length ) { return null ; } const interestItems = [ ] ; for ( const interest of this . _professionalInterests ) { interestItems . push ( html `
        <div class="token-list__item interest interest--professional">
          ${ interest . displayName }
        </div>
      ` ) ; } const professionalInterests = interestItems . length ? this . strings . professionalInterestsSubSectionTitle : '' ; return html `
      <section>
        <div class="section__title">${ professionalInterests }</div>
        <div class="section__content">
          <div class="token-list">
            ${ interestItems }
          </div>
        </div>
      </section>
    ` ; } protected returns { TemplateResult } memberof protected renderPersonalInterests ( ) { if ( ! this . _personalInterests || ! this . _personalInterests . length ) { return null ; } const interestItems = [ ] ; for ( const interest of this . _personalInterests ) { interestItems . push ( html `
        <div class="token-list__item interest interest--personal">
          ${ interest . displayName }
        </div>
      ` ) ; } const personalInterests = interestItems . length ? this . strings . personalInterestsSubSectionTitle : '' ; return html `
      <section>
        <div class="section__title">${ personalInterests }</div>
        <div class="section__content">
          <div class="token-list">
            ${ interestItems }
          </div>
        </div>
      </section>
    ` ; } protected returns { TemplateResult } memberof protected renderBirthday ( ) { if ( ! this . _birthdayAnniversary || ! this . _birthdayAnniversary . date ) { return null ; } return html `
      <section>
        <div class="section__title">Birthday</div>
        <div class="section__content">
          <div class="birthday">
            <div class="birthday__icon">
              ${ getSvg ( SvgIcon . Birthday ) }
            </div>
            <div class="birthday__date">
              ${ this . getDisplayDate ( new Date ( this . _birthdayAnniversary . date ) ) }
            </div>
          </div>
        </div>
      </section>
    ` ; } private isPersonalInterest ( interest ) { return interest . categories && interest . categories . includes ( 'personal' ) ; } private isProfessionalInterest ( interest ) { return interest . categories && interest . categories . includes ( 'professional' ) ; } private isBirthdayAnniversary ( anniversary ) { return anniversary . type === 'birthday' ; } private getDisplayDate ( date ) { return date . toLocaleString ( 'default' , { day : 'numeric' , month : 'long' } ) ; } private getDisplayDateRange ( event ) { const start = new Date ( event . startMonthYear ) . getFullYear ( ) ; if ( start === 0 ) { return null ; } const end = event . endMonthYear ? new Date ( event . endMonthYear ) . getFullYear ( ) : this . strings . currentYearSubtitle ; return `${ start } — ${ end }` ; } private initPostRenderOperations ( ) { setTimeout ( ( ) => { try { const sections = this . shadowRoot . querySelectorAll ( 'section' ) ; sections . forEach ( section => { this . handleTokenOverflow ( section ) ; } ) ; } catch { } } , 0 ) ; } private handleTokenOverflow ( section ) { const tokenLists = section . querySelectorAll ( '.token-list' ) ; if ( ! tokenLists || ! tokenLists . length ) { return ; } for ( const tokenList of Array . from ( tokenLists ) ) { const items = tokenList . querySelectorAll ( '.token-list__item' ) ; if ( ! items || ! items . length ) { continue ; } let overflowItems = null ; let itemRect = items [ 0 ] . getBoundingClientRect ( ) ; const tokenListRect = tokenList . getBoundingClientRect ( ) ; const maxtop = itemRect . height * 2 + tokenListRect . top ; for ( let i = 0 ; i < items . length - 1 ; i ++ ) { itemRect = items [ i ] . getBoundingClientRect ( ) ; if ( itemRect . top > maxtop ) { overflowItems = Array . from ( items ) . slice ( i , items . length ) ; break ; } } if ( overflowItems ) { overflowItems . forEach ( i => i . classList . add ( 'overflow' ) ) ; const overflowToken = document . createElement ( 'div' ) ; overflowToken . classList . add ( 'token-list__item' ) ; overflowToken . classList . add ( 'token-list__item--show-overflow' ) ; overflowToken . innerText = `+ ${ overflowItems . length } more` ; overflowToken . addEventListener ( 'click' , ( e ) => { overflowToken . remove ( ) ; overflowItems . forEach ( i => i . classList . remove ( 'overflow' ) ) ; } ) ; tokenList . appendChild ( overflowToken ) ; } } } }