Merge pull request #477 from microsoftgraph/nivogt/people-picker-group

People picker default search state for Groups and groupId

Author: nmetulev

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

@@ -108,12 +108,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   @property({
     attribute: 'type',
     converter: (value, type) => {
+      value = value.toLowerCase();
       if (!value || value.length === 0) {
-        return PersonType.Any;
+        return PersonType.any;
       }
 
       if (typeof PersonType[value] === 'undefined') {
-        return PersonType.Any;
+        return PersonType.any;
       } else {
         return PersonType[value];
       }
@@ -140,7 +141,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     attribute: 'group-type',
     converter: (value, type) => {
       if (!value || value.length === 0) {
-        return GroupType.Any;
+        return GroupType.any;
       }
 
       const values = value.split(',');
@@ -154,7 +155,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       }
 
       if (groupTypes.length === 0) {
-        return GroupType.Any;
+        return GroupType.any;
       }
 
       // tslint:disable-next-line:no-bitwise
@@ -255,8 +256,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   @property({ attribute: false }) private _showLoading: boolean;
 
   private _groupId: string;
-  private _type: PersonType = PersonType.Person;
-  private _groupType: GroupType = GroupType.Any;
+  private _type: PersonType = PersonType.person;
+  private _groupType: GroupType = GroupType.any;
 
   private defaultPeople: IDynamicPerson[];
 
@@ -644,12 +645,25 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (!people && provider && provider.state === ProviderState.SignedIn) {
       const graph = provider.graph.forComponent(this);
 
-      // default common people
       if (!input.length && this._isFocused) {
         if (this.defaultPeople) {
           people = this.defaultPeople;
         } else {
-          people = await getPeople(graph);
+          if (this.groupId) {
+            if (this._groupPeople === null) {
+              try {
+                this._groupPeople = await getPeopleFromGroup(graph, this.groupId);
+              } catch (_) {
+                this._groupPeople = [];
+              }
+            }
+            people = this._groupPeople || [];
+          } else if (this.type === PersonType.person || this.type === PersonType.any) {
+            people = await getPeople(graph);
+          } else if (this.type === PersonType.group) {
+            const groups = (await findGroups(graph, '', this.showMax, this.groupType)) || [];
+            people = groups;
+          }
           this.defaultPeople = people;
         }
         this._showLoading = false;
@@ -663,19 +677,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         this.fireCustomEvent('selectionChanged', this.selectedPeople);
       }
 
-      if (this.groupId && input) {
-        if (this._groupPeople === null) {
-          try {
-            this._groupPeople = await getPeopleFromGroup(graph, this.groupId);
-          } catch (_) {
-            this._groupPeople = [];
-          }
-        }
-
-        people = this._groupPeople || [];
-      } else if (input) {
+      if (input) {
         people = [];
-        if (this.type === PersonType.Person || this.type === PersonType.Any) {
+        if (this.type === PersonType.person || this.type === PersonType.any) {
           try {
             people = (await findPeople(graph, input, this.showMax)) || [];
           } catch (e) {
@@ -699,7 +703,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           }
         }
 
-        if ((this.type === PersonType.Group || this.type === PersonType.Any) && people.length < this.showMax) {
+        if ((this.type === PersonType.group || this.type === PersonType.any) && people.length < this.showMax) {
+          people = [];
           try {
             const groups = (await findGroups(graph, input, this.showMax, this.groupType)) || [];
             people = people.concat(groups);

src/graph/graph.groups.ts

@@ -19,31 +19,31 @@ export enum GroupType {
   /**
    * Any group Type
    */
-  Any = 0,
+  any = 0,
 
   /**
    * Office 365 group
    */
   // tslint:disable-next-line:no-bitwise
-  Unified = 1 << 0,
+  unified = 1 << 0,
 
   /**
    * Security group
    */
   // tslint:disable-next-line:no-bitwise
-  Security = 1 << 1,
+  security = 1 << 1,
 
   /**
    * Mail Enabled Security group
    */
   // tslint:disable-next-line:no-bitwise
-  MailEnabledSecurity = 1 << 2,
+  mailenabledsecurity = 1 << 2,
 
   /**
    * Distribution Group
    */
   // tslint:disable-next-line:no-bitwise
-  Distribution = 1 << 3
+  distribution = 1 << 3
 }
 
 /**
@@ -53,43 +53,46 @@ export enum GroupType {
  * @param {IGraph} graph
  * @param {string} query - what to search for
  * @param {number} [top=10] - number of groups to return
- * @param {GroupType} [groupTypes=GroupType.Any] - the type of group to search for
+ * @param {GroupType} [groupTypes=GroupType.any] - the type of group to search for
  * @returns {Promise<Group[]>} An array of Groups
  */
 export async function findGroups(
   graph: IGraph,
   query: string,
   top: number = 10,
-  groupTypes: GroupType = GroupType.Any
+  groupTypes: GroupType = GroupType.any
 ): Promise<Group[]> {
   const scopes = 'Group.Read.All';
 
-  let filterQuery = `(startswith(displayName,'${query}') or startswith(mailNickname,'${query}') or startswith(mail,'${query}'))`;
+  let filterQuery = '';
+  if (query !== '') {
+    filterQuery = `(startswith(displayName,'${query}') or startswith(mailNickname,'${query}') or startswith(mail,'${query}'))`;
+  }
 
-  if (groupTypes !== GroupType.Any) {
+  if (groupTypes !== GroupType.any) {
     const filterGroups = [];
 
     // tslint:disable-next-line:no-bitwise
-    if (GroupType.Unified === (groupTypes & GroupType.Unified)) {
+    if (GroupType.unified === (groupTypes & GroupType.unified)) {
       filterGroups.push("groupTypes/any(c:c+eq+'Unified')");
     }
 
     // tslint:disable-next-line:no-bitwise
-    if (GroupType.Security === (groupTypes & GroupType.Security)) {
+    if (GroupType.security === (groupTypes & GroupType.security)) {
       filterGroups.push('(mailEnabled eq false and securityEnabled eq true)');
     }
 
     // tslint:disable-next-line:no-bitwise
-    if (GroupType.MailEnabledSecurity === (groupTypes & GroupType.MailEnabledSecurity)) {
+    if (GroupType.mailenabledsecurity === (groupTypes & GroupType.mailenabledsecurity)) {
       filterGroups.push('(mailEnabled eq true and securityEnabled eq true)');
     }
 
     // tslint:disable-next-line:no-bitwise
-    if (GroupType.Distribution === (groupTypes & GroupType.Distribution)) {
+    if (GroupType.distribution === (groupTypes & GroupType.distribution)) {
       filterGroups.push('(mailEnabled eq true and securityEnabled eq false)');
     }
 
-    filterQuery += ' and ' + filterGroups.join(' or ');
+    filterQuery += (query !== '' ? ' and ' : '') + filterGroups.join(' or ');
   }
 
   const result = await graph

src/graph/graph.people.ts

@@ -20,39 +20,45 @@ export enum PersonType {
   /**
    * Any type
    */
-  Any = 0,
+  any = 0,
 
   /**
    * A Person such as User or Contact
    */
-  Person = 'Person',
+  person = 'person',
 
   /**
    * A group
    */
-  Group = 'Group'
+  group = 'group'
 }
 
 /**
  * async promise, returns all Graph people who are most relevant contacts to the signed in user.
  *
  * @param {string} query
  * @param {number} [top=10] - number of people to return
- * @param {PersonType} [personType=PersonType.Person] - the type of person to search for
+ * @param {PersonType} [personType=PersonType.person] - the type of person to search for
  * @returns {(Promise<Person[]>)}
  */
 export async function findPeople(
   graph: IGraph,
   query: string,
   top: number = 10,
-  personType: PersonType = PersonType.Person
+  personType: PersonType = PersonType.person
 ): Promise<Person[]> {
   const scopes = 'people.read';
 
   let filterQuery = '';
 
-  if (personType !== PersonType.Any) {
-    filterQuery = `personType/class eq '${personType}'`;
+  if (personType !== PersonType.any) {
+    // converts personType to capitalized case
+    const personTypeString =
+      personType
+        .toString()
+        .charAt(0)
+        .toUpperCase() + personType.toString().slice(1);
+    filterQuery = `personType/class eq '${personTypeString}'`;
   }
 
   const result = await graph

stories/components/peoplePicker.stories.js

@@ -50,16 +50,16 @@ export const DarkMode = () => html`
 `;
 
 export const pickPeopleAndGroups = () => html`
-  <mgt-people-picker type="Any"></mgt-people-picker>
-  <!-- type can be "Any", "Person", "Group" -->
+  <mgt-people-picker type="any"></mgt-people-picker>
+  <!-- type can be "any", "person", "group" -->
 `;
 
 export const pickGroups = () => html`
-  <mgt-people-picker type="Group"></mgt-people-picker>
-  <!-- type can be "Any", "Person", "Group" -->
+  <mgt-people-picker type="group"></mgt-people-picker>
+  <!-- type can be "any", "person", "group" -->
 `;
 
 export const pickDistributionGroups = () => html`
-  <mgt-people-picker type="Group" group-type="Distribution"></mgt-people-picker>
-  <!-- group-type can be "Any", "Unified", "Security", "MailEnabledSecurity", "Distribution" -->
+  <mgt-people-picker type="group" group-type="distribution"></mgt-people-picker>
+  <!-- group-type can be "any", "unified", "security", "mailenabledsecurity", "distribution" -->
 `;