People Picker - refactor group id (#349)

* fixed group-id not working

* fixed groupId not reseting state

Author: nmetulev

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

@@ -69,16 +69,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   })
   public showMax: number;
 
-  /**
-   * value determining if search is filtered to a group.
-   * @type {string}
-   */
-  @property({
-    attribute: 'group-id',
-    type: String
-  })
-  public groupId: string;
-
   /**
    *  array of user picked people.
    * @type {Array<IDynamicPerson>}
@@ -89,6 +79,23 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   })
   public selectedPeople: IDynamicPerson[];
 
+  /**
+   * value determining if search is filtered to a group.
+   * @type {string}
+   */
+  @property({ attribute: 'group-id' })
+  public get groupId(): string {
+    return this._groupId;
+  }
+  public set groupId(value) {
+    if (this._groupId === value) {
+      return;
+    }
+
+    this._groupId = value;
+    this.requestStateUpdate(true);
+  }
+
   /**
    * User input in search.
    *
@@ -159,22 +166,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     super.disconnectedCallback();
   }
 
-  /**
-   * Synchronizes property values when attributes change.
-   *
-   * @param {*} name
-   * @param {*} oldValue
-   * @param {*} newValue
-   * @memberof MgtPersonCard
-   */
-  public attributeChangedCallback(att: string, oldval: string, newval: string) {
-    super.attributeChangedCallback(att, oldval, newval);
-
-    if (att === 'group-id' && oldval !== newval) {
-      this.requestStateUpdate();
-    }
-  }
-
   /**
    * Focuses the input element when focus is called
    *
@@ -250,6 +241,23 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     `;
   }
 
+  /**
+   * Request to reload the state.
+   * Use reload instead of load to ensure loading events are fired.
+   *
+   * @protected
+   * @memberof MgtBaseComponent
+   */
+  protected requestStateUpdate(force?: boolean) {
+    if (force) {
+      this._groupPeople = null;
+      this.people = null;
+      this.selectedPeople = [];
+    }
+
+    return super.requestStateUpdate(force);
+  }
+
   /**
    * Render the input text box.
    *
@@ -474,26 +482,28 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       return;
     }
 
-    if (this.groupId !== this._groupId) {
-      this._groupId = this.groupId;
-      const graph = provider.graph.forComponent(this);
-      this._groupPeople = await getPeopleFromGroup(graph, this.groupId);
-    }
-
-    const query = this.userInput.toLowerCase();
+    const input = this.userInput.toLowerCase();
     let people: IDynamicPerson[];
 
-    // filtering groups
     if (this.groupId) {
-      people = this._groupPeople;
-    } else {
+      if (this._groupPeople === null) {
+        try {
+          const graph = provider.graph.forComponent(this);
+          this._groupPeople = await getPeopleFromGroup(graph, this.groupId);
+        } catch {
+          this._groupPeople = [];
+        }
+      }
+
+      people = this._groupPeople || [];
+    } else if (input) {
       const graph = provider.graph.forComponent(this);
-      people = await findPerson(graph, query);
+      people = await findPerson(graph, input);
     }
 
     if (people) {
       people = people.filter((person: IDynamicPerson) => {
-        return person.displayName.toLowerCase().indexOf(query) !== -1;
+        return person.displayName.toLowerCase().indexOf(input) !== -1;
       });
     }
 

stories/components/peoplePicker.stories.js

@@ -23,3 +23,7 @@ export default {
 export const peoplePicker = () => html`
   <mgt-people-picker></mgt-people-picker>
 `;
+
+export const groupId = () => html`
+<mgt-people-picker group-id="02bd9fd6-8f93-4758-87c3-1fb73740a315"></mgt-people-picker>
+`;