Merge pull request #1164 from SherpasGroup/people-picker-multiple-group-ids

Enable multiple groupId's

Author: AJIXuMuK

docs/documentation/docs/controls/PeoplePicker.md

@@ -61,7 +61,7 @@ The People picker control can be configured with the following properties:
 | context | BaseComponentContext | yes | Context of the current web part. | |
 | titleText | string | no | Text to be displayed on the control | |
 | groupName | string | no | Group from which users are fetched. Leave it blank if need to filter all users. When both groupName and groupId specified groupName takes precedence. | _none_ |
-| groupId | number \| string | no | Group from which users are fetched. Leave it blank if need to filter all users. When both groupId and groupName specified groupName takes precedence. If string is specified, Microsoft 365 Group is used | _none_ |
+| groupId | number \| string \| (string\|number)[] | no | Group from which users are fetched. Leave it blank if need to filter all users. When both groupId and groupName specified groupName takes precedence. If string is specified, Microsoft 365 Group is used. If array is used, fetch results from multiple groups | _none_ |
 | personSelectionLimit | number | no | Defines the limit of people that can be selected in the control | 1 |
 | required | boolean | no | Set if the control is required or not | false |
 | disabled | boolean | no | Set if the control is disabled or not | false |

src/controls/peoplepicker/IPeoplePicker.ts

@@ -32,7 +32,7 @@ export interface IPeoplePickerProps {
   /**
    * Id of SharePoint Group (Number) or Office365 Group (String)
    */
-  groupId?: number | string;
+  groupId?: number | string | (string|number)[];
   /**
    * Maximum number of suggestions to show in the full suggestion list. (default: 5)
    */

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -19,7 +19,7 @@ import uniqBy from 'lodash/uniqBy';
 export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePickerState> {
   private peopleSearchService: SPPeopleSearchService;
   private suggestionsLimit: number;
-  private groupId: number | string;
+  private groupId: number | string | (string | number)[];
 
   constructor(props: IPeoplePickerProps) {
     super(props);

src/services/PeopleSearchService.ts

@@ -69,26 +69,54 @@ export default class SPPeopleSearchService {
   /**
    * Search person by its email or login name
    */
-  public async searchPersonByEmailOrLogin(email: string, principalTypes: PrincipalType[], siteUrl: string = null, groupId: number | string = null, ensureUser: boolean = false): Promise<IPeoplePickerUserItem> {
+  public async searchPersonByEmailOrLogin(email: string, principalTypes: PrincipalType[], siteUrl: string = null, groupId: number | string | (string|number)[] = null, ensureUser: boolean = false): Promise<IPeoplePickerUserItem> {
     if (Environment.type === EnvironmentType.Local) {
       // If the running environment is local, load the data from the mock
       const mockUsers = await this.searchPeopleFromMock(email);
       return (mockUsers && mockUsers.length > 0) ? mockUsers[0] : null;
     } else {
-      const userResults = await this.searchTenant(siteUrl, email, 1, principalTypes, ensureUser, groupId);
-      return (userResults && userResults.length > 0) ? userResults[0] : null;
+      // If groupId is array, load data from all groups
+      if (Array.isArray(groupId)) {
+        let userResults: IPeoplePickerUserItem[] = [];
+        for (const id of groupId) {
+          let tmpResults = await this.searchTenant(siteUrl, email, 1, principalTypes, ensureUser, id);
+          userResults = userResults.concat(tmpResults);
+        }
+
+        // Remove duplicate results in case user is present in multiple groups
+        let logins = userResults.map(u => u.loginName);
+        let filteredUserResults = userResults.filter(({loginName}, index) => !logins.includes(loginName, index + 1));
+        return (filteredUserResults && filteredUserResults.length > 0) ? filteredUserResults[0] : null;
+      } else {
+        const userResults = await this.searchTenant(siteUrl, email, 1, principalTypes, ensureUser, groupId);
+        return (userResults && userResults.length > 0) ? userResults[0] : null;
+      }
     }
   }
 
   /**
    * Search All Users from the SharePoint People database
    */
-  public async searchPeople(query: string, maximumSuggestions: number, principalTypes: PrincipalType[], siteUrl: string = null, groupId: number | string = null, ensureUser: boolean = false): Promise<IPeoplePickerUserItem[]> {
+  public async searchPeople(query: string, maximumSuggestions: number, principalTypes: PrincipalType[], siteUrl: string = null, groupId: number | string | (string|number)[] = null, ensureUser: boolean = false): Promise<IPeoplePickerUserItem[]> {
     if (Environment.type === EnvironmentType.Local) {
       // If the running environment is local, load the data from the mock
       return this.searchPeopleFromMock(query);
     } else {
-      return await this.searchTenant(siteUrl, query, maximumSuggestions, principalTypes, ensureUser, groupId);
+      // If groupId is array, load data from all groups
+      if (Array.isArray(groupId)) {
+        let userResults: IPeoplePickerUserItem[] = [];
+        for (const id of groupId) {
+          let tmpResults = await this.searchTenant(siteUrl, query, maximumSuggestions, principalTypes, ensureUser, id);
+          userResults = userResults.concat(tmpResults);
+        }
+
+        // Remove duplicate results in case user is present in multiple groups
+        let logins = userResults.map(u => u.loginName);
+        let filteredUserResults = userResults.filter(({loginName}, index) => !logins.includes(loginName, index + 1));
+        return filteredUserResults;
+      } else {
+        return await this.searchTenant(siteUrl, query, maximumSuggestions, principalTypes, ensureUser, groupId);
+      }
     }
   }