Add presence badge to person avatar (#399)

* Update logic to support attendee queries in mgt-agenda

* Update storybook for mgt-people

* Add graph call to get user presence

* Add presence badge to avatar.

* Add license language to types

* Update based on PR comments.

* Add oof dnd combination.

* Update css

* Address pr comments.

* Address PR change

* Add presence to person card.

* Add avatar size as attribute

* Update logic

Author: beth-panx

package.json

@@ -79,7 +79,7 @@
     "@storybook/addon-knobs": "^5.3.17",
     "@storybook/addon-links": "^5.3.17",
     "@storybook/addon-storysource": "^5.3.17",
-    "@storybook/storybook-deployer": "^2.8.1",
+    "@storybook/storybook-deployer": "^2.8.5",
     "@storybook/web-components": "^5.3.17",
     "@types/jest": "^24.9.1",
     "@types/node": "12.12.22",

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

@@ -6,9 +6,11 @@
  */
 
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
+import { Presence } from '@microsoft/microsoft-graph-types-beta';
 import { customElement, html, property, TemplateResult } from 'lit-element';
 import { repeat } from 'lit-html/directives/repeat';
 import { getPeople, getPeopleFromGroup } from '../../graph/graph.people';
+import { getUsersPresenceByPeople } from '../../graph/graph.presence';
 import { getUsersForPeopleQueries, getUsersForUserIds } from '../../graph/graph.user';
 import { IDynamicPerson } from '../../graph/types';
 import { Providers } from '../../Providers';
@@ -122,6 +124,16 @@ export class MgtPeople extends MgtTemplatedComponent {
   })
   public showMax: number;
 
+  /**
+   * determines if person component renders presence
+   * @type {boolean}
+   */
+  @property({
+    attribute: 'show-presence',
+    type: Boolean
+  })
+  public showPresence: boolean;
+
   /**
    * Sets how the person-card is invoked
    * Set to PersonCardInteraction.none to not show the card
@@ -145,6 +157,7 @@ export class MgtPeople extends MgtTemplatedComponent {
   private _groupId: string;
   private _userIds: string[];
   private _peopleQueries: string[];
+  private _peoplePresence: {};
 
   constructor() {
     super();
@@ -250,6 +263,16 @@ export class MgtPeople extends MgtTemplatedComponent {
    * @memberof MgtPeople
    */
   protected renderPerson(person: MicrosoftGraph.User | MicrosoftGraph.Person | MicrosoftGraph.Contact): TemplateResult {
+    let personPresence = {
+      // set up default presence
+      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) ||
       // set image to @ to flag the mgt-person component to
@@ -258,7 +281,10 @@ export class MgtPeople extends MgtTemplatedComponent {
         <mgt-person
           .personDetails=${person}
           .personImage=${'@'}
+          .avatarSize=${avatarSize}
           .personCardInteraction=${this.personCardInteraction}
+          .showPresence=${this.showPresence}
+          .personPresence=${personPresence}
         ></mgt-person>
       `
     );
@@ -289,6 +315,7 @@ export class MgtPeople extends MgtTemplatedComponent {
       if (provider && provider.state === ProviderState.SignedIn) {
         const graph = provider.graph.forComponent(this);
 
+        // populate people
         if (this.groupId) {
           this.people = await getPeopleFromGroup(graph, this.groupId);
         } else if (this.userIds) {
@@ -298,6 +325,13 @@ export class MgtPeople extends MgtTemplatedComponent {
         } else {
           this.people = await getPeople(graph);
         }
+
+        // populate presence for people
+        if (this.showPresence) {
+          this._peoplePresence = await getUsersPresenceByPeople(graph, this.people);
+        } else {
+          this._peoplePresence = null;
+        }
       }
     }
   }

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

@@ -31,7 +31,7 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
     padding: 18px 14px;
 
     mgt-person.person-image {
-      --avatar-size-s: 75px;
+      --avatar-size: 75px;
     }
 
     .details {

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

@@ -6,9 +6,11 @@
  */
 
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
+import { Presence } from '@microsoft/microsoft-graph-types-beta';
 import { customElement, html, property, TemplateResult } from 'lit-element';
 import { findPerson, getEmailFromGraphEntity } from '../../graph/graph.people';
 import { getPersonImage } from '../../graph/graph.photos';
+import { getUserPresence } from '../../graph/graph.presence';
 import { getUserWithPhoto } from '../../graph/graph.user';
 import { IDynamicPerson } from '../../graph/types';
 import { Providers } from '../../Providers';
@@ -116,6 +118,28 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   })
   public inheritDetails: boolean;
 
+  /**
+   * determines if person card component renders presence
+   * @type {boolean}
+   */
+  @property({
+    attribute: 'show-presence',
+    type: Boolean
+  })
+  public showPresence: boolean;
+
+  /**
+   * Gets or sets presence of person
+   *
+   * @type {Presence}
+   * @memberof MgtPerson
+   */
+  @property({
+    attribute: 'person-presence',
+    type: Object
+  })
+  public personPresence: Presence;
+
   /**
    * Invoked each time the custom element is appended into a document-connected element
    *
@@ -167,6 +191,8 @@ export class MgtPersonCard extends MgtTemplatedComponent {
 
     const person = this.personDetails;
     const image = this.getImage();
+    const presence = this.personPresence;
+    const showPresence = this.showPresence;
 
     // Check for a default template.
     // tslint:disable-next-line: no-string-literal
@@ -183,7 +209,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       personImage: image
     });
     if (!personDetailsTemplate) {
-      const personImageTemplate = this.renderPersonImage(image);
+      const personImageTemplate = this.renderPersonImage(image, presence, showPresence);
       const personNameTemplate = this.renderPersonName(person);
       const personTitleTemplate = this.renderPersonTitle(person);
       const personSubtitleTemplate = this.renderPersonSubtitle(person);
@@ -234,10 +260,20 @@ export class MgtPersonCard extends MgtTemplatedComponent {
    * @param {*} image
    * @memberof MgtPersonCard
    */
-  protected renderPersonImage(imageSrc?: string): TemplateResult {
+  protected renderPersonImage(imageSrc?: string, presence?: Presence, showPresence?: boolean): TemplateResult {
     imageSrc = imageSrc || this.getImage();
+    presence = presence || this.personPresence;
+    showPresence = showPresence || this.showPresence;
+    const avatarSize = 'large';
     return html`
-      <mgt-person class="person-image" .personDetails=${this.personDetails} .personImage=${imageSrc}></mgt-person>
+      <mgt-person
+        class="person-image"
+        .personDetails=${this.personDetails}
+        .personImage=${imageSrc}
+        .personPresence=${presence}
+        .showPresence=${showPresence}
+        .avatarSize=${avatarSize}
+      ></mgt-person>
     `;
   }
 
@@ -512,6 +548,8 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       if (parent && (parent as MgtPerson).personDetails) {
         this.personDetails = (parent as MgtPerson).personDetails;
         this.personImage = (parent as MgtPerson).personImage;
+        this.personPresence = (parent as MgtPerson).personPresence;
+        this.showPresence = (parent as MgtPerson).showPresence;
       }
     }
 
@@ -561,6 +599,25 @@ export class MgtPersonCard extends MgtTemplatedComponent {
         }
       }
     }
+
+    // populate presence
+    const defaultPresence = {
+      activity: 'Offline',
+      availability: 'Offline',
+      id: null
+    };
+    if (!this.personPresence && this.showPresence) {
+      try {
+        if (this.personDetails && this.personDetails.id) {
+          this.personPresence = await getUserPresence(graph, this.personDetails.id);
+        } else {
+          this.personPresence = defaultPresence;
+        }
+      } catch (_) {
+        // set up a default Presence in case beta api changes or getting error code
+        this.personPresence = defaultPresence;
+      }
+    }
   }
 
   /**