working flyout in tasks and person

Author: nmetulev

index.html

@@ -35,17 +35,5 @@
     <mgt-login></mgt-login>
     <mgt-person person-query="me" person-card="click"></mgt-person>
     <mgt-tasks></mgt-tasks>
-
-    <mgt-flyout>
-      <div>hello</div>
-      <div slot="flyout">you</div>
-    </mgt-flyout>
-
-    <script>
-      let flyout = document.querySelector('mgt-flyout');
-      flyout.addEventListener('click', () => {
-        flyout.isOpen = !flyout.isOpen;
-      });
-    </script>
   </body>
 </html>

src/components/baseComponent.ts

@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { LitElement } from 'lit-element';
+import { LitElement, PropertyValues } from 'lit-element';
 /**
  * BaseComponent extends LitElement including ShadowRoot toggle and fireCustomEvent features
  *
@@ -45,7 +45,7 @@ export abstract class MgtBaseComponent extends LitElement {
   }
 
   /**
-   * Recieve ShadowRoot Disabled value
+   * Receive ShadowRoot Disabled value
    *
    * @returns boolean _useShadowRoot value
    * @memberof MgtBaseComponent
@@ -81,4 +81,22 @@ export abstract class MgtBaseComponent extends LitElement {
   protected createRenderRoot() {
     return this.isShadowRootDisabled() ? this : super.createRenderRoot();
   }
+
+  /**
+   * Invoked whenever the element is updated. Implement to perform
+   * post-updating tasks via DOM APIs, for example, focusing an element.
+   *
+   * Setting properties inside this method will trigger the element to update
+   * again after this update cycle completes.
+   *
+   * * @param changedProperties Map of changed properties with old values
+   */
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    const event = new CustomEvent('updated', {
+      bubbles: true,
+      cancelable: true
+    });
+    this.dispatchEvent(event);
+  }
 }

src/components/mgt-tasks/mgt-tasks.scss

@@ -198,21 +198,16 @@ mgt-tasks,
           }
           .Picker {
             background-color: white;
-            display: block;
-            position: absolute;
             box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
             -webkit-background-clip: padding-box;
             -moz-background-clip: padding-box;
             background-clip: padding-box;
-            width: 450px;
+            width: 350px;
             color: var(--task-detail-color, black);
-            z-index: 1;
+            margin: 8px;
             mgt-people-picker {
               --separator-margin: 0px 10px 0px 10px;
             }
-            &.Hidden {
-              display: none;
-            }
           }
 
           input,

src/components/mgt-tasks/mgt-tasks.ts

@@ -23,6 +23,7 @@ import { MgtPeople } from '../mgt-people/mgt-people';
 import '../mgt-person/mgt-person';
 import '../sub-components/mgt-arrow-options/mgt-arrow-options';
 import '../sub-components/mgt-dot-options/mgt-dot-options';
+import '../sub-components/mgt-flyout/mgt-flyout';
 
 /**
  * Defines how a person card is shown when a user interacts with
@@ -842,44 +843,7 @@ export class MgtTasks extends MgtTemplatedComponent {
       </span>
     `;
 
-    const task = null;
-
-    const assignedPeopleHTML = html`
-      <mgt-people
-        class="people-newTask"
-        .userIds="${[]}"
-        .personCardInteraction=${this.isPeoplePickerVisible ? PersonCardInteraction.none : PersonCardInteraction.hover}
-      >
-        <template data-type="no-people">
-          <i class="login-icon ms-Icon ms-Icon--Contact"></i>
-        </template>
-      </mgt-people>
-    `;
-
-    const taskPeople =
-      this.dataSource === TasksSource.todo
-        ? null
-        : html`
-            <span class="TaskDetail TaskPeople">
-              <span
-                @click=${(e: MouseEvent) => {
-                  e.stopPropagation();
-                  this.showPeoplePicker(task);
-                }}
-              >
-                ${assignedPeopleHTML}
-                <div
-                  class=${classMap({ Picker: true, Hidden: !this.isPeoplePickerVisible || task !== this._currentTask })}
-                >
-                  <mgt-people-picker
-                    class="picker-newTask"
-                    @click=${(e: MouseEvent) => e.stopPropagation()}
-                  ></mgt-people-picker>
-                </div>
-              </span>
-            </span>
-          `;
-
+    const taskPeople = this.dataSource === TasksSource.todo ? null : this.renderAssignedPeople(null);
     const taskAdd = this._newTaskBeingAdded
       ? html`
           <div class="TaskAddButtonContainer"></div>
@@ -963,9 +927,7 @@ export class MgtTasks extends MgtTemplatedComponent {
   }
 
   private renderTask(task: ITask) {
-    const { name = 'Task', completed = false, dueDate, assignments } = task;
-
-    const people = Object.keys(assignments);
+    const { name = 'Task', completed = false, dueDate } = task;
 
     const isLoading = this._loadingTasks.includes(task.id);
 
@@ -1030,48 +992,8 @@ export class MgtTasks extends MgtTemplatedComponent {
             </span>
           `;
 
-      let taskPeople = null;
-      let assignedPeopleHTML = null;
+      const taskPeople = this.dataSource !== TasksSource.todo ? this.renderAssignedPeople(task) : null;
 
-      const assignedPeople = Object.keys(assignments).map(key => {
-        return key;
-      });
-
-      const noPeopleTemplate = html`
-        <template data-type="no-people">
-          <i class="login-icon ms-Icon ms-Icon--Contact"></i>
-        </template>
-      `;
-
-      if (this.dataSource !== TasksSource.todo) {
-        assignedPeopleHTML = html`
-          <mgt-people
-            class="people-${task.id}"
-            .userIds="${assignedPeople}"
-            .personCardInteraction=${this.isPeoplePickerVisible
-              ? PersonCardInteraction.none
-              : PersonCardInteraction.hover}
-            >${noPeopleTemplate}
-          </mgt-people>
-        `;
-        taskPeople = html`
-          <span
-            class="TaskDetail TaskBucket"
-            @click=${(e: MouseEvent) => {
-              this.showPeoplePicker(task);
-              e.stopPropagation();
-            }}
-          >
-            ${assignedPeopleHTML}
-            <div class=${classMap({ Picker: true, Hidden: !this.showPeoplePicker || task !== this._currentTask })}>
-              <mgt-people-picker
-                class="picker-${task.id}"
-                @click=${(e: MouseEvent) => e.stopPropagation()}
-              ></mgt-people-picker>
-            </div>
-          </span>
-        `;
-      }
       taskDetails = html`
         <div class="TaskTitle">
           ${name}
@@ -1139,6 +1061,52 @@ export class MgtTasks extends MgtTemplatedComponent {
     `;
   }
 
+  private renderAssignedPeople(task: ITask) {
+    let assignedPeopleHTML = null;
+
+    const assignedPeople = task
+      ? Object.keys(task.assignments).map(key => {
+          return key;
+        })
+      : [];
+
+    const noPeopleTemplate = html`
+      <template data-type="no-people">
+        <i class="login-icon ms-Icon ms-Icon--Contact"></i>
+      </template>
+    `;
+
+    const taskId = task ? task.id : 'newTask';
+
+    assignedPeopleHTML = html`
+      <mgt-people
+        class="people-${taskId}"
+        .userIds="${assignedPeople}"
+        .personCardInteraction=${this.isPeoplePickerVisible ? PersonCardInteraction.none : PersonCardInteraction.hover}
+        >${noPeopleTemplate}
+      </mgt-people>
+    `;
+
+    return html`
+      <mgt-flyout
+        class="TaskDetail TaskPeople"
+        @click=${(e: MouseEvent) => {
+          this.showPeoplePicker(task);
+          e.stopPropagation();
+        }}
+        .isOpen=${this.isPeoplePickerVisible && task === this._currentTask}
+      >
+        ${assignedPeopleHTML}
+        <div slot="flyout" class=${classMap({ Picker: true })}>
+          <mgt-people-picker
+            class="picker-${taskId}"
+            @click=${(e: MouseEvent) => e.stopPropagation()}
+          ></mgt-people-picker>
+        </div>
+      </mgt-flyout>
+    `;
+  }
+
   private handleTaskClick(task: ITask) {
     if (task && !this.isPeoplePickerVisible) {
       this.fireCustomEvent('taskClick', { task: task._raw });

src/components/sub-components/mgt-flyout/mgt-flyout.scss

@@ -1,3 +1,7 @@
+.root {
+  position: relative;
+}
+
 .root .flyout {
   display: none;
   position: absolute;