Added fetchImage and fixed image fetching in mgt-person (#418)

* Fetch image if only id available

* added fetchImage

* clean up

Author: nmetulev

src/components/mgt-people-picker/mgt-people-picker.ts

@@ -17,6 +17,7 @@ import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
 import { debounce } from '../../utils/Utils';
+import { PersonCardInteraction } from '../PersonCardInteraction';
 import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
 import { MgtTemplatedComponent } from '../templatedComponent';
 import { styles } from './mgt-people-picker-css';
@@ -517,7 +518,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     return (
       this.renderTemplate('person', { person }, person.id) ||
       html`
-        <mgt-person .personDetails=${person} .personImage=${'@'}></mgt-person>
+        <mgt-person .personDetails=${person} .fetchImage=${true}></mgt-person>
         <div class="people-person-text-area" id="${person.displayName}">
           ${this.renderHighlightText(person)}
           <span class="${classMap(classes)}">${subTitle}</span>
@@ -539,9 +540,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       <mgt-person
         class="selected-person"
         .personDetails=${person}
-        .personImage=${'@'}
-        show-name
-        person-card="click"
+        .fetchImage=${true}
+        .showName=${true}
+        .personCardInteraction=${PersonCardInteraction.click}
       ></mgt-person>
     `;
   }

src/components/mgt-people/mgt-people.ts

@@ -281,7 +281,7 @@ export class MgtPeople extends MgtTemplatedComponent {
       html`
         <mgt-person
           .personDetails=${person}
-          .personImage=${'@'}
+          .fetchImage=${true}
           .avatarSize=${avatarSize}
           .personCardInteraction=${this.personCardInteraction}
           .showPresence=${this.showPresence}

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

@@ -82,7 +82,6 @@ export class MgtPersonCard extends MgtTemplatedComponent {
 
   /**
    * Set the image of the person
-   * Set to '@' to look up image from the graph
    *
    * @type {string}
    * @memberof MgtPersonCard
@@ -93,6 +92,20 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   })
   public personImage: string;
 
+  /**
+   * Sets whether the person image should be fetched
+   * from the Microsoft Graph based on the personDetails
+   * provided by the user
+   *
+   * @type {boolean}
+   * @memberof MgtPerson
+   */
+  @property({
+    attribute: 'fetch-image',
+    type: Boolean
+  })
+  public fetchImage: boolean;
+
   /**
    * Gets or sets whether expanded details section is rendered
    *
@@ -575,9 +588,12 @@ export class MgtPersonCard extends MgtTemplatedComponent {
         const person = await getUserWithPhoto(graph, id);
         this.personDetails = person;
         this.personImage = this.getImage();
-      } else if (this.personImage === '@' && !this.personDetails.personImage) {
+        this.personDetails.personImage = this.personImage;
+      } else if (
+        !this.personDetails.personImage &&
+        ((this.fetchImage && !this.personImage) || this.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
         const image = await getPersonImage(graph, this.personDetails);
         if (image) {
           this.personDetails.personImage = image;

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

@@ -138,23 +138,41 @@ export class MgtPerson extends MgtTemplatedComponent {
     } else {
       this._personAvatarBg = this.getColorFromName(value.displayName);
     }
+
+    if (this.fetchImage) {
+      this.personImage = null;
+    }
+
+    this.requestStateUpdate();
     this.requestUpdate('personDetails');
   }
 
   /**
    * Set the image of the person
-   * Set to '@' to look up image from the graph
    *
    * @type {string}
    * @memberof MgtPersonCard
    */
   @property({
     attribute: 'person-image',
-    reflect: true,
     type: String
   })
   public personImage: string;
 
+  /**
+   * Sets whether the person image should be fetched
+   * from the Microsoft Graph based on the personDetails
+   * provided by the user
+   *
+   * @type {boolean}
+   * @memberof MgtPerson
+   */
+  @property({
+    attribute: 'fetch-image',
+    type: Boolean
+  })
+  public fetchImage: boolean;
+
   /**
    * Gets or sets presence of person
    *
@@ -666,9 +684,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     const graph = provider.graph.forComponent(this);
 
     if (this.personDetails) {
-      // 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
-      if (this.personImage === '@' && !this.personDetails.personImage) {
+      if (!this.personDetails.personImage && ((this.fetchImage && !this.personImage) || this.personImage === '@')) {
         const image = await getPersonImage(graph, this.personDetails);
         if (image) {
           this.personDetails.personImage = image;
@@ -681,6 +697,7 @@ export class MgtPerson extends MgtTemplatedComponent {
 
       this.personDetails = person;
       this.personImage = this.getImage();
+      this.personDetails.personImage = this.personImage;
     } else if (this.personQuery) {
       // Use the personQuery to find our person.
       const people = await findPeople(graph, this.personQuery, 1);

src/graph/graph.photos.ts

@@ -75,8 +75,16 @@ export async function getPersonImage(graph: IGraph, person: IDynamicPerson) {
     const userPrincipalName = (person as MicrosoftGraph.Person).userPrincipalName;
     image = await getUserPhoto(graph, userPrincipalName);
   } else {
+    if (person.id) {
+      image = await getUserPhoto(graph, person.id);
+      if (image) {
+        return image;
+      }
+    }
+
     // try to find a user by e-mail
     const email = getEmailFromGraphEntity(person);
+
     if (email) {
       const users = await findUserByEmail(graph, email);
       if (users && users.length) {