Get data for standalone mgt-person-card (#359)

* Get data for standalone mgt-person-card

* Address pr feedback

* minor tweak

* Adding logic to handle get email and user principal name when not present

* Add logic to handle get image

* Address pr comments. Update logic to show contact details.

* Fix load image bug

Co-authored-by: Shane Weaver <[email protected]>

Author: beth-panx

.storybook/theme.js

@@ -31,6 +31,6 @@ export default create({
   //   inputTextColor: 'black',
   //   inputBorderRadius: 4,
 
-  brandTitle: 'Microsoft Graph Toolkit',
+  brandTitle: 'Microsoft Graph Toolkit Playground',
   brandUrl: 'https://aka.ms/mgt'
 });

src/components/mgt-person-card/mgt-person-card.ts

@@ -7,7 +7,9 @@
 
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import { customElement, html, property, TemplateResult } from 'lit-element';
-import { getEmailFromGraphEntity } from '../../graph/graph.people';
+import { findPerson, findUserByEmail, getEmailFromGraphEntity } from '../../graph/graph.people';
+import { getContactPhoto, getUserPhoto, myPhoto } from '../../graph/graph.photos';
+import { getUser, getUserWithPhoto } from '../../graph/graph.user';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
@@ -38,6 +40,23 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   static get styles() {
     return styles;
   }
+  /**
+   * allows developer to define name of person for component
+   * @type {string}
+   */
+  @property({
+    attribute: 'person-query'
+  })
+  public personQuery: string;
+
+  /**
+   * user-id property allows developer to use id value for component
+   * @type {string}
+   */
+  @property({
+    attribute: 'user-id'
+  })
+  public userId: string;
 
   /**
    * Set the person details to render
@@ -110,9 +129,21 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   public attributeChangedCallback(name: string, oldValue: string, newValue: string) {
     super.attributeChangedCallback(name, oldValue, newValue);
 
-    if (name === 'is-expanded' && oldValue !== newValue) {
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === 'is-expanded') {
       this.isExpanded = false;
     }
+
+    switch (name) {
+      case 'person-query':
+      case 'user-id':
+        this.personDetails = null;
+        this.requestStateUpdate();
+        break;
+    }
   }
 
   /**
@@ -218,7 +249,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   }
 
   /**
-   * foo
+   * Render person title.
    *
    * @protected
    * @param {IDynamicPerson} person
@@ -236,7 +267,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   }
 
   /**
-   * foo
+   * Render person subtitle.
    *
    * @protected
    * @param {IDynamicPerson} person
@@ -267,6 +298,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
 
     person = person || this.personDetails;
     const userPerson = person as MicrosoftGraph.User;
+    const personPerson = person as MicrosoftGraph.Person;
 
     // Chat
     let chat: TemplateResult;
@@ -290,7 +322,10 @@ export class MgtPersonCard extends MgtTemplatedComponent {
 
     // Phone
     let phone: TemplateResult;
-    if (userPerson.businessPhones && userPerson.businessPhones.length > 0) {
+    if (
+      (userPerson.businessPhones && userPerson.businessPhones.length > 0) ||
+      (personPerson.phones && personPerson.phones.length > 0)
+    ) {
       phone = html`
         <div class="icon" @click=${() => this.callUser()}>
           ${getSvg(SvgIcon.Phone, '#666666')}
@@ -328,7 +363,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   }
 
   /**
-   * foo
+   * Render expanded details.
    *
    * @protected
    * @param {IDynamicPerson} [person]
@@ -384,6 +419,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   protected renderContactDetails(person?: IDynamicPerson): TemplateResult {
     person = person || this.personDetails;
     const userPerson = person as MicrosoftGraph.User;
+    const personPerson = person as MicrosoftGraph.Person;
 
     if (this.hasTemplate('contact-details')) {
       return this.renderTemplate('contact-details', { userPerson });
@@ -420,6 +456,14 @@ export class MgtPersonCard extends MgtTemplatedComponent {
           <span class="link-subtitle data">${userPerson.businessPhones[0]}</span>
         </div>
       `;
+    } else if (personPerson.phones && personPerson.phones.length > 0) {
+      const businessPhones = this.getPersonBusinessPhones(personPerson);
+      phone = html`
+        <div class="details-icon" @click=${() => this.callUser()}>
+          ${getSvg(SvgIcon.SmallPhone, '#666666')}
+          <span class="link-subtitle data">${businessPhones[0]}</span>
+        </div>
+      `;
     }
 
     // Location
@@ -450,7 +494,31 @@ export class MgtPersonCard extends MgtTemplatedComponent {
    * @memberof MgtPersonCard
    */
   protected async loadState() {
-    if (this.inheritDetails) {
+    const provider = Providers.globalProvider;
+
+    // check if user is signed in
+    if (!provider || provider.state !== ProviderState.SignedIn) {
+      return;
+    }
+
+    const graph = provider.graph.forComponent(this);
+
+    // check if personDetail already populated
+    if (this.personDetails) {
+      const user = this.personDetails as MicrosoftGraph.User;
+      const id = user.userPrincipalName || user.id;
+      // if we have an id but no email, we should get data from the graph
+      if (id && !getEmailFromGraphEntity(user)) {
+        const person = await getUserWithPhoto(graph, id);
+        this.personDetails = person;
+        this.personImage = this.getImage();
+      } else if (this.personImage === '@' && !this.personDetails.personImage) {
+        // in some cases we might only have name or email, but need to find the image
+        // use @ for the image value to search for an image
+        this.loadImage();
+      }
+    } else if (this.inheritDetails) {
+      // User person details inherited from parent tree
       let parent = this.parentElement;
       while (parent && parent.tagName !== 'MGT-PERSON') {
         parent = parent.parentElement;
@@ -460,15 +528,20 @@ export class MgtPersonCard extends MgtTemplatedComponent {
         this.personDetails = (parent as MgtPerson).personDetails;
         this.personImage = (parent as MgtPerson).personImage;
       }
-    }
-
-    if (this.personDetails) {
-      return;
-    }
-
-    const provider = Providers.globalProvider;
-    if (!provider || provider.state !== ProviderState.SignedIn) {
-      return;
+    } else if (this.userId || this.personQuery === 'me') {
+      // Use userId or 'me' query to get the person and image
+      const person = await getUserWithPhoto(graph, this.userId);
+
+      this.personDetails = person;
+      this.personImage = this.getImage();
+    } else if (this.personQuery) {
+      // Use the personQuery to find our person.
+      const people = await findPerson(graph, this.personQuery);
+
+      if (people && people.length) {
+        this.personDetails = people[0];
+        this.loadImage();
+      }
     }
   }
 
@@ -496,11 +569,19 @@ export class MgtPersonCard extends MgtTemplatedComponent {
    */
   protected callUser() {
     const user = this.personDetails as MicrosoftGraph.User;
+    const person = this.personDetails as microsoftgraph.Person;
+
     if (user && user.businessPhones && user.businessPhones.length) {
       const phone = user.businessPhones[0];
       if (phone) {
         window.open('tel:' + phone, '_blank');
       }
+    } else if (person && person.phones && person.phones.length) {
+      const businessPhones = this.getPersonBusinessPhones(person);
+      const phone = businessPhones[0];
+      if (phone) {
+        window.open('tel:' + phone, '_blank');
+      }
     }
   }
 
@@ -560,6 +641,45 @@ export class MgtPersonCard extends MgtTemplatedComponent {
     this.isExpanded = true;
   }
 
+  private async loadImage() {
+    const provider = Providers.globalProvider;
+    const graph = provider.graph.forComponent(this);
+    const person = this.personDetails;
+    let image: string;
+
+    if ((person as MicrosoftGraph.Person).userPrincipalName) {
+      // try to find a user by userPrincipalName
+      const userPrincipalName = (person as MicrosoftGraph.Person).userPrincipalName;
+      image = await getUserPhoto(graph, userPrincipalName);
+    } else {
+      // try to find a user by e-mail
+      const email = getEmailFromGraphEntity(person);
+      if (email) {
+        const users = await findUserByEmail(graph, email);
+        if (users && users.length) {
+          // Check for an OrganizationUser
+          const orgUser = users.find(p => {
+            return (p as any).personType && (p as any).personType.subclass === 'OrganizationUser';
+          });
+          if (orgUser) {
+            // Lookup by userId
+            const userId = (users[0] as MicrosoftGraph.Person).scoredEmailAddresses[0].address;
+            image = await getUserPhoto(graph, userId);
+          } else {
+            // Lookup by contactId
+            const contactId = users[0].id;
+            image = await getContactPhoto(graph, contactId);
+          }
+        }
+      }
+    }
+
+    if (image) {
+      this.personDetails.personImage = image;
+      this.personImage = image;
+    }
+  }
+
   private getImage(): string {
     if (this.personImage && this.personImage !== '@') {
       return this.personImage;
@@ -568,4 +688,15 @@ export class MgtPersonCard extends MgtTemplatedComponent {
     const person = this.personDetails;
     return person && person.personImage ? person.personImage : null;
   }
+
+  private getPersonBusinessPhones(person: MicrosoftGraph.Person): string[] {
+    const phones = person.phones;
+    const businessPhones: string[] = [];
+    for (const p of phones) {
+      if (p.type === 'business') {
+        businessPhones.push(p.number);
+      }
+    }
+    return businessPhones;
+  }
 }

src/components/mgt-person/mgt-person.graph.ts

@@ -8,8 +8,9 @@
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import { customElement, html, property, query, TemplateResult } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { findPerson, getEmailFromGraphEntity } from '../../graph/graph.people';
-import { getContactPhoto, getUserPhoto } from '../../graph/graph.photos';
+import { findPerson, findUserByEmail, getEmailFromGraphEntity } from '../../graph/graph.people';
+import { getContactPhoto, getUserPhoto, myPhoto } from '../../graph/graph.photos';
+import { getUserWithPhoto } from '../../graph/graph.user';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
@@ -19,7 +20,6 @@ import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
 import { MgtTemplatedComponent } from '../templatedComponent';
 import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-person-css';
-import { findUserByEmail } from './mgt-person.graph';
 
 /**
  * IDynamicPerson describes the person object we use throughout mgt-person,
@@ -480,23 +480,12 @@ export class MgtPerson extends MgtTemplatedComponent {
       return;
     }
 
-    // User userId or 'me' query to get the person and image
+    // Use userId or 'me' query to get the person and image
     if (this.userId || this.personQuery === 'me') {
       const graph = provider.graph.forComponent(this);
-      const batch = graph.createBatch();
-
-      if (this.userId) {
-        batch.get('user', `/users/${this.userId}`, ['user.readbasic.all']);
-        batch.get('photo', `users/${this.userId}/photo/$value`, ['user.readbasic.all']);
-      } else {
-        batch.get('user', 'me', ['user.read']);
-        batch.get('photo', 'me/photo/$value', ['user.read']);
-      }
-
-      const response = await batch.execute();
-      this.personDetails = response.user;
-      this.personDetails.personImage = response.photo;
+      const person = await getUserWithPhoto(graph, this.userId);
 
+      this.personDetails = person;
       this.personImage = this.getImage();
       return;
     }
@@ -508,10 +497,7 @@ export class MgtPerson extends MgtTemplatedComponent {
 
       if (people && people.length) {
         this.personDetails = people[0];
-
-        if (this.personImage === '@') {
-          this.loadImage();
-        }
+        this.loadImage();
       }
     }
   }