Adding support for assigning people in tasks and much more (#188)

* people-picker in task component basic functionality. TODO: filter people

* [mgt-task] fixing styles of picker

* [mgt-tasks] default state if nobody is assigned

* fixing errors

* [mgt-tasks] adding deletion or removing selected people

* [Graph] adding assign people promise to planner

* always show assigned to me

* renamed drawers and dressers

* filtering of tasks when target-id is set and clean up of mgt-tasks

* added tasks templates and fied styles and utils

* [mgt-tasks] updating method for handling people picker hiding

* updating picker styles

* [mgt-task] fixing null selected people case

* [mgt-tasks] updating styles for better scss scaffolding and new logic for handling render of people-picker

* task source documentation

* [mgt-tasks] assings to default if no people are provided

* [mgt-tasks] picker on new task issue

* adding property to mgt-people for user id selectionfor use in tasks

* minor layout fix for new task

* [mgt-people] adding personCardInteraction property to people

* restoring index.html

* [mgt-people] adding 'no-people' template

* [mgt-tasks] updating task and picker to inherit people from each other

* [PersonCardInteraction] refactoring personcard interactions for specific definitions of hover and click for task components

* removing and updating necessary imports

* [mgt-people] refactor peopleid promise into promise.all

* [mgt-tasks mgt-people] removed default html for no-people and moved template to task. updated picker hiding method

* [mgt-tasks] adding taskClick custom event

* fixed default person card on people

* Added setter and getter for property isNewTaskVisible

* [Graph.ts] changing order of assignPeopleToTask parameters

* [mgt-tasks] fixing mgt-people styles

* [mgt-tasks] disabled person-card inside of newTask people

* [mgt-tasks] adding isEqual if picker chosen people aren't different not to update

* assingPeopletoTask rather than person

* rename nopeople template and click handler

* Fix for images in people and people-picker not updating when people change

* fix for person card in tasks

* [mgt-tasks] refactor show and hid picker, removing self assigned task

* [mgt-tasks] refactor peopleObj

* [mgt-tasks] fixing typing in assign people and sort

* [mgt-tasks] re-work of taskClick event

* [mgt-tasks] allowing click on people to save and hide people-picker

* update taskClick event with raw task results, and minor fixes

src/Graph.ts

@@ -382,6 +382,25 @@ export class Graph {
     );
   }
 
+  /**
+   * async promise, allows developer to assign people to task
+   *
+   * @param {string} taskId
+   * @param {*} people
+   * @param {string} eTag
+   * @returns {Promise<any>}
+   * @memberof Graph
+   */
+  public async planner_assignPeopleToTask(taskId: string, people: any, eTag: string): Promise<any> {
+    return this.planner_setTaskDetails(
+      taskId,
+      {
+        assignments: people
+      },
+      eTag
+    );
+  }
+
   /**
    * async promise, allows developer to create new Planner task
    *

src/components/PersonCardInteraction.ts

@@ -0,0 +1,30 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+/**
+ * Defines how a person card is shown when a user interacts with
+ * a person component
+ *
+ * @export
+ * @enum {number}
+ */
+export enum PersonCardInteraction {
+  /**
+   * Don't show person card
+   */
+  none,
+
+  /**
+   * Show person card on hover
+   */
+  hover,
+
+  /**
+   * Show person card on click
+   */
+  click
+}

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

@@ -14,6 +14,7 @@ import { styles } from './mgt-agenda-css';
 
 import '../../styles/fabric-icon-font';
 import { prepScopes } from '../../utils/GraphHelpers';
+import { getDayOfWeekString, getMonthString } from '../../utils/Utils';
 import '../mgt-person/mgt-person';
 import { MgtTemplatedComponent } from '../templatedComponent';
 
@@ -428,29 +429,13 @@ export class MgtAgenda extends MgtTemplatedComponent {
   private getDateHeaderFromDateTimeString(dateTimeString: string) {
     const date = new Date(dateTimeString);
     date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-    const monthNames = [
-      'January',
-      'February',
-      'March',
-      'April',
-      'May',
-      'June',
-      'July',
-      'August',
-      'September',
-      'October',
-      'November',
-      'December'
-    ];
-
-    const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
     const dayIndex = date.getDay();
     const monthIndex = date.getMonth();
     const day = date.getDate();
     const year = date.getFullYear();
 
-    return `${dayNames[dayIndex]}, ${monthNames[monthIndex]} ${day}, ${year}`;
+    return `${getDayOfWeekString(dayIndex)}, ${getMonthString(monthIndex)} ${day}, ${year}`;
   }
 
   private getEventDuration(event: MicrosoftGraph.Event) {

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

@@ -15,6 +15,7 @@ $avatar-size: var(--avatar-size, 48px);
 $initials-color: var(--initials-color, white);
 $initials-background-color: var(--initials-background-color, #{$ms-color-magenta});
 $accent-color: var(--accent-color, #0078d4);
+$separator-margin: var(--separator-margin, 0px 0px 0px 0px);
 
 $people-list-background-color: var(--people-list-background-color, white);
 
@@ -56,6 +57,7 @@ mgt-people-picker .people-list {
 }
 :host .people-list-separator,
 mgt-people-picker .people-list-separator {
+  margin: $separator-margin;
   height: 2px;
   background: $accent-color;
   margin-top: 5px;
@@ -105,7 +107,7 @@ mgt-people-picker .SearchIcon {
 :host .people-person,
 mgt-people-picker .people-person {
   display: flex;
-  margin: 4px 5px 0 0;
+  margin: 4px 5px 0px 0;
   align-items: center;
   background-color: rgba(196, 196, 196, 0.24);
   border-radius: 15px;

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

@@ -135,6 +135,20 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       `
     );
   }
+
+  /**
+   * Focuses the input element when focus is called
+   *
+   * @param {FocusOptions} [options]
+   * @memberof MgtPeoplePicker
+   */
+  public focus(options?: FocusOptions) {
+    const peopleInput = this.renderRoot.querySelector('.people-chosen-input') as HTMLInputElement;
+    if (peopleInput) {
+      peopleInput.focus(options);
+    }
+  }
+
   /**
    * Queries the microsoft graph for a user based on the user id and adds them to the selectedPeople array
    *

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

@@ -11,8 +11,8 @@ import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
 import '../mgt-person/mgt-person';
-import { PersonCardInteraction } from '../mgt-person/mgt-person';
 import { MgtTemplatedComponent } from '../templatedComponent';
+import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-people-css';
 
 /**
@@ -62,6 +62,39 @@ export class MgtPeople extends MgtTemplatedComponent {
   })
   public groupId: string;
 
+  /**
+   * user id array
+   *
+   * @memberof MgtPeople
+   */
+  @property({
+    attribute: 'user-ids',
+    converter: (value, type) => {
+      return value.split(',');
+    }
+  })
+  public userIds: string[];
+
+  /**
+   * Sets how the person-card is invoked
+   * Set to PersonCardInteraction.none to not show the card
+   *
+   * @type {PersonCardInteraction}
+   * @memberof MgtPerson
+   */
+  @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;
+
   private _firstUpdated = false;
 
   /**
@@ -87,31 +120,35 @@ export class MgtPeople extends MgtTemplatedComponent {
 
   protected render() {
     if (this.people) {
-      return (
-        this.renderTemplate('default', { people: this.people }) ||
-        html`
-          <ul class="people-list">
-            ${this.people.slice(0, this.showMax).map(
-              person =>
-                html`
-                  <li class="people-person">
-                    ${this.renderTemplate('person', { person }, person.displayName) || this.renderPerson(person)}
-                  </li>
-                `
-            )}
-            ${this.people.length > this.showMax
-              ? this.renderTemplate('overflow', {
-                  extra: this.people.length - this.showMax,
-                  max: this.showMax,
-                  people: this.people
-                }) ||
-                html`
-                  <li>+${this.people.length - this.showMax}</li>
-                `
-              : null}
-          </ul>
-        `
-      );
+      if (this.people.length) {
+        return (
+          this.renderTemplate('default', { people: this.people }) ||
+          html`
+            <ul class="people-list">
+              ${this.people.slice(0, this.showMax).map(
+                person =>
+                  html`
+                    <li class="people-person">
+                      ${this.renderTemplate('person', { person }, person.displayName) || this.renderPerson(person)}
+                    </li>
+                  `
+              )}
+              ${this.people.length > this.showMax
+                ? this.renderTemplate('overflow', {
+                    extra: this.people.length - this.showMax,
+                    max: this.showMax,
+                    people: this.people
+                  }) ||
+                  html`
+                    <li>+${this.people.length - this.showMax}</li>
+                  `
+                : null}
+            </ul>
+          `
+        );
+      } else {
+        return this.renderTemplate('no-people', null) || html``;
+      }
     } else {
       return this.renderTemplate('no-data', null) || html``;
     }
@@ -130,6 +167,12 @@ export class MgtPeople extends MgtTemplatedComponent {
 
         if (this.groupId) {
           this.people = await client.getPeopleFromGroup(this.groupId);
+        } else if (this.userIds) {
+          this.people = await Promise.all(
+            this.userIds.map(async userId => {
+              return await client.getUser(userId);
+            })
+          );
         } else {
           this.people = await client.getPeople();
         }
@@ -144,7 +187,7 @@ export class MgtPeople extends MgtTemplatedComponent {
       <mgt-person
         .personDetails=${person}
         .personImage=${'@'}
-        .personCardInteraction=${PersonCardInteraction.hover}
+        .personCardInteraction=${this.personCardInteraction}
       ></mgt-person>
     `;
   }

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

@@ -11,7 +11,7 @@ import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import { getEmailFromGraphEntity } from '../../utils/GraphHelpers';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
-import { MgtPerson, PersonCardInteraction } from '../mgt-person/mgt-person';
+import { MgtPerson } from '../mgt-person/mgt-person';
 import { MgtTemplatedComponent } from '../templatedComponent';
 import { styles } from './mgt-person-card-css';
 /**