/**
 * -------------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
 * See License in the project root for license information.
 * -------------------------------------------------------------------------------------------
 */ import * as MicrosoftGraph from '@microsoft/microsoft-graph-types' ; import { customElement , html , property , TemplateResult } from 'lit-element' ; import { repeat } from 'lit-html/directives/repeat' ; import { getPeople , getPeopleFromResource , PersonType } from '../../graph/graph.people' ; import { getUsersPresenceByPeople } from '../../graph/graph.presence' ; import { findGroupMembers , getUsersForPeopleQueries , getUsersForUserIds } from '../../graph/graph.user' ; import { IDynamicPerson } from '../../graph/types' ; import { Providers , ProviderState , MgtTemplatedComponent , arraysAreEqual } from '@microsoft/mgt-element' ; import '../../styles/style-helper' ; import { PersonCardInteraction } from './../PersonCardInteraction' ; import { styles } from './mgt-people-css' ; import { MgtPerson } from '../mgt-person/mgt-person' ; export { PersonCardInteraction } from './../PersonCardInteraction' ; export class extends MgtTemplatedComponent cssprop cssprop @ customElement ( 'mgt-people' ) export class MgtPeople extends MgtTemplatedComponent { /**
     * Array of styles to apply to the element. The styles should be defined
     * using the `css` tag function.
     */ static get styles ( ) { return styles ; } type { string } @ property ( { attribute : 'group-id' , type : String } ) public get groupId ( ) : string { return this . _groupId ; } public set groupId ( value ) { if ( this . _groupId === value ) { return ; } this . _groupId = value ; this . requestStateUpdate ( true ) ; } memberof @ property ( { attribute : 'user-ids' , converter : ( value , type ) => { return value . split ( ',' ) . map ( v => v . trim ( ) ) ; } } ) public get userIds ( ) : string [ ] { return this . _userIds ; } public set userIds ( value ) { if ( arraysAreEqual ( this . _userIds , value ) ) { return ; } this . _userIds = value ; this . requestStateUpdate ( true ) ; } type { IDynamicPerson [ ] } @ property ( { attribute : 'people' , type : Object } ) public people : IDynamicPerson [ ] ; type { string [ ] } @ property ( { attribute : 'people-queries' , converter : ( value , type ) => { return value . split ( ',' ) . map ( v => v . trim ( ) ) ; } } ) public get peopleQueries ( ) : string [ ] { return this . _peopleQueries ; } public set peopleQueries ( value ) { if ( arraysAreEqual ( this . _peopleQueries , value ) ) { return ; } this . _peopleQueries = value ; this . requestStateUpdate ( true ) ; } type { number } @ property ( { attribute : 'show-max' , type : Number } ) public showMax : number ; type { boolean } @ property ( { attribute : 'show-presence' , type : Boolean } ) public showPresence : boolean ; type { PersonCardInteraction } memberof @ property ( { attribute : 'person-card' , converter : ( value , type ) => { value = value . toLowerCase ( ) ; if ( typeof PersonCardInteraction [ value ] === 'undefined' ) { return PersonCardInteraction . hover ; } else { return PersonCardInteraction [ value ] ; } } } ) public personCardInteraction : PersonCardInteraction = PersonCardInteraction . hover ; type { string } memberof @ property ( { attribute : 'resource' , type : String } ) public get resource ( ) : string { return this . _resource ; } public set resource ( value ) { if ( this . _resource === value ) { return ; } this . _resource = value ; this . requestStateUpdate ( true ) ; } type { string } memberof @ property ( { attribute : 'version' , type : String } ) public get version ( ) : string { return this . _version ; } public set version ( value ) { if ( this . _version === value ) { return ; } this . _version = value ; this . requestStateUpdate ( true ) ; } type { string [ ] } memberof @ property ( { attribute : 'scopes' , converter : value => { return value ? value . toLowerCase ( ) . split ( ',' ) : null ; } , reflect : true } ) public scopes : string [ ] = [ ] ; type { IDynamicPerson [ ] } @ property ( { attribute : 'fallback-details' , type : Array } ) public get fallbackDetails ( ) : IDynamicPerson [ ] { return this . _fallbackDetails ; } public set fallbackDetails ( value ) { if ( value === this . _fallbackDetails ) { return ; } this . _fallbackDetails = value ; this . requestStateUpdate ( ) ; } static return { * } memberof public static get requiredScopes ( ) : string [ ] { return [ ... new Set ( [ 'user.read.all' , 'people.read' , 'user.readbasic.all' , 'presence.read.all' , 'contacts.read' , ... MgtPerson . requiredScopes ] ) ] ; } private _groupId : string ; private _userIds : string [ ] ; private _peopleQueries : string [ ] ; private _peoplePresence : { } ; private _resource : string ; private _version : string = 'v1.0' ; private _fallbackDetails : IDynamicPerson [ ] ; constructor ( ) { super ( ) ; this . showMax = 3 ; } protected memberof protected clearState ( ) { this . people = null ; } protected memberof protected requestStateUpdate ( force ? ) { if ( force ) { this . people = null ; } return super . requestStateUpdate ( force ) ; } /**
     * 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.
     */ protected render ( ) { if ( this . isLoadingState ) { return this . renderLoading ( ) ; } if ( ! this . people || this . people . length === 0 ) { return this . renderNoData ( ) ; } return this . renderTemplate ( 'default' , { people : this . people , max : this . showMax } ) || this . renderPeople ( ) ; } protected returns memberof protected renderLoading ( ) { return this . renderTemplate ( 'loading' , null ) || html `` ; } protected param { * } people returns { TemplateResult } memberof protected renderPeople ( ) { const maxPeople = this . people . slice ( 0 , this . showMax ) ; return html `
      <ul class="people-list" aria-label="people">
        ${ repeat ( maxPeople , p => ( p . id ? p . id : p . displayName ) , p => html `
            <li class="people-person">
              ${ this . renderPerson ( p ) }
            </li>
          ` ) }
        ${ this . people . length > this . showMax ? this . renderOverflow ( ) : null }
      </ul>
    ` ; } protected returns { TemplateResult } memberof protected renderOverflow ( ) { const extra = this . people . length - this . showMax ; return ( this . renderTemplate ( 'overflow' , { extra , max : this . showMax , people : this . people } ) || html `
        <li tabindex=0 aria-label="and ${ extra } more attendees" class="overflow"><span>+${ extra }<span></li>
      ` ) ; } protected returns { TemplateResult } memberof protected renderPerson ( person ) { let personPresence = { activity : 'Offline' , availability : 'Offline' , id : null } ; if ( this . showPresence && this . _peoplePresence ) { personPresence = this . _peoplePresence [ person . id ] ; } const avatarSize = 'small' ; return ( this . renderTemplate ( 'person' , { person } , person . id ) || html `
        <mgt-person
          .personDetails=${ person }
          .fetchImage=${ true }
          .avatarSize=${ avatarSize }
          .personCardInteraction=${ this . personCardInteraction }
          .showPresence=${ this . showPresence }
          .personPresence=${ personPresence }
        ></mgt-person>
      ` ) ; } protected returns { TemplateResult } memberof protected renderNoData ( ) { return this . renderTemplate ( 'no-data' , null ) || html `` ; } protected returns memberof protected async loadState ( ) { if ( ! this . people ) { const provider = Providers . globalProvider ; if ( provider && provider . state === ProviderState . SignedIn ) { const graph = provider . graph . forComponent ( this ) ; if ( this . groupId ) { this . people = await findGroupMembers ( graph , null , this . groupId , this . showMax , PersonType . person ) ; } else if ( this . userIds || this . peopleQueries ) { this . userIds ? ( this . people = await getUsersForUserIds ( graph , this . userIds ) ) : ( this . people = await getUsersForPeopleQueries ( graph , this . peopleQueries ) ) ; if ( this . _fallbackDetails ) { this . people = this . people . map ( ( p , i ) => { if ( p ) { return p ; } else if ( i < this . _fallbackDetails . length ) { return this . _fallbackDetails [ i ] ; } return null ; } ) ; } } else if ( this . resource ) { this . people = await getPeopleFromResource ( graph , this . version , this . resource , this . scopes ) ; } else { this . people = await getPeople ( graph ) ; } if ( this . showPresence ) { this . _peoplePresence = await getUsersPresenceByPeople ( graph , this . people ) ; } else { this . _peoplePresence = null ; } } } } }