feat: optionally pass the group-id value from tasks to people picker (#2200)

musale · web-flow · commit 711a23381fa1 · 2023-04-25T12:36:51.000+03:00
* Add story for mgt-task group-id attribute

* When there are no batch requests, return dict from cache

* Pass group-id to people-picker if defined

* Update note to show missing permissions from sandbox tenant

* Execute batch requests if they exist

* Add containerID to track group the plan belongs to

* Get the group linked to a task from the plan

* Refactor handling date change to function

* groupId is used to fetch tasks for the ID

This means when is supplied, the loaded tasks are specific to that group.

* Change variable name to be more clear

* Fix withCodeEditor import path in tasks stories
diff --git a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts
@@ -7,7 +7,8 @@
 
 import { Person, PlannerAssignments, PlannerTask, User } from '@microsoft/microsoft-graph-types';
 import { Contact, OutlookTask, OutlookTaskFolder } from '@microsoft/microsoft-graph-types-beta';
-import { customElement, html, property } from 'lit-element';
+import { customElement, html, property, state, TemplateResult } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from 'lit-html/directives/class-map';
 import { repeat } from 'lit-html/directives/repeat';
 import { ComponentMediaQuery, Providers, ProviderState, MgtTemplatedComponent } from '@microsoft/mgt-element';
@@ -230,6 +231,7 @@ export class MgtTasks extends MgtTemplatedComponent {
       this._newTaskDueDate = null;
       this._newTaskName = '';
       this._newTaskGroupId = '';
+      this._newTaskContainerId = '';
     }
   }
 
@@ -345,6 +347,7 @@ export class MgtTasks extends MgtTemplatedComponent {
   @property() private _newTaskDueDate: Date;
   @property() private _newTaskGroupId: string;
   @property() private _newTaskFolderId: string;
+  @property() private _newTaskContainerId: string;
   @property() private _groups: ITaskGroup[];
   @property() private _folders: ITaskFolder[];
   @property() private _tasks: ITask[];
@@ -357,7 +360,7 @@ export class MgtTasks extends MgtTemplatedComponent {
   @property() private _currentGroup: string;
   @property() private _currentFolder: string;
 
-  private _me: User = null;
+  @state() private _me: User = null;
   private previousMediaQuery: ComponentMediaQuery;
 
   constructor() {
@@ -461,18 +464,9 @@ export class MgtTasks extends MgtTemplatedComponent {
    * trigger the element to update.
    */
   protected render() {
-    let tasks = this._tasks
-      .filter(task => this.isTaskInSelectedGroupFilter(task))
-      .filter(task => this.isTaskInSelectedFolderFilter(task))
-      .filter(task => !this._hiddenTasks.includes(task.id));
-
-    if (this.taskFilter) {
-      tasks = tasks.filter(task => this.taskFilter(task._raw));
-    }
-
     const loadingTask = this._inTaskLoad && !this._hasDoneInitialLoad ? this.renderLoadingTask() : null;
 
-    let header;
+    let header: TemplateResult;
 
     if (!this.hideHeader) {
       header = html`
@@ -487,7 +481,7 @@ export class MgtTasks extends MgtTemplatedComponent {
       <div class="Tasks" dir=${this.direction}>
         ${this._isNewTaskVisible ? this.renderNewTask() : null} ${loadingTask}
         ${repeat(
-          tasks,
+          this._tasks,
           task => task.id,
           task => this.renderTask(task)
         )}
@@ -513,10 +507,9 @@ export class MgtTasks extends MgtTemplatedComponent {
     }
 
     this._inTaskLoad = true;
-    let meTask;
     if (!this._me) {
       const graph = provider.graph.forComponent(this);
-      meTask = getMe(graph);
+      this._me = await getMe(graph);
     }
 
     if (this.groupId && this.dataSource === TasksSource.planner) {
@@ -531,8 +524,13 @@ export class MgtTasks extends MgtTemplatedComponent {
       await this._loadAllTasks(ts);
     }
 
-    if (meTask) {
-      this._me = await meTask;
+    this._tasks = this._tasks
+      .filter(task => this.isTaskInSelectedGroupFilter(task))
+      .filter(task => this.isTaskInSelectedFolderFilter(task))
+      .filter(task => !this._hiddenTasks.includes(task.id));
+
+    if (this.taskFilter) {
+      this._tasks = this._tasks.filter(task => this.taskFilter(task._raw));
     }
 
     this._inTaskLoad = false;
@@ -792,6 +790,27 @@ export class MgtTasks extends MgtTemplatedComponent {
     }
   }
 
+  private addNewTaskButtonClick(e: MouseEvent) {
+    this.isNewTaskVisible = !this.isNewTaskVisible;
+  }
+
+  private handleNewTaskDateChange(e: Event) {
+    const value = (e.target as HTMLInputElement).value;
+    if (value) {
+      this._newTaskDueDate = new Date(value + 'T17:00');
+    } else {
+      this._newTaskDueDate = null;
+    }
+  }
+
+  private handleSelectedPlan(e: Event) {
+    this._newTaskGroupId = (e.target as HTMLInputElement).value;
+    if (this.dataSource === TasksSource.planner) {
+      const task = this._groups.filter(iTask => iTask.id === this._newTaskGroupId);
+      this._newTaskContainerId = task.pop()?.containerId ?? this._newTaskContainerId;
+    }
+  }
+
   private newTaskVisible(e: KeyboardEvent) {
     if (e.code === 'Enter') {
       this.isNewTaskVisible = false;
@@ -818,9 +837,7 @@ export class MgtTasks extends MgtTemplatedComponent {
             <div
               tabindex="0"
               class="AddBarItem NewTaskButton"
-              @click="${() => {
-                this.isNewTaskVisible = !this.isNewTaskVisible;
-              }}"
+              @click="${this.addNewTaskButtonClick}"
               @keydown="${this.newTaskButtonKeydown}"
             >
               <span class="TaskIcon"></span>
@@ -938,6 +955,9 @@ export class MgtTasks extends MgtTemplatedComponent {
     const groups = this._groups;
     if (groups.length > 0 && !this._newTaskGroupId) {
       this._newTaskGroupId = groups[0].id;
+      if (this.dataSource === TasksSource.planner) {
+        this._newTaskContainerId = groups[0].containerId;
+      }
     }
     const group =
       this.dataSource === TasksSource.todo
@@ -954,9 +974,7 @@ export class MgtTasks extends MgtTemplatedComponent {
               ${this.renderPlannerIcon()}
               <select aria-label="new task group"
                 .value="${this._newTaskGroupId}"
-                @change="${(e: Event) => {
-                  this._newTaskGroupId = (e.target as HTMLInputElement).value;
-                }}"
+                @change="${this.handleSelectedPlan}"
               >
                 ${this._groups.map(
                   plan => html`
@@ -1009,14 +1027,7 @@ export class MgtTasks extends MgtTemplatedComponent {
           aria-label="new-taskDate-input"
           role="textbox"
           .value="${this.dateToInputValue(this._newTaskDueDate)}"
-          @change="${(e: Event) => {
-            const value = (e.target as HTMLInputElement).value;
-            if (value) {
-              this._newTaskDueDate = new Date(value + 'T17:00');
-            } else {
-              this._newTaskDueDate = null;
-            }
-          }}"
+          @change="${this.handleNewTaskDateChange}"
         />
       </span>
     `;
@@ -1260,6 +1271,7 @@ export class MgtTasks extends MgtTemplatedComponent {
 
   private renderAssignedPeople(task: ITask) {
     let assignedPeopleHTML = null;
+    let assignedGroupId: string;
 
     const taskAssigneeClasses = {
       NewTaskAssignee: task === null,
@@ -1282,6 +1294,16 @@ export class MgtTasks extends MgtTemplatedComponent {
     const taskId = task ? task.id : 'newTask';
     taskAssigneeClasses[`flyout-${taskId}`] = true;
 
+    if (!this.newTaskVisible) {
+      const planId = task?._raw?.planId;
+      if (planId) {
+        const group = this._groups.filter(group => group.id === planId);
+        assignedGroupId = group.pop()?.containerId;
+      }
+    }
+
+    const planGroupId = this.isNewTaskVisible ? this._newTaskContainerId : assignedGroupId;
+
     assignedPeopleHTML = html`
       <mgt-people
         class="people-${taskId}"
@@ -1307,6 +1329,7 @@ export class MgtTasks extends MgtTemplatedComponent {
         <div slot="flyout" class=${classMap({ Picker: true })}>
           <mgt-people-picker
             class="picker-${taskId}"
+            .groupId=${ifDefined(planGroupId)}
             @click=${(e: MouseEvent) => e.stopPropagation()}
             @keydown=${(e: KeyboardEvent) => {
               if (e.code === 'Enter') {
diff --git a/packages/mgt-components/src/components/mgt-tasks/task-sources.ts b/packages/mgt-components/src/components/mgt-tasks/task-sources.ts
@@ -174,6 +174,14 @@ export interface ITaskGroup {
    * @memberof ITaskGroup
    */
   _raw?: any;
+
+  /**
+   * Plan Container ID. Same as the group ID of the group in the plan.
+   *
+   * @type {string}
+   * @memberof ITaskGroup
+   */
+  containerId?: string;
 }
 /**
  * A common interface for both planner and todo tasks
@@ -324,8 +332,9 @@ export class PlannerTaskSource extends TaskSourceBase implements ITaskSource {
    */
   public async getTaskGroups(): Promise<ITaskGroup[]> {
     const plans = await getAllMyPlannerPlans(this.graph);
-
-    return plans.map(plan => ({ id: plan.id, title: plan.title } as ITaskGroup));
+    return plans.map(
+      plan => ({ id: plan.id, title: plan.title, containerId: plan?.container?.containerId } as ITaskGroup)
+    );
   }
 
   /**
diff --git a/packages/mgt-components/src/graph/graph.user.ts b/packages/mgt-components/src/graph/graph.user.ts
@@ -10,7 +10,6 @@ import { User } from '@microsoft/microsoft-graph-types';
 
 import { findPeople, PersonType } from './graph.people';
 import { schemas } from './cacheStores';
-import { UserType } from '..';
 import { GraphRequest } from '@microsoft/microsoft-graph-client';
 
 /**
@@ -221,29 +220,31 @@ export async function getUsersForUserIds(
     }
   }
   try {
-    const responses = await batch.executeAll();
-    // iterate over userIds to ensure the order of ids
-    for (const id of userIds) {
-      const response = responses.get(id);
-      if (response && response.content) {
-        const user = response.content;
-        if (searchInput) {
-          const displayName = user?.displayName.toLowerCase();
-          if (displayName.contains(searchInput)) {
-            peopleSearchMatches[id] = user;
+    if (batch.hasRequests) {
+      const responses = await batch.executeAll();
+      // iterate over userIds to ensure the order of ids
+      for (const id of userIds) {
+        const response = responses.get(id);
+        if (response && response.content) {
+          const user = response.content;
+          if (searchInput) {
+            const displayName = user?.displayName.toLowerCase();
+            if (displayName.contains(searchInput)) {
+              peopleSearchMatches[id] = user;
+            }
+          } else {
+            peopleDict[id] = user;
           }
-        } else {
-          peopleDict[id] = user;
-        }
 
-        if (getIsUsersCacheEnabled()) {
-          cache.putValue(id, { user: JSON.stringify(user) });
+          if (getIsUsersCacheEnabled()) {
+            cache.putValue(id, { user: JSON.stringify(user) });
+          }
+        }
+        if (searchInput && Object.keys(peopleSearchMatches).length) {
+          return Promise.all(Object.values(peopleSearchMatches));
         }
       }
     }
-    if (searchInput && Object.keys(peopleSearchMatches).length) {
-      return Promise.all(Object.values(peopleSearchMatches));
-    }
     return Promise.all(Object.values(peopleDict));
   } catch (_) {
     // fallback to making the request one by one
diff --git a/stories/components/tasks.stories.js b/stories/components/tasks.stories.js
@@ -22,6 +22,14 @@ export const tasks = () => html`
   <mgt-tasks></mgt-tasks>
 `;
 
+export const tasksWithGroupId = () => html`
+  <mgt-tasks group-id="45327068-6785-4073-8553-a750d6c16a45"></mgt-tasks>
+  <!--
+    NOTE: the default sandbox tenant doesn't have the required Tasks.ReadWrite and
+    Group.ReadWrite.All permissions. Test this component in your tenant.
+  -->
+`;
+
 export const darkTheme = () => html`
   <mgt-tasks class="mgt-dark"></mgt-tasks>
   <style>
