Fix bug to show more details in person card when rendered in context of mgt-agenda (#385)

* Update logic to support attendee queries in mgt-agenda

* Update storybook for mgt-people

* Refactor loadimage function. Add more details on get people by queries.

* Refactor IDynamicPerson to separate file. Add logic to handle parallel procession of get people.

* Update casing

* Remove get image and add parallel processing.

Co-authored-by: Nikola Metulev <[email protected]>

Author: beth-panx

src/components/mgt-agenda/mgt-agenda.ts

@@ -397,13 +397,9 @@ export class MgtAgenda extends MgtTemplatedComponent {
     return html`
       <mgt-people
         class="event-attendees"
-        .people=${event.attendees.map(
-          attendee =>
-            ({
-              displayName: attendee.emailAddress.name,
-              emailAddresses: [attendee.emailAddress]
-            } as MicrosoftGraph.Contact)
-        )}
+        .peopleQueries=${event.attendees.map(attendee => {
+          return attendee.emailAddress.address;
+        })}
       ></mgt-people>
     `;
   }

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

@@ -10,11 +10,11 @@ import { classMap } from 'lit-html/directives/class-map';
 import { repeat } from 'lit-html/directives/repeat';
 import { findPerson, getPeopleFromGroup } from '../../graph/graph.people';
 import { getUser } from '../../graph/graph.user';
+import { IDynamicPerson } from '../../graph/types';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
 import { debounce } from '../../utils/Utils';
-import { IDynamicPerson } from '../mgt-person/mgt-person';
 import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
 import { MgtTemplatedComponent } from '../templatedComponent';
 import { styles } from './mgt-people-picker-css';

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

@@ -9,12 +9,12 @@ 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, getPeopleFromGroup } from '../../graph/graph.people';
-import { getUsersForUserIds } from '../../graph/graph.user';
+import { getUsersForPeopleQueries, getUsersForUserIds } from '../../graph/graph.user';
+import { IDynamicPerson } from '../../graph/types';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
 import { arraysAreEqual } from '../../utils/Utils';
-import { IDynamicPerson } from '../mgt-person/mgt-person';
 import { MgtTemplatedComponent } from '../templatedComponent';
 import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-people-css';
@@ -90,6 +90,28 @@ export class MgtPeople extends MgtTemplatedComponent {
   })
   public people: IDynamicPerson[];
 
+  /**
+   * allows developer to define queries of people for component
+   * @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: string[]) {
+    if (arraysAreEqual(this._peopleQueries, value)) {
+      return;
+    }
+    this._peopleQueries = value;
+    this.requestStateUpdate(true);
+  }
+
   /**
    * developer determined max people shown in component
    * @type {number}
@@ -122,6 +144,7 @@ export class MgtPeople extends MgtTemplatedComponent {
 
   private _groupId: string;
   private _userIds: string[];
+  private _peopleQueries: string[];
 
   constructor() {
     super();
@@ -270,6 +293,8 @@ export class MgtPeople extends MgtTemplatedComponent {
           this.people = await getPeopleFromGroup(graph, this.groupId);
         } else if (this.userIds) {
           this.people = await getUsersForUserIds(graph, this.userIds);
+        } else if (this.peopleQueries) {
+          this.people = await getUsersForPeopleQueries(graph, this.peopleQueries);
         } else {
           this.people = await getPeople(graph);
         }

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

@@ -7,14 +7,15 @@
 
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import { customElement, html, property, TemplateResult } from 'lit-element';
-import { findPerson, findUserByEmail, getEmailFromGraphEntity } from '../../graph/graph.people';
-import { getContactPhoto, getUserPhoto, myPhoto } from '../../graph/graph.photos';
-import { getUser, getUserWithPhoto } from '../../graph/graph.user';
+import { findPerson, getEmailFromGraphEntity } from '../../graph/graph.people';
+import { getPersonImage } from '../../graph/graph.photos';
+import { getUserWithPhoto } from '../../graph/graph.user';
+import { IDynamicPerson } from '../../graph/types';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { TeamsHelper } from '../../utils/TeamsHelper';
-import { IDynamicPerson, MgtPerson } from '../mgt-person/mgt-person';
+import { MgtPerson } from '../mgt-person/mgt-person';
 import { MgtTemplatedComponent } from '../templatedComponent';
 import { styles } from './mgt-person-card-css';
 
@@ -535,7 +536,11 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       } 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();
+        const image = await getPersonImage(graph, this.personDetails);
+        if (image) {
+          this.personDetails.personImage = image;
+          this.personImage = image;
+        }
       }
     } else if (this.userId || this.personQuery === 'me') {
       // Use userId or 'me' query to get the person and image
@@ -549,7 +554,11 @@ export class MgtPersonCard extends MgtTemplatedComponent {
 
       if (people && people.length) {
         this.personDetails = people[0];
-        this.loadImage();
+        const image = await getPersonImage(graph, this.personDetails);
+        if (image) {
+          this.personDetails.personImage = image;
+          this.personImage = image;
+        }
       }
     }
   }
@@ -650,45 +659,6 @@ 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;

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

@@ -8,9 +8,10 @@
 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, findUserByEmail, getEmailFromGraphEntity } from '../../graph/graph.people';
-import { getContactPhoto, getUserPhoto, myPhoto } from '../../graph/graph.photos';
+import { findPerson, getEmailFromGraphEntity } from '../../graph/graph.people';
+import { getPersonImage } from '../../graph/graph.photos';
 import { getUserWithPhoto } from '../../graph/graph.user';
+import { IDynamicPerson } from '../../graph/types';
 import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
@@ -21,23 +22,6 @@ import { MgtTemplatedComponent } from '../templatedComponent';
 import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-person-css';
 
-/**
- * IDynamicPerson describes the person object we use throughout mgt-person,
- * which can be one of three similar Graph types.
- *
- * In addition, this custom type also defines the optional `personImage` property,
- * which is used to pass the image around to other components as part of the person object.
- */
-export type IDynamicPerson = (MicrosoftGraph.User | MicrosoftGraph.Person | MicrosoftGraph.Contact) & {
-  /**
-   * personDetails.personImage is a toolkit injected property to pass image between components
-   * an optimization to avoid fetching the image when unnecessary.
-   *
-   * @type {string}
-   */
-  personImage?: string;
-};
-
 /**
  * The person component is used to display a person or contact by using their photo, name, and/or email address.
  *
@@ -220,7 +204,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    */
   public render() {
     // Loading
-    if (this.isLoadingState) {
+    if (this.isLoadingState && !this.personDetails) {
       return this.renderLoading();
     }
 
@@ -463,7 +447,6 @@ export class MgtPerson extends MgtTemplatedComponent {
    */
   protected async loadState() {
     const provider = Providers.globalProvider;
-
     if (!provider || provider.state === ProviderState.Loading) {
       return;
     }
@@ -473,74 +456,37 @@ export class MgtPerson extends MgtTemplatedComponent {
       return;
     }
 
+    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) {
-        this.loadImage();
+        const image = await getPersonImage(graph, this.personDetails);
+        if (image) {
+          this.personDetails.personImage = image;
+          this.personImage = image;
+        }
       }
-      return;
-    }
-
-    // Use userId or 'me' query to get the person and image
-    if (this.userId || this.personQuery === 'me') {
-      const graph = provider.graph.forComponent(this);
+    } 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();
-      return;
-    }
-
-    // Use the personQuery to find our person.
-    if (this.personQuery) {
-      const graph = provider.graph.forComponent(this);
+    } 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();
-      }
-    }
-  }
+        const image = await getPersonImage(graph, people[0]);
 
-  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;
         }
       }
     }
-
-    if (image) {
-      this.personDetails.personImage = image;
-      this.personImage = image;
-    }
   }
 
   private getImage(): string {

src/graph/graph.photos.ts

@@ -6,9 +6,12 @@
  */
 
 import { ResponseType } from '@microsoft/microsoft-graph-client';
+import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import { IGraph } from '../IGraph';
 import { prepScopes } from '../utils/GraphHelpers';
 import { blobToBase64 } from '../utils/Utils';
+import { findUserByEmail, getEmailFromGraphEntity } from './graph.people';
+import { IDynamicPerson } from './types';
 
 /**
  * retrieves a photo for the specified resource.
@@ -58,3 +61,41 @@ export function getUserPhoto(graph: IGraph, userId: string): Promise<string> {
 export function myPhoto(graph: IGraph): Promise<string> {
   return getPhotoForResource(graph, 'me', ['user.read']);
 }
+
+/**
+ * async promise, loads image of user
+ *
+ * @export
+ */
+export async function getPersonImage(graph: IGraph, person: IDynamicPerson) {
+  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);
+        }
+      }
+    }
+  }
+
+  return image;
+}